/* ═══════════ smart menu · landing ═══════════ */
.landing{--canvas:#FAF9F7;--glow:#FF7A2F;background:var(--canvas)}
.landing main{padding:0}
.landing .wrap{max-width:1200px}
.ic{flex:none;display:inline-block;vertical-align:middle}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:var(--accent);margin-bottom:12px}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
.sec{padding:clamp(72px,10vw,128px) 0}
.sec-head{max-width:720px;margin-bottom:clamp(36px,5vw,56px)}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head.center .eyebrow::before{display:none}
.sec-h{font-family:var(--fs);font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.25;margin:0 0 14px}
.sec-p{font-size:1.12rem;color:var(--ink-2);margin:0}
.btn.lg{min-height:56px;padding:15px 28px;font-size:1.06rem;border-radius:14px}
.landing .btn.ghost{background:var(--surface)}
.btn.ghost-dark{background:transparent;color:#fff;border:1px solid #444955}
.btn.ghost-dark:hover{background:#ffffff14}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--canvas) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;min-height:72px}
.nav .logo img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:4px;margin-inline-start:auto}
.nav-links a{padding:8px 13px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:500}
.nav-links a:hover{background:var(--sunk);color:var(--ink)}
.nav-acts{display:flex;align-items:center;gap:8px}
.nav-login{color:var(--ink);text-decoration:none;font-weight:600;padding:8px 12px}
@media (max-width:860px){.nav-links{display:none}.nav-acts{margin-inline-start:auto}}

/* ── hero ── */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(56px,8vw,104px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-h{font-family:var(--fs);font-size:clamp(2.9rem,6.4vw,5.4rem);line-height:1.2;margin:0 0 22px}
.hero-h .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero-h .line>span{display:block}
.hero-h .accent{color:var(--accent)}
.hero-p{font-size:clamp(1.08rem,1.5vw,1.22rem);color:var(--ink-2);max-width:42ch;line-height:1.9;margin-bottom:30px}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--ink-2);font-size:.95rem}
.ticks li{display:inline-flex;align-items:center;gap:6px}
.ticks .ic{color:var(--ok)}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-p{margin-inline:auto}.hero-acts,.ticks{justify-content:center}}

/* stage: dark panel with an orange glow, a phone and the cashier card */
.stage{position:relative;background:#121419;border-radius:32px;min-height:640px;padding:36px 0;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.stage-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 50% 38%,color-mix(in srgb,var(--glow) 42%,transparent),transparent 70%),radial-gradient(40% 40% at 85% 95%,color-mix(in srgb,var(--glow) 18%,transparent),transparent 70%)}
.iphone{position:relative;width:268px;aspect-ratio:9/19.3;border-radius:46px;background:#0B0C0F;padding:10px;box-shadow:0 0 0 2px #2B2F38,0 30px 80px -20px #000a,inset 0 0 0 1px #3a3f4a}
.iphone .island{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:20px;background:#000;z-index:3}
.lock{position:relative;height:100%;border-radius:37px;overflow:hidden;color:#fff;text-align:center;padding:62px 12px 16px;
  background:radial-gradient(120% 70% at 50% 0%,#4A2A1C 0%,#1B1A1F 55%,#101116 100%)}
.lock-date{font-size:.82rem;opacity:.85}
.lock-time{font-family:var(--fd);font-size:4.4rem;font-weight:500;line-height:1.05}
.notif{position:relative;z-index:2;margin-top:36px;display:flex;gap:10px;align-items:center;text-align:start;padding:11px 12px;border-radius:18px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12)}
.notif-ic img{width:34px;height:34px;border-radius:9px;display:block}
.notif-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.notif-tx b{font-size:.86rem}
.notif-tx small{font-size:.74rem;opacity:.85}
.notif-t{font-size:.66rem;opacity:.7;align-self:flex-start}
.lock-arcs{position:absolute;left:50%;top:51%;width:240px;height:240px;transform:translate(-50%,-50%);pointer-events:none;color:var(--glow)}
.lock-arcs i,.arcs i{position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:0}
.float{position:absolute;background:#fff;color:var(--ink);border-radius:18px;box-shadow:0 24px 60px -18px #0008}
.cashier-card{inset-inline-start:22px;bottom:34px;width:250px;padding:12px}
.cc-h{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;font-weight:700;color:var(--muted);margin-bottom:8px}
.dot-live{display:inline-flex;align-items:center;gap:5px;color:var(--ok)}
.dot-live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cc-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:#fff}
.cc-row+.cc-row{margin-top:6px}
.cc-row b{font-family:var(--fd);font-size:1.3rem;min-width:34px;text-align:center}
.cc-st{flex:1;position:relative;height:1.4em;font-size:.78rem;color:var(--muted)}
.cc-st em{font-style:normal;position:absolute;inset:0;white-space:nowrap}
.cc-st .s2,.cc-st .s3{opacity:0}
.cc-st .s3{color:var(--ok-2);font-weight:700}
.cc-btn{font-style:normal;font-weight:700;font-size:.76rem;background:var(--ok);color:#fff;border-radius:9px;padding:6px 12px}
.cc-btn.ghost{background:var(--sunk);color:var(--muted)}
.cc-row.dim{opacity:.6}
.cursor{position:absolute;width:22px;height:22px;inset-inline-start:30px;bottom:44px;border-radius:50%;background:rgba(18,20,25,.25);border:2px solid #fff;box-shadow:0 2px 8px #0004;opacity:0;pointer-events:none}
@media (max-width:520px){.stage{min-height:560px;border-radius:24px}.iphone{width:236px}.cashier-card{width:214px;inset-inline-start:12px;bottom:16px}.lock-time{font-size:3.7rem}}

/* hero loop (7s): press «جاهز» → notification drops in → arcs → customer answers «جاي» */
html.motion .notif{animation:notif 7s var(--ease) infinite}
html.motion .lock-arcs i{animation:arc 7s var(--ease) infinite}
html.motion .lock-arcs i:nth-child(2){animation-delay:.35s}
html.motion .lock-arcs i:nth-child(3){animation-delay:.7s}
html.motion .stage .iphone{animation:buzz 7s linear infinite}
html.motion .cursor{animation:cursor 7s var(--ease) infinite}
html.motion .cc-row:first-child .cc-btn{animation:press 7s var(--ease) infinite}
html.motion .cc-st .s1{animation:st1 7s steps(1) infinite}
html.motion .cc-st .s2{animation:st2 7s steps(1) infinite}
html.motion .cc-st .s3{animation:st3 7s steps(1) infinite}
html.motion .cc-row:first-child{animation:rowok 7s steps(1) infinite}
@keyframes cursor{0%,8%{opacity:0;transform:translate(-40px,30px)}16%{opacity:1;transform:translate(0,0)}22%{transform:scale(.8)}26%{transform:scale(1)}36%{opacity:1}42%,100%{opacity:0}}
@keyframes press{0%,20%{transform:scale(1)}22%{transform:scale(.88);background:var(--ok-2)}28%,100%{transform:scale(1)}}
@keyframes notif{0%,24%{opacity:0;transform:translateY(-26px) scale(.96)}30%{opacity:1;transform:none}92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes arc{0%,26%{opacity:0;transform:scale(.4)}30%{opacity:.8}52%{opacity:0;transform:scale(1.15)}100%{opacity:0}}
@keyframes buzz{0%,28%,40%,100%{transform:none}29%{transform:translateX(-3px) rotate(-1deg)}30%{transform:translateX(3px) rotate(1deg)}31%{transform:translateX(-3px) rotate(-1deg)}32%{transform:translateX(3px) rotate(1deg)}33%{transform:none}}
@keyframes st1{0%{opacity:1}36%,100%{opacity:0}}
@keyframes st2{0%{opacity:0}36%{opacity:1}62%,100%{opacity:0}}
@keyframes st3{0%,61%{opacity:0}62%,96%{opacity:1}97%,100%{opacity:0}}
@keyframes rowok{0%{background:#fff;border-color:var(--line)}62%{background:var(--ok-soft);border-color:var(--ok)}97%{background:#fff;border-color:var(--line)}}
@keyframes ping{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.15);opacity:0}}
@keyframes pop{from{transform:scale(1.3)}to{transform:scale(1)}}
/* no motion: show the finished moment */
html:not(.motion) .cc-st .s1{opacity:0}
html:not(.motion) .cc-st .s3{opacity:1}
html:not(.motion) .cc-row:first-child{background:var(--ok-soft);border-color:var(--ok)}

/* ── who ── */
.who{border-block:1px solid var(--line);background:var(--surface)}
.who-in{display:flex;align-items:center;gap:28px;padding-block:22px;flex-wrap:wrap}
.who-l{font-weight:700;color:var(--muted);font-size:.95rem}
.who ul{list-style:none;margin:0;padding:0;display:flex;gap:10px 28px;flex-wrap:wrap}
.who li{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.who .ic{color:var(--accent)}
@media (max-width:700px){.who-in{justify-content:center;text-align:center}.who ul{justify-content:center}}

/* ── how (scrollytelling) ── */
.how-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px)}
.how-phone{position:sticky;top:110px;align-self:start;display:grid;place-items:center;padding:40px 0;border-radius:32px;
  background:radial-gradient(70% 60% at 50% 40%,color-mix(in srgb,var(--glow) 16%,transparent),transparent 75%),var(--sunk)}
.iphone.sm{width:260px}
.scr-stack{position:relative;height:100%;border-radius:37px;overflow:hidden;background:var(--canvas)}
.scr-stack .scr{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease);transform:scale(.98)}
.scr-stack[data-show="join"] [data-s="join"],.scr-stack[data-show="wait"] [data-s="wait"],
.scr-stack[data-show="ready"] [data-s="ready"],.scr-stack[data-show="coming"] [data-s="coming"]{opacity:1;transform:none}
.steps{list-style:none;margin:0;padding:0}
.step{display:flex;gap:20px;padding:clamp(32px,9vh,88px) 0;border-bottom:1px solid var(--line);opacity:.38;transition:opacity .4s var(--ease)}
.step:first-child{padding-top:12px}.step:last-child{border-bottom:0;padding-bottom:12px}
.step.on{opacity:1}
.step-n{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:1.1rem;background:var(--sunk);color:var(--ink);transition:background-color .3s,color .3s}
.step.on .step-n{background:var(--accent);color:#fff}
.step h3{font-family:var(--fs);font-size:clamp(1.45rem,2.4vw,1.9rem);margin:4px 0 8px}
.step p{color:var(--ink-2);font-size:1.06rem;margin:0;max-width:44ch}
.step-mini{display:none}
@media (max-width:920px){
  .how-grid{grid-template-columns:1fr}.how-phone{display:none}
  .step{opacity:1;padding:28px 0}.step .step-n{background:var(--accent);color:#fff}
  .step-mini{display:block;width:220px;height:340px;margin-top:20px;border-radius:30px;overflow:hidden;border:8px solid #0B0C0F;position:relative;background:var(--canvas)}
  .step-mini .scr{position:absolute;inset:0}
}

/* phone screens (shared by the sticky phone and the mobile previews) */
.scr{display:flex;flex-direction:column;background:var(--canvas);color:var(--ink)}
.scr-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px 10px;font-size:.72rem;font-weight:700}
.scr-shop{font-family:var(--fd);font-size:.74rem;opacity:0}
.scr-dots{display:flex;gap:3px}.scr-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.scr-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 18px 30px;text-align:center}
.scr-body small{font-size:.74rem;color:var(--muted)}
.scr-title{font-family:var(--fd);font-size:1.15rem}
.scr-input{margin-top:10px;width:100%;border:2px solid var(--accent);border-radius:12px;padding:8px;font-family:var(--fd);font-weight:700;font-size:1.6rem;background:#fff}
.caret{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-3px;margin-inline-start:2px}
html.motion .caret{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.scr-btn{width:100%;margin-top:6px;background:var(--accent);color:#fff;border-radius:12px;padding:9px;font-weight:700;font-size:.86rem}
.scr-btn.white{background:#fff;color:var(--ok-2);width:auto;padding:9px 26px}
.scr-num{font-family:var(--fd);font-size:3.6rem;line-height:1;font-weight:700;position:relative;z-index:1}
.scr-state{font-family:var(--fd);font-weight:700;font-size:1.05rem}
.scr-pill{font-size:.7rem;background:var(--ok-soft);color:var(--ok-2);border-radius:99px;padding:2px 10px;margin-top:6px;font-weight:700}
.scr-ready{background:var(--ok);color:#fff}
.scr-ready small{color:rgba(255,255,255,.85)}
.scr-coming{background:var(--ok-soft)}
.scr-numwrap{position:relative;display:grid;place-items:center;width:150px;height:130px}
.arcs{position:absolute;inset:0;color:#fff}
html.motion .scr-ready .arcs i{animation:ping 2.2s var(--ease) infinite}
.scr-ready .arcs i:nth-child(2){animation-delay:.7s!important}.scr-ready .arcs i:nth-child(3){animation-delay:1.4s!important}
html:not(.motion) .scr-ready .arcs i{opacity:.25}

/* ── bento ── */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.tile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:22px;display:flex;flex-direction:column;gap:20px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:0 22px 50px -28px #14161b55}
@media (prefers-reduced-motion:reduce){.tile:hover{transform:none}}
.tile-ui{flex:1;min-height:180px;border-radius:18px;background:var(--canvas);display:grid;place-items:center;padding:18px}
.tile-tx h3{font-family:var(--fs);font-size:1.35rem;margin:10px 0 6px}
.tile-tx p{color:var(--ink-2);margin:0;font-size:.98rem}
.tile-ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--accent-soft);color:var(--accent)}
.t-display{grid-column:span 4}.t-board{grid-column:span 2}
.t-menu,.t-callout,.t-stats{grid-column:span 2}
.t-qr{grid-column:span 6;flex-direction:row;align-items:center}
.t-qr .tile-ui{flex:none;width:min(44%,420px);min-height:200px;order:2}
.t-qr .tile-tx{flex:1}
.tile.dark{background:#121419;border-color:#121419;color:#fff}
.tile.dark .tile-ui{background:#1C1F26}
.tile.dark .tile-tx p{color:var(--on-dark)}
.tile.dark .tile-ic{background:#2A2318;color:var(--on-dark-accent)}
@media (max-width:980px){.t-board,.t-menu,.t-callout,.t-stats{grid-column:span 3}.t-display{grid-column:span 6}}
@media (max-width:680px){.bento{grid-template-columns:1fr}.tile{grid-column:auto!important}.t-qr{flex-direction:column;align-items:stretch}.t-qr .tile-ui{width:100%;order:0}}

/* tile UIs */
.disp-ui{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;width:100%;align-items:start}
.du-h{display:block;font-size:.8rem;color:var(--on-dark-2);margin-bottom:10px;font-weight:700}
.du-nums{display:flex;flex-wrap:wrap;gap:10px}
.du-nums b{font-family:var(--fd);font-size:1.4rem;padding:4px 14px;border-radius:12px;background:#2A2E37;color:#C9CCD4}
.du-nums.ready b{font-size:2.3rem;background:var(--ok);color:#fff;padding:4px 20px}
.du-nums b.pop{animation:pop .6s var(--ease)}
.mb{width:100%;max-width:300px}
.mb-row{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:.78rem}
.mb-row+.mb-row{margin-top:7px}
.mb-row b{font-family:var(--fd);font-size:1.2rem;min-width:30px;text-align:center}
.mb-row span{flex:1;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.mb-row i{font-style:normal;font-weight:700;font-size:.7rem;background:var(--ink);color:#fff;border-radius:8px;padding:4px 9px}
.mb-row.ok{background:var(--ok-soft);border-color:var(--ok)}.mb-row.ok span{color:var(--ok-2);font-weight:700}
.mb-row.hot{background:var(--hot-soft);border-color:var(--hot)}.mb-row.hot span{color:var(--hot);font-weight:700}
.mm{width:100%;max-width:280px;background:#fff;border-radius:14px;padding:12px 14px;border:1px solid var(--line)}
.mm-h{font-family:var(--fd);font-weight:700;font-size:.9rem;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:4px}
.mm-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:.84rem}
.mm-row:last-child{border:0}
.mm-row span{display:flex;flex-direction:column;font-weight:600}
.mm-row small{color:var(--muted);font-weight:400;font-size:.72rem}
.mm-row b{font-family:var(--fd)}
.mm-row.off{opacity:.5}.mm-row em{font-style:normal;font-size:.68rem;background:var(--hot-soft);color:var(--hot);border-radius:99px;padding:0 7px;margin-inline-start:4px}
.mm-row.off span{flex-direction:row;align-items:center}
.co{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--hot-soft);border:1px solid #EBC4C0;border-radius:16px;padding:16px 20px;color:var(--hot)}
.co b{font-family:var(--fd);font-size:1.25rem}
.co small{color:var(--ink-2)}
.co-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--hot);color:#fff}
html.motion .tile.in .co-ic{animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%,60%,100%{transform:none}64%{transform:rotate(-12deg)}68%{transform:rotate(12deg)}72%{transform:rotate(-8deg)}76%{transform:rotate(6deg)}80%{transform:none}}
.st{width:100%;max-width:300px}
.st-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--muted);margin-bottom:12px}
.st-top b{font-family:var(--fd);font-size:1.6rem;color:var(--ink)}
.bars{display:flex;align-items:flex-end;gap:7px;height:90px}
.bars i{flex:1;height:var(--h);border-radius:6px 6px 3px 3px;background:var(--accent-soft);transform-origin:bottom}
.bars i:nth-child(4){background:var(--accent)}
html.motion .tile .bars i{transform:scaleY(.08);transition:transform .8s var(--ease)}
html.motion .tile.in .bars i{transform:none}
.st-cap{display:block;margin-top:8px;font-size:.7rem;color:var(--muted);text-align:start}
.stand{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:16px 26px;transform:rotate(-2deg)}
.stand-h{font-family:var(--fs);font-weight:700}
.stand small{color:var(--muted)}

/* ── compare ── */
.compare{background:var(--surface);border-block:1px solid var(--line)}
.cmp{max-width:920px;margin:0 auto;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--canvas)}
.cmp-h,.cmp-r{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.1fr)}
.cmp-h>span,.cmp-r>span{padding:16px 20px;display:flex;align-items:center;gap:8px}
.cmp-h{font-weight:700;color:var(--muted);font-size:.92rem}
.cmp-h .us img{height:22px;width:auto}
.cmp-r{border-top:1px solid var(--line)}
.cmp-r>span:first-child{font-weight:700}
.cmp-r>span:nth-child(2){color:var(--muted)}
.cmp-r>span:nth-child(2) .ic{color:#B9B4AA}
.cmp .us{background:var(--surface);color:var(--ink);font-weight:600}
.cmp-r .us .ic{color:var(--ok)}
@media (max-width:680px){.cmp-h,.cmp-r{grid-template-columns:1fr 1fr}.cmp-h>span:first-child{display:none}.cmp-r>span:first-child{grid-column:1/-1;padding-bottom:0;background:var(--canvas)}.cmp-h>span,.cmp-r>span{padding:12px 14px;font-size:.9rem}}

/* ── plans ── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1040px;margin:0 auto;align-items:stretch}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:28px;display:flex;flex-direction:column}
.plan h3{font-family:var(--fs);font-size:1.4rem;margin:0 0 10px}
.plan-price{display:flex;align-items:baseline;gap:8px}
.plan-price b{font-family:var(--fd);font-size:2.8rem;line-height:1.1}
.plan-price span{color:var(--muted);font-weight:600}
.plan-sub{color:var(--muted);margin:6px 0 18px;font-size:.95rem}
.plan ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px;flex:1}
.plan li{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.plan li .ic{color:var(--ok)}
.plan.best{background:#121419;color:#fff;border-color:#121419;box-shadow:0 30px 70px -30px color-mix(in srgb,var(--glow) 60%,transparent)}
.plan.best .plan-sub,.plan.best .plan-price span,.plan.best li{color:var(--on-dark)}
.plan.best li .ic{color:var(--on-dark-accent)}
.plan-tag{position:absolute;top:24px;inset-inline-end:24px;background:var(--glow);color:#1a0f08;font-weight:700;font-size:.8rem;border-radius:99px;padding:3px 12px}
.pay{max-width:1040px;margin:28px auto 0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:28px}
.pay h3{font-family:var(--fs);font-size:1.4rem;margin:12px 0 12px}
.pay ol{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:10px}
.pay li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.pay li b{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--sunk);font-family:var(--fd);color:var(--ink)}
.pay-card{background:#121419;color:#fff;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:2px;transform:rotate(-1.5deg);box-shadow:0 24px 50px -24px #0008}
.pc-k{font-size:.78rem;color:var(--on-dark-2);margin-top:8px}.pc-k:first-child{margin-top:0}
.pc-v{font-family:var(--fd);font-size:1.5rem;font-weight:700}
.pc-v small{font-size:.85rem;color:var(--on-dark-2)}
.pc-v.ref{color:var(--on-dark-accent)}
@media (max-width:760px){.pay{grid-template-columns:1fr}.pay-card{transform:none}}

/* ── faq ── */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:56px;align-items:start}
.faq-wrap .sec-head{position:sticky;top:110px;margin:0}
.faq{display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0 22px;transition:border-color .25s}
.faq details[open]{border-color:var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:1.08rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314161B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);margin:0 0 20px;line-height:1.9}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr;gap:20px}.faq-wrap .sec-head{position:static}}

/* ── cta ── */
.cta-sec{padding:0 0 clamp(72px,9vw,112px)}
.cta-box{position:relative;isolation:isolate;overflow:hidden;background:#121419;color:#fff;border-radius:36px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.cta-box .stage-glow{background:radial-gradient(50% 80% at 15% 50%,color-mix(in srgb,var(--glow) 38%,transparent),transparent 70%)}
.cta-copy h2{font-family:var(--fs);font-size:clamp(2rem,4vw,3rem);margin:0 0 12px}
.cta-copy p{color:var(--on-dark);font-size:1.1rem;max-width:46ch;margin-bottom:26px}
.cta-qr{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--on-dark-2)}
.qr-frame{background:#fff;border-radius:22px;padding:14px}
.qr-frame svg{width:190px;height:190px;display:block}
.try-open{display:none!important}
@media (max-width:820px){.cta-box{grid-template-columns:1fr}.cta-qr{display:none}.try-open{display:inline-flex!important}}

/* ── footer ── */
.site-foot{border-top:1px solid var(--line);padding:40px 0 48px;background:var(--surface)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.2fr) auto auto;gap:48px;align-items:start}
.foot-in img{height:26px;width:auto;display:block;margin-bottom:10px}
.foot-links,.foot-contact{display:flex;flex-direction:column;gap:8px}
.foot-links a,.foot-contact a{color:var(--ink-2);text-decoration:none}
.foot-links a:hover,.foot-contact a:hover{color:var(--accent)}
@media (max-width:700px){.foot-in{grid-template-columns:1fr;gap:20px}}

/* ── reveal (only with motion) ── */
html.motion .hero-h .line>span{transform:translateY(105%);transition:transform .7s var(--ease)}
html.motion .hero-h .line:nth-child(2)>span{transition-delay:.1s}
html.motion .hero-h.in .line>span{transform:none}
html.motion .stage{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .8s var(--ease) .15s,transform .8s var(--ease) .15s}
html.motion .stage.in{opacity:1;transform:none}
html.motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.motion [data-reveal].in{opacity:1;transform:none;transition-delay:calc(var(--d,0) * 90ms)}
.plan-price s{color:var(--muted);font-family:var(--fd);font-size:1.05rem;margin-inline-start:4px;text-decoration-thickness:2px}
.plan.best .plan-price s{color:var(--on-dark-2)}

/* cheap phones / slow data (html.lite): no blur, no glow, no looping animation */
html.lite .nav,html.lite .notif{backdrop-filter:none}
html.lite .nav{background:var(--canvas)}
html.lite .stage-glow,html.lite .lock-arcs,html.lite .cursor{display:none}
html.lite *{animation:none!important;transition:none!important}