:root{
  --bg:#000;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --t1:#F3F5F4;--t2:#9BA5A0;--t3:#5D6762;--dim:rgba(243,245,244,.42);--inv:#04130C;
  --brand:#2FD89B;--mint:#A6F4C5;--deep:#0E4A33;
  --profit:#34D399;--loss:#FF5D6E;--liq:#FFB240;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:20px;
  color-scheme:dark;
}
/* Product is dark-only by design */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#000;--t1:#F3F5F4}}
:root[data-theme="dark"]{--bg:#000;--t1:#F3F5F4}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px)}
.up{color:var(--profit)}.dn{color:var(--loss)}.am{color:var(--liq)}.mint{color:var(--mint)}
.muted{color:var(--t2)}
.fine{color:var(--t3);font-size:12.5px;margin-top:18px}

/* ---------- Type ---------- */
.h1{font-size:clamp(40px,5.6vw,72px);line-height:1.04;letter-spacing:-.035em;font-weight:500;max-width:820px}
.h2{font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-.03em;font-weight:500}
.h3{font-size:clamp(21px,2vw,26px);line-height:1.15;letter-spacing:-.02em;font-weight:500}
.dim{color:var(--dim)}
.center{text-align:center}
.sub{font-size:clamp(16px,1.3vw,18px);color:var(--t2);max-width:520px;line-height:1.6}

/* Badge with a 4-point spark */
.badge{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px 0 14px;border-radius:99px;font-size:14.5px;color:var(--t1);
  background:radial-gradient(80% 120% at 50% 120%,rgba(47,216,155,.28),rgba(47,216,155,.04));border:1px solid rgba(47,216,155,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.spark{width:16px;height:16px;background:linear-gradient(135deg,var(--mint),var(--brand));clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 6px var(--brand))}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:99px;font-weight:500;font-size:15.5px;white-space:nowrap;color:var(--inv);
  background:linear-gradient(180deg,#6FF0C0 0%,#2FD89B 45%,#17A876 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(0,60,35,.35),0 8px 30px -6px rgba(47,216,155,.6);
  transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(0,60,35,.35),0 14px 40px -6px rgba(47,216,155,.8)}
.btn span{transition:transform .3s var(--ease)}.btn:hover span{transform:translateX(3px)}
.btn-ghost{color:var(--t1);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(47,216,155,.5),0 10px 30px -10px rgba(47,216,155,.4)}
.btn-sm{height:42px;padding:0 20px;font-size:14.5px}
.btn-lg{height:54px;padding:0 28px;font-size:16px}

/* ---------- Glass ---------- */
.glass{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -20px rgba(0,0,0,.8)}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px clamp(16px,3.4vw,40px);transition:background .3s,padding .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(0,0,0,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line);padding-block:12px}
.brand img{width:132px}
.links{display:flex;gap:32px;font-size:15px;color:rgba(243,245,244,.85)}
.links a{transition:color .2s}.links a:hover{color:var(--mint)}
.nav .btn{justify-self:end}
@media (max-width:900px){.links{display:none}.nav{grid-template-columns:1fr auto}.brand img{width:116px}}

/* ================= HERO ================= */
.hero{position:relative;padding-top:clamp(120px,15vh,160px);overflow:hidden}
.hero-top-glow{position:absolute;left:50%;top:-320px;width:1200px;height:620px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(47,216,155,.28),rgba(14,74,51,.18) 50%,transparent);pointer-events:none}
.hero-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.hero-copy .sub{margin-top:-4px}

.stage{position:relative;height:clamp(520px,58vw,700px);margin-top:clamp(40px,6vw,70px);perspective:1400px}
.stage::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,#000 85%);z-index:6;pointer-events:none}
.rays{position:absolute;left:-10%;right:-10%;top:-10%;height:120%;pointer-events:none;
  background:repeating-conic-gradient(from 180deg at 50% 62%,rgba(47,216,155,0) 0deg 5deg,rgba(166,244,197,.34) 6.5deg,rgba(47,216,155,0) 8deg 13deg);
  -webkit-mask-image:radial-gradient(ellipse 58% 50% at 50% 58%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 58% 50% at 50% 58%,#000 20%,transparent 75%);filter:blur(1.5px);opacity:.9;animation:rays 18s linear infinite}
@keyframes rays{50%{opacity:.6}}
.horizon{position:absolute;left:-5%;right:-5%;top:46%;height:240px;pointer-events:none;background:radial-gradient(50% 40% at 50% 50%,rgba(166,244,197,.7),rgba(47,216,155,.45) 30%,rgba(14,74,51,.3) 60%,transparent 78%);filter:blur(22px)}

.phone-wrap{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;z-index:3;pointer-events:none}
.phone{position:relative;width:clamp(250px,24vw,320px);aspect-ratio:460/1000;border-radius:48px;padding:10px;background:linear-gradient(150deg,#5a605d,#1a1d1c 22%,#0c0e0d 60%,#2b302e);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 4px #050605,0 40px 100px -20px rgba(0,0,0,.9),0 0 90px -20px rgba(47,216,155,.6)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:39px}
.island{position:absolute;left:50%;top:22px;width:30%;height:26px;translate:-50% 0;border-radius:99px;background:#000;z-index:1}

.w,.tilt{position:absolute;z-index:4;border-radius:18px;transition:transform .6s var(--ease)}
.w{padding:16px;font-size:13px}
.w small{display:block;color:var(--t2);font-size:12px}
.w b{font-weight:500}
.w .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ci{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600;color:#fff;flex:none}
.ci-btc{background:#F7931A}.ci-eth{background:#627EEA}
.pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 4px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:13px}
.pill:not(:has(.ci)){padding:0 12px}
.pill .ci{width:24px;height:24px;font-size:12px}
.pill.sm{height:28px;font-size:12px;color:var(--t2)}
.w-size{left:calc(50% - 600px);top:70px;width:280px;display:grid;gap:14px}
.w-size .mid b{font-size:40px;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.w-foot{text-align:center;color:var(--t2);font-size:12.5px}
.w-eth,.w-btc{display:flex;align-items:center;gap:10px;width:280px;padding:12px 14px}
.w-eth .r,.w-btc .r{margin-left:auto;text-align:right}
.w-eth b,.w-btc b{font-size:14px}
.w-eth{left:calc(50% - 600px);top:290px}
.w-btc{right:calc(50% - 600px);top:230px}
.spark-svg{width:64px;height:26px;fill:none;stroke:var(--profit);stroke-width:2;stroke-linejoin:round}
.w-pnl{right:calc(50% - 600px);top:70px;display:flex;gap:10px;padding:0}
.card-g{width:160px;padding:14px;border-radius:16px;display:grid;gap:2px;color:var(--inv);background:linear-gradient(140deg,#8CF5CE,#2FD89B 45%,#13865D);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 20px 50px -15px rgba(47,216,155,.6)}
.card-g small{color:rgba(4,19,12,.7)}
.card-g b{font-size:22px;letter-spacing:-.02em}
.card-g span{font-size:11.5px;color:rgba(4,19,12,.7)}
.card-d{width:110px;padding:14px;border-radius:16px;display:grid;align-content:space-between}
.card-d b{font-size:20px;font-weight:500}
.w-liq{right:calc(50% - 600px);top:390px;width:280px;display:grid;gap:6px}
.w-liq>b{font-size:24px}
.meter{position:relative;display:grid;grid-template-columns:20fr 20fr 60fr;gap:3px;margin-top:4px}
.meter i{height:4px;border-radius:2px;background:var(--loss)}
.meter i:nth-child(2){background:var(--liq)}.meter i:nth-child(3){background:var(--profit)}
.meter span{position:absolute;top:-4px;left:38%;width:2px;height:12px;border-radius:1px;background:var(--t1);transition:left .8s var(--ease)}
.tilt{z-index:2;width:170px;height:230px;padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.tilt-l{left:calc(50% - 300px);top:200px;transform:rotateY(28deg) rotateZ(-6deg)}
.tilt-r{right:calc(50% - 300px);top:250px;transform:rotateY(-28deg) rotateZ(8deg)}
.t-k{font-size:11px;color:var(--t2);font-family:var(--mono)}
.candles{width:100%;flex:1;margin:8px 0}
.tilt-r .row{display:flex;align-items:center;gap:8px;font-size:13px}
.tilt-r .ci{width:24px;height:24px;font-size:12px}
.tilt-r .spark-svg{width:100%;height:auto;stroke:var(--profit);margin-top:auto}

@media (max-width:1240px){
  .w-size,.w-eth{left:16px}.w-pnl,.w-btc,.w-liq{right:16px}
}
@media (max-width:900px){
  .tilt,.w-eth,.w-pnl,.w-btc{display:none}
  .w-size{left:50%;top:auto;bottom:30%;margin-left:-260px;scale:.78;transform-origin:left}
  .w-liq{right:50%;top:auto;bottom:44%;margin-right:-250px;scale:.82;transform-origin:right}
}
@media (max-width:560px){
  .w-size{left:8px;margin-left:0;bottom:32%;scale:.66}
  .w-liq{right:8px;margin-right:0;bottom:50%;scale:.7}
}

/* ================= EXCHANGES ================= */
.logos{display:grid;justify-items:center;gap:22px;padding:clamp(40px,6vw,80px) 0 clamp(80px,9vw,120px)}
.marquee{width:100%;overflow:hidden;margin-top:24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 36s linear infinite}
@keyframes marquee{to{transform:translateX(calc(-50% - 7px))}}
.chip{display:inline-flex;align-items:center;gap:10px;height:68px;padding:0 26px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(47,216,155,.06),rgba(255,255,255,.01));color:rgba(243,245,244,.75);font-size:16px;white-space:nowrap}
.ex{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600}
.ex-bn{background:#F0B90B;color:#1a1400}.ex-by{background:#17181E;color:#F7A600;border:1px solid #333}.ex-bx{background:#2A55E5;color:#fff}

/* ================= STATS ================= */
.stats{padding-bottom:clamp(80px,10vw,140px)}
.stats-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.photo-card{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;box-shadow:0 30px 80px -40px rgba(47,216,155,.45)}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.photo-card:hover img{transform:scale(1.04)}
.stat{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.stat:first-child{padding-top:0}
.stat b{font-size:clamp(48px,5vw,64px);font-weight:400;letter-spacing:-.03em;line-height:1}
.stat>span{color:var(--t1);text-align:right;font-size:16px}
.stat>span small{display:block;color:var(--t3);font-size:13px;margin-top:2px}
@media (max-width:860px){.stats-grid{grid-template-columns:1fr}}

/* Rolling digits */
.roll{display:inline-flex;align-items:flex-start;overflow:hidden;font-variant-numeric:tabular-nums;vertical-align:top}
.roll .sep{display:inline-block;height:1.1em;line-height:1.1em}
.roll .dg{display:inline-block;height:1.1em;line-height:1.1em;overflow:hidden}
.roll .dg i{display:block;font-style:normal;transition:transform 1.2s var(--ease)}
.roll .dg i b{display:block;font-weight:inherit;height:1.1em}

/* ================= Sections & cards ================= */
.sec{padding-bottom:clamp(90px,11vw,150px)}
.sec-head{display:grid;gap:20px;margin-bottom:clamp(36px,5vw,56px)}
.sec-head.split{grid-template-columns:1.3fr 1fr;align-items:end;gap:20px 60px}
.sec-head.split>div{display:grid;gap:20px;justify-items:start}
.sec-head.split>.muted{max-width:380px;justify-self:end}
.sec-head.center{justify-items:center;text-align:center}
.sec-head.center .muted{max-width:440px}
.sec-head:not(.split):not(.center){justify-items:start}
.narrow{max-width:400px}
@media (max-width:860px){.sec-head.split{grid-template-columns:1fr}.sec-head.split>.muted{justify-self:start}}

.card{position:relative;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(90% 70% at 50% 0%,rgba(47,216,155,.16),rgba(47,216,155,0) 70%),linear-gradient(180deg,#07100C,#030504)}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.sec-head+.cards-3,.sec-head+.cards-2{margin-top:0}
@media (max-width:860px){.cards-2,.cards-3{grid-template-columns:1fr}}

.card-wide{display:grid;grid-template-columns:1fr 1.25fr;min-height:clamp(320px,30vw,400px);
  background:radial-gradient(70% 130% at 0% 0%,rgba(111,240,192,.55),rgba(47,216,155,.28) 25%,rgba(14,74,51,.25) 50%,rgba(0,0,0,0) 75%),linear-gradient(180deg,#06100B,#020403)}
.card-wide::before{content:"";position:absolute;left:-10%;top:-30%;width:70%;height:120%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);pointer-events:none}
.card-wide-text{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:clamp(22px,2.6vw,32px)}
.card-wide-text .h3{font-size:clamp(26px,2.6vw,34px)}
.card-wide-text .muted{color:rgba(243,245,244,.8);max-width:380px}
.mock{position:relative;align-self:end;margin:clamp(24px,4vw,40px) clamp(16px,3vw,40px) 0 0;height:clamp(240px,24vw,300px)}
.mock-panel{position:absolute;inset:14px 0 0 0;border-radius:16px 16px 0 0;border:1px solid rgba(255,255,255,.1);border-bottom:0;background:linear-gradient(180deg,rgba(25,32,29,.95),rgba(10,14,12,.95));padding:20px}
.mock-panel.back{inset:0 24px 0 24px;opacity:.5;background:rgba(25,32,29,.6)}
.mp-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:18px}
.mp-head .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:8px;box-shadow:0 0 8px var(--brand)}
.crumb{color:var(--t2);font-size:12.5px}
.mp-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.mp-col{display:grid;gap:10px}
.mp-field{border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);padding:12px 14px;display:grid;gap:6px}
.mp-field small{color:var(--t2);font-size:12px}
.mp-field b{font-family:var(--mono);font-weight:500;font-size:15px}
.mp-track{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.08);margin:8px 0 4px}
.mp-track i{position:absolute;inset:0 auto 0 0;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--mint));width:20%}
.mp-track b{position:absolute;top:50%;left:20%;translate:-50% -50%;font:300 20px var(--sans);color:var(--t1)}
.mp-val{font-family:var(--mono);font-size:12.5px;color:var(--t2)}
.mp-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.mp-opts p{grid-column:1/-1;font-size:12.5px;margin-bottom:2px}
.opt{display:grid;gap:4px;justify-items:start;padding:10px;border-radius:10px;background:rgba(255,255,255,.04);font-size:15px;color:var(--t2)}
.opt span{font-size:11.5px}
.opt.on{background:rgba(47,216,155,.12);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(47,216,155,.3)}
@media (max-width:860px){.card-wide{grid-template-columns:1fr}.mock{margin:0 16px}}

/* Visual cards */
.card-vis{display:flex;flex-direction:column;padding:0 clamp(22px,2.6vw,32px) clamp(22px,2.6vw,32px);min-height:clamp(340px,30vw,400px);
  background:radial-gradient(70% 60% at 50% 0%,rgba(47,216,155,.2),rgba(47,216,155,0) 70%),radial-gradient(60% 50% at 0% 100%,rgba(14,74,51,.45),rgba(14,74,51,0) 70%),linear-gradient(180deg,#06100B,#020403)}
.card-vis.tall{min-height:clamp(380px,34vw,460px)}
.card-vis.small{min-height:300px}
.card-vis .h3{margin-bottom:8px}
.card-vis .muted{max-width:420px;font-size:15px}
.vis{position:relative;flex:1;display:grid;place-items:center;min-height:180px}
.node{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--t1);background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.18),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);box-shadow:0 0 30px -6px rgba(47,216,155,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.node svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.vis-digits .digits{position:relative;z-index:1;display:flex;gap:10px}
.vis-digits .digits span{width:48px;height:58px;border-radius:12px;display:grid;place-items:center;font-size:28px;font-weight:500;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px -10px rgba(0,0,0,.8)}
.vis-digits .digits span:nth-child(2){width:24px;background:none;border:0;box-shadow:none}
.vis-digits .node{position:absolute;left:50%;translate:-50% 0;z-index:1}
.vis-digits .node.top{top:2px;color:var(--liq)}.vis-digits .node.bot{bottom:2px;color:var(--mint)}
.wires{position:absolute;inset:0;width:100%;height:100%}
.wires path{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:4 4;animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-80}}

.vis-arcs{overflow:hidden}
.arc{position:absolute;left:50%;top:-40%;translate:-50% 0;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.a1{width:180px;height:180px;border-color:rgba(47,216,155,.4);box-shadow:0 0 40px -10px rgba(47,216,155,.6) inset}
.a2{width:320px;height:320px;top:-80%}.a3{width:480px;height:480px;top:-125%}
.vis-arcs .node{position:absolute;left:50%;translate:-50% 0}
.vis-arcs .n1{top:14%}.vis-arcs .n2{top:62%}
.pt{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(243,245,244,.5);box-shadow:0 0 10px rgba(166,244,197,.6)}
.p1{left:22%;top:30%}.p2{right:22%;top:30%}.p3{left:32%;top:60%;width:6px;height:6px}.p4{right:30%;top:58%;width:6px;height:6px}
.vis-arcs .arc{animation:breathe 5s ease-in-out infinite}.a2{animation-delay:-1.6s!important}.a3{animation-delay:-3.2s!important}
@keyframes breathe{50%{opacity:.4}}

.vis-hex{min-height:240px}
.hex{position:absolute;width:86px;height:98px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));display:grid;place-items:center}
.hex b{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.22),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2)}
.x0{left:calc(50% - 43px);top:calc(50% - 49px);background:linear-gradient(180deg,rgba(47,216,155,.3),rgba(47,216,155,.05))}
.x1{left:calc(50% - 43px);top:calc(50% - 49px - 92px)}
.x2{left:calc(50% - 43px - 82px);top:calc(50% - 49px + 46px)}
.x3{left:calc(50% - 43px + 82px);top:calc(50% - 49px + 46px)}
.x4{left:calc(50% - 43px - 82px);top:calc(50% - 49px - 46px);opacity:.5}
.x5{left:calc(50% - 43px + 82px);top:calc(50% - 49px - 46px);opacity:.5}
.x6{left:calc(50% - 43px);top:calc(50% - 49px + 92px);opacity:.5}

.vis-stress{display:grid;gap:18px;align-content:center;place-items:stretch;width:min(380px,100%);margin:0 auto}
.srow{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;font-family:var(--mono);font-size:13.5px}
.srow span{color:var(--t2)}
.srow b{font-weight:500}
.sbar{height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.sbar i{display:block;height:100%;width:var(--w);border-radius:4px;background:linear-gradient(90deg,#c43a4a,var(--loss));transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .3s}
.sbar.amber i{background:linear-gradient(90deg,#c9861c,var(--liq))}
.in .sbar i{transform:none}

.vis-bell .ring{position:absolute;border-radius:50%;border:1px solid rgba(47,216,155,.35);animation:ping 3s var(--ease) infinite}
.r1{width:80px;height:80px}.r2{width:80px;height:80px;animation-delay:-1.5s!important}
@keyframes ping{from{transform:scale(.7);opacity:1}to{transform:scale(2.2);opacity:0}}
.vis-steps{display:flex;align-items:flex-end;justify-content:center;gap:10px;place-items:end center;padding-bottom:30px}
.vis-steps i{width:26px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,rgba(47,216,155,.6),rgba(47,216,155,.08));border:1px solid rgba(47,216,155,.35)}
.vis-steps i:nth-child(1){height:30px}.vis-steps i:nth-child(2){height:50px}.vis-steps i:nth-child(3){height:70px}.vis-steps i:nth-child(4){height:90px}.vis-steps i:nth-child(5){height:110px}
.lot{position:absolute;top:24px;right:20%;font-family:var(--mono);font-size:12px;color:var(--mint);padding:4px 10px;border-radius:99px;border:1px solid rgba(47,216,155,.35);background:rgba(47,216,155,.08)}
.vis-pro{display:flex;align-items:center;justify-content:center;gap:12px}
.vis-pro span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--mint);background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.16),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14)}
.vis-pro span:nth-child(1),.vis-pro span:nth-child(5){opacity:.5;scale:.85}
.vis-pro b{font-family:var(--mono);font-size:15px;letter-spacing:.1em;padding:12px 18px;border-radius:12px;color:var(--inv);background:linear-gradient(180deg,#8CF5CE,#2FD89B);box-shadow:0 0 30px -4px rgba(47,216,155,.7)}

/* ================= Coins ================= */
.coins{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.coin{border-radius:var(--r);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:2px;min-height:230px;
  background:radial-gradient(90% 60% at 50% 120%,rgba(47,216,155,.18),rgba(47,216,155,0) 70%),linear-gradient(180deg,#050a08,#020302);transition:border-color .3s,transform .4s var(--ease)}
.coin:hover{border-color:rgba(47,216,155,.35);transform:translateY(-4px)}
.coin .tile-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);margin-bottom:18px}
.coin .tile-ic span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff}
.coin h3{font-size:22px;font-weight:500;letter-spacing:-.01em}
.coin .nm{color:var(--t2);font-size:14px}
.coin .chg{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:13.5px;font-family:var(--mono)}
.coin .chg svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.coin .px{font-size:26px;font-weight:400;letter-spacing:-.02em}
@media (max-width:1000px){.coins{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.coins{gap:10px}.coin{padding:16px;min-height:200px}.coin .px{font-size:21px}}

/* ================= How it works ================= */
.step{padding:clamp(22px,2.6vw,32px);display:grid;gap:12px;align-content:start;min-height:240px;
  background:radial-gradient(70% 70% at 30% 0%,rgba(47,216,155,.14),rgba(47,216,155,0) 70%),linear-gradient(180deg,#06100B,#020403)}
.step .tile{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:20px;font-weight:500;color:var(--inv);margin-bottom:22px;background:linear-gradient(180deg,#8CF5CE,#2FD89B 60%,#17A876);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px -8px rgba(47,216,155,.7)}

/* ================= Calculator ================= */
.calc-sec{border-top:1px solid var(--line);padding:clamp(80px,10vw,130px) 0;margin-bottom:clamp(90px,11vw,150px);
  background:radial-gradient(50% 70% at 0% 0%,rgba(14,74,51,.5),rgba(14,74,51,0) 70%),radial-gradient(40% 45% at 100% 70%,rgba(47,216,155,.12),rgba(47,216,155,0) 70%)}
.calc-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:center}
.calc-copy{display:grid;gap:22px;justify-items:start}
.calc-panel{border-radius:24px;padding:clamp(18px,2.2vw,26px);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.calc-in{display:grid;gap:18px;align-content:start}
.seg{display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(255,255,255,.05);justify-self:start}
.seg button{height:36px;padding:0 16px;border-radius:99px;font-weight:500;font-size:14px;color:var(--t2);transition:background .2s,color .2s}
.seg button.on{background:var(--t1);color:#0A0D0B}
.field{display:grid;gap:8px;min-width:0}
.field>span{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--t2)}
.field>span.dn{color:var(--loss)}.field>span.up{color:var(--profit)}
.field em{font-style:normal;font-family:var(--mono);color:var(--t1)}
.field input[type=number]{width:100%;height:46px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line);padding:0 12px;font:500 15px var(--mono);color:var(--t1);transition:border-color .2s;-moz-appearance:textfield}
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.field input[type=number]:focus{outline:none;border-color:var(--brand)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--mint)) 0/var(--v,20%) 100% no-repeat,rgba(255,255,255,.08);margin:8px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--t1);box-shadow:0 0 0 6px rgba(166,244,197,.15);cursor:grab}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--t1);box-shadow:0 0 0 6px rgba(166,244,197,.15)}
.calc-out{display:grid;gap:12px;align-content:start}
.out-hero{border-radius:16px;padding:18px;color:var(--inv);background:linear-gradient(140deg,#8CF5CE,#2FD89B 50%,#13865D);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.out-hero small{display:block;color:rgba(4,19,12,.7);font-size:12.5px}
.size{font-size:clamp(40px,4vw,52px);font-weight:400;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.size em{font-style:normal;font-size:.32em;margin-left:6px;letter-spacing:0;color:rgba(4,19,12,.7)}
.out-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-card{border-radius:12px;padding:12px;border:1px solid var(--line);background:rgba(0,0,0,.3)}
.mini-card small{display:block;color:var(--t2);font-size:12px}
.mini-card b{font-family:var(--mono);font-weight:500;font-size:15px;white-space:nowrap}
.warn{font-size:13px;color:var(--liq);background:rgba(255,178,64,.08);border:1px solid rgba(255,178,64,.25);padding:10px 12px;border-radius:12px}
.calc-out .fine{margin-top:0}
@media (max-width:960px){.calc-grid{grid-template-columns:1fr}}
@media (max-width:620px){.calc-panel{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr 1fr}}

/* ================= Pricing ================= */
.billing{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}
.b-lbl{font-size:16px;color:var(--t2);transition:color .2s}.b-lbl.on{color:var(--t1)}
.toggle{position:relative;width:48px;height:28px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--line2)}
.toggle i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:linear-gradient(180deg,#8CF5CE,#2FD89B);box-shadow:0 0 12px var(--brand);transition:transform .35s var(--ease)}
.toggle[aria-checked="true"] i{transform:translateX(20px)}
.tag{display:inline-block;font-size:12px;font-weight:500;color:var(--mint);padding:4px 10px;border-radius:99px;background:rgba(47,216,155,.12);border:1px solid rgba(47,216,155,.3)}
.plans{max-width:920px;margin:0 auto}
.plan{padding:clamp(24px,3vw,36px);display:grid;gap:16px;align-content:start;background:linear-gradient(180deg,#07100C,#020403)}
.plan h3{font-size:20px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
.plan .price{display:flex;align-items:baseline;gap:6px}
.plan .price b{font-size:52px;font-weight:400;letter-spacing:-.04em;line-height:1}
.plan .price span{color:var(--t2)}
.plan .btn{justify-self:stretch;margin:6px 0 8px}
.plan-pro{border-color:rgba(47,216,155,.35);background:radial-gradient(90% 60% at 50% 0%,rgba(47,216,155,.25),rgba(47,216,155,0) 70%),linear-gradient(180deg,#07130E,#020403);box-shadow:0 30px 80px -40px rgba(47,216,155,.5)}
.checks{display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.checks li{position:relative;padding-left:28px;font-size:15px;color:rgba(243,245,244,.88)}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:rgba(47,216,155,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6F4C5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}

/* ================= FAQ ================= */
.faq{border-bottom:1px solid var(--line)}
.q{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:12px 40px;align-items:center;padding:30px 60px 30px 0;border-top:1px solid var(--line)}
.q button{display:flex;gap:10px;font-size:clamp(16px,1.5vw,19px);transition:color .2s}
.q button:hover{color:var(--mint)}
.q button::before{content:"";position:absolute;inset:0}
.qn{color:var(--t2)}
.q i{position:absolute;right:4px;top:50%;width:20px;height:20px;translate:0 -50%}
.q i::before,.q i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--t1);transition:transform .35s var(--ease)}
.q i::after{transform:rotate(90deg)}
.q.open i::after{transform:rotate(0)}
.qa{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .4s}
.qa>p{overflow:hidden;color:var(--t2);font-size:15px;max-width:440px}
.q.open .qa{grid-template-rows:1fr;opacity:1}
.q:not(.open) .qa{grid-column:2}
@media (max-width:760px){.q{grid-template-columns:1fr}.q:not(.open) .qa{grid-column:1}}

/* ================= CTA ================= */
.cta{position:relative;overflow:hidden;isolation:isolate;border-radius:32px;border:1px solid rgba(47,216,155,.22);display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:20px;min-height:600px;padding:clamp(40px,5vw,72px) 0 0 clamp(28px,5vw,72px);
  background:linear-gradient(180deg,#04110B 0%,#020604 100%);box-shadow:0 60px 140px -60px rgba(47,216,155,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.cta-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cta-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(166,244,197,.16) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 80% at 72% 70%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 72% 70%,#000,transparent 75%)}
.cta-rays{position:absolute;left:30%;right:-20%;top:-10%;bottom:-30%;
  background:repeating-conic-gradient(from 180deg at 50% 78%,rgba(47,216,155,0) 0deg 5deg,rgba(166,244,197,.28) 6.5deg,rgba(47,216,155,0) 8deg 13deg);
  -webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 78%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 50% 55% at 50% 78%,#000 15%,transparent 72%);filter:blur(1.5px)}
.cta-horizon{position:absolute;left:35%;right:-15%;bottom:-120px;height:320px;border-radius:50%;background:radial-gradient(50% 45% at 50% 50%,rgba(166,244,197,.6),rgba(47,216,155,.35) 35%,rgba(14,74,51,.2) 60%,transparent 75%);filter:blur(20px)}
.cta::after{content:"";position:absolute;left:-10%;top:-40%;width:60%;height:120%;z-index:-1;background:radial-gradient(closest-side,rgba(47,216,155,.14),transparent);pointer-events:none}

.cta-copy{display:grid;gap:22px;justify-items:start;padding-bottom:clamp(40px,5vw,72px);position:relative;z-index:2}
.app-id{display:flex;align-items:center;gap:14px}
.app-icon{width:64px;height:64px;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 14px 40px -10px rgba(47,216,155,.7)}
.app-id b{display:block;font-weight:500;font-size:17px}
.app-id span{font-size:13.5px;color:var(--t2)}
.cta .h2{font-size:clamp(34px,4.4vw,58px);max-width:520px}
.cta .muted{max-width:440px;font-size:17px;color:rgba(243,245,244,.72)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.store-badge{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 22px 0 18px;border-radius:14px;background:#F3F5F4;color:#000;box-shadow:0 10px 30px -8px rgba(166,244,197,.45);transition:transform .3s var(--ease),box-shadow .3s}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(166,244,197,.7)}
.store-badge svg{width:28px;height:28px}
.store-badge span{display:grid;font-size:20px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.store-badge small{font-size:11.5px;font-weight:500;letter-spacing:0}
.cta .btn-ghost{height:56px;border-radius:14px}
.cta-facts{display:flex;gap:0;margin-top:10px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.25);backdrop-filter:blur(8px)}
.cta-facts li{display:grid;padding:12px 20px}
.cta-facts li+li{border-left:1px solid var(--line)}
.cta-facts b{font-size:20px;font-weight:500;letter-spacing:-.02em}
.cta-facts span{font-size:12.5px;color:var(--t2)}

.cta-stage{position:relative;align-self:end;height:clamp(460px,44vw,560px)}
.cta-stage .phone{position:absolute;bottom:-90px;left:50%}
.cs-c{width:clamp(230px,21vw,280px);translate:-50% 0;z-index:3}
.cs-l,.cs-r{width:clamp(190px,17vw,225px);z-index:2;filter:brightness(.75)}
.cs-l{translate:-125% 0;rotate:-10deg;bottom:-130px!important}
.cs-r{translate:25% 0;rotate:10deg;bottom:-130px!important}
.cta-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;font-size:13px;color:var(--t2);animation:bob 6s ease-in-out infinite}
.cta-chip b{font-family:var(--mono);font-weight:500}
.cta-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--loss);box-shadow:0 0 8px var(--loss)}
.c1{left:2%;bottom:26%}
.c2{right:4%;top:12%;animation-delay:-3s}
.cta.in .cs-c{animation:cta-up 1.4s var(--ease) both .2s}
.cta.in .cs-l{animation:cta-up 1.4s var(--ease) both .35s}
.cta.in .cs-r{animation:cta-up 1.4s var(--ease) both .5s}
@keyframes cta-up{from{transform:translateY(140px);opacity:0}}

@media (max-width:960px){
  .cta{grid-template-columns:1fr;padding:44px 24px 0;text-align:left}
  .cta-copy{padding-bottom:0}
  .cta-stage{height:400px;margin:0 -24px}
  .cta-rays,.cta-horizon{left:-20%;right:-20%}
  .cta-grid{-webkit-mask-image:radial-gradient(80% 50% at 50% 90%,#000,transparent 75%);mask-image:radial-gradient(80% 50% at 50% 90%,#000,transparent 75%)}
}
@media (max-width:480px){
  .cs-c{width:210px}.cs-l,.cs-r{width:170px}
  .cta-facts li{padding:10px 14px}
  .c1{left:2%;bottom:20%}.c2{right:2%;top:4%}
}

/* ================= Footer ================= */
.foot{position:relative;overflow:hidden;margin-top:clamp(90px,11vw,150px);border-top:1px solid var(--line);padding-top:56px}
.foot-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr 1.6fr;gap:32px;position:relative;z-index:1}
.foot-brand{display:grid;gap:14px;align-content:start}
.foot-brand img{width:132px}
.foot-col{display:grid;gap:10px;align-content:start;font-size:14.5px}
.foot-col p,.foot-legal p{font-size:16px;margin-bottom:6px}
.foot-col a{color:rgba(243,245,244,.8)}.foot-col a:hover{color:var(--mint)}
.foot-legal{display:grid;gap:6px;align-content:start;font-size:13.5px}
.copy{position:relative;z-index:1;text-align:center;font-size:13.5px;color:rgba(243,245,244,.85);padding:28px 0 32px;margin-top:48px;border-top:1px solid var(--line)}
.foot-glow{position:absolute;left:50%;bottom:-260px;width:1100px;height:420px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(47,216,155,.55),rgba(14,74,51,.3) 50%,transparent);filter:blur(10px);pointer-events:none}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand,.foot-legal{grid-column:1/-1}}

/* ================= Reveal ================= */
.js [data-reveal]{opacity:0;transform:translateY(28px);filter:blur(10px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s),filter 1s var(--ease) var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}
/* glass + backdrop-filter breaks under a filtered parent; clear it once revealed */
.js [data-reveal].in{filter:none}
.js [data-split] .wd{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(14px);transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i)*60ms + var(--d,0s))}
.js [data-split].in .wd{opacity:1;filter:none;transform:none}
.js .stage{opacity:0;transform:translateY(80px) scale(.96);transition:opacity 1.4s var(--ease) .5s,transform 1.6s var(--ease) .5s}
.js .stage.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal],.js [data-split] .wd,.js .stage{opacity:1;transform:none;filter:none}
}

/* ================= Small phone frame (screens) ================= */
.phone.sm{width:220px;border-radius:34px;padding:7px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),inset 0 0 0 3px #050605,0 30px 60px -20px rgba(0,0,0,.9),0 0 60px -20px rgba(47,216,155,.45)}
.phone.sm img{border-radius:28px}

/* ================= Screens reel ================= */
.screens{overflow:hidden}
.reel{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.reel-track{display:flex;gap:28px;width:max-content;padding:20px 0 10px;animation:reel 60s linear infinite}
.reel:hover .reel-track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(calc(-50% - 14px))}}
.reel-item{display:grid;justify-items:center;gap:16px;transition:transform .5s var(--ease)}
.reel-item:nth-child(even){transform:translateY(36px)}
.reel-item:hover{transform:translateY(-8px)}
.reel-item:nth-child(even):hover{transform:translateY(28px)}
.reel-item figcaption{font-size:14px;color:var(--t2);padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03)}

/* ================= Step screenshots ================= */
/* phone keeps its natural height (align-items:flex-start) and the box shows only its top ~60% */
.step-shot{position:relative;height:350px;overflow:hidden;margin:calc(-1 * clamp(22px,2.6vw,32px)) calc(-1 * clamp(22px,2.6vw,32px)) 0;padding-top:36px;display:flex;justify-content:center;align-items:flex-start;border-bottom:1px solid var(--line);
  background:radial-gradient(60% 55% at 50% 100%,rgba(47,216,155,.3),rgba(47,216,155,0) 70%)}
.step-shot .phone.sm{width:min(240px,72%);flex:none;transition:transform .7s var(--ease)}
.step-shot::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,#03100a);pointer-events:none}
.step:hover .step-shot .phone{transform:translateY(-8px)}
.step .tile{margin:-26px 0 10px;position:relative;z-index:1}

/* ================= Pricing screenshot ================= */
.plans{display:grid;grid-template-columns:1fr 1fr 300px;gap:16px}
.plan-shot{display:flex;justify-content:center;align-items:flex-start;padding-top:36px;min-height:420px;
  background:radial-gradient(80% 60% at 50% 100%,rgba(47,216,155,.35),rgba(47,216,155,0) 70%),linear-gradient(180deg,#07100C,#020403)}
.plan-shot .phone.sm{width:236px;position:absolute;top:36px}
@media (max-width:1000px){.plans{grid-template-columns:1fr 1fr}.plan-shot{grid-column:1/-1;min-height:360px}}
@media (max-width:860px){.plans{grid-template-columns:1fr}}

/* ================= FAQ with image ================= */
.faq-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,5vw,72px);align-items:start}
.faq-side{display:grid;gap:20px;justify-items:start;position:sticky;top:100px}
.faq-side .photo-card{width:100%;margin-top:12px}
.faq-grid .q{grid-template-columns:1fr;padding:26px 50px 26px 0}
.faq-grid .q:not(.open) .qa{grid-column:1}
.faq-grid .q.open .qa{margin-top:4px}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-side{position:static}}

/* ================= Legal & support pages ================= */
.doc{position:relative;max-width:820px;padding-top:clamp(120px,14vw,160px)}
.doc-glow{position:absolute;left:50%;top:-200px;width:900px;height:460px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(47,216,155,.2),rgba(14,74,51,.12) 55%,transparent);pointer-events:none;z-index:-1}
.doc-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);margin-bottom:28px;flex-wrap:wrap}
.doc-tabs a{padding:8px 16px;border-radius:99px;font-size:14px;color:var(--t2);transition:color .2s,background .2s}
.doc-tabs a:hover{color:var(--t1)}
.doc-tabs a.on{background:var(--t1);color:#0A0D0B}
.doc .h1{font-size:clamp(36px,5vw,56px)}
.doc-date{margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--t3)}
.doc-body{margin-top:clamp(32px,4vw,48px);color:rgba(243,245,244,.82);font-size:16.5px;line-height:1.7}
.doc-body p+p,.doc-body p+ul,.doc-body ul+p{margin-top:12px}
.doc-lead{font-size:clamp(17px,1.6vw,19px);color:var(--t1);padding:22px 24px;border-radius:16px;border:1px solid rgba(47,216,155,.25);background:radial-gradient(80% 120% at 0% 0%,rgba(47,216,155,.12),rgba(47,216,155,0) 70%)}
.doc-body section{padding:28px 0;border-bottom:1px solid var(--line)}
.doc-body section:last-child{border-bottom:0}
.doc-body h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(20px,2vw,24px);font-weight:500;letter-spacing:-.015em;color:var(--t1);margin-bottom:12px}
.doc-n{font-family:var(--mono);font-size:13px;color:var(--brand)}
.doc-body ul{display:grid;gap:8px;margin-top:10px}
.doc-body li{position:relative;padding-left:22px}
.doc-body li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.doc-body a{color:var(--mint);text-decoration:underline;text-decoration-color:rgba(166,244,197,.35);text-underline-offset:3px}
.doc-body a:hover{text-decoration-color:var(--mint)}
.doc-body a.btn{color:var(--inv);text-decoration:none}
.doc-body b{color:var(--t1);font-weight:500}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px;border-radius:var(--r);border:1px solid rgba(47,216,155,.3);margin-bottom:20px;
  background:radial-gradient(70% 120% at 100% 0%,rgba(47,216,155,.2),rgba(47,216,155,0) 70%),linear-gradient(180deg,#07130E,#020403)}
.doc-k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.contact-mail{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.01em;margin:4px 0 2px}
.contact-mail a{color:var(--t1);text-decoration:none}
.doc-faq{border-top:1px solid var(--line)}
.doc-faq details{border-bottom:1px solid var(--line)}
.doc-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:17px;color:var(--t1);transition:color .2s}
.doc-faq summary::-webkit-details-marker{display:none}
.doc-faq summary::after{content:"+";font-size:24px;font-weight:300;color:var(--t2);transition:transform .3s var(--ease)}
.doc-faq details[open] summary::after{transform:rotate(45deg);color:var(--brand)}
.doc-faq summary:hover{color:var(--mint)}
.doc-faq details p{padding:0 40px 20px 0;margin:0}
.doc-page .foot{margin-top:clamp(60px,8vw,100px)}

.link{color:var(--mint);text-decoration:underline;text-decoration-color:rgba(166,244,197,.35);text-underline-offset:3px}
.link:hover{text-decoration-color:var(--mint)}