/* ============================================================
   ZAH — marketing website
   Desktop-first, fluid down to 320px. Same design language as
   the product: navy-black, glass, mono micro-labels, oklch accents.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  --bg:#06080c;
  --bg-2:#0a0e15;
  --panel:rgba(140,170,220,.055);
  --panel-2:rgba(140,170,220,.09);
  --ink:#eef2f6;
  --ink-2:#8b96a6;
  --ink-3:#4e5766;
  --line:rgba(160,190,230,.12);
  --line-2:rgba(160,190,230,.22);
  --green:oklch(.84 .21 145);
  --blue:oklch(.76 .16 235);
  --red:oklch(.68 .23 22);
  --gold:oklch(.82 .17 85);
  --accent:var(--green);
  --font-display:'Unbounded',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --pad:clamp(20px, 5vw, 64px);
  --maxw:1240px;
}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* ---------------- primitives ---------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:18px; height:1px; background:currentColor; opacity:.5; flex:none;
}

.h1{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(33px, 5.1vw, 70px); line-height:1.02; letter-spacing:-.045em;
  text-wrap:balance;
}
.h2{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(26px, 3.5vw, 44px); line-height:1.08; letter-spacing:-.04em;
  text-wrap:balance;
}
.h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(16px, 1.5vw, 19px); letter-spacing:-.02em; line-height:1.25;
}
.lede{
  font-size:clamp(15.5px, 1.35vw, 19px); line-height:1.6;
  color:#a9b4c4; max-width:56ch; text-wrap:pretty;
}
.small{ font-size:13.5px; color:var(--ink-2); line-height:1.6; text-wrap:pretty; }
.mono{ font-family:var(--font-mono); }

.grad{
  background-image:linear-gradient(96deg,
    oklch(.86 .19 128), oklch(.84 .21 152), oklch(.82 .16 196), oklch(.80 .17 244));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 26px; border-radius:14px;
  font-weight:600; font-size:14.5px; letter-spacing:.01em;
  border:1px solid var(--line-2); background:var(--panel);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--panel-2); border-color:rgba(160,190,230,.34); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn.primary{
  background:var(--green); color:#04140b; border:0;
  box-shadow:0 0 34px -10px var(--green);
}
.btn.primary:hover{ box-shadow:0 0 44px -8px var(--green); background:oklch(.87 .21 145); }
.btn.ghost{ background:transparent; }
.btn.sm{ min-height:42px; padding:0 18px; font-size:13px; border-radius:11px; }
.btn svg{ width:16px; height:16px; }

.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--line-2); background:var(--panel); color:var(--ink-2);
}
.tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); flex:none; }

/* ---------------- leaf ---------------- */
.leaf{ display:inline-block; line-height:0; color:var(--green); }
.leaf svg{ width:100%; height:100%; overflow:visible; }
.leaf .lf path{ fill:currentColor; }
.leaf .vein{ stroke:rgba(0,0,0,.32); stroke-width:.8; fill:none; }
.leaf .stem{ stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; }
.leaf.idle svg{ animation:sway 5.5s ease-in-out infinite; transform-origin:50% 86%; }
.leaf.glow svg{ filter:drop-shadow(0 0 8px currentColor); }
@keyframes sway{ 0%,100%{ transform:rotate(-5deg);} 50%{ transform:rotate(5deg);} }

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.nav.stuck{
  background:rgba(6,8,12,.82);
  border-bottom-color:var(--line);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}
.nav-inner{
  display:flex; align-items:center; gap:14px;
  height:70px;
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand .mark{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  border:1px solid color-mix(in oklch, var(--green) 36%, transparent);
  background:radial-gradient(circle at 50% 40%, color-mix(in oklch,var(--green) 22%, transparent), transparent 72%), rgba(0,0,0,.3);
}
.brand .mark .leaf{ width:23px; height:23px; }
.brand .nm{
  font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:-.02em;
  line-height:1.1; white-space:nowrap;
}
.brand .nm sup{ font-size:.5em; opacity:.7; vertical-align:super; }

.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-links a{
  padding:9px 13px; border-radius:10px; font-size:13.5px; color:var(--ink-2);
  transition:color .16s ease, background .16s ease;
}
.nav-links a:hover{ color:var(--ink); background:var(--panel); }
.nav-cta{ display:flex; align-items:center; gap:8px; margin-left:10px; }
.menu-btn{
  display:none; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel);
  place-items:center; margin-left:auto; flex:none;
}
.menu-btn span{ display:block; width:16px; height:1.5px; background:currentColor; border-radius:2px; position:relative; }
.menu-btn span::before,.menu-btn span::after{
  content:""; position:absolute; left:0; width:16px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.menu-btn span::before{ top:-5px; } .menu-btn span::after{ top:5px; }
body.menu-open .menu-btn span{ background:transparent; }
body.menu-open .menu-btn span::before{ transform:translateY(5px) rotate(45deg); }
body.menu-open .menu-btn span::after{ transform:translateY(-5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:70px 0 0; z-index:55;
  background:rgba(6,8,12,.97);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  padding:24px var(--pad) 40px;
  display:none; flex-direction:column; gap:6px;
  overflow-y:auto;
}
body.menu-open .mobile-menu{ display:flex; }
.mobile-menu a{
  padding:15px 4px; font-size:20px; font-family:var(--font-display); font-weight:300;
  letter-spacing:-.03em; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.mobile-menu a:last-of-type{ border-bottom:0; }
.mobile-menu .btn{ margin-top:18px; width:100%; }

/* ---------------- hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(40px, 6vw, 84px) 0 clamp(48px, 6vw, 88px);
}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(ellipse 46% 44% at 22% 16%, color-mix(in oklch,var(--green) 15%, transparent), transparent 68%),
    radial-gradient(ellipse 44% 40% at 84% 36%, color-mix(in oklch,var(--blue) 12%, transparent), transparent 68%),
    radial-gradient(ellipse 40% 34% at 56% 92%, color-mix(in oklch,var(--red) 8%, transparent), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(140,180,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,180,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 68% 62% at 50% 30%, #000 18%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 68% 62% at 50% 30%, #000 18%, transparent 78%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(28px, 4vw, 64px); align-items:center;
}
.hero-copy{ max-width:640px; }
.hero-copy .tag{ margin-bottom:20px; }
.hero-copy .h1{ margin-bottom:22px; }
.hero-copy .lede{ margin-bottom:30px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:11px; }
.hero-fine{
  margin-top:20px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}

/* phone mock in hero */
.hero-art{ display:grid; place-items:center; position:relative; }
.hero-art::before{
  content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in oklch,var(--green) 22%, transparent), transparent 66%);
  filter:blur(52px); z-index:0;
}

/* ---------------- device mock ---------------- */
.device{
  position:relative; width:var(--dw, 320px); aspect-ratio:390/844;
  background:#000; border-radius:44px; padding:9px;
  box-shadow:
    0 0 0 1.5px rgba(160,200,255,.18),
    0 0 0 7px #0a0d12,
    0 0 0 8px rgba(160,200,255,.08),
    0 44px 90px -34px rgba(0,0,0,.95);
  z-index:1;
  transform:rotate(var(--tilt, 0deg));
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.device:hover{ transform:rotate(0deg) translateY(-4px); }
.device .screen{
  position:relative; width:100%; height:100%; border-radius:35px; overflow:hidden;
  background:var(--bg-2);
  display:flex; flex-direction:column;
}
.device .screen::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 46%),
    linear-gradient(rgba(140,180,255,.03) 1px, transparent 1px) 0 0/100% 4px;
}
.device .island{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:31%; height:23px; background:#000; border-radius:14px; z-index:20;
}
.dv-app{
  position:relative; z-index:1; flex:1; min-height:0;
  padding:calc(var(--dw,320px) * .135) calc(var(--dw,320px) * .055) 0;
  display:flex; flex-direction:column; gap:calc(var(--dw,320px) * .038);
  overflow:hidden;
}
.dv-label{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2);
}
.dv-balance{
  font-family:var(--font-display); font-weight:300; letter-spacing:-.045em;
  font-size:calc(var(--dw,320px) * .115); line-height:1;
  display:flex; align-items:baseline; gap:2px;
}
.dv-balance .c{ font-size:.42em; color:var(--ink-2); align-self:flex-start; margin-top:.16em; }
.dv-balance .d{ font-size:.5em; color:var(--ink-2); }
.dv-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.dv-actions div{
  border-radius:11px; padding:9px 2px 8px; text-align:center;
  font-size:calc(var(--dw,320px) * .032);
  background:var(--panel); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:#cdd6e2;
}
.dv-actions svg{ width:13px; height:13px; color:var(--green); }
.dv-rows{ display:flex; flex-direction:column; }
.dv-row{
  display:flex; align-items:center; gap:9px; padding:8px 0;
  border-bottom:1px solid var(--line);
}
.dv-row:last-child{ border-bottom:0; }
.dv-row .ic{
  width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center;
  font-size:11px; border:1px solid var(--line);
}
.dv-row .tx{ flex:1; min-width:0; }
.dv-row .n{ font-size:calc(var(--dw,320px) * .033); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dv-row .s{ font-size:calc(var(--dw,320px) * .026); color:var(--ink-2); margin-top:1px; }
.dv-row .a{ font-family:var(--font-mono); font-size:calc(var(--dw,320px) * .029); flex:none; }
.dv-tabs{
  margin-top:auto; margin-bottom:calc(var(--dw,320px) * .04);
  display:flex; justify-content:space-around; align-items:center;
  padding:9px 4px; border-radius:15px;
  background:rgba(0,0,0,.4); border:1px solid var(--line);
}
.dv-tabs svg{ width:16px; height:16px; color:var(--ink-3); }
.dv-tabs svg.on{ color:var(--green); filter:drop-shadow(0 0 6px var(--green)); }

/* ---------------- credit card ---------------- */
.zcard{
  --h1:oklch(.70 .26 330); --h2:oklch(.84 .14 198);
  --h3:oklch(.60 .24 292); --h4:oklch(.88 .16 84);
  position:relative; aspect-ratio:1.586; border-radius:14px; overflow:hidden;
  color:#e8eefc; isolation:isolate;
  background:
    radial-gradient(120% 110% at 4% 0%, rgba(96,126,196,.18), transparent 56%),
    linear-gradient(158deg,#1c2333 0%,#0d1119 50%,#090c12 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.85),
              0 0 0 1px rgba(255,255,255,.07), 0 22px 44px -20px rgba(0,0,0,.95);
}
.card-foil{
  position:absolute; top:-2px; right:-2px; bottom:-2px; width:44%; z-index:1;
  clip-path:polygon(46% 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(206deg,
    color-mix(in oklch,var(--h2) 62%,#fff) 0%, var(--h2) 22%, var(--h3) 46%,
    var(--h1) 68%, color-mix(in oklch,var(--h4) 74%,var(--h1)) 88%, var(--h4) 100%);
  opacity:.62;
  mask-image:linear-gradient(100deg,transparent 2%,rgba(0,0,0,.5) 30%,#000 55%);
  -webkit-mask-image:linear-gradient(100deg,transparent 2%,rgba(0,0,0,.5) 30%,#000 55%);
}
.card-guil{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5; mix-blend-mode:soft-light;
  background:repeating-radial-gradient(circle at 116% 44%, rgba(255,255,255,.9) 0 .6px, transparent .6px 4.5px);
  mask-image:radial-gradient(circle at 116% 44%, #000 4%, transparent 58%);
  -webkit-mask-image:radial-gradient(circle at 116% 44%, #000 4%, transparent 58%);
}
.card-sheen{
  position:absolute; inset:-40% -30%; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:.22;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.9) 48%,rgba(190,230,255,.4) 52%,transparent 58%);
  animation:sheen 10s ease-in-out infinite;
}
@keyframes sheen{ 0%{ transform:translateX(-78%) rotate(6deg);} 58%,100%{ transform:translateX(82%) rotate(6deg);} }
.card-flower{
  position:absolute; right:-2px; top:50%; width:38%; aspect-ratio:1; z-index:4;
  transform:translateY(-50%); display:grid; place-items:center; pointer-events:none;
}
.card-flower .b{ position:absolute; inset:0; display:grid; place-items:center; }
.card-flower .b.back{ transform:rotate(24deg) scale(.8); opacity:.4; }
.card-flower .b.front{ transform:rotate(-10deg); }
.card-flower .leaf{ color:#fdffff; }
.card-flower .leaf .lf path{ fill:#fdffff; fill-opacity:.95; stroke:rgba(255,255,255,.55); stroke-width:.5; }
.card-flower .leaf .vein{ stroke:rgba(98,58,150,.32); stroke-width:.65; }
.card-flower .leaf .stem{ stroke:rgba(255,255,255,.55); }
.card-top{ position:absolute; left:5%; top:8%; z-index:5; }
.card-brand{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(8px, 3.1vw, 12px); color:#f2f7ff; display:block;
}
.card-tier{
  font-family:var(--font-mono); font-size:clamp(4px,1.4vw,5.5px); letter-spacing:.3em;
  text-transform:uppercase; color:#8397b4; margin-top:3px; display:block;
}
.card-chip{
  position:absolute; left:5%; top:40%; width:13.5%; aspect-ratio:1.28; border-radius:4px; z-index:5;
  background:linear-gradient(152deg,#fcf3d4 0%,#dcc07f 24%,#a98c46 54%,#f2e3ba 96%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 2px rgba(48,32,0,.6), 0 1px 2.5px rgba(0,0,0,.65);
}
.card-chip::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:.92;
  background:
    linear-gradient(90deg,transparent 30%,rgba(92,68,20,.62) 30% 32.5%,transparent 32.5% 65%,rgba(92,68,20,.62) 65% 67.5%,transparent 67.5%),
    linear-gradient(180deg,transparent 45%,rgba(92,68,20,.62) 45% 50%,transparent 50%);
}
.card-num{
  position:absolute; left:5%; top:60%; z-index:5;
  font-family:var(--font-mono); font-size:clamp(9px,2.9vw,12px); letter-spacing:.1em;
  white-space:nowrap; color:#e9effa;
  text-shadow:0 1px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(0,0,0,.9);
}
.card-meta{
  position:absolute; left:5%; bottom:9%; z-index:5;
  display:flex; align-items:flex-end; gap:8px; max-width:70%;
}
.card-meta span{
  font-family:var(--font-mono); font-size:clamp(5.5px,1.6vw,7.5px); letter-spacing:.1em;
  text-transform:uppercase; color:#93a5bd; white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.7);
}
.card-meta .nm{ color:#d7e2f2; overflow:hidden; text-overflow:ellipsis; }
.card-net{ position:absolute; right:4.5%; bottom:8%; z-index:6; display:flex; }
.card-net i{ width:13px; height:13px; border-radius:50%; display:block; }
.card-net i:first-child{ background:oklch(.66 .22 24); opacity:.92; }
.card-net i:last-child{ background:oklch(.9 .15 92); opacity:.88; margin-left:-6px; mix-blend-mode:screen; }

/* ---------------- marquee strip ---------------- */
.strip{
  border-block:1px solid var(--line);
  overflow:hidden; padding:16px 0;
  background:rgba(10,14,21,.6);
}
.strip-track{ display:flex; gap:0; width:max-content; animation:marquee 42s linear infinite; }
.strip:hover .strip-track{ animation-play-state:paused; }
.strip-item{
  display:inline-flex; align-items:center; gap:12px; padding:0 30px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap;
}
.strip-item b{ color:var(--ink); font-weight:500; }
.strip-item::after{ content:""; width:4px; height:4px; border-radius:50%; background:var(--ink-3); margin-left:18px; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------------- sections ---------------- */
.sec{ padding:clamp(58px, 8vw, 118px) 0; position:relative; }
.sec.tight{ padding:clamp(44px, 6vw, 84px) 0; }
.sec-head{ max-width:760px; margin-bottom:clamp(32px, 4vw, 56px); }
.sec-head .eyebrow{ margin-bottom:18px; }
.sec-head .h2{ margin-bottom:18px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-head.center .eyebrow::before{ display:none; }
.sec-head.center .lede{ margin-inline:auto; }

.hr{ height:1px; background:var(--line); }

/* feature grid */
.feats{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(12px, 1.6vw, 18px);
}
.feat{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg, rgba(20,26,36,.62), rgba(10,14,21,.72));
  padding:clamp(20px, 2.4vw, 28px);
  transition:border-color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease;
}
.feat:hover{ border-color:rgba(160,190,230,.26); transform:translateY(-3px); }
.feat .fi{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  border:1px solid color-mix(in oklch, var(--fc, var(--green)) 34%, transparent);
  background:color-mix(in oklch, var(--fc, var(--green)) 11%, transparent);
  color:var(--fc, var(--green));
  margin-bottom:16px;
}
.feat .fi svg{ width:19px; height:19px; }
.feat h3{ font-size:17px; font-weight:600; letter-spacing:-.015em; margin-bottom:9px; }
.feat p{ font-size:14px; color:#9aa5b5; line-height:1.62; text-wrap:pretty; }
.feat .fig{
  margin-top:18px; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

/* card showcase */
.showcase{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(26px, 4vw, 68px); align-items:center;
}
.card-stack{ position:relative; padding:clamp(8px, 2vw, 22px) 0; }
.card-stack .zcard{ box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07), 0 40px 70px -28px rgba(0,0,0,.95); }
.card-stack::before{
  content:""; position:absolute; inset:8% -4% -12% -4%; z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse at 60% 70%, color-mix(in oklch,var(--blue) 20%, transparent), transparent 66%);
  filter:blur(40px);
}
.specs{ display:flex; flex-direction:column; gap:0; margin-top:26px; }
.spec{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:15px 0; border-bottom:1px solid var(--line); font-size:14.5px;
}
.spec:first-child{ border-top:1px solid var(--line); }
.spec .k{ color:var(--ink-2); }
.spec .v{ font-family:var(--font-mono); font-size:13px; text-align:right; }
.spec .v.hi{ color:var(--green); }

/* coin */
.coin-sec{
  display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(30px, 4vw, 72px); align-items:center;
}
.coin-stage{ display:grid; place-items:center; position:relative; padding:20px 0; }
.coin-stage::after{
  content:""; position:absolute; bottom:2px; width:66%; height:52px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,196,74,.26),transparent 70%); filter:blur(14px);
}
.coin{
  position:relative; width:min(300px, 60vw); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:repeating-conic-gradient(from 0deg,#f6cd63 0 1.3deg,#9a6512 1.3deg 2.6deg);
  box-shadow:0 0 0 1px #6d4409, 0 24px 60px -18px rgba(255,180,50,.55);
  animation:coinTilt 8s ease-in-out infinite;
}
@keyframes coinTilt{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} }
.coin-disc{
  position:absolute; inset:3%; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 32% 24%,#fff7d4 0%,#ffdf92 16%,#eab53f 44%,#b97c15 72%,#7c4c09 100%);
  box-shadow:inset 0 0 0 2px rgba(255,243,200,.5), inset 0 -12px 22px rgba(92,52,0,.45), inset 0 12px 20px rgba(255,255,220,.4);
}
.coin-disc::after{
  content:""; position:absolute; inset:-35%;
  background:conic-gradient(from 0deg, transparent 0deg 34deg, rgba(255,255,235,.8) 58deg, transparent 92deg 360deg);
  animation:sheenSpin 7s linear infinite; mix-blend-mode:screen; opacity:.55;
}
@keyframes sheenSpin{ to{ transform:rotate(360deg);} }
.coin-ring{ position:absolute; inset:0; width:100%; height:100%; animation:spin 34s linear infinite; }
.coin-ring text{ font-family:var(--font-display); font-weight:600; font-size:11px; fill:#7d4c08; letter-spacing:.3em; opacity:.9; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.coin .leaf{ position:absolute; width:74%; height:74%; color:#8a5408; z-index:2;
  filter:drop-shadow(0 1.5px 0 rgba(255,248,214,.85)) drop-shadow(0 -1.5px 0 rgba(58,30,0,.5)); }
.coin .leaf .vein{ stroke:rgba(255,240,196,.6); stroke-width:.9; }
.coin .leaf svg{ animation:sway 6s ease-in-out infinite; transform-origin:50% 86%; }

.coin-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
.cstat{ border:1px solid var(--line); border-radius:15px; padding:15px 16px; background:var(--panel); }
.cstat .n{
  font-family:var(--font-display); font-weight:300; font-size:23px; letter-spacing:-.03em;
  margin-top:6px; color:var(--gold);
}
.cstat .l{ font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }

/* fees */
.fees{
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg, rgba(20,26,36,.5), rgba(10,14,21,.6));
}
.fee{
  display:grid; grid-template-columns:1.4fr .8fr; gap:16px; align-items:center;
  padding:18px clamp(18px, 2.4vw, 28px);
  border-bottom:1px solid var(--line);
  transition:background .18s ease;
}
.fee:hover{ background:rgba(140,170,220,.045); }
.fee:last-child{ border-bottom:0; }
.fee .n{ font-size:15.5px; }
.fee .d{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; }
.fee .p{
  font-family:var(--font-mono); font-size:13px; text-align:right;
  letter-spacing:.06em; text-transform:uppercase;
}
.fee .p.zero{ color:var(--green); }
.fee-head{
  display:grid; grid-template-columns:1.4fr .8fr; gap:16px;
  padding:13px clamp(18px, 2.4vw, 28px);
  background:rgba(0,0,0,.28); border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.fee-head span:last-child{ text-align:right; }

/* app previews */
.previews{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2.4vw, 34px); align-items:end;
  padding-top:10px;
}
.pv{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.pv:nth-child(1){ --dw:262px; }
.pv:nth-child(2){ --dw:300px; }
.pv:nth-child(3){ --dw:262px; }
.pv:nth-child(1) .device{ --tilt:-3.5deg; }
.pv:nth-child(3) .device{ --tilt:3.5deg; }
.pv .cap{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); text-align:center;
}

/* try-it banner */
.tryit{
  position:relative; overflow:hidden;
  border:1px solid var(--line-2); border-radius:26px;
  padding:clamp(26px, 4vw, 46px);
  background:
    radial-gradient(ellipse 60% 90% at 90% 10%, color-mix(in oklch,var(--green) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(20,26,36,.7), rgba(10,14,21,.8));
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px, 4vw, 48px); flex-wrap:wrap;
}
.tryit .txt{ max-width:640px; }
.tryit .h2{ margin-bottom:14px; }
.tryit .acts{ display:flex; gap:10px; flex-wrap:wrap; }

/* final cta */
.cta-sec{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(64px, 9vw, 130px) 0;
  border-top:1px solid var(--line);
}
.cta-sec::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 60% at 50% 8%, color-mix(in oklch,var(--green) 17%, transparent), transparent 66%),
    radial-gradient(ellipse 40% 46% at 14% 92%, color-mix(in oklch,var(--blue) 11%, transparent), transparent 68%),
    radial-gradient(ellipse 40% 46% at 86% 92%, color-mix(in oklch,var(--red) 9%, transparent), transparent 68%);
}
.cta-sec .wrap{ position:relative; z-index:1; }
.cta-sec .leaf.big{ width:64px; height:64px; margin:0 auto 26px; }
.cta-sec .h2{ margin-bottom:18px; }
.cta-sec .lede{ margin-inline:auto; margin-bottom:30px; }
.cta-acts{ display:flex; gap:11px; justify-content:center; flex-wrap:wrap; }

/* footer */
.foot{ border-top:1px solid var(--line); padding:clamp(38px, 5vw, 64px) 0 34px; }
.foot-grid{
  display:grid; grid-template-columns:1.5fr repeat(3, 1fr);
  gap:clamp(24px, 4vw, 52px);
  padding-bottom:38px;
}
.foot-brand .brand{ margin-bottom:16px; }
.foot-brand p{ max-width:34ch; }
.foot h4{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:15px; font-weight:400;
}
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.foot li a{ font-size:13.5px; color:var(--ink-2); transition:color .16s ease; }
.foot li a:hover{ color:var(--ink); }
.foot-legal{
  border-top:1px solid var(--line); padding-top:26px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:11.5px; color:var(--ink-3); line-height:1.65;
}
.foot-legal p{ max-width:74ch; }
.foot-legal .meta{ font-family:var(--font-mono); letter-spacing:.1em; font-size:10px; text-transform:uppercase; }

/* ---------------- reveal ----------------
   Hidden-until-revealed only applies when JS is running (html.js),
   so the page can never render blank without it. */
html.js .rv{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
html.js .rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.07s; } .rv.d2{ transition-delay:.14s; }
.rv.d3{ transition-delay:.21s; } .rv.d4{ transition-delay:.28s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-copy{ max-width:640px; }
  .hero-art{ order:2; }
  .hero-art .device{ --dw:290px; }
  .showcase{ grid-template-columns:1fr; gap:38px; }
  .card-stack{ max-width:520px; }
  .coin-sec{ grid-template-columns:1fr; gap:36px; }
  .coin-stage{ order:-1; }
  .feats{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .nav-links, .nav-cta .btn.ghost{ display:none; }
  .menu-btn{ display:grid; }
  .nav-cta{ margin-left:0; }
  .nav-cta .btn{ min-height:42px; padding:0 16px; font-size:13px; }
  .previews{ grid-template-columns:1fr; gap:34px; max-width:420px; margin-inline:auto; }
  .pv:nth-child(1), .pv:nth-child(3){ --dw:290px; }
  .pv:nth-child(2){ --dw:310px; }
  .pv:nth-child(1) .device, .pv:nth-child(3) .device{ --tilt:0deg; }
  .tryit{ flex-direction:column; align-items:flex-start; }
  .tryit .acts{ width:100%; }
  .tryit .acts .btn{ flex:1 1 auto; }
}

@media (max-width:640px){
  :root{ --maxw:100%; }
  body{ font-size:15.5px; }
  .nav-inner{ height:62px; gap:8px; }
  .mobile-menu{ inset:62px 0 0; }
  .brand{ min-width:0; }
  .brand .nm{ white-space:normal; line-height:1.15; }
  .nav-cta{ display:none; }
  .menu-btn{ margin-left:auto; }
  .hero{ padding-top:26px; }
  .hero-art .device{ --dw:min(300px, 82vw); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .card-stack{ max-width:none; }
  .coin{ width:min(260px, 68vw); }
  .coin-stats{ grid-template-columns:1fr 1fr; }
  .fees{ border-radius:18px; }
  .fee, .fee-head{ grid-template-columns:1fr auto; }
  .fee .d{ font-size:11.5px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:26px 18px; }
  .foot-legal{ flex-direction:column; gap:14px; }
  .cta-acts{ flex-direction:column; align-items:stretch; }
  .cta-acts .btn{ width:100%; }
  .strip-item{ padding:0 20px; font-size:10px; }
  .sec-head.center{ text-align:left; }
  .sec-head.center .eyebrow{ justify-content:flex-start; }
  .sec-head.center .eyebrow::before{ display:block; }
  .sec-head.center .lede{ margin-inline:0; }
}

@media (max-width:430px){
  .brand .nm{ font-size:11px; }
  .brand .mark{ width:30px; height:30px; border-radius:9px; }
  .brand .mark .leaf{ width:20px; height:20px; }
  .coin-stats{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .mobile-menu a{ font-size:18px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html.js .rv{ opacity:1; transform:none; }
}