/* ─────────────────────────────────────────────────────────────────────────
   Deiko landing site.

   Ported 1:1 from `Deiko v2.dc.html` (mddocs/design/). That file is a Claude
   Design artboard: every value below was an inline style on an element there,
   lifted to a class so the three identical "how it works" cards stop repeating
   themselves. Values are unchanged — if something here disagrees with the
   artboard, the artboard is right and this is a bug.

   The @keyframes block is copied verbatim, in the artboard's own order.
   ───────────────────────────────────────────────────────────────────────── */

/* ── base ───────────────────────────────────────────────────────────────── */
html,body{margin:0;padding:0;background:#0b0818;color:#efeaff;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
a{color:#c9b8ff;text-decoration:none}
a:hover{color:#fff}
input,button{font-family:inherit}
input::placeholder{color:rgba(239,234,255,.45)}
img{max-width:100%}

/* NO global `* { box-sizing: border-box }`. The artboard's styles were React
   inline styles, so every fixed width there is content-box, and flipping the
   whole page to border-box silently shrinks the keycap, the mock window, the
   coin window and the ripples by their padding and borders. The four boxes
   that opted in are marked border-box individually, exactly as the artboard
   had them. */

/* The artboard never showed a focus ring because a canvas has no keyboard.
   A real site does. One ring, the brand hue, everywhere. */
:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px;border-radius:4px}

/* ── keyframes (verbatim from the artboard) ─────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ripple{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes bloomIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes reveal{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(18px,-26px)}66%{transform:translate(-14px,16px)}}
@keyframes shoot{0%,88%{opacity:0;transform:translate(0,0) rotate(-35deg)}90%{opacity:1}100%{opacity:0;transform:translate(-260px,180px) rotate(-35deg)}}
@keyframes keyPress{0%,100%{transform:translateY(0);box-shadow:0 8px 0 #0d0a20,0 24px 40px rgba(0,0,0,.5)}6%,18%{transform:translateY(7px);box-shadow:0 1px 0 #0d0a20,0 10px 20px rgba(0,0,0,.4)}12%,24%{transform:translateY(0);box-shadow:0 8px 0 #0d0a20,0 24px 40px rgba(0,0,0,.5)}}
@keyframes hotkeyRipple{0%,22%{opacity:0;transform:scale(.7)}26%{opacity:.7}70%,100%{opacity:0;transform:scale(2.1)}}
@keyframes wave{0%,100%{height:4px;opacity:.5}50%{height:22px;opacity:1}}
@keyframes cursorPath{0%{left:18%;top:74%}30%,78%{left:66%;top:50%}100%{left:18%;top:74%}}
@keyframes lasso{0%,28%{opacity:0;transform:scale(.7)}38%{opacity:1;transform:scale(1)}78%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(1)}}
@keyframes capIn{0%,40%{opacity:0;transform:translateY(8px)}50%,78%{opacity:1;transform:translateY(0)}90%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes coinDrop{0%,18%{top:40px;opacity:1;transform:scale(1)}24%{transform:scale(1.15)}56%{top:150px;opacity:1;transform:scale(1)}62%{top:150px;opacity:0;transform:scale(.3)}100%{top:150px;opacity:0}}
@keyframes chipHit{0%,56%{background:#16113a;color:#e6e0ff;box-shadow:0 0 0 rgba(167,139,250,0)}62%,84%{background:#efeaff;color:#1a1040;box-shadow:0 0 40px rgba(167,139,250,.9)}94%,100%{background:#16113a;color:#e6e0ff;box-shadow:0 0 0 rgba(167,139,250,0)}}
@keyframes fall{0%{opacity:1;transform:translate(0,0) rotate(var(--rot))}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
@keyframes coinBack{0%,58%{opacity:0;transform:scale(.4)}70%,100%{opacity:1;transform:scale(1)}}

.rise{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}

/* ── page shell ─────────────────────────────────────────────────────────── */
.page{min-height:100vh;background:radial-gradient(1200px 700px at 50% -10%,#2a1b5e 0%,#150f33 45%,#0b0818 100%)}
.wrap{max-width:1240px;margin:0 auto}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#a99cff}

.noise{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn-solid{padding:14px 22px;border-radius:999px;border:0;background:#efeaff;color:#1a1040;font-size:14.5px;font-weight:500;cursor:pointer;box-shadow:0 0 40px rgba(167,139,250,.35)}
.btn-solid:hover{background:#fff;color:#1a1040}
.btn-solid--sm{padding:8px 16px;font-size:13.5px;letter-spacing:.02em;box-shadow:none}
.btn-solid--lg{display:inline-block;padding:15px 30px;font-size:15px;box-shadow:0 0 60px rgba(167,139,250,.35)}
.btn-ghost{padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:13.5px;letter-spacing:.02em;background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}

/* ── floating nav ───────────────────────────────────────────────────────── */
.floatnav{position:fixed;top:14px;left:18px;right:18px;z-index:50;display:flex;justify-content:center;pointer-events:none;transform:translateY(-120%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.floatnav.is-on{transform:translateY(0);opacity:1}
.floatnav__bar{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;max-width:1204px;padding:12px 16px 12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(14,10,34,.72);backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.45)}

.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:500;font-size:15px;letter-spacing:.02em}
.brand img{width:24px;height:24px;border-radius:7px}
.brand--lg{font-size:16px}
.brand--lg img{width:26px;height:26px}
.navlinks{display:flex;gap:26px;font-size:13.5px;letter-spacing:.04em;color:#c4bde0}
.navlinks a{color:inherit}
.navlinks--lg{gap:28px}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:18px;min-height:100vh;box-sizing:border-box}
.hero__frame{position:relative;min-height:calc(100vh - 36px);border-radius:28px;border:1px solid rgba(255,255,255,.1);background:#0e0a22;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.03);display:flex;flex-direction:column}
.hero__nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 36px}
.hero__body{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:20px;padding:20px 36px 48px}
.hero__copy{max-width:620px}
.hero__h1{font-weight:300;font-size:clamp(46px,6.2vw,88px);line-height:.98;letter-spacing:-.035em;margin:0 0 26px;color:#fff;text-wrap:balance}
.hero__h1 span{display:block}
.hero__h1 em{font-weight:400;color:#d6c8ff;font-style:normal}
.hero__sub{font-size:16px;line-height:1.6;color:#b9b1d8;max-width:46ch;margin:0 0 34px;text-wrap:pretty}
.waitlist{display:flex;gap:8px;flex-wrap:wrap;max-width:440px}
.waitlist input{flex:1;min-width:210px;padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:14.5px;outline:none}
.waitlist__done{padding:14px 22px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-size:14.5px;max-width:440px}
.hero__note{margin-top:16px;font-size:12.5px;color:#7f77a8;letter-spacing:.02em}
.hero__art{position:relative;min-height:440px;display:grid;place-items:center;animation:bloomIn 1.6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.2s}
.hero__foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:0 36px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6f689a}
.hero__rule{flex:1;height:1px;background:rgba(255,255,255,.1);margin:0 24px}
.marquee{width:min(46vw,520px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.marquee__track{display:flex;gap:40px;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite}

/* bloom blobs — built by app.js */
.bloom{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.bloom span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.9}

/* starfield + orbital rings — built by app.js */
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.sky__layer{position:absolute;inset:-6%;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.sky__layer span{position:absolute;border-radius:50%}
.sky__shoot{position:absolute;left:78%;top:12%;width:90px;height:1px;background:linear-gradient(90deg,transparent,#fff);box-shadow:0 0 12px rgba(255,255,255,.6);animation:shoot 14s ease-in infinite 3s}
.sky__shots{position:absolute;inset:0}
.sky__shots span{position:absolute;height:1.5px;transform-origin:100% 50%;border-radius:2px}
.sky__rings{position:absolute;inset:0;perspective:1400px;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.sky__ring{position:absolute;transform-style:preserve-3d}
.sky__ring>div{position:absolute;inset:0;transform-style:preserve-3d}
.sky__ring i{position:absolute;inset:0;border-radius:50%;display:block}
.sky__ring b{position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff;box-shadow:0 0 14px #c9b8ff,0 0 30px rgba(167,139,250,.9)}

/* hero ring — built by app.js */
.ringArt{transition:transform .9s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.ringArt__in{position:relative;width:min(400px,70vw);height:min(400px,70vw);display:grid;place-items:center;animation:floaty 7s ease-in-out infinite}
.ringArt__rip{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.12);animation:ripple 5s ease-out infinite}
.ringArt__rip--b{animation-delay:2.5s}
.ringArt__glow{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 0deg,#7c5cff,#ff6ad5,#4b5fcb,#c9b8ff,#7c5cff);filter:blur(28px);opacity:.75;animation:spin 14s linear infinite}
.ringArt__ring{position:absolute;inset:14%;border-radius:50%;border:clamp(18px,4.5vw,34px) solid #f3f0ff;box-sizing:border-box;box-shadow:0 0 0 1px rgba(255,255,255,.2),inset 0 0 40px rgba(124,92,255,.35),0 30px 80px rgba(0,0,0,.45)}
.ringArt__sheen{position:absolute;inset:14%;border-radius:50%;background:conic-gradient(from 90deg,transparent 0 60%,rgba(255,255,255,.55) 72%,transparent 84%);mix-blend-mode:screen;animation:spin 9s linear infinite}
.ringArt__dot{width:15%;height:15%;border-radius:50%;background:#f3f0ff;box-shadow:0 0 30px rgba(255,255,255,.8),0 0 80px rgba(167,139,250,.9)}

/* ── how it works ───────────────────────────────────────────────────────── */
.how{padding:100px 18px 40px}
.how__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;padding:0 18px 36px}
.how__h2{margin:0;font-weight:300;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.how__h2 em{font-weight:400;color:#d6c8ff;font-style:normal}
.how__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;padding:0 18px}

.card{position:relative;padding:22px 22px 30px;border-radius:26px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(124,92,255,.12),rgba(14,10,34,.5) 60%);display:flex;flex-direction:column;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s}
.card:hover{transform:translateY(-6px);border-color:rgba(201,184,255,.4)}
.card__ghost{position:absolute;top:-22px;right:10px;font-size:140px;font-weight:300;letter-spacing:-.06em;line-height:1;color:rgba(255,255,255,.035);pointer-events:none}
.card__stage{position:relative;height:230px;border-radius:18px;background:radial-gradient(260px 160px at 50% 45%,rgba(124,92,255,.28),rgba(11,8,24,.7) 70%);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.card__stage--center{display:grid;place-items:center}
.stage__tag{position:absolute;top:14px;left:16px;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.08em;color:#7f77a8}
.card__rule{display:flex;align-items:center;gap:10px;margin:28px 0 12px}
.card__rule span{font-size:12px;letter-spacing:.2em;color:#a99cff}
.card__rule i{width:22px;height:1px;background:#a99cff;display:block}
.card h3{margin:0 0 8px;font-weight:400;font-size:22px;letter-spacing:-.01em}
.card p{margin:0;color:#a9a2c9;font-size:14.5px;line-height:1.6;text-wrap:pretty}

.keycap-wrap{position:relative;display:grid;place-items:center;margin-top:-8px}
.ripple{position:absolute;width:120px;height:120px;border-radius:50%;border:1px solid rgba(201,184,255,.6);animation:hotkeyRipple 3.6s ease-out infinite}
.ripple--b{animation-delay:.5s}
.keycap{position:relative;width:96px;height:70px;border-radius:14px;background:linear-gradient(180deg,#2c2358,#1a1340);border:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;animation:keyPress 3.6s cubic-bezier(.3,.7,.3,1) infinite}
.keycap b{font-size:22px;line-height:1;color:#fff;font-weight:400}
.keycap i{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#a99cff;font-style:normal}
.waves{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:4px;height:24px}
.waves span{width:3px;border-radius:2px;background:#c9b8ff}

.mockwin{position:relative;width:212px;padding:14px;border-radius:14px;background:#16113a;border:1px solid rgba(255,255,255,.1);display:grid;gap:9px;box-shadow:0 20px 40px rgba(0,0,0,.4);margin-top:-10px}
.mockwin>span{display:block}
.lassoBox{position:absolute;left:8px;right:8px;top:33px;height:38px;border-radius:10px;border:1.5px dashed #c9b8ff;background:rgba(201,184,255,.08);animation:lasso 5s ease-in-out infinite}
.cursorDot{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(167,139,250,.3),0 0 26px rgba(167,139,250,.9);animation:cursorPath 5s cubic-bezier(.4,0,.2,1) infinite;margin:-7px 0 0 -7px}
.capBubble{position:absolute;bottom:16px;left:0;right:0;width:max-content;margin:0 auto;padding:7px 12px;border-radius:999px;background:rgba(239,234,255,.95);color:#1a1040;font-size:12px;white-space:nowrap;animation:capIn 5s ease-in-out infinite}

.briefcard{position:absolute;top:44px;left:50%;transform:translateX(-50%);width:176px;box-sizing:border-box;padding:10px;border-radius:14px;background:rgba(22,17,58,.95);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px}
.briefcard__text{display:grid;gap:3px}
.briefcard__text span:first-child{font-size:12.5px;color:#fff}
.briefcard__text span:last-child{font-size:11px;color:#a99cff}
.coinSlot{position:relative;width:40px;height:40px;border-radius:50%;border:1px dashed rgba(255,255,255,.28);flex-shrink:0;display:block}
.coinSlot img{position:absolute;inset:-1px;width:40px;height:40px;border-radius:50%;animation:coinBack 4.5s ease-in-out infinite}
.dropCoin{position:absolute;top:54px;left:calc(50% - 78px);width:40px;height:40px;border-radius:50%;box-shadow:0 0 30px rgba(120,110,255,.9);animation:coinDrop 4.5s cubic-bezier(.4,0,.2,1) infinite;z-index:2}
.hitChip{position:absolute;top:150px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:#16113a;border:1px solid rgba(255,255,255,.18);font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#e6e0ff;white-space:nowrap;animation:chipHit 4.5s ease-in-out infinite}

/* ── persona reel ───────────────────────────────────────────────────────── */
.reel{position:relative;height:520vh;margin-top:60px}
.reel__sticky{position:sticky;top:0;height:100vh;padding:18px;display:flex;box-sizing:border-box}
.reel__frame{flex:1;border-radius:28px;border:1px solid rgba(255,255,255,.1);background:#0e0a22;overflow:hidden;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:20px;padding:24px clamp(24px,4vw,64px)}
.reel__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 500px at 75% 60%,rgba(124,92,255,.35),transparent 70%)}
.reel__copy{position:relative;z-index:1;max-height:100%;overflow:auto}
.reel__count{display:flex;align-items:baseline;gap:8px;font-size:12px;letter-spacing:.2em;color:#a99cff;margin-bottom:26px}
.reel__count span{font-size:34px;color:#fff;font-weight:300;letter-spacing:0}
.reel__name{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#7f77a8;margin-bottom:12px}
.reel__h2{margin:0 0 18px;font-weight:300;font-size:clamp(30px,3.6vw,50px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance;max-width:16ch}
.reel__body{margin:0 0 26px;color:#b9b1d8;font-size:15.5px;line-height:1.6;max-width:44ch;text-wrap:pretty}
.reel__quote{display:inline-flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);max-width:46ch;font-size:14px;line-height:1.5;color:#e6e0ff}
.reel__mark{width:28px;height:28px;border-radius:50%;background:#4b5fcb;display:grid;place-items:center;flex-shrink:0}
.reel__mark span{width:8px;height:8px;border-radius:50%;background:#fff;display:block}
.reel__bars{display:flex;gap:6px;margin-top:40px}
.reel__bars span{height:2px;width:56px;border-radius:2px;display:block;transition:background .4s}
.reel__stage{position:relative;z-index:1;height:min(58vh,520px);display:grid;place-items:center}
.stack{position:relative;width:min(100%,560px);aspect-ratio:16/10}
.stack__card{position:absolute;inset:0;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:repeating-linear-gradient(135deg,#1c1540 0 14px,#221a4d 14px 28px);box-shadow:0 40px 100px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s;display:grid;place-items:center;overflow:hidden}
.stack__card--v{cursor:zoom-in}
.stack__media{position:absolute;inset:0}
.stack__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the label and caption sit on moving video, so they need their own ground */
.stack__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,6,30,.82) 0,rgba(10,6,30,.15) 26%,rgba(10,6,30,.15) 58%,rgba(10,6,30,.88) 100%)}
.stack__ctl{position:absolute;left:14px;right:14px;bottom:44px;z-index:4;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(7px);transition:opacity .28s,transform .28s cubic-bezier(.2,1.2,.3,1)}
.stack__card--v:hover .stack__ctl,.pop .stack__ctl{opacity:1;transform:none}
.stack__btn{flex:none;width:29px;height:29px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(22,15,52,.74);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);color:#efeaff;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.stack__btn:hover{background:rgba(58,40,128,.92);transform:scale(1.08)}
.stack__seek{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:rgba(255,255,255,.26);cursor:pointer}
.stack__seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#cdbcff;box-shadow:0 0 12px rgba(167,139,250,.9)}
.stack__seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#cdbcff}

/* ── popped-out player ──────────────────────────────────────────────────── */
.pop{border:0;padding:0;background:transparent;overflow:visible;width:min(92vw,940px);max-width:none}
.pop::backdrop{background:rgba(8,5,24,.74);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.pop__h{margin:0 0 16px 6px}
.pop__h em{display:block;margin-bottom:7px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#a99cff;font-style:normal}
.pop__h h3{margin:0;font-weight:300;font-size:clamp(30px,4.4vw,54px);line-height:1;letter-spacing:-.03em;color:#fff}
.pop__frame{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 50px 120px rgba(0,0,0,.62),0 0 90px rgba(124,92,255,.22);animation:popIn .4s cubic-bezier(.22,1.25,.32,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.pop .stack__ctl{bottom:16px}
@media (prefers-reduced-motion:reduce){.pop__frame{animation:none}}
.stack__lbl{position:absolute;z-index:3;text-shadow:0 1px 10px rgba(6,3,20,.9);top:16px;left:18px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#a99cff}
.stack__play{width:68px;height:68px;border-radius:50%;background:rgba(239,234,255,.95);display:grid;place-items:center;box-shadow:0 0 50px rgba(167,139,250,.5)}
.stack__play span{width:0;height:0;border-left:18px solid #1a1040;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px;display:block}
.stack__cap{position:absolute;z-index:3;text-shadow:0 1px 10px rgba(6,3,20,.9);bottom:16px;left:18px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#7f77a8}

/* ── the coin ───────────────────────────────────────────────────────────── */
.coin{padding:140px 18px 60px}
.coin__wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center}
.coin__stage{position:relative;height:420px;display:grid;place-items:center}
.coin__h2{margin:0 0 18px;font-weight:300;font-size:clamp(32px,4vw,56px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.coin__h2 em{font-weight:400;color:#d6c8ff;font-style:normal}
.coin__body{margin:0 0 28px;color:#b9b1d8;font-size:15.5px;line-height:1.6;max-width:46ch;text-wrap:pretty}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:13.5px;color:#e6e0ff}
.chip--any{border:1px dashed rgba(255,255,255,.2);color:#7f77a8}

/* aspect-ratio, not a fixed height: when the stage is narrower than 420px the
   scene becomes a tall rectangle, `.coinScene__o1` (inset:0, border-radius:50%)
   becomes an ellipse, and `spin` sweeps its bounding box far past the viewport.
   Square at every width, so the spinning ring is always a circle. */
.coinScene{position:relative;width:min(100%,420px);aspect-ratio:1}
.coinScene__glow{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.6),transparent 70%);filter:blur(30px);animation:breathe 6s ease-in-out infinite}
.coinScene__o1{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.14);animation:spin 60s linear infinite}
.coinScene__o2{position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(255,255,255,.1)}
.target{position:absolute;padding:9px 16px;border-radius:999px;background:#16113a;border:1px solid rgba(255,255,255,.16);font-size:12.5px;color:#e6e0ff;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:3;transition:all .25s;pointer-events:none;transform:translate(-50%,-50%) scale(1)}
.coinScene.is-dragging .target{border-color:rgba(255,255,255,.4)}
.target.is-lit{background:#efeaff;color:#1a1040;box-shadow:0 0 40px rgba(167,139,250,.8);transform:translate(-50%,-50%) scale(1.1)}
.coinWin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:230px;padding:14px;border-radius:18px;background:rgba(22,17,58,.92);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(0,0,0,.55);backdrop-filter:blur(12px);animation:floaty 5s ease-in-out infinite;z-index:2}
.coinWin.is-held{animation-play-state:paused}
.coinWin__row{display:flex;align-items:center;gap:12px}
.coinWin__slot{position:relative;width:46px;height:46px;border-radius:50%;border:1px dashed rgba(255,255,255,.25);flex-shrink:0}
.coinWin__coin{position:absolute;inset:-1px;width:46px;height:46px;border-radius:50%;box-shadow:0 0 30px rgba(120,110,255,.8);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:translate(0,0) scale(1);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s;will-change:transform;z-index:20}
.coinScene.is-dragging .coinWin__coin{box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 40px rgba(120,110,255,1);cursor:grabbing;transition:none}
.coinWin__title{font-size:14px;color:#fff}
.coinWin__sub{font-size:12px;color:#a99cff;margin-top:2px}
.coinWin__hint{margin-top:12px;font-size:12px;color:#b9b1d8;line-height:1.45}

/* ── privacy ────────────────────────────────────────────────────────────── */
.privacy{padding:80px 18px}
.privacy__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden}
.privacy__cell{padding:34px 30px;background:#0e0a22}
.privacy__title{font-weight:400;font-size:20px;letter-spacing:-.01em;margin-bottom:8px}
.privacy__body{color:#a9a2c9;font-size:14px;line-height:1.6}

/* ── pricing ────────────────────────────────────────────────────────────── */
.pricing{padding:80px 18px}
.pricing__wrap{max-width:1100px;margin:0 auto}
.pricing__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px}
.pricing__h2{margin:0;font-weight:300;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.pricing__h2 em{font-weight:400;color:#d6c8ff;font-style:normal}
.toggle{display:inline-flex;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.14);gap:4px}
.toggle button{border:0;cursor:pointer;padding:8px 16px;border-radius:999px;font-size:13.5px;background:transparent;color:#c4bde0}
.toggle button.is-on{background:#efeaff;color:#1a1040}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.plan{padding:36px;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);display:flex;flex-direction:column}
.plan--pro{position:relative;border-color:rgba(167,139,250,.5);background:linear-gradient(160deg,rgba(124,92,255,.28),rgba(124,92,255,.06));box-shadow:0 0 80px rgba(124,92,255,.2)}
.plan__top{display:flex;justify-content:space-between;align-items:center}
.plan__label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#a99cff}
.plan--pro .plan__label{color:#d6c8ff}
.plan__badge{font-size:11.5px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff}
.plan__price{font-weight:300;font-size:60px;letter-spacing:-.04em;line-height:1;margin:22px 0 6px}
.plan__per{font-size:20px;color:#c9b8ff;letter-spacing:0}
.plan__note{color:#7f77a8;font-size:13.5px}
.plan--pro .plan__note{color:#c9b8ff}
.plan__list{list-style:none;padding:0;margin:30px 0 34px;display:grid;gap:10px;color:#b9b1d8;font-size:14.5px;line-height:1.5}
.plan--pro .plan__list{color:#e6e0ff}
.plan__cta{margin-top:auto;text-align:center;padding:13px;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:14.5px}
.plan__cta:hover{background:rgba(255,255,255,.1);color:#fff}
.plan__cta--solid{border:0;background:#efeaff;color:#1a1040;font-weight:500}
.plan__cta--solid:hover{background:#fff;color:#1a1040}

/* ── faq ────────────────────────────────────────────────────────────────── */
.faq{padding:80px 18px 120px}
.faq__wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px}
.faq__h2{margin:0;font-weight:300;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.03em}
.faq__list{border-top:1px solid rgba(255,255,255,.1)}
.faq__item{border-bottom:1px solid rgba(255,255,255,.1)}
.faq__q{width:100%;text-align:left;border:0;background:transparent;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:16px;color:#efeaff}
.faq__mark{font-size:22px;font-weight:300;color:#a99cff;line-height:1}
.faq__a{padding:0 40px 22px 0;color:#a9a2c9;font-size:14.5px;line-height:1.65}

/* ── footer ─────────────────────────────────────────────────────────────── */
.footer{padding:0 18px 18px}
.footer__frame{position:relative;border-radius:28px;border:1px solid rgba(255,255,255,.1);background:#0e0a22;overflow:hidden;padding:120px 36px 40px;text-align:center}
.footer__in{position:relative;z-index:1}
.footer__eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:#a99cff;margin-bottom:30px}
.footer__mark{font-weight:300;font-size:clamp(72px,16vw,240px);line-height:.85;letter-spacing:-.05em;color:#fff;margin-bottom:40px;display:flex;justify-content:center;align-items:center}
.footer__mark img{width:.78em;height:.78em;border-radius:50%;margin-left:.06em;box-shadow:0 0 .3em rgba(120,110,255,.7)}
.footer__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:120px;font-size:13px;color:#7f77a8;letter-spacing:.02em}
.footer__links{display:flex;gap:24px}
.footer__links a{color:inherit}

/* ── responsive ─────────────────────────────────────────────────────────────
   The artboard is a fixed-width canvas and carries no breakpoints of its own.
   These are additions, kept to the minimum that keeps the layout readable from
   320px up: stack the two-column grids, drop the in-frame nav links (the anchors
   all still exist in the floating nav's markup and in the page order), and give
   the pinned reel a shorter stage so copy and visual both fit one screen.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .navlinks{display:none}
  .hero__body{grid-template-columns:1fr;padding:20px 24px 40px}
  .hero__art{min-height:300px}
  .hero__nav{padding:22px 24px}
  .hero__foot{padding:0 24px 22px}
  .marquee{width:min(52vw,320px)}
  .reel__frame{grid-template-columns:1fr;align-content:center;gap:24px}
  .reel__stage{height:min(30vh,220px)}
  .reel__copy{max-height:none;overflow:visible}
  .faq__wrap{grid-template-columns:1fr;gap:24px}
  .coin{padding:100px 18px 40px}
  .how{padding:80px 18px 40px}
  .footer__frame{padding:80px 24px 32px}
  .footer__meta{margin-top:72px;justify-content:center;text-align:center}
}
@media (max-width:560px){
  .hero__foot{font-size:11px}
  .hero__rule{margin:0 14px}
  .marquee{display:none}
  .how__head,.how__grid{padding-left:0;padding-right:0}
  .plan{padding:28px}
  .privacy__cell{padding:28px 24px}
  .reel__sticky{padding:12px}
  .hero{padding:12px}
  .footer,.footer+*{padding-left:12px;padding-right:12px}
  /* The agent chips sit ON the rim, so half of each always hangs outside the
     scene box. A fixed canvas had slack around it to absorb that; 375px does
     not, so shrink the scene and let the margin be the slack. */
  .coin__stage{height:auto}
  .coinScene{width:min(74%,300px)}
  /* `floaty` overrides the centring translate (the artboard behaves the same),
     so a fixed-width window runs off the right edge. Stretch it instead. */
  .coinWin{left:0;right:0;width:auto}
}

/* ── reduced motion ─────────────────────────────────────────────────────────
   Every animation above has to leave a static state that reads on its own.
   Killing the durations lands most of them on their final keyframe, which is
   already correct (spin ends where it started, floaty at rest, keycap up).
   The exceptions are the three that animate *content* to opacity:0 at 100% —
   the lasso, the caption bubble and the falling coin — so those are pinned to
   the frame that actually explains the product instead.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .lassoBox{opacity:1!important;transform:scale(1)!important}
  .capBubble{opacity:1!important;transform:translateY(0)!important}
  .waves span{height:14px!important;opacity:1!important}
  .cursorDot{left:66%!important;top:50%!important}
  .ripple,.sky__shoot,.dropCoin{opacity:0!important}
  .ringArt__rip{opacity:.35!important;transform:scale(1)!important}
}