/* zulal-alrfd.com — «زعفران» showcase. Fonts are self-hosted: the site CSP allows nothing third-party. */
@font-face{font-family:'Alexandria';src:url('fonts/Alexandria-700.woff2?v=1') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Alexandria';src:url('fonts/Alexandria-800.woff2?v=1') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Alexandria';src:url('fonts/Alexandria-900.woff2?v=1') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Regular.woff2?v=1') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Medium.woff2?v=1') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-SemiBold.woff2?v=1') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Bold.woff2?v=1') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* «زعفران» for the web — shared tokens + pieces used by the three website directions.
   Layout: RTL, logical properties, one 1180px column with a 20px gutter. */
:root{
  --sa:#FFC21A; --sa2:#FFD45C; --ink:#1A1714; --mu:#6A645B; --ln:#EEEAE2;
  --bg:#FFFFFF; --bg2:#FAF8F3; --sf:#FFFFFF; --tile:#F4F1EA;
  --deal:#D42F23; --ok:#1E7B3C; --blue:#1E88E5;
  --g:#E3F2DC; --gk:#1E6B34; --w:#DDEEFB; --wk:#155A9C; --s:#FFE6D2; --sk:#A3470C; --dy:#FFF4D1; --dr:#E6EBFA; --pk:#FBE3EA;
  --dark:#1A1714; --onsa:#1A1714; --bi:#1A1714; --bik:#FFC21A; --hd:#FFC21A; --hdk:#1A1714;
  --sh:0 18px 40px -18px rgba(26,23,20,.28);
  --f:'IBM Plex Sans Arabic',system-ui,'Segoe UI',Tahoma,sans-serif;
  --fd:'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#F1EFEA; --mu:#ABA69D; --ln:#2C2A26; --bg:#0F0F0E; --bg2:#141412; --sf:#1A1917; --tile:#1F1E1B;
  --deal:#E0463B; --ok:#7BD389;
  --g:#1C1B19; --gk:#8FD49B; --w:#1C1B19; --wk:#8CC4F2; --s:#1C1B19; --sk:#FFB37A; --dy:#1C1B19; --dr:#1C1B19; --pk:#1C1B19;
  --dark:#1A1917; --bi:#FFC21A; --bik:#1A1714; --hd:#1A1917; --hdk:#F1EFEA; --sh:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#F1EFEA; --mu:#ABA69D; --ln:#2C2A26; --bg:#0F0F0E; --bg2:#141412; --sf:#1A1917; --tile:#1F1E1B;
  --deal:#E0463B; --ok:#7BD389;
  --g:#1C1B19; --gk:#8FD49B; --w:#1C1B19; --wk:#8CC4F2; --s:#1C1B19; --sk:#FFB37A; --dy:#1C1B19; --dr:#1C1B19; --pk:#1C1B19;
  --dark:#1A1917; --bi:#FFC21A; --bik:#1A1714; --hd:#1A1917; --hdk:#F1EFEA; --sh:none; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--fd);line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}


/* buttons + store badges */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:14px;padding:13px 22px;font-size:16px;border:0;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.6,1),box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--bi);color:var(--bik)}
.btn-sa{background:var(--sa);color:#1A1714}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.stores{display:flex;gap:10px;flex-wrap:wrap}
.store{display:flex;align-items:center;gap:10px;background:#1A1714;color:#fff;box-shadow:inset 0 0 0 1px #3A3631;border-radius:14px;padding:9px 16px 9px 18px;line-height:1.15;transition:transform .2s cubic-bezier(.3,1.6,.6,1)}
.store:hover{transform:translateY(-3px) rotate(-1deg)}
.store svg{width:24px;height:24px;flex:none}
.store span{display:block;font-size:11px;opacity:.75}
.store b{font-family:var(--fd);font-size:16px;font-weight:700;direction:ltr;display:block}

/* price — amount and «د.ع» never split */
.pr{font-family:var(--fd);font-weight:800;white-space:nowrap}
.pr small{font-size:.62em;font-weight:700;margin-inline-start:3px}
.pr s{font-family:var(--f);font-weight:500;color:var(--mu);font-size:.6em;margin-inline-start:6px}

/* product card (web size of the app card) */
.pc{display:flex;flex-direction:column;gap:6px;width:160px;flex:none}
.pc .pi{position:relative;aspect-ratio:1;border-radius:22px;background:var(--tile);display:grid;place-items:center;transition:transform .3s cubic-bezier(.3,1.5,.6,1)}
.pc .pi img{max-width:72%;max-height:74%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.14));transition:transform .35s cubic-bezier(.3,1.6,.6,1)}
.pc:hover .pi img{transform:translateY(-8px) rotate(-4deg) scale(1.06)}
.pc .badge{position:absolute;top:10px;inset-inline-start:10px;background:var(--sa);color:#1A1714;font-family:var(--fd);font-weight:900;font-size:12px;border-radius:8px;padding:1px 7px}
.pc .badge bdi{direction:ltr;unicode-bidi:isolate}
.pc .add{position:absolute;bottom:-12px;inset-inline-start:12px;width:38px;height:38px;border-radius:12px;background:#1A1714;color:#FFC21A;display:grid;place-items:center;border:0;cursor:pointer;font-size:22px;font-weight:700;line-height:1;transition:transform .2s cubic-bezier(.3,1.8,.6,1)}
.pc .add:hover{transform:scale(1.12) rotate(90deg)}
.pc h4{margin:14px 0 0;font-size:14.5px;font-weight:600;line-height:1.35}
.pc .u{font-size:12.5px;color:var(--mu)}

/* the logo mark */
.mark{display:block}
.mark .drop{transform-box:fill-box;transform-origin:50% 100%}
.mark .leaf{transform-box:fill-box;transform-origin:0% 100%}

/* footer (shared shape; each direction tints it) */
.foot{background:#141210;color:#BDB6A9;padding-block:56px 30px;font-size:14.5px}
.foot .g{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:28px}
.foot h5,.foot .fh{color:#fff;font-size:14px;margin:0 0 10px;font-family:var(--fd);line-height:1.4}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a:hover{color:#FFC21A}
.foot .lg{border-top:1px solid #2C2925;margin-top:36px;padding-top:18px;font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.foot .g{grid-template-columns:1fr 1fr}}

/* scroll reveal: CSS scroll-driven, no JS — where unsupported the content simply sits still */
@supports (animation-timeline:view()){
  .rv{animation:rvIn linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@keyframes rvIn{from{transform:translateY(34px) scale(.98);opacity:.25}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{animation:none!important}
}

/* page */
/* Showcase site: one fixed WebGL stage behind the page; each chapter (hero, water, sections, Iraq, app) brings its own 3D object
   up from below and sends it away above. Text sits at the RTL start side, the 3D object on the other side. */
@property --gc{syntax:'<color>';inherits:true;initial-value:#FFC21A}
:root{--gc:#FFC21A;--ga:.55;--glass:rgba(255,255,255,.72);--glassb:rgba(26,23,20,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ga:.22;--glass:rgba(20,19,17,.72);--glassb:rgba(255,255,255,.08)}}
:root[data-theme="dark"]{--ga:.22;--glass:rgba(20,19,17,.72);--glassb:rgba(255,255,255,.08)}
html,body{direction:rtl}
body{background:var(--bg2)}
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;transition:--gc 1.2s ease;background:
  radial-gradient(60vmax 60vmax at 28% 52%,color-mix(in srgb,var(--gc) calc(var(--ga)*100%),transparent) 0,transparent 62%),
  radial-gradient(40vmax 40vmax at 90% 0%,color-mix(in srgb,var(--gc) calc(var(--ga)*45%),transparent) 0,transparent 70%)}
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;display:block}
main,.top,.rib,footer{position:relative;z-index:2}


.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--glassb)}
.top .in{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:900;font-size:25px}
.brand svg{height:38px;width:auto}
.top nav{display:flex;gap:24px;font-weight:600;font-size:15px;margin-inline-start:auto}
.top nav a{opacity:.7;transition:opacity .2s}
.top nav a:hover,.top nav a.on{opacity:1}
.top nav a.on{box-shadow:0 2px 0 #FFC21A}
@media (max-width:860px){.top nav{display:none}.top .btn{margin-inline-start:auto}}

/* chapters */
.ch{position:relative}
.ch .stick{position:sticky;top:70px;height:calc(100vh - 70px);display:flex;align-items:center}
.panel{width:min(560px,100%);margin-inline-start:max(20px,6vw)}
.eyb{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.2px;background:var(--glass);border:1px solid var(--glassb);border-radius:999px;padding:5px 14px 5px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.eyb i{width:8px;height:8px;border-radius:50%;background:var(--gc)}
.panel h1{font-size:clamp(44px,5.4vw,84px);font-weight:900;letter-spacing:-1.5px;margin-top:18px;line-height:1.04}
.panel h1 .hl{display:inline;background:linear-gradient(transparent 58%,#FFC21A 58% 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.06em}
:root[data-theme="dark"] .panel h1 .hl{color:#FFC21A;background:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .panel h1 .hl{color:#FFC21A;background:none}}
.panel h2{font-size:clamp(36px,5vw,68px);font-weight:900;letter-spacing:-1px;margin-top:16px}
.panel .sub{font-size:19px;color:var(--mu);margin-top:18px;max-width:46ch}
.panel .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.cue{position:absolute;bottom:26px;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--mu)}
.cue span{width:26px;height:40px;border-radius:14px;border:2px solid currentColor;position:relative}
.cue span::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:currentColor;translate:-50% 0;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{60%{transform:translateY(12px);opacity:0}}
.fb{position:absolute;inset-inline-end:7vw;top:50%;translate:0 -50%;width:min(36vw,440px);aspect-ratio:1;pointer-events:none;transition:opacity .6s}
.fb img{position:absolute;width:auto;filter:drop-shadow(0 24px 30px rgba(60,40,0,.28))}
.fb img:nth-child(1){height:62%;left:50%;translate:-50% 0;top:8%}
.fb img:nth-child(2){height:44%;left:6%;top:34%;rotate:-8deg}
.fb img:nth-child(3){height:52%;right:8%;top:30%;rotate:7deg}
.has3d .fb{opacity:0;transition-duration:.25s}
@media (max-width:860px){.fb{inset-inline-end:auto;left:50%;top:6%;translate:-50% 0;width:min(78vw,360px)}}

.facts{display:grid;gap:12px;margin-top:28px}
.fact{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:20px;background:var(--glass);border:1px solid var(--glassb);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .45s,transform .45s cubic-bezier(.3,1.4,.6,1)}
.fact:not(.on){opacity:.72;transform:translateX(-10px) scale(.98)}
.fact .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;font-family:var(--fd);font-weight:900;font-size:17px;background:var(--gc);color:#1A1714}
.fact b{font-family:var(--fd);font-size:18px;display:block}
.fact span{color:var(--mu);font-size:15px}

.catlist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:4px}
.catlist li{display:flex;align-items:baseline;gap:12px;font-family:var(--fd);font-weight:800;font-size:clamp(20px,2.4vw,28px);color:var(--mu);transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.6,1);cursor:pointer}
.catlist li small{font-family:var(--f);font-size:13.5px;font-weight:600;color:var(--mu)}
.catlist li.on{color:var(--ink);transform:translateX(-14px)}
.catlist button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:12px;border-radius:8px}
.catlist button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.catlist li.on::before{content:"";width:18px;height:4px;border-radius:2px;background:var(--ink);align-self:center}

.steps4{display:grid;gap:10px;margin-top:26px}
.steps4 div{padding:14px 18px;border-radius:18px;border:1px solid var(--glassb);background:var(--glass);transition:all .4s}
.steps4 div:not(.on){opacity:.7}
.steps4 div.on{background:#1A1714;color:#FFC21A;border-color:#1A1714}
:root[data-theme="dark"] .steps4 div.on{background:#FFC21A;color:#1A1714}
.steps4 b{font-family:var(--fd);font-size:18px}
.steps4 span{display:block;font-size:14.5px;opacity:.8}

@media (max-width:860px){
  .ch .stick{align-items:flex-end;padding-bottom:22px}
  .panel{margin-inline:16px;padding:20px;border-radius:26px;background:var(--glass);border:1px solid var(--glassb);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  #hero .panel{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
  .panel h1{font-size:44px}.panel .sub{font-size:16px}
  .facts,.steps4{margin-top:14px}.fact{padding:10px 12px}.fact .ic{width:36px;height:36px}
  .catlist{grid-template-columns:1fr 1fr;margin-top:14px}.catlist li{font-size:18px}.catlist li small{display:none}.catlist li.on{transform:none}
  .cue{display:none}
}

/* gallery */
.solid{background:var(--bg);position:relative;z-index:2}
.gal{padding-block:100px 80px}
.gal .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.gal h2{font-size:clamp(36px,5vw,64px);font-weight:900;letter-spacing:-1px}
.gal .hd p{color:var(--mu);font-size:17px;margin-top:8px;max-width:52ch}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 30px}
.chips button{font:inherit;font-weight:700;font-size:14.5px;border:1.5px solid var(--ln);background:var(--sf);color:var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer;transition:all .25s}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips button small{opacity:.6;margin-inline-start:4px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;perspective:1400px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;border:0;padding:0;background:var(--sf);color:inherit;font:inherit;text-align:start;border-radius:26px;overflow:hidden;cursor:pointer;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .3s;box-shadow:0 1px 0 var(--ln),0 0 0 1px var(--ln);animation:cardIn .6s cubic-bezier(.3,1.3,.6,1) both;animation-delay:calc(var(--i)*40ms)}
@keyframes cardIn{from{transform:translateY(30px) scale(.96);opacity:0}}
.card:hover{box-shadow:0 30px 50px -24px rgba(26,23,20,.45),0 0 0 1px var(--ln)}
.card .ph{aspect-ratio:1;overflow:hidden;position:relative}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.9,.3,1)}
.card:hover .ph img{transform:scale(1.07)}
.card .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}
.card:hover .ph::after{opacity:1}
.card .tx{padding:14px 16px 16px}
.card .tx b{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.card .tx span{font-size:13px;color:var(--mu)}
.card .tg{position:absolute;top:12px;inset-inline-start:12px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:8px;font-size:11.5px;font-weight:700;padding:2px 8px;z-index:2}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .35s}
.lb.open{opacity:1;pointer-events:auto}
.lb .box{width:min(980px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;perspective:1200px}
.lb .stage3{position:relative;transform-style:preserve-3d}
.lb .c3{border-radius:30px;overflow:hidden;transform:rotateY(var(--ly,0deg)) rotateX(var(--lx,0deg));transition:transform .15s ease-out;box-shadow:0 50px 80px -40px rgba(0,0,0,.55);-webkit-box-reflect:below 14px linear-gradient(transparent 70%,rgba(255,255,255,.18));cursor:grab;touch-action:none}
.lb .c3 img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.lb.open .c3{animation:lbIn .7s cubic-bezier(.2,1.2,.4,1)}
@keyframes lbIn{from{transform:rotateY(-70deg) scale(.8);opacity:0}}
.lb h3{font-size:clamp(28px,3.4vw,42px);font-weight:900}
.lb .meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0}
.lb .meta div{border-radius:16px;background:var(--sf);border:1px solid var(--ln);padding:12px 14px}
.lb .meta span{font-size:12.5px;color:var(--mu);display:block}
.lb .meta b{font-family:var(--fd);font-size:17px}
.lb .cat{display:inline-block;font-size:13px;font-weight:700;background:#FFC21A;color:#1A1714;border-radius:8px;padding:2px 10px}
.lb .note{font-size:14px;color:var(--mu);margin-bottom:14px}
.lb .x,.lb .nv{position:absolute;border:0;background:var(--sf);color:var(--ink);width:48px;height:48px;border-radius:50%;font-size:22px;cursor:pointer;box-shadow:0 0 0 1px var(--ln)}
.lb .x{top:20px;inset-inline-end:20px}
.lb .nv.p{inset-inline-start:20px;top:50%}.lb .nv.n{inset-inline-end:20px;top:50%}
@media (max-width:760px){.lb .box{grid-template-columns:1fr;gap:16px}.lb .c3{-webkit-box-reflect:none}.lb .nv{top:auto;bottom:20px}.lb .meta{margin:12px 0}}

/* download banner */
.dl{position:relative;z-index:2;background:var(--bg);padding-bottom:90px}
.dlb{border-radius:44px;background:#FFC21A;color:#1A1714;padding:64px 56px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:center;overflow:hidden;position:relative}
.dlb h2{font-size:clamp(34px,4.6vw,60px);font-weight:900;letter-spacing:-1px}
.dlb p{font-size:18px;margin:14px 0 28px}
.dlb .shots{position:relative;height:380px;perspective:1000px}
.dlb .shots img{position:absolute;width:200px;border-radius:28px;border:7px solid #1A1714;box-shadow:0 40px 60px -26px rgba(26,23,20,.6);top:0;transition:transform .7s cubic-bezier(.3,1.3,.6,1)}
.dlb .shots img:nth-child(1){inset-inline-start:2%;transform:rotateY(18deg) rotateZ(-6deg) translateY(40px)}
.dlb .shots img:nth-child(2){inset-inline-start:30%;z-index:2;transform:translateZ(60px)}
.dlb .shots img:nth-child(3){inset-inline-start:58%;transform:rotateY(-18deg) rotateZ(6deg) translateY(40px)}
.dlb:hover .shots img:nth-child(1){transform:rotateY(8deg) rotateZ(-3deg) translateY(10px) translateX(-20px)}
.dlb:hover .shots img:nth-child(3){transform:rotateY(-8deg) rotateZ(3deg) translateY(10px) translateX(20px)}
@media (max-width:860px){.dlb{grid-template-columns:1fr;padding:36px 22px;border-radius:30px}.dlb .shots{height:300px}.dlb .shots img{width:150px}}
.foot{position:relative;z-index:2}

/* download: QR for computer visitors (phones get the store buttons) */
.qrb{display:flex;align-items:center;gap:14px;margin-top:22px;background:#fff;color:#1A1714;border-radius:18px;padding:12px 16px 12px 12px;width:max-content;max-width:100%}
.qrb svg{width:96px;height:96px;flex:none;display:block}
.qrb b{font-family:var(--fd);font-size:16px;display:block}
.qrb span{font-size:13.5px;opacity:.75}
@media (hover:none),(max-width:860px){.qrb{display:none}}
.lock{overflow:hidden}
.lb[hidden]{display:none}

/* WhatsApp: a floating button (bottom, inline-end) and an inline link */
.waf{position:fixed;z-index:60;bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-end:18px;display:flex;align-items:center;gap:0;height:56px;padding:0 14px;border-radius:28px;background:#1DA851;color:#fff;box-shadow:0 12px 26px -10px rgba(0,0,0,.45);transition:gap .3s,padding .3s,transform .25s cubic-bezier(.3,1.6,.6,1)}
.waf svg{width:28px;height:28px;flex:none}
.waf span{max-width:0;overflow:hidden;white-space:nowrap;font-weight:700;font-size:15px;transition:max-width .35s}
.waf:hover,.waf:focus-visible{gap:8px;padding:0 18px 0 16px;transform:translateY(-2px)}
.waf:hover span,.waf:focus-visible span{max-width:160px}
.lock .waf{display:none}
.wal{font-weight:700;border-bottom:2px solid currentColor;white-space:nowrap}