/* ==========================================================================
   Wisp website stylesheet
   1  Tokens & base          6  Home sections
   2  Navigation             7  Shared components
   3  Buttons & type         8  Page-specific (cards, use cases, pricing, faq, contact, legal)
   4  Hero & floating panels 9  Footer
   5  Bank-card component    10 Responsive (largest breakpoint first)
   ========================================================================== */

/* 1 ── Tokens & base ─────────────────────────────────────────────────────── */
:root{
  --bg:#fafaf7;--alt:#f1f1ec;--ink:#0b0b0a;--mute:#5f6158;--line:#e3e3dc;
  --wash:rgba(223,255,31,.28);--wash-soft:rgba(223,255,31,.16);   /* soft yellow-green glow, never a solid fill */
  --head:'Lexend',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  --nav-h:65px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none}
.wrap{width:min(1120px,100% - 48px);margin:0 auto}
.narrow{width:min(760px,100% - 48px)}
.center{text-align:center}.center .lead{margin-inline:auto}

@keyframes floaty{50%{translate:0 -10px}}
@keyframes spin{to{transform:rotate(360deg)}}

/* 2 ── Navigation (fixed glass bar, like wispcard.com) ────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(250,250,247,.62);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid rgba(227,227,220,.6)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.logo img{height:30px;width:auto}
.nav nav{display:flex;gap:32px}
.nav nav a{text-decoration:none;font-size:15px;color:var(--mute);transition:color .2s}
.nav nav a:hover{color:var(--ink)}
.nav nav a.on{color:var(--ink);font-weight:500}
.nav-r{display:flex;gap:10px;align-items:center}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;place-items:center}
.burger i{display:block;width:16px;height:2px;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink)}
.mnav{position:fixed;inset:var(--nav-h) 0 0;z-index:19;background:rgba(250,250,247,.8);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);display:none;flex-direction:column;padding:30px 24px;gap:6px}
.mnav.open{display:flex}
.mnav a{font:500 30px var(--head);letter-spacing:-.03em;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.progress{position:fixed;top:var(--nav-h);left:0;height:3px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(0);background:var(--ink)}

/* 3 ── Buttons & type ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border-radius:99px;font:500 16px var(--head);text-decoration:none;transition:transform .2s,box-shadow .2s;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn.sm{padding:10px 20px;font-size:14px}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{box-shadow:0 10px 24px rgba(0,0,0,.2)}
.btn.light{background:#fff;color:var(--ink)}
.btn.ghost{border-color:var(--line);background:#fff}
.btn.ghost:hover{border-color:var(--ink)}

.eyebrow{font:500 13px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
h1,h2,h3,h4{font-family:var(--head);font-weight:500;letter-spacing:-.035em;line-height:1.08}
h1{font-size:clamp(42px,6.2vw,84px)}
h2{font-size:clamp(32px,4vw,56px);margin-bottom:24px}
h3{font-size:26px;margin-bottom:10px}
h1 em,h2 em,h3 em{font-style:normal;color:var(--mute)}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--mute);max-width:600px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* page-load animation: headline words rise, the rest fades in */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.word>span{display:inline-block;transform:translateY(110%);animation:rise-up .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise-up{to{transform:none}}
.fade{opacity:0;animation:fade-in 1s .5s forwards}
@keyframes fade-in{to{opacity:1}}
/* scroll reveal (toggled by site.js) */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}

/* white rounded card surface used across the site */
.panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:36px;position:relative;overflow:hidden}
.panel[data-tilt]{transition:opacity .8s,transform .25s ease-out,box-shadow .3s;transform-style:preserve-3d}   /* tilt set by site.js */

/* 4 ── Hero & floating UI panels ─────────────────────────────────────────── */
.hero{text-align:center;padding:161px 0 0;overflow:hidden;background:radial-gradient(60% 50% at 50% 0%,var(--wash),transparent 70%),linear-gradient(180deg,transparent 80%,var(--bg))}
.hero h1{max-width:1100px;margin:0 auto}
.hero .lead{margin:24px auto 32px}
.phero{padding:150px 0 80px}                 /* inner-page hero */
.phero h1{font-size:clamp(40px,6vw,80px)}
.phero .lead{margin:22px auto 30px}
.pillrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.pillrow a{padding:9px 18px;border-radius:99px;background:rgba(255,255,255,.8);border:1px solid var(--line);text-decoration:none;font:500 14px var(--head);transition:.25s}
.pillrow a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.peek{position:relative;height:620px;margin-top:70px;perspective:1600px}
.pk{position:absolute;text-align:left;translate:0 var(--py,0px);will-change:translate}   /* --py set by home.js (parallax) */
.pk-card{left:50%;top:50px;margin-left:-230px;width:460px}
.pk-l{left:max(0px,calc(50% - 560px));top:230px;width:340px}
.pk-r{right:max(0px,calc(50% - 560px));top:150px;width:320px}
.tl{transition:transform .2s ease-out;transform-style:preserve-3d;position:relative}
.ui{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
.ui h4{font-size:17px;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.ui h4 svg{width:20px;height:20px}
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--bg);border-radius:14px;font-size:15px;margin-bottom:8px}
.row small{color:var(--mute);display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.row b{font:500 19px var(--head);letter-spacing:-.03em}
.row b.mute{color:var(--mute)}
.row.net{background:var(--ink);color:#fff}
.row.net small{color:rgba(255,255,255,.6)}
.cry{width:30px;height:30px}.cry.sm{width:16px;height:16px}
.assets{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.assets span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid var(--line);color:var(--mute)}
.assets span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tg{width:44px;height:26px;border-radius:99px;background:#d4d4cc;position:relative;transition:.35s;flex:none}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.35s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tg.on{background:var(--ink)}.tg.on::after{left:21px}
.apply{display:flex;justify-content:flex-end;margin-top:14px;position:relative}
.cursor{position:absolute;right:-6px;top:26px;width:34px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:cursor-move 5s infinite}
@keyframes cursor-move{0%,100%{transform:translate(90px,70px);opacity:0}15%{opacity:1}35%,60%{transform:translate(-26px,6px)}45%{transform:translate(-26px,10px) scale(.88)}80%{opacity:1}90%{transform:translate(90px,70px);opacity:0}}
.chipf{position:absolute;display:flex;gap:12px;align-items:center;padding:10px 18px 10px 10px;border-radius:99px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 14px 30px -12px rgba(0,0,0,.3);font-size:14px;line-height:1.25;animation:floaty 6s ease-in-out infinite;transform:translateZ(60px)}
.chipf small{display:block;color:var(--mute);font-size:11px}
.chipf strong{font-weight:600}
.dot{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;font-size:15px}
.c-a{top:-34px;right:-44px;animation-delay:-1s}
.c-b{bottom:-30px;left:80px;animation-delay:-3s}

/* 5 ── Bank-card component (.card.v virtual / .card.p physical; size via --w) ── */
.card{--w:340px;width:var(--w);aspect-ratio:1.586;border-radius:calc(var(--w)*.055);padding:calc(var(--w)*.065);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 24px 50px -22px rgba(0,0,0,.4);font-family:var(--head)}
.card.v{color:#fff;background:linear-gradient(135deg,#2c2d29 0%,#141412 60%,#0b0b0a 100%)}
.card.p{color:#111;background:linear-gradient(135deg,#f7f7f3 0%,#dcdcd4 55%,#bdbeb5 100%)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-100%);animation:sheen 7s ease-in-out infinite;pointer-events:none}
@keyframes sheen{60%,100%{transform:translateX(100%)}}
.card-top{display:flex;justify-content:space-between;align-items:center}
.card-top img{height:calc(var(--w)*.075);width:auto}
.chip{width:calc(var(--w)*.1);height:calc(var(--w)*.075);border-radius:6px;background:linear-gradient(135deg,#e9e9e4,#a9aaa2)}
.num{font-size:calc(var(--w)*.055);letter-spacing:.08em}
.card-bot{display:flex;justify-content:space-between;align-items:flex-end;font-size:calc(var(--w)*.03);letter-spacing:.14em;opacity:.9;line-height:1.5}
.card-bot em{font-style:normal;font-weight:600;letter-spacing:.04em;font-size:calc(var(--w)*.04)}
.card-bot b,.visa{font:italic 600 calc(var(--w)*.07) var(--head);letter-spacing:0}
.card.big{--w:460px;transform:rotate(-5deg);animation:floaty 7s ease-in-out infinite;box-shadow:0 50px 90px -30px rgba(0,0,0,.55)}
.card.sm{--w:300px}
.card.xs{--w:150px;box-shadow:none}

/* 6 ── Home sections ─────────────────────────────────────────────────────── */
/* pinned 01-03 story (progress driven by home.js) */
.story{height:430vh;position:relative}
.pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(45% 55% at 75% 50%,var(--wash),transparent 70%),radial-gradient(30% 40% at 0% 100%,var(--wash-soft),transparent 70%)}
.pin .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;align-items:center}
.steps{position:relative;height:360px}
.step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(50px);transition:.7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.step.on{opacity:1;transform:none}
.step .n{font:600 130px/1 var(--head);color:transparent;-webkit-text-stroke:1.5px rgba(11,11,10,.28);margin-bottom:6px;letter-spacing:-.06em}
.step h3{font-size:clamp(38px,4.6vw,64px);margin-bottom:18px}
.step p{color:var(--mute);font-size:19px;max-width:450px}
.rail{position:absolute;left:28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:3}
.rail i{width:4px;height:34px;border-radius:4px;background:rgba(11,11,10,.15);transition:.4s}
.rail i.on{background:var(--ink);height:62px}
.sv{position:relative;height:560px;display:grid;place-items:center;perspective:1200px}
.rg{position:absolute;width:500px;height:500px;border-radius:50%;border:1px dashed rgba(11,11,10,.22);animation:spin 40s linear infinite}
.rg.r2{width:350px;height:350px;animation-direction:reverse}
.scard{--w:390px;will-change:transform;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.scard .timer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:600 52px var(--head);color:#fff;opacity:0}
.sc-bot{display:flex;justify-content:space-between;align-items:flex-end;font-size:15px}
.sc-bot small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;display:block}
.bal{font:500 32px/1 var(--head);letter-spacing:-.04em}
.coin{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;z-index:4;will-change:transform,opacity;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
.toast{position:absolute;display:flex;gap:12px;align-items:center;padding:12px 20px 12px 14px;border-radius:99px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 16px 30px -14px rgba(0,0,0,.3);font-size:14px;white-space:nowrap;z-index:5;opacity:0;will-change:transform,opacity;line-height:1.25}
.toast .ic{width:36px;height:36px;border-radius:50%;background:var(--ink);display:grid;place-items:center;font-size:16px;color:#fff}
.toast small{color:var(--mute);display:block;font-size:12px}.toast b{font-weight:600;display:block}

/* scrolling text strip */
.marq{overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(90deg,var(--wash-soft),#fff 30%,#fff 70%,var(--wash-soft));padding:22px 0}
.marq-in{display:flex;gap:56px;width:max-content;animation:marq 30s linear infinite;font:500 clamp(22px,3vw,34px) var(--head);letter-spacing:-.03em}
.marq-in span{white-space:nowrap}
.marq-in span::after{content:"·";margin-left:56px;color:var(--mute)}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:120px 0}
.sec.tight{padding:60px 0}
.alt{background:radial-gradient(50% 70% at 100% 0%,var(--wash-soft),transparent 70%),radial-gradient(40% 60% at 0% 100%,var(--wash-soft),transparent 70%),var(--alt)}
.sec-head{margin-bottom:56px}.sec-head h2{margin-bottom:16px}

/* "why Wisp" bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:56px}
.bn{min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
.bn::before{content:"";position:absolute;width:300px;height:300px;right:-100px;top:-100px;background:radial-gradient(circle,var(--wash-soft),transparent 70%);pointer-events:none}
.bn p{color:var(--mute);font-size:16px;max-width:440px}
.bn .art{position:absolute;top:30px;left:36px;right:36px;height:150px}
.w2{grid-column:span 2}.w4{grid-column:span 4}
.ring{width:120px;height:120px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring .bgc{stroke:var(--alt)}.ring .arc{stroke:var(--ink);stroke-dasharray:314;stroke-dashoffset:314;animation:fill 4s ease-in-out infinite}
@keyframes fill{0%{stroke-dashoffset:314}60%,100%{stroke-dashoffset:0}}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:500 26px var(--head)}
.coins{display:flex;gap:10px;flex-wrap:wrap}
.coins img{width:44px;height:44px;animation:floaty 4s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.2))}
.coins img:nth-child(2){animation-delay:-.8s}.coins img:nth-child(3){animation-delay:-1.6s}.coins img:nth-child(4){animation-delay:-2.4s}.coins img:nth-child(5){animation-delay:-3.2s}
.globe{width:140px;height:140px;border-radius:50%;position:relative;overflow:hidden;background:radial-gradient(circle at 35% 30%,#fff,#c9cac2 50%,#6b6c64);box-shadow:0 20px 40px -16px rgba(0,0,0,.4)}
.globe::before,.globe::after{content:"";position:absolute;inset:0}
.globe::before{background:repeating-linear-gradient(90deg,transparent 0 16px,rgba(0,0,0,.16) 16px 17px);animation:globe-spin 7s linear infinite}
.globe::after{background:repeating-linear-gradient(0deg,transparent 0 20px,rgba(0,0,0,.14) 20px 21px)}
@keyframes globe-spin{to{background-position:68px 0}}
.fee{display:grid;gap:8px}
.fee div{display:flex;justify-content:space-between;padding:10px 16px;background:var(--bg);border-radius:14px;font-size:15px}
.fee b{font-weight:600}

/* stats */
.stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:40px}
.stats::before{content:"";position:absolute;inset:-60px 10% auto;height:200px;background:radial-gradient(50% 100% at 50% 0%,var(--wash-soft),transparent 75%);z-index:-1}
.stat .big{font:500 clamp(30px,3.6vw,48px)/1.1 var(--head);letter-spacing:-.04em}
.stat p{color:var(--mute);font-size:15px;margin-top:6px}

/* virtual / physical card tiles */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;perspective:1200px}
.duo .panel{padding:40px}
.duo p{color:var(--mute);font-size:16px}
.tag{position:absolute;top:26px;right:26px;z-index:2;font:500 12px var(--head);padding:5px 12px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.mini{height:230px;display:grid;place-items:center;margin-bottom:28px;background:radial-gradient(70% 90% at 50% 0%,var(--wash),transparent 75%),var(--alt);border-radius:20px;overflow:hidden}
.mini .card{transform:rotate(-5deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.panel:hover .mini .card{transform:rotate(-2deg) scale(1.06)}
.price{font:500 28px var(--head);color:var(--ink)!important;margin:18px 0 22px;letter-spacing:-.03em}
.price small{font:400 14px var(--body);color:var(--mute);letter-spacing:0}

/* mobile wallets: phone + tap pulse */
.walp{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:clamp(30px,4.5vw,64px);background:radial-gradient(50% 80% at 100% 50%,var(--wash),transparent 70%),#fff}
.walp h2{font-size:clamp(32px,4.2vw,56px)}
.wallets{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.wallets span{padding:10px 20px;border-radius:99px;border:1px solid var(--line);font:500 15px var(--head)}
.tapv{position:relative;height:340px;display:grid;place-items:center}
.ph{width:190px;height:330px;border-radius:34px;border:2px solid #cfcfc7;background:linear-gradient(160deg,#fff,#ecece6);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);animation:floaty 6s ease-in-out infinite}
.nt{position:absolute;top:10px;width:60px;height:7px;border-radius:9px;background:var(--ink)}
.okp{position:absolute;bottom:22px;font:500 12px var(--head);display:flex;gap:6px;align-items:center;opacity:0;animation:approved 4s infinite}
.okp i{font-style:normal;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:11px}
@keyframes approved{0%,55%{opacity:0;transform:translateY(8px)}70%,92%{opacity:1;transform:none}100%{opacity:0}}
.wv{position:absolute;right:6%;top:50%;width:90px;height:90px;margin-top:-45px;border-radius:50%;border:2px solid var(--ink);opacity:0;animation:wave 4s infinite}
.wv.w2{animation-delay:.35s}.wv.w3{animation-delay:.7s}
@keyframes wave{0%,40%{opacity:0;transform:scale(.4)}55%{opacity:.5}100%{opacity:0;transform:scale(2.2)}}

/* feature tiles (also used by the "No ..." cards) */
.f6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.f6 .panel{padding:32px}
.f6 h4{font-size:22px;margin-bottom:8px}.f6 p{color:var(--mute);font-size:15px}
.ico{width:54px;height:54px;border-radius:16px;background:radial-gradient(circle at 50% 0%,var(--wash),transparent 80%),var(--alt);display:grid;place-items:center;margin-bottom:56px;transition:.4s}
.ico svg{width:26px;height:26px}
.f6 .panel:hover .ico,.no:hover .ico{background:var(--ink);color:#fff;transform:rotate(-8deg) scale(1.08)}

/* security: radar */
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.cl{margin-top:28px;display:grid;gap:10px}
.cl li{font:500 19px var(--head);letter-spacing:-.02em;display:flex;gap:12px;align-items:center}
.cl li:not(.ck)::before{content:"✓";width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.radar{position:relative;aspect-ratio:1;max-width:480px;margin:auto;width:100%}
.radar .c{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(11,11,10,.14)}
.radar .c:nth-child(2){inset:14%}.radar .c:nth-child(3){inset:28%}.radar .c:nth-child(4){inset:42%;background:rgba(11,11,10,.04)}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(11,11,10,.22),transparent 28%);animation:spin 4s linear infinite}
.sh{position:absolute;inset:36%;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 20px 40px -14px rgba(0,0,0,.5)}
.sh svg{width:46%;height:46%}
.pt{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--ink);animation:blip 4s infinite}
@keyframes blip{0%,10%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1.2)}60%{opacity:.7;transform:scale(1)}100%{opacity:0}}

/* testimonials */
.tq{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.tq .panel{padding:40px}
.tq q{font:500 clamp(21px,2.3vw,30px)/1.25 var(--head);letter-spacing:-.03em;display:block;quotes:none}
.tq cite{display:flex;gap:12px;align-items:center;margin-top:28px;font-style:normal;color:var(--mute)}
.tq cite i{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#d9d9d1,#a9aaa2)}

/* closing call-to-action */
.final{background:radial-gradient(60% 70% at 50% 0%,rgba(223,255,31,.32),transparent 70%),var(--ink);color:#fff;text-align:center;padding:130px 0}
.final h2{font-size:clamp(40px,6vw,84px);margin-bottom:20px}
.final .lead{margin:0 auto 34px;color:rgba(255,255,255,.7)}

/* 7 ── Shared components ─────────────────────────────────────────────────── */
.note{margin-top:24px;font-size:15px;color:var(--mute)}

.seg{display:inline-flex;position:relative;padding:5px;border-radius:99px;background:#fff;border:1px solid var(--line);margin-bottom:26px}
.seg button{position:relative;z-index:1;padding:11px 26px;border:0;background:none;border-radius:99px;font:500 15px var(--head);cursor:pointer;color:var(--mute);transition:color .3s}
.seg button.on{color:#fff}
.seg .pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--ink);border-radius:99px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.seg.p .pill{transform:translateX(100%)}

.ck{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.ck svg{flex:none;width:22px;height:22px;margin-top:2px;padding:4px;border-radius:50%;background:var(--ink);color:#fff}
ul.cl.big li{font:500 20px var(--head);letter-spacing:-.02em}

/* Telegram-style chat mock (cards + contact pages) */
.chat{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 40px 80px -40px rgba(0,0,0,.35);overflow:hidden;max-width:440px;margin-inline:auto;width:100%}
.chat-h{display:flex;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.chat-h .av{width:40px;height:40px;border-radius:50%;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.chat-h .av img{width:24px}
.chat-h b{display:block;font-family:var(--head);font-size:15px;line-height:1.2}.chat-h small{color:var(--mute);font-size:12px}
.chat-b{padding:20px;min-height:340px;display:flex;flex-direction:column;gap:10px;background:radial-gradient(70% 50% at 100% 0%,var(--wash-soft),transparent 70%)}
.msg{max-width:82%;padding:10px 15px;border-radius:18px;font-size:14.5px;line-height:1.45;animation:pop .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}}
.msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:var(--alt);border-bottom-left-radius:5px}
.msg .ok{color:#14803f;font-weight:600}
.typing{align-self:flex-start;display:flex;gap:4px;padding:14px 16px;background:var(--alt);border-radius:18px}
.typing i{width:6px;height:6px;border-radius:50%;background:#999;animation:blink 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.chat-f{display:flex;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}

/* 8 ── Page-specific ─────────────────────────────────────────────────────── */
/* ── Cards page ── */
.studio{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.studio h2{margin-bottom:6px}
.tagl{font:500 18px var(--head);color:var(--mute);margin-bottom:18px}
.desc{color:var(--mute);margin-bottom:24px}
.hl{display:grid;gap:9px;margin-bottom:30px}
.hl .ck{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.stage{position:relative;height:480px;display:grid;place-items:center;perspective:1400px;cursor:grab;touch-action:pan-y;user-select:none}
.stage:active{cursor:grabbing}
.stage .chipf{transform:none}
.halo{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(223,255,31,.22),transparent 68%);filter:blur(10px)}
.c3d{position:relative;width:400px;aspect-ratio:1.586;transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face .card{--w:400px}
.face.back{transform:rotateY(180deg)}
.cback{--w:400px;width:400px;aspect-ratio:1.586;border-radius:22px;background:linear-gradient(135deg,#2c2d29,#0b0b0a);position:relative;overflow:hidden;color:#fff;box-shadow:0 24px 50px -22px rgba(0,0,0,.4)}
.cback .mag{height:18%;background:#000;margin-top:11%}
.cback .sig{margin:6% 8% 0;height:15%;background:repeating-linear-gradient(90deg,#f1f1ec 0 10px,#e3e3dc 10px 20px);border-radius:4px;color:#555;font:italic 10px var(--body);padding:5px 8px}
.cback .sm{position:absolute;left:8%;right:8%;bottom:9%;display:flex;justify-content:space-between;font-size:10.5px;opacity:.7;line-height:1.5}
.sa{top:30px;right:0}.sb{bottom:50px;left:0;animation-delay:-3s}
.hint{position:absolute;bottom:0;font-size:13px;color:var(--mute)}

.nos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.no{padding:32px;position:relative}
.no h3{font-size:24px;margin-bottom:8px}.no p{color:var(--mute);font-size:15px}
.no .strike{position:relative;display:inline-block;color:var(--mute)}
.no .strike::after{content:"";position:absolute;left:-4px;right:-4px;top:55%;height:2px;background:var(--mute);transform:scaleX(0);transform-origin:left;transition:transform .8s .5s cubic-bezier(.2,.8,.2,1)}
.rv.in .strike::after{transform:scaleX(1)}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.fan{position:relative;height:420px}
.fan .card{position:absolute;--w:340px;left:50%;top:50%;transition:transform .15s linear}
.facts{display:grid;gap:10px;margin:26px 0}
.facts div{padding:14px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;font:500 16px var(--head)}

.fund{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.orbit{position:relative;height:460px;display:grid;place-items:center}
.orbit .ring1,.orbit .ring2{position:absolute;border-radius:50%;border:1px dashed rgba(11,11,10,.22)}
.orbit .ring1{width:420px;height:420px}.orbit .ring2{width:290px;height:290px}
.orbit .card{--w:230px;position:relative;z-index:2}
.spin{position:absolute;width:420px;height:420px;animation:spin 30s linear infinite}
.co{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translateY(-210px)}
.co>div{transform:rotate(calc(var(--a)*-1));animation:spin 30s linear infinite reverse;display:flex;align-items:center;gap:10px;margin:-22px 0 0 -22px}
.co img{width:44px;height:44px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.2))}

.feegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcell{padding:30px}
.fcell h4{font-size:18px;margin-bottom:6px}
.fcell small{display:block;color:var(--mute);font-size:14px;min-height:64px}
.fcell b{display:block;font:500 44px var(--head);letter-spacing:-.04em;margin:14px 0}
.bar{height:8px;border-radius:9px;background:var(--alt);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ink),#444);border-radius:9px;transition:width 1.4s .3s cubic-bezier(.2,.8,.2,1)}
.rv.in .bar i{width:var(--v)}

.mgmt{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

/* ── Use cases page ── */
.stack{position:relative;padding-bottom:40px}
.pc{position:sticky;top:calc(96px + var(--i)*18px);margin-bottom:40px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding:44px;border-radius:32px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(0,0,0,.3);transform-origin:50% 0;will-change:transform;overflow:hidden}
.pc::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at var(--gx,100%) 0%,var(--wash),transparent 70%);pointer-events:none}
.pc>*{position:relative}
.pc .no2{font:600 14px var(--head);color:var(--mute);margin-bottom:18px}
.pc h3{font-size:clamp(26px,3vw,38px);margin-bottom:12px}
.pc q{display:block;quotes:none;font:500 19px var(--head);letter-spacing:-.02em;color:var(--mute);margin-bottom:14px}
.pc p{color:var(--mute);font-size:16px}
.wl{background:var(--bg);border-radius:22px;padding:28px;border:1px solid var(--line)}
.wl h5{font:500 12px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.wl ul{display:grid;gap:10px}
.wl .close{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font:500 17px var(--head);letter-spacing:-.02em}

.tline{position:relative;display:grid;gap:56px;padding-left:90px;margin-top:20px}
.tline .track{position:absolute;left:30px;top:10px;bottom:10px;width:3px;background:var(--line);border-radius:3px}
.tline .track i{display:block;width:100%;height:var(--pg,0%);background:var(--ink);border-radius:3px}
.tl-step{position:relative}
.tl-step .num{position:absolute;left:-90px;top:0;width:62px;height:62px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font:600 18px var(--head);transition:.5s}
.tl-step.in .num{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 8px rgba(11,11,10,.08)}
.tl-step h3{margin-bottom:8px}.tl-step p{color:var(--mute);max-width:520px}

.svsearch,.fsearch{position:relative}
.svsearch{max-width:640px;margin:0 auto 40px}
.fsearch{max-width:720px;margin:34px auto 0}
.svsearch input,.fsearch input{width:100%;border-radius:99px;border:2px solid var(--ink);background:#fff;font:500 19px var(--head);outline:none;letter-spacing:-.02em;transition:.3s;box-shadow:0 20px 40px -24px rgba(0,0,0,.4)}
.svsearch input{padding:22px 28px 22px 62px}
.fsearch input{padding:22px 70px 22px 64px;font-size:20px}
.svsearch input:focus,.fsearch input:focus{box-shadow:0 0 0 6px rgba(11,11,10,.08),0 20px 40px -24px rgba(0,0,0,.4)}
.svsearch svg{position:absolute;left:24px;top:22px;width:24px}
.fsearch svg{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:24px}
.fsearch kbd{position:absolute;right:22px;top:50%;transform:translateY(-50%);font:500 13px var(--head);padding:4px 10px;border-radius:8px;background:var(--ink);color:#fff}
.verdict{text-align:center;color:var(--mute);margin-top:14px;min-height:28px}
.verdict b{color:#14803f}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc .panel h3{font-size:24px;margin-bottom:6px}
.svc .sb{color:var(--mute);margin-bottom:18px;font-size:15px}
.svc .note{margin-top:16px;font-size:14px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills span{padding:7px 14px;border-radius:99px;background:var(--bg);border:1px solid var(--line);font:500 13.5px var(--head);transition:.3s}
.svc.q .pills span{opacity:.3}
.svc.q .pills span.hit{opacity:1;background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.08)}
.whyl{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.whyl ul{display:grid;gap:14px}

/* ── Pricing page ── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.calc .panel{padding:38px}
.calc h3{font-size:24px;margin-bottom:22px}
.lab{font-size:13px;color:var(--mute);margin:10px 0 8px;letter-spacing:.06em;text-transform:uppercase}
.amtbox{display:flex;align-items:center;gap:6px;border:2px solid var(--ink);border-radius:20px;padding:6px 20px;background:#fff}
.amtbox span{font:500 30px var(--head)}
.amtbox input{width:100%;border:0;outline:0;font:500 38px var(--head);letter-spacing:-.04em;background:none;padding:8px 0}
input[type=range]{width:100%;margin:22px 0 6px;-webkit-appearance:none;appearance:none;height:8px;border-radius:9px;background:linear-gradient(90deg,var(--ink) var(--p,10%),var(--alt) var(--p,10%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.rl{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.splitbar{display:flex;height:14px;border-radius:9px;overflow:hidden;margin:6px 0 22px;background:var(--alt)}
.splitbar i{display:block;height:100%;transition:width .5s cubic-bezier(.2,.8,.2,1)}
#sa{background:var(--ink)}#sf{background:#b9b9b0}
.lg{display:flex;gap:18px;font-size:13px;color:var(--mute)}.lg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.ln{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}
.ln b{font:500 18px var(--head)}
.ln.net{border:0;background:var(--ink);color:#fff;border-radius:16px;padding:16px 20px;margin-top:10px}
.ln.net b{font-size:26px}
.first{margin-top:22px;padding:20px;border-radius:20px;background:var(--bg);border:1px solid var(--line)}
.first h5{font:500 12px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.first div{display:flex;justify-content:space-between;padding:6px 0;font-size:15px}
.first .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font:500 17px var(--head)}
.issue{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.issue .panel{padding:40px}
.issue .tagp{font:500 12px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.issue .mini{height:170px;margin:16px 0 24px}.issue .mini .card{--w:230px}
.issue ul{display:grid;gap:10px;margin:22px 0 28px}
.pr{font:500 clamp(56px,7vw,92px)/1 var(--head);letter-spacing:-.06em;margin:6px 0}
.pr sup{font-size:.4em;vertical-align:top;margin-right:4px;position:relative;top:.25em}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.three .panel{padding:32px}
.three h3{font-size:22px}.three p.s{color:var(--mute);font-size:14.5px;margin:8px 0 18px}
.three .bigp{font:500 56px/1 var(--head);letter-spacing:-.05em}
.three .r{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.three .r b{font-family:var(--head)}
.cmpw{overflow-x:auto;margin-top:30px;border-radius:24px;border:1px solid var(--line);background:#fff}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;padding:18px 24px;border-bottom:1px solid var(--line);font-size:15.5px;transition:background .3s}
th{font:500 13px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:var(--bg)}
tr:last-child td{border:0}
.col-on{background:rgba(11,11,10,.05)}
td .y{display:inline-block;padding:2px 12px;border-radius:99px;background:var(--ink);color:#fff;font-size:13px}

/* ── FAQ page (also the accordion on the contact page) ── */
.layout{display:grid;grid-template-columns:260px 1fr;gap:60px;align-items:start}
.chips{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px}
.chips button{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-radius:99px;border:0;background:none;cursor:pointer;font:500 16px var(--head);color:var(--mute);transition:.3s;text-align:left}
.chips button:hover{background:#fff;color:var(--ink)}
.chips button.on{background:var(--ink);color:#fff}
.chips em{font:500 12px var(--head);font-style:normal;padding:2px 9px;border-radius:99px;background:rgba(0,0,0,.07)}.chips .on em{background:rgba(255,255,255,.2)}
.grp{margin-bottom:56px}
.grp h3{font:500 13px var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:6px;display:flex;align-items:center;gap:14px}
.grp h3::after{content:"";flex:1;height:1px;background:var(--line)}
.ai{border-bottom:1px solid var(--line)}
.aq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;font:500 19px var(--head);letter-spacing:-.02em;color:var(--ink)}
.aq i{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);flex:none;transition:.35s;background:#fff}
.aq i::before,.aq i::after{content:"";position:absolute;left:8px;right:8px;top:14px;height:2px;background:var(--ink);transition:.35s}
.aq i::after{transform:rotate(90deg)}
.ai.open .aq i{background:var(--ink);transform:rotate(180deg)}
.ai.open .aq i::before,.ai.open .aq i::after{background:#fff}
.ai.open .aq i::after{transform:rotate(0)}
.aa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.aa>div{overflow:hidden}.ai.open .aa{grid-template-rows:1fr}
.aa p,.aa ul{color:var(--mute);margin-bottom:12px}.aa ul{padding-left:20px;list-style:disc}.aa>div>:last-child{margin-bottom:24px}
mark{background:rgba(11,11,10,.1);color:inherit;border-radius:4px;padding:0 2px}
.empty{display:none;text-align:center;padding:80px 20px;color:var(--mute)}.empty.show{display:block}
.empty b{display:block;font:500 32px var(--head);color:var(--ink);margin-bottom:8px;letter-spacing:-.03em}
.empty a{text-decoration:underline;color:var(--ink)}

/* ── Contact page ── */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.ch{display:grid;gap:16px}
.chan{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px;flex-wrap:wrap}
.chan h3{font-size:24px;margin-bottom:6px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chan h3 span{font:500 11px var(--head);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:var(--alt);border:1px solid var(--line)}
.chan p{color:var(--mute);font-size:15px;max-width:340px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.four .panel{padding:30px}
.four .n{font:600 14px var(--head);color:var(--mute);margin-bottom:46px}
.four h4{font-size:20px;margin-bottom:8px}.four p{color:var(--mute);font-size:15px}

/* ── Legal pages (terms, privacy) ── */
.lhero{text-align:center;padding:140px 0 60px;background:radial-gradient(60% 80% at 50% 0%,var(--wash),transparent 70%)}
.lhero h1{font-size:clamp(40px,6vw,76px)}
.ltag{display:inline-block;margin-top:18px;padding:7px 16px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:14px;color:var(--mute)}
.llay{display:grid;grid-template-columns:260px 1fr;gap:70px;padding:60px 0 100px;align-items:start}
.tocw{position:sticky;top:92px}
.tocw h5{font:500 12px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
#toc{max-height:68vh;overflow:auto;display:grid;gap:2px;padding-right:6px}
#toc a{display:flex;gap:12px;padding:8px 12px;border-radius:12px;text-decoration:none;font-size:14.5px;color:var(--mute);transition:.25s;line-height:1.35}
#toc a span{font:500 12px var(--head);opacity:.6;padding-top:2px}
#toc a.on{background:var(--ink);color:#fff}
.ls{padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--line);opacity:0;transform:translateY(24px);transition:.8s}
.ls.in{opacity:1;transform:none}
.ls h2{font-size:clamp(26px,3vw,36px);margin-bottom:18px;display:flex;gap:16px;align-items:baseline}
.ls .num{font:500 15px var(--head);color:var(--mute)}
.ls h3{font-size:19px;margin:22px 0 8px}
.ls p{color:#3d3e38;margin-bottom:14px}
.ls ul{list-style:disc;padding-left:22px;margin-bottom:14px;color:#3d3e38;display:grid;gap:6px}
.llay>article>p:first-child{font-size:18px;color:var(--ink)}
#top-btn{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;border:0;background:#fff;box-shadow:0 14px 30px -10px rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.3s;z-index:30;font:500 11px var(--head)}
#top-btn.show{opacity:1;pointer-events:auto}
#top-btn svg{position:absolute;inset:0;transform:rotate(-90deg)}
#top-btn circle{fill:none;stroke-width:3}.bgc2{stroke:var(--alt)}.vv{stroke:var(--ink);stroke-linecap:round}

/* 9 ── Footer ────────────────────────────────────────────────────────────── */
footer{background:var(--alt);padding:70px 0 30px;font-size:15px;color:var(--mute)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.fgrid img{height:28px;width:auto;margin-bottom:16px}
.fgrid p{max-width:340px;font-size:14.5px}
.fgrid h6{font:500 12px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.fgrid a{display:block;text-decoration:none;padding:4px 0;transition:color .2s}
.fgrid a:hover{color:var(--ink)}
.fbot{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* 10 ── Responsive (largest breakpoint first) ─────────────────────────────── */
/* step indicator: vertical in the left gutter only when there is room, else a row at the bottom */
@media(max-width:1279px){
  .rail{left:50%;top:auto;bottom:26px;transform:translateX(-50%);flex-direction:row;gap:10px}
  .rail i{width:34px;height:4px}
  .rail i.on{width:64px;height:4px}
}
@media(max-width:1000px){
  .nav nav{display:none}
  .burger{display:grid}.nav-r .btn{display:none}
  .sec{padding:80px 0}
  .peek{height:560px}
  .pk-card{margin-left:-190px;width:380px}.card.big{--w:380px}
  .pk-l{left:-60px;top:330px;transform:scale(.72);transform-origin:left top}
  .pk-r{right:-60px;top:290px;transform:scale(.72);transform-origin:right top}
  .c-a,.c-b{display:none}
  .pin{padding-top:var(--nav-h)}
  .pin .wrap,.duo,.sec-grid,.walp{grid-template-columns:minmax(0,1fr)}
  .pin .wrap{gap:0;align-content:center}
  .pin .wrap>*{min-width:0}
  .steps{height:auto;min-height:250px}
  .step .n{font-size:80px}
  .step h3{font-size:clamp(34px,10vw,52px)}
  .step p{max-width:100%;font-size:17px}
  .sv{width:100%;height:360px;transform:scale(.72);overflow:visible}
  .bento,.f6{grid-template-columns:1fr 1fr}.w2,.w4{grid-column:span 2}
  .stats{grid-template-columns:1fr 1fr}
  .tapv{height:300px}
}
@media(max-width:900px){
  .studio,.opts,.fund,.mgmt,.cgrid,.layout,.llay{grid-template-columns:1fr}
  .stage{height:380px}.c3d,.face .card,.cback{--w:320px;width:320px}.halo{width:320px;height:320px}.sa{right:-10px}
  .fan{height:320px}.fan .card{--w:260px}
  .orbit{transform:scale(.75);height:380px}
  .feegrid,.four{grid-template-columns:1fr 1fr}
  .issue,.three{grid-template-columns:1fr}
  .chips{position:static;flex-direction:row;overflow-x:auto;padding-bottom:8px}.chips button{white-space:nowrap;gap:10px}
  .tocw{display:none}
}
@media(max-width:860px){
  .calc{grid-template-columns:1fr}
  .pc{grid-template-columns:1fr;padding:28px;position:relative;top:auto}
}
@media(max-width:800px){
  .tq,.nos,.svc,.whyl{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}
}
@media(max-width:760px){
  .wrap,.narrow{width:calc(100% - 40px)}
  h1{font-size:clamp(36px,10.5vw,48px)}
  h2{font-size:clamp(28px,8vw,38px)}
  .lead{font-size:16.5px}
  .btn{padding:14px 24px}
  .sec{padding:64px 0}.sec.tight{padding:40px 0}
  .final{padding:80px 0}.final h2{font-size:clamp(34px,10vw,48px)}
  .panel,.duo .panel,.no,.fcell,.three .panel,.issue .panel,.calc .panel{padding:24px}
  .walp{padding:26px}.pc{padding:24px}.chan{padding:24px}
  .marq-in{font-size:20px;gap:36px}.marq-in span::after{margin-left:36px}
  .bn{min-height:300px}.bn .art{left:22px;right:22px}
  .stage{height:340px}.c3d,.face .card,.cback{--w:min(300px,80vw);width:min(300px,80vw)}
  .fan{height:300px}.fan .card{--w:min(240px,64vw)}
  .orbit{transform:scale(.62);height:300px;margin:-20px 0}
  .tline{padding-left:64px}.tl-step .num{left:-64px;width:48px;height:48px;font-size:15px}.tline .track{left:22px}
  .cmpw{margin-inline:-4px}
  .amtbox input{font-size:30px;min-width:0}
  .fsearch input,.svsearch input{font-size:16px;padding-left:56px}
  .fsearch kbd{display:none}
  .ln b{font-size:16px}
  .pr{font-size:56px}
  .fgrid{gap:28px}
  /* story */
  .story{height:360vh}
  .step .n{font-size:68px}
  .rg{width:min(420px,92vw);height:min(420px,92vw)}.rg.r2{width:min(290px,64vw);height:min(290px,64vw)}
  .sv{height:420px;transform:none}
  .scard{--w:min(300px,78vw)}
  .toast{font-size:12.5px;padding:9px 14px 9px 10px}.toast .ic{width:30px;height:30px}
  #t1{left:0!important;top:2%!important}#t2{right:0!important;top:42%!important}#t3{left:0!important;bottom:2%!important}
  /* hero: same floating panels, recomposed as an overlapping cascade */
  .hero{padding-bottom:20px}
  .peek{height:650px;margin-top:34px;perspective:1000px}
  .peek::before{content:"";position:absolute;left:50%;top:20px;width:340px;height:340px;margin-left:-170px;border-radius:50%;background:radial-gradient(circle,rgba(223,255,31,.34),transparent 68%);pointer-events:none}
  .pk-card{left:50%;top:26px;width:290px;margin-left:-145px;z-index:2}
  .card.big{--w:290px}
  .tl::before{content:"";position:absolute;inset:0;border-radius:16px;transform:translate(26px,-16px) rotate(9deg);background:linear-gradient(135deg,#f7f7f3,#cfcfc6);box-shadow:0 24px 40px -22px rgba(0,0,0,.4);z-index:-1}   /* silver card peeking out behind */
  .pk-l{left:14px;top:220px;width:252px;transform:none;z-index:3;padding:20px}
  .pk-r{right:14px;top:372px;width:226px;transform:none;z-index:4;padding:20px}
  .ui h4{margin-bottom:12px;font-size:16px}
  .row{padding:10px 12px;margin-bottom:6px}.row b{font-size:17px}
  .assets,.cursor{display:none}
  .c-a{display:flex;top:-22px;right:-22px;transform:scale(.86);transform-origin:right top}
  .c-b{display:flex;bottom:-22px;left:-8px;transform:scale(.86);transform-origin:left bottom}
}
@media(max-width:600px){
  .bento,.f6,.feegrid{grid-template-columns:1fr}.w2,.w4{grid-column:span 1}
  .card.sm{--w:240px}
}
@media(max-width:560px){.four{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.fade{opacity:1;transform:none}.word>span{transform:none}
}