/* ════════════════════════════════════════════════════════════════
   Desto — landing styles. Editorial premium (ZettaJoule-inspired),
   QR-first, Desto green on warm paper with dark bands.
   ════════════════════════════════════════════════════════════════ */

:root{
  --paper:#f4f1ea; --paper-2:#efeae0; --surface:#fbfaf6; --raised:#ffffff;
  --mist:#e9f1ea;            /* pale green-tinted light section */
  --ink:#0a0d0a; --ink-2:#494e48; --ink-3:#7e837a; --ink-4:#b9bdb2;
  --line:rgba(10,13,10,0.10); --line-soft:rgba(10,13,10,0.06);
  --green:#00C853; --green-deep:#00A845; --green-700:#0a7d3c; --green-soft:#d6f2df; --green-glow:rgba(0,200,83,0.20);
  --dark:#0a0e0a; --dark-2:#121712; --dark-line:rgba(240,237,229,0.10);
  --on-dark:#f1efe7; --on-dark-2:#a6ada0; --on-dark-3:#71776d;
  --disp:'Inter Tight','Inter',sans-serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1280px; --pad:48px;
  --sec:clamp(88px,13vh,168px);
  --seam:clamp(34px,5vw,64px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}

/* ── Type ── */
.disp{font-family:var(--disp); font-weight:600; letter-spacing:-0.035em; line-height:1.0;}
.display-1{font-family:var(--disp); font-weight:600; letter-spacing:-0.045em; line-height:0.98;
  font-size:clamp(46px,7.6vw,104px);}
.h2{font-family:var(--disp); font-weight:600; letter-spacing:-0.035em; line-height:1.03;
  font-size:clamp(34px,4.7vw,62px); margin:0;}
.h3{font-family:var(--disp); font-weight:600; letter-spacing:-0.025em; line-height:1.08;
  font-size:clamp(24px,2.6vw,32px); margin:0;}
.statement{font-family:var(--disp); font-weight:500; letter-spacing:-0.025em; line-height:1.16;
  font-size:clamp(23px,2.9vw,38px); margin:0; text-wrap:pretty;}
.lead{font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--ink-2); text-wrap:pretty;}
.eyebrow{font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3);}
.mono{font-family:var(--mono);}
.tnum{font-variant-numeric:tabular-nums;}

/* ── Pill-with-dot label ── */
.pill-dot{display:inline-flex; align-items:center; gap:11px; padding:9px 17px 9px 13px;
  border:1px solid var(--line); border-radius:999px; background:var(--raised); white-space:nowrap;
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-2);}
.pill-dot .dot{width:8px; height:8px; border-radius:999px; background:var(--green); position:relative;}
.pill-dot .dot::after{content:''; position:absolute; inset:-5px; border-radius:999px; border:1.5px solid var(--green); opacity:0; animation:dotPulse 2.4s ease-out infinite;}
@keyframes dotPulse{0%{transform:scale(0.6); opacity:0.7;} 100%{transform:scale(1.6); opacity:0;}}
.on-dark .pill-dot{background:rgba(240,237,229,0.05); border-color:var(--dark-line); color:var(--on-dark-2);}

/* ── Buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:56px; padding:0 28px;
  border-radius:999px; font-family:var(--sans); font-weight:600; font-size:16.5px; cursor:pointer; border:0;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background .2s; white-space:nowrap;}
.btn svg{transition:transform .22s cubic-bezier(.2,.7,.3,1);}
.btn:hover svg{transform:translateX(4px);}
.btn-green{background:var(--green); color:#07120c; box-shadow:0 8px 24px rgba(0,200,83,.26);}
.btn-green:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,200,83,.36);}
.btn-ink{background:var(--ink); color:var(--paper);}
.btn-ink:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line);}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3);}
.on-dark .btn-ghost{color:var(--on-dark); box-shadow:inset 0 0 0 1.5px var(--dark-line);}
.on-dark .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--on-dark-2);}
.btn.sm{height:46px; font-size:15px; padding:0 20px;}
.text-link{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:16px; color:var(--green-700);}
.text-link svg{transition:transform .22s cubic-bezier(.2,.7,.3,1);}
.text-link:hover svg{transform:translateX(4px);}
.on-dark .text-link{color:var(--green);}

/* ── Scroll reveal (JS-gated; animation-driven so the END state is reliable) ── */
@media (prefers-reduced-motion:no-preference){
  @keyframes revealUp{
    0%{opacity:0; transform:translateY(66px) scale(.98);}
    60%{opacity:1;}
    100%{opacity:1; transform:none;}
  }
  /* hidden base only applies once JS confirms it can animate (html.js-reveal) */
  html.js-reveal [data-reveal]{opacity:0;}
  html.js-reveal [data-reveal].is-visible{animation:revealUp 1.05s cubic-bezier(.16,.84,.36,1) both;}
  /* staggered containers: children cascade in (delays set in JS) */
  html.js-reveal [data-stagger] > *{opacity:0;}
  html.js-reveal [data-stagger].is-visible > *{animation:revealUp .92s cubic-bezier(.16,.84,.36,1) both;}
}

/* ════════ NAV ════════ */
.nav{position:fixed; top:0; left:0; right:0; z-index:200; transition:transform .5s cubic-bezier(.2,.7,.3,1), background .4s, border-color .4s;}
.nav.hidden{transform:translateY(-104%);}
.nav.scrolled{background:rgba(244,241,234,0.78); backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:80px;}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:600; font-size:24px; letter-spacing:-0.025em;}
.brand img{width:40px; height:40px; border-radius:11px;}
.nav-links{display:flex; align-items:center; gap:40px;}
.nav-links a{font-size:15.5px; font-weight:500; color:var(--ink-2); position:relative; transition:color .18s;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:100% 50%; transition:transform .35s cubic-bezier(.2,.7,.3,1);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:0 50%;}
.nav-cta{display:flex; align-items:center; gap:14px;}

/* ════════ HERO ════════ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:104px 0 88px; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 60% at 88% 8%, rgba(0,200,83,0.10), transparent 60%),
    radial-gradient(80% 50% at 10% 100%, rgba(0,200,83,0.06), transparent 60%);}
.hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.08fr 0.92fr; gap:54px; align-items:center;}
.hero h1{margin:26px 0 0;}
.hero h1 .accent{color:var(--green-deep);}
.hero-sub{margin:30px 0 0; max-width:520px;}
.hero-ctas{display:flex; align-items:center; gap:16px; margin-top:40px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:34px; margin-top:52px; padding-top:34px; border-top:1px solid var(--line); flex-wrap:wrap;}
.hero-stats .s .n{font-family:var(--disp); font-weight:600; font-size:clamp(28px,3vw,38px); letter-spacing:-0.03em; line-height:1;}
.hero-stats .s .n .u{color:var(--green-deep);}
.hero-stats .s .l{font-size:13.5px; color:var(--ink-3); margin-top:7px; letter-spacing:0.01em;}

/* hero phone */
.hero-phone-wrap{position:relative; display:flex; justify-content:center; align-items:center;}
.hero-phone-glow{position:absolute; width:100%; height:110%; z-index:0;
  background:radial-gradient(circle at 50% 42%, rgba(0,200,83,0.20), transparent 62%); filter:blur(18px);}
.float-chip{position:absolute; z-index:5; background:var(--raised); border:1px solid var(--line); border-radius:18px;
  padding:13px 17px; box-shadow:0 22px 56px rgba(10,13,10,0.16); display:flex; align-items:center; gap:13px; animation:floaty 6s ease-in-out infinite;}
.float-chip .ic{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.float-chip .ft{font-size:12px; color:var(--ink-3); line-height:1;}
.float-chip .fv{font-family:var(--disp); font-weight:600; font-size:17px; letter-spacing:-0.01em; margin-top:5px;}
.fc-a{top:34px; left:-18px; animation-delay:0s;}
.fc-b{bottom:96px; right:-26px; animation-delay:1.8s;}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-13px);}}

/* ════════ PHONE (shared bezel) ════════ */
.phone{position:relative; z-index:3; width:336px; height:712px; border-radius:50px; background:#07110b;
  padding:11px; box-shadow:0 44px 100px rgba(10,13,10,0.34), 0 10px 30px rgba(10,13,10,0.18); flex-shrink:0;}
.phone .screen{position:relative; width:100%; height:100%; border-radius:40px; background:var(--paper); overflow:hidden;}
.phone .notch{position:absolute; top:13px; left:50%; transform:translateX(-50%); width:108px; height:30px; border-radius:999px; background:#07110b; z-index:30;}
.phone .statusbar{position:absolute; top:0; left:0; right:0; height:50px; display:flex; align-items:center; justify-content:space-between; padding:18px 26px 0; z-index:25; font-size:14px; font-weight:600; color:var(--ink);}
.phone .statusbar.light{color:#f4f1ea;}
.phone .statusbar .ico{display:flex; align-items:center; gap:6px;}

/* ── Phone home content (hero) ── */
.app{position:absolute; inset:0; padding:62px 19px 18px; display:flex; flex-direction:column; gap:13px;}
.app-top{display:flex; align-items:center; justify-content:space-between;}
.region{display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:999px; background:var(--raised); border:1px solid var(--line); font-size:12.5px; font-weight:600;}
.region .d{width:7px; height:7px; border-radius:999px; background:var(--green); box-shadow:0 0 0 3px var(--green-glow);}
.av{width:38px; height:38px; border-radius:999px; background:var(--green); color:#07120c; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:15px;}
.greet .g1{font-size:11px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-3);}
.greet .g2{font-family:var(--disp); font-weight:600; font-size:25px; letter-spacing:-0.03em; line-height:1.06; margin-top:5px;}
.bal{background:var(--ink); color:var(--paper); border-radius:26px; padding:21px 23px;}
.bal .t{font-size:10.5px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:rgba(244,241,234,0.55);}
.bal .v{font-family:var(--disp); font-weight:500; font-size:45px; letter-spacing:-0.04em; margin-top:7px;}
.bal .r{display:flex; justify-content:space-between; align-items:center; margin-top:13px;}
.bal .ch{font-family:var(--mono); font-size:12.5px; color:var(--green);}
.bal .w{font-size:11px; color:rgba(244,241,234,0.5); letter-spacing:0.04em;}
.qa{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.qa .q{background:var(--raised); border:1px solid var(--line); border-radius:19px; padding:14px 0 11px; display:flex; flex-direction:column; align-items:center; gap:9px;}
.qa .q .qi{width:46px; height:46px; border-radius:14px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center;}
.qa .q.on .qi{background:var(--green); color:#07120c;}
.qa .q .ql{font-size:12px; font-weight:500;}
.scan-hint{background:var(--green-soft); border-radius:19px; padding:15px 17px; display:flex; align-items:center; gap:13px;}
.scan-hint .li{width:44px; height:44px; border-radius:13px; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.scan-hint .l1{font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:-0.01em;}
.scan-hint .l2{font-size:12px; color:var(--green-700); margin-top:2px;}

/* ════════ SECTION SCAFFOLD ════════ */
.section{padding:var(--sec) 0;}
.section.tight{padding:calc(var(--sec) * 0.62) 0;}
.bg-mist{background:var(--mist);}
.bg-paper2{background:var(--paper-2);}
.on-dark{background:var(--dark); color:var(--on-dark);}

/* ════════ SECTION PANEL-STACK SEAMS ════════
   Each top-level band is its own stacking context (isolate), painted in
   document order so later sections sit above earlier ones. Sections that
   change background carry `.seam`: a rounded top + upward shadow + negative
   margin, so scrolling reveals each panel rising over the one before it.
   This is the visible section-to-section transition; it is pure layout, so
   it works identically with reduced-motion on. */
body > section, .footer{position:relative; isolation:isolate;}
body > section:nth-of-type(1){z-index:1;}
body > section:nth-of-type(2){z-index:2;}
body > section:nth-of-type(3){z-index:3;}
body > section:nth-of-type(4){z-index:4;}
body > section:nth-of-type(5){z-index:5;}
body > section:nth-of-type(6){z-index:6;}
body > section:nth-of-type(7){z-index:7;}
body > section:nth-of-type(8){z-index:8;}
.footer{z-index:9;}

.seam{
  margin-top:calc(var(--seam) * -1);
  border-top-left-radius:var(--seam);
  border-top-right-radius:var(--seam);
  box-shadow:0 -12px 30px rgba(10,13,10,0.06);
}
/* keep section content clear of the rounded lip */
.section.seam{padding-top:calc(var(--sec) + var(--seam) * 0.45);}
/* the video band already clips to its box, so the radius rounds the footage */
.life.seam{overflow:hidden;}
/* dark panels cast a tighter, cooler seam shadow */
.on-dark.seam, .final.seam{box-shadow:0 -14px 32px rgba(0,0,0,0.18);}
.on-dark .lead{color:var(--on-dark-2);}
.on-dark .eyebrow{color:var(--green);}
.rule{height:1px; background:var(--line); border:0; margin:0;}
.on-dark .rule{background:var(--dark-line);}

/* editorial 2-col: label left, statement right */
.editorial{display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:start;}
.editorial .col-label{position:sticky; top:120px;}
.editorial .statement + .lead{margin-top:28px;}
.editorial .actions{margin-top:36px;}

/* section header (centered) */
.sec-head{max-width:760px;}
.sec-head.center{margin:0 auto; text-align:center;}
.sec-head .eyebrow{display:block; margin-bottom:20px;}
.sec-head .lead{margin-top:22px;}

/* ════════ DEMO (dark) ════════ */
.demo-layout{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-top:64px;}
.demo-steps{display:flex; flex-direction:column; gap:6px;}
.demo-step{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--dark-line); position:relative; transition:opacity .4s ease;}
.demo-step:last-child{border-bottom:1px solid var(--dark-line);}
.demo-step .sn{font-family:var(--mono); font-size:13px; color:var(--on-dark-3); padding-top:5px; transition:color .4s;}
.demo-step h4{font-family:var(--disp); font-weight:600; font-size:21px; letter-spacing:-0.02em; margin:0; color:var(--on-dark);}
.demo-step p{font-size:15px; line-height:1.5; color:var(--on-dark-2); margin:8px 0 0;}
.demo-step::before{content:''; position:absolute; left:0; top:0; width:2px; height:100%; background:var(--green); transform:scaleY(0); transform-origin:top; opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .demo-step{animation:stepDim 16s infinite both;}
  .demo-step::before{animation:stepBar 16s infinite both;}
  .demo-step .sn{animation:stepNum 16s infinite both;}
  .demo-step.st-1, .demo-step.st-1::before, .demo-step.st-1 .sn{animation-delay:0s;}
  .demo-step.st-2, .demo-step.st-2::before, .demo-step.st-2 .sn{animation-delay:4s;}
  .demo-step.st-3, .demo-step.st-3::before, .demo-step.st-3 .sn{animation-delay:8s;}
  .demo-step.st-4, .demo-step.st-4::before, .demo-step.st-4 .sn{animation-delay:12s;}
}
@keyframes stepDim{0%,24%{opacity:1;} 25%,100%{opacity:0.4;}}
@keyframes stepNum{0%,24%{color:var(--green);} 25%,100%{color:var(--on-dark-3);}}
@keyframes stepBar{0%{transform:scaleY(0); opacity:0;} 3%{transform:scaleY(1); opacity:1;} 24%{transform:scaleY(1); opacity:1;} 25%,100%{transform:scaleY(0); opacity:0;}}

.demo-phone-wrap{display:flex; justify-content:center; position:relative;}
.demo-phone-wrap .glow{position:absolute; width:100%; height:110%; background:radial-gradient(circle at 50% 45%, rgba(0,200,83,0.18), transparent 60%); filter:blur(20px);}

/* ── DEMO phone screens (CSS loop) ── */
.ds{position:absolute; inset:0; opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .ds{animation:dsCycle 16s infinite both;}
  .ds-home{animation-delay:0s;}
  .ds-scan{animation-delay:4s;}
  .ds-pay{animation-delay:8s;}
  .ds-done{animation-delay:12s;}
}
@media (prefers-reduced-motion:reduce){ .ds-done{opacity:1;} }
@keyframes dsCycle{
  0%{opacity:0; transform:translateY(10px) scale(0.985);}
  2.2%{opacity:1; transform:none;}
  22%{opacity:1; transform:none;}
  25%{opacity:0; transform:translateY(-8px) scale(0.99);}
  100%{opacity:0;}
}

/* demo home (compact, QR pay highlighted) */
.dh{position:absolute; inset:0; padding:60px 18px 16px; display:flex; flex-direction:column; gap:12px;}
.dh-bal{background:var(--ink); color:var(--paper); border-radius:24px; padding:20px 22px;}
.dh-bal .t{font-size:10px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:rgba(244,241,234,0.55);}
.dh-bal .v{font-family:var(--disp); font-weight:500; font-size:42px; letter-spacing:-0.04em; margin-top:6px;}
.dh-bal .r{font-family:var(--mono); font-size:12px; color:var(--green); margin-top:10px;}
.dh-pay{background:var(--green); color:#07120c; border-radius:22px; padding:20px 22px; display:flex; align-items:center; gap:14px; box-shadow:0 12px 30px rgba(0,200,83,0.3);}
.dh-pay .pi{width:50px; height:50px; border-radius:15px; background:rgba(7,18,12,0.12); display:flex; align-items:center; justify-content:center;}
.dh-pay .p1{font-family:var(--disp); font-weight:600; font-size:21px; letter-spacing:-0.02em;}
.dh-pay .p2{font-size:12.5px; opacity:0.7; margin-top:2px;}
.dh-row{background:var(--raised); border:1px solid var(--line); border-radius:18px; padding:15px 18px; display:flex; align-items:center; gap:13px;}
.dh-row .ri{width:40px; height:40px; border-radius:12px; background:var(--green-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.dh-row .t1{font-weight:600; font-size:14.5px;}
.dh-row .t2{font-size:12px; color:var(--ink-3); margin-top:2px;}

/* demo scan */
.dsc{position:absolute; inset:0; background:#0b0f0b;}
.dsc .veil{position:absolute; inset:0; background:radial-gradient(120% 75% at 50% 40%, #1a201a, #0b0f0b 72%);}
.dsc .title{position:absolute; top:64px; left:0; right:0; text-align:center; color:rgba(244,241,234,0.72); font-size:15px; font-weight:500;}
.dsc .frame{position:absolute; top:150px; left:50%; transform:translateX(-50%); width:228px; height:228px;}
.dsc .qr{position:absolute; inset:0; background:#fff; border-radius:20px; padding:20px;}
.dsc .qr svg{width:100%; height:100%; display:block;}
.dsc .corner{position:absolute; width:40px; height:40px; border:4px solid var(--green);}
.dsc .corner.tl{top:-10px; left:-10px; border-right:0; border-bottom:0; border-top-left-radius:12px;}
.dsc .corner.tr{top:-10px; right:-10px; border-left:0; border-bottom:0; border-top-right-radius:12px;}
.dsc .corner.bl{bottom:-10px; left:-10px; border-right:0; border-top:0; border-bottom-left-radius:12px;}
.dsc .corner.br{bottom:-10px; right:-10px; border-left:0; border-top:0; border-bottom-right-radius:12px;}
.dsc .scanline{position:absolute; left:-6px; right:-6px; height:4px; background:linear-gradient(90deg,transparent,var(--green),transparent); box-shadow:0 0 22px var(--green); border-radius:4px;}
@media (prefers-reduced-motion:no-preference){ .dsc .scanline{animation:scanSweep 2.4s ease-in-out infinite;} }
@keyframes scanSweep{0%,100%{top:4px;} 50%{top:212px;}}
.dsc .merchant{position:absolute; left:18px; right:18px; bottom:120px; background:var(--raised); border-radius:22px; padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow:0 24px 60px rgba(0,0,0,0.5);}
@media (prefers-reduced-motion:no-preference){ .dsc .merchant{opacity:0; animation:merchantUp 16s infinite both; animation-delay:4s;} }
@keyframes merchantUp{0%{opacity:0; transform:translateY(40px);} 8%{opacity:0; transform:translateY(40px);} 13%{opacity:1; transform:none;} 24%{opacity:1; transform:none;} 25%,100%{opacity:0;}}
.dsc .merchant .mi{width:50px; height:50px; border-radius:15px; background:var(--soft,#ece8df); display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:600; font-size:22px; color:var(--ink-2);}
.dsc .merchant .m1{font-family:var(--disp); font-weight:600; font-size:19px;}
.dsc .merchant .m2{font-size:12.5px; color:var(--ink-3); margin-top:2px;}

/* demo pay/review */
.dp{position:absolute; inset:0; padding:60px 20px 18px; display:flex; flex-direction:column;}
.dp .back{width:38px; height:38px; border-radius:999px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.dp .amt-cap{font-size:11px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-3); text-align:center; margin-top:30px;}
.dp .amt{font-family:var(--disp); font-weight:500; font-size:74px; letter-spacing:-0.05em; text-align:center; line-height:1; margin-top:12px;}
.dp .amt-sub{text-align:center; font-size:14px; color:var(--ink-3); margin-top:14px;}
.dp .cashback{margin:22px auto 0; display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:999px; background:var(--green-soft); color:var(--green-700); font-weight:600; font-size:14.5px;}
@media (prefers-reduced-motion:no-preference){ .dp .cashback{opacity:0; animation:cbPop 16s infinite both; animation-delay:8s;} }
@keyframes cbPop{0%,6%{opacity:0; transform:scale(0.8);} 11%{opacity:1; transform:scale(1.06);} 14%{transform:scale(1);} 24%{opacity:1;} 25%,100%{opacity:0;}}
.dp .slide{margin-top:auto; margin-bottom:74px; position:relative; height:62px; border-radius:999px; background:var(--ink); overflow:hidden;}
.dp .slide .fill{position:absolute; left:0; top:0; bottom:0; width:62px; background:var(--green); border-radius:999px;}
@media (prefers-reduced-motion:no-preference){ .dp .slide .fill{animation:slideFill 16s infinite both; animation-delay:8s;} }
@keyframes slideFill{0%,10%{width:62px;} 20%{width:100%;} 24%{width:100%;} 25%,100%{width:62px;}}
.dp .slide .lab{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(244,241,234,0.6); font-weight:600; font-size:16px;}
.dp .slide .knob{position:absolute; left:6px; top:6px; width:50px; height:50px; border-radius:999px; background:var(--paper); display:flex; align-items:center; justify-content:center;}
@media (prefers-reduced-motion:no-preference){ .dp .slide .knob{animation:slideKnob 16s infinite both; animation-delay:8s;} }
@keyframes slideKnob{0%,10%{transform:translateX(0);} 20%{transform:translateX(206px);} 24%{transform:translateX(206px);} 25%,100%{transform:translateX(0);}}

/* demo done */
.dd{position:absolute; inset:0; padding:60px 22px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.dd .check{width:118px; height:118px; border-radius:999px; background:var(--green); display:flex; align-items:center; justify-content:center; box-shadow:0 20px 50px rgba(0,200,83,0.36);}
@media (prefers-reduced-motion:no-preference){ .dd .check{transform:scale(0); animation:checkPop 16s infinite both; animation-delay:12s;} }
@keyframes checkPop{0%,2%{transform:scale(0);} 8%{transform:scale(1.12);} 12%{transform:scale(1);} 24%{transform:scale(1);} 25%,100%{transform:scale(0);}}
.dd .paid{font-family:var(--disp); font-weight:600; font-size:34px; letter-spacing:-0.03em; margin-top:30px;}
.dd .paid-sub{font-size:14px; color:var(--ink-2); margin-top:8px;}
.dd-rows{width:100%; margin-top:28px; display:flex; flex-direction:column; gap:10px;}
@media (prefers-reduced-motion:no-preference){ .dd-rows{opacity:0; animation:ddRows 16s infinite both; animation-delay:12s;} }
@keyframes ddRows{0%,9%{opacity:0; transform:translateY(14px);} 15%{opacity:1; transform:none;} 24%{opacity:1;} 25%,100%{opacity:0;}}
.dd-reward{display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:18px; background:var(--green-soft);}
.dd-reward .ri{width:40px; height:40px; border-radius:12px; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.dd-reward .r1{font-weight:600; font-size:14.5px; color:var(--ink);}
.dd-reward .r2{font-size:12px; color:var(--green-700); margin-top:2px;}
.dd-reward .rv{margin-left:auto; font-family:var(--disp); font-weight:600; font-size:18px; color:var(--green-700);}

/* ════════ QR NETWORKS ════════ */
.net-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:24px; overflow:hidden; margin-top:56px;}
.net{background:var(--paper); padding:34px 28px; display:flex; flex-direction:column; gap:16px; transition:background .25s;}
.net:hover{background:var(--surface);}
.net .qg{width:44px; height:44px; color:var(--ink);}
.net .flag{width:60px; height:60px; border-radius:17px; display:flex; align-items:center; justify-content:center; font-size:36px; line-height:1; background:var(--raised); border:1px solid var(--line); box-shadow:0 8px 20px rgba(10,13,10,0.07); transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;}
.bg-mist .net .flag{background:#fff;}
.net:hover .flag{transform:translateY(-3px) scale(1.03); box-shadow:0 14px 30px rgba(10,13,10,0.12);}
.net .nm{font-family:var(--disp); font-weight:600; font-size:21px; letter-spacing:-0.02em;}
.net .reg{font-size:13px; color:var(--ink-3); margin-top:-8px;}
.bg-mist .net{background:var(--mist);}
.bg-mist .net:hover{background:#eef5ef;}
.bg-mist .net-grid{background:var(--line-soft); border-color:var(--line-soft);}

/* ════════ REWARDS ════════ */
.rewards-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:60px;}
.reward-card{border-radius:30px; padding:44px 42px; position:relative; overflow:hidden; border:1px solid var(--line); background:var(--raised);}
.reward-card.feature{background:var(--ink); color:var(--on-dark); border-color:transparent;}
.reward-card .rc-icon{width:58px; height:58px; border-radius:16px; background:var(--green); color:#07120c; display:flex; align-items:center; justify-content:center; margin-bottom:28px;}
.reward-card .rc-big{font-family:var(--disp); font-weight:600; font-size:clamp(56px,7vw,84px); letter-spacing:-0.045em; line-height:0.92;}
.reward-card.feature .rc-big{color:var(--green);}
.reward-card .rc-big .small{font-size:0.42em; letter-spacing:-0.02em; color:var(--ink-3); margin-left:4px;}
.reward-card.feature .rc-big .small{color:var(--on-dark-2);}
.reward-card h3{font-family:var(--disp); font-weight:600; font-size:26px; letter-spacing:-0.025em; margin:18px 0 0;}
.reward-card.feature h3{color:var(--on-dark);}
.reward-card p{font-size:16px; line-height:1.55; color:var(--ink-2); margin:14px 0 0; max-width:42ch; text-wrap:pretty;}
.reward-card.feature p{color:var(--on-dark-2);}
.reward-card .tagline{display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--green-700);}
.reward-card.feature .tagline{color:var(--green);}
.reward-note{margin-top:26px; font-size:13.5px; color:var(--ink-3); text-align:center; text-wrap:pretty;}

/* ════════ PRICING 0% ════════ */
.price-card{position:relative; overflow:hidden; border-radius:40px; background:var(--ink); color:var(--on-dark); padding:clamp(48px,7vw,84px); text-align:center;}
.price-card::before{content:''; position:absolute; inset:0; background:radial-gradient(110% 80% at 50% 0%, rgba(0,200,83,0.22), transparent 56%);}
.price-card > *{position:relative; z-index:2;}
.price-card .pc-huge{font-family:var(--disp); font-weight:600; font-size:clamp(120px,20vw,260px); letter-spacing:-0.05em; line-height:0.82; color:var(--green);}
.price-card h2{font-family:var(--disp); font-weight:600; font-size:clamp(30px,4vw,46px); letter-spacing:-0.03em; margin:24px 0 0; color:var(--on-dark);}
.price-card p{font-size:18px; line-height:1.55; color:var(--on-dark-2); max-width:580px; margin:20px auto 0; text-wrap:pretty;}
.price-points{display:flex; justify-content:center; gap:40px; margin-top:44px; flex-wrap:wrap;}
.price-points .pp{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:500; color:var(--on-dark);}
.price-points .pp svg{color:var(--green);}

/* ════════ LIFESTYLE BAND ════════ */
.life{position:relative; height:clamp(380px,54vw,660px); overflow:hidden;}
.life-media{position:absolute; left:0; right:0; top:-14%; height:128%; will-change:transform;}
.life-video{width:100%; height:100%; object-fit:cover; display:block;}
.life::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,13,10,0.18), transparent 36%); z-index:2; pointer-events:none;}
.life .life-overlay{position:absolute; left:0; right:0; bottom:0; padding:clamp(40px,6vw,80px) var(--pad); z-index:5;
  background:linear-gradient(180deg, transparent, rgba(10,13,10,0.72)); pointer-events:none;}
.life .life-overlay .inner{max-width:var(--maxw); margin:0 auto;}
.life .life-overlay h2{color:#f4f1ea; max-width:640px;}
.life .life-overlay p{color:rgba(244,241,234,0.82); margin-top:16px; max-width:480px; font-size:18px;}

/* ════════ FINAL CTA ════════ */
.final{position:relative; overflow:hidden; text-align:center;}
.final::before{content:''; position:absolute; bottom:-220px; left:50%; transform:translateX(-50%); width:820px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(0,200,83,0.22), transparent 60%); filter:blur(44px);}
.final-inner{position:relative; z-index:2;}
.final h2{margin:0 auto; max-width:760px;}
.final h2 .accent{color:var(--green);}
.final .lead{margin:24px auto 0; max-width:520px;}
.stores{display:flex; gap:14px; justify-content:center; margin-top:42px; flex-wrap:wrap;}
.store-badge{display:inline-flex; align-items:center; gap:12px; height:60px; padding:0 24px; border-radius:16px; background:var(--on-dark); color:var(--dark); transition:transform .16s;}
.store-badge:hover{transform:translateY(-2px);}
.store-badge .sb-sub{font-size:11px; opacity:0.62; line-height:1; margin-bottom:3px;}
.store-badge .sb-main{font-family:var(--disp); font-weight:600; font-size:19px; line-height:1; letter-spacing:-0.01em;}
.qr-cta{display:inline-flex; align-items:center; gap:18px; margin-top:36px; padding:15px 22px 15px 15px; border-radius:20px; background:rgba(240,237,229,0.05); border:1px solid var(--dark-line);}
.qr-cta .qb{width:86px; height:86px; border-radius:12px; background:#fff; padding:8px;}
.qr-cta .qb svg{width:100%; height:100%; display:block;}
.qr-cta .qt1{font-family:var(--disp); font-weight:600; font-size:17px; text-align:left;}
.qr-cta .qt2{font-size:13.5px; color:var(--on-dark-2); margin-top:4px; text-align:left;}

/* ════════ FOOTER ════════ */
.footer{background:var(--dark); color:var(--on-dark-2); padding:92px 0 48px; border-top:1px solid var(--dark-line);}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; border-bottom:1px solid var(--dark-line);}
.foot-brand .brand{color:var(--on-dark); margin-bottom:18px;}
.foot-brand p{font-size:14.5px; line-height:1.55; color:var(--on-dark-3); max-width:300px;}
.foot-col h4{font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--on-dark-3); margin:0 0 18px;}
.foot-col a{display:block; font-size:15px; color:var(--on-dark-2); margin-bottom:13px; transition:color .16s;}
.foot-col a:hover{color:var(--on-dark);}
.foot-bot{display:flex; justify-content:space-between; align-items:center; padding-top:30px; gap:16px; flex-wrap:wrap;}
.foot-bot .cp{font-size:13.5px; color:var(--on-dark-3);}
.foot-bot .leg{display:flex; gap:26px;}
.foot-bot .leg a{font-size:13.5px; color:var(--on-dark-3);}

/* ════════ RESPONSIVE ════════ */
@media (max-width:1080px){
  :root{--pad:36px;}
  .hero{min-height:auto; display:block; padding:112px 0 var(--sec);}
  .hero-grid{grid-template-columns:1fr; gap:48px;}
  .editorial{grid-template-columns:1fr; gap:24px;}
  .editorial .col-label{position:static;}
  .demo-layout{grid-template-columns:1fr; gap:48px;}
  .demo-phone-wrap{order:-1;}
  .net-grid{grid-template-columns:repeat(2,1fr);}
  .rewards-grid{grid-template-columns:1fr;}
}
@media (max-width:680px){
  :root{--pad:22px;}
  body{font-size:16.5px;}
  .nav-links{display:none;}
  .hero{padding:120px 0 var(--sec);}
  .hero-stats{gap:24px;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .price-points{gap:18px;}
  .float-chip{display:none;}
  .stores{flex-direction:column; align-items:center;}
}