:root{
  --ink:#14161c;--ink-2:#3d3f4c;--muted:#6f6a7d;--line:#ebe2f2;
  --lilac:#b9a4ff;--lavender:#8f7ae6;--coral:#ff7e6b;--peach:#ffb38a;--tangerine:#ff5a36;--butter:#ffd45a;--mint:#7fe0c2;
  --cream:#fff7f0;--panel:#ffffffcc;--radius:22px;
  --sans:Inter,system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace;--pixel:'VT323',monospace;
  --sunset:linear-gradient(135deg,#8f7ae6,#ff7e6b 55%,#ffb38a);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}.narrow{max-width:800px}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(54px,8vw,116px);line-height:.95}
h2{font-size:clamp(40px,5vw,68px);line-height:1.02;margin-bottom:18px}
h1 em,h2 em{font-style:italic}
h2 em{background:var(--sunset);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.eyebrow{font:600 12.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tangerine);margin:0 0 14px}
.eyebrow.light{color:#fff7ef}
.section{padding:120px 0}.section-lede{font-size:18.5px;color:var(--ink-2);max-width:700px;margin:0 0 46px}.section-lede.light{color:#ddd5f5}
.fine{font-size:13.5px;color:var(--muted);margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 24px;border-radius:999px;font:600 15px var(--sans);text-decoration:none;border:0;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background .2s ease;will-change:transform}
.btn.small{padding:10px 17px;font-size:14px}
.btn.dark{background:var(--ink);color:#fff;box-shadow:0 10px 28px #14161c33}
.btn.dark:hover{box-shadow:0 14px 34px #ff5a3640}
.btn.light{background:#fff;color:var(--ink);box-shadow:0 10px 28px #8f7ae630}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px #14161c26}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:0;font:600 13.5px var(--sans);color:var(--lavender);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* animated logo mark: four squares turning step by step around the fixed dot */
.mark{width:30px;height:30px;overflow:visible}
.mark rect{fill:none;stroke:var(--ink);stroke-width:16}
.mark .dot{fill:var(--tangerine)}
.mark .sq{transform-origin:0 0}
.mark .sq:nth-child(1) rect{opacity:.18}.mark .sq:nth-child(2) rect{opacity:.38}.mark .sq:nth-child(3) rect{opacity:.6}
.mark.spin .sq:nth-child(1){animation:turn1 6s cubic-bezier(.7,0,.2,1) infinite}
.mark.spin .sq:nth-child(2){animation:turn2 6s cubic-bezier(.7,0,.2,1) infinite}
.mark.spin .sq:nth-child(3){animation:turn3 6s cubic-bezier(.7,0,.2,1) infinite}
.mark.spin .sq:nth-child(4){animation:turn4 6s cubic-bezier(.7,0,.2,1) infinite}
@keyframes turn1{0%,100%{transform:rotate(0)}}
@keyframes turn2{0%,10%{transform:rotate(0)}25%,90%{transform:rotate(12deg)}100%{transform:rotate(0)}}
@keyframes turn3{0%,25%{transform:rotate(0)}40%,90%{transform:rotate(24deg)}100%{transform:rotate(0)}}
@keyframes turn4{0%,40%{transform:rotate(0)}55%,90%{transform:rotate(36deg)}100%{transform:rotate(0)}}
.mark .dot{animation:dot 6s ease-in-out infinite}
@keyframes dot{0%,50%,100%{r:18}55%{r:26}62%{r:18}}
.mark.pulse{animation:markpulse .7s cubic-bezier(.2,.8,.2,1)}
@keyframes markpulse{40%{transform:scale(1.25) rotate(-8deg)}}
.mark.big{width:84px;height:84px}.mark.big rect{stroke:#fff}

/* nav */
.nav{position:fixed;inset:14px 14px auto;z-index:50;display:flex;align-items:center;gap:26px;max-width:1180px;margin:0 auto;padding:10px 12px 10px 18px;border-radius:999px;background:#ffffff8c;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 8px 30px #5b3a8a1f;transition:background .3s ease,box-shadow .3s ease}
.nav.scrolled{background:#ffffffe6;box-shadow:0 10px 34px #5b3a8a2e}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 23px var(--sans);letter-spacing:-.05em}
.brand.light{color:#fff}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px;font-weight:500}
.nav nav a{text-decoration:none;color:var(--ink-2);position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--sunset);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav nav a:hover::after{transform:scaleX(1)}

/* cursor glow */
.cursor-glow{position:fixed;left:0;top:0;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s ease;background:radial-gradient(closest-side,#ffb38a2e,#b9a4ff14 55%,transparent);mix-blend-mode:multiply}

/* hero */
.hero{position:relative;height:max(720px,100vh);overflow:hidden;display:grid;place-items:start center;color:#fff;text-align:center}
.hero-layer{position:absolute;inset:-30px;background:url(/assets/pivot-hero.jpg) center bottom/cover no-repeat;will-change:transform}
.hero-layer.front{-webkit-mask-image:linear-gradient(to top,#000 0,#000 9%,transparent 22%);mask-image:linear-gradient(to top,#000 0,#000 9%,transparent 22%)}
.hero-shade{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 30%,#2b1d5a40,transparent 70%),linear-gradient(180deg,#2a1f5a33,transparent 45%)}
.hero-copy{position:relative;z-index:3;padding:max(92px,11vh) 24px 0;max-width:1000px}
.hero h1{font-size:clamp(40px,min(6.6vw,10.2vh),104px)}
.hero h1{text-shadow:0 4px 40px #3a1f6a59}
.hero h1 em{color:#ffe1cf}
.lede{font-size:clamp(15px,min(1.5vw,2.2vh),19px);max-width:700px;margin:min(18px,2vh) auto min(26px,3vh);color:#fff6f0;text-shadow:0 2px 20px #3a1f6a66}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.word{display:inline-block;opacity:0;transform:translateY(.45em) rotate(4deg);filter:blur(6px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease;transition-delay:calc(var(--i)*90ms + 150ms)}
.in .word{opacity:1;transform:none;filter:none}
.tv-screen{position:absolute;z-index:2;overflow:hidden;border-radius:12%/14%;background:radial-gradient(120% 90% at 50% 40%,#1c3d2e,#06120c);box-shadow:inset 0 0 12px #000c;opacity:.96}
.tv-screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff0d 0 1px,transparent 1px 3px),radial-gradient(90% 70% at 30% 15%,#ffffff2a,transparent 50%)}
.tv-screen pre{margin:0;padding:8% 9%;font-family:var(--pixel);line-height:1.05;color:#a5ffcf;text-shadow:0 0 6px #48f0a0aa;white-space:pre}
.tv-screen.flash{animation:tvflash .9s ease}
@keyframes tvflash{0%{filter:none}20%{filter:brightness(2.2) hue-rotate(40deg)}100%{filter:none}}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;width:26px;height:42px;border-radius:14px;border:2px solid #ffffffcc}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* marquee */
.marquee{overflow:hidden;background:var(--ink);color:#fff;padding:22px 0;border-block:1px solid #ffffff14}
.marquee-track{display:flex;gap:34px;width:max-content;animation:marq 38s linear infinite;align-items:center;font:500 22px var(--sans);letter-spacing:-.01em}
.marquee-track i{color:var(--tangerine);font-style:normal;font-size:14px}
.marquee-track em{font:italic 400 30px var(--serif);background:var(--sunset);-webkit-background-clip:text;background-clip:text;color:transparent}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* cards */
.cards{display:grid;gap:18px}.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:0 12px 34px #5b3a8a0f;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 50px #5b3a8a24}
.card.glow::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#ffb38a40,transparent 70%)}
.card.glow:hover::before{opacity:1}
.card h3{margin:0 0 10px;font-size:21px;letter-spacing:-.02em;position:relative}.card p{margin:0;color:var(--ink-2);position:relative}
.card-icon{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--sunset);color:#fff;font-weight:800;font-size:20px;margin-bottom:16px}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease var(--d,0ms),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
h1.reveal{opacity:1;transform:none}

/* how: sticky scroll-driven stack */
.how{position:relative;height:340vh;background:linear-gradient(180deg,var(--cream),#f4ecff 40%,#ffe9e0)}
.how-grid{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.how-step{padding:16px 0 16px 22px;border-left:3px solid #e6dcf5;margin-top:8px;opacity:.38;transition:opacity .4s ease,border-color .4s ease,transform .4s ease}
.how-step.active{opacity:1;border-color:var(--tangerine);transform:translateX(6px)}
.how-step h3{margin:4px 0 6px;font-size:24px;letter-spacing:-.02em}.how-step p{margin:0;color:var(--ink-2);max-width:460px}
.step-no{font:600 13px var(--mono);color:var(--tangerine);letter-spacing:.1em}
.stack-stage{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:520px;margin:0 auto;border-radius:50%;background:radial-gradient(closest-side,#ffffff,#ffffff00 72%),radial-gradient(closest-side,#ffb38a55,transparent 80%)}
.big-stack{width:78%;overflow:visible}
.big-stack rect{fill:none;stroke:var(--ink);stroke-width:13}
.big-stack .bs{transform-origin:0 0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.bs-dot{fill:var(--tangerine);filter:drop-shadow(0 0 10px #ff5a36aa)}
.stack-label{position:absolute;bottom:4%;font:600 14px var(--mono);letter-spacing:.06em;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff}

/* panels, forms */
.panel{background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #ffffff;border-radius:var(--radius);padding:26px;box-shadow:0 16px 44px #5b3a8a14}
.playground{background:radial-gradient(60% 50% at 10% 0%,#e8deff,transparent 60%),radial-gradient(50% 50% at 95% 30%,#ffe2d4,transparent 60%),var(--cream)}
.pg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
.pg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.pg-head h3{margin:0;font-size:20px;letter-spacing:-.02em}
.pill{font:600 12px var(--mono);padding:6px 11px;border-radius:999px;background:#efe8fb;color:var(--muted)}
.pill.live{background:#ffe6dc;color:var(--tangerine)}
label{display:grid;gap:6px;font:600 13px var(--sans);color:var(--ink-2);margin-bottom:12px}
input,textarea{font:500 15px var(--sans);color:var(--ink);background:#fff;border:1.5px solid #e6dcf2;border-radius:12px;padding:11px 13px;outline:none;transition:border-color .2s ease,box-shadow .2s ease;width:100%}
textarea{resize:vertical;font-family:var(--mono);font-size:13.5px}
input:focus,textarea:focus{border-color:var(--lavender);box-shadow:0 0 0 4px #b9a4ff40}
input:disabled{background:#f6f2fb;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg-actions{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 12px}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-height:470px;overflow:auto}
.chain .empty{color:var(--muted);padding:30px 10px;text-align:center;border:1.5px dashed #e3d8f1;border-radius:16px}
.ver{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.ver:not(:last-child)::after{content:"";position:absolute;left:39px;bottom:-11px;width:2px;height:11px;background:var(--sunset)}
.ver.new{animation:verin .7s cubic-bezier(.2,.8,.2,1)}
@keyframes verin{from{opacity:0;transform:translateY(-14px) scale(.96);box-shadow:0 0 0 6px #ff5a3633}}
.ver-badge{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--sunset);color:#fff;font:700 15px var(--mono)}
.ver-top{display:flex;justify-content:space-between;gap:10px}.ver-top time{font:12px var(--mono);color:var(--muted)}
.ver-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12.5px;color:var(--muted)}
code{font:500 12.5px var(--mono);color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font:600 11.5px var(--mono);padding:4px 9px;border-radius:999px;background:#fff1ea;color:var(--tangerine)}
.chip.ok{background:#e3f8ef;color:#13865b}.chip.bad{background:#ffe5e5;color:#c0392b}
.sign{margin-top:18px}
.sign-row{display:flex;gap:10px}.sign-row input{flex:1}
.signed{margin:14px 0 0;padding:16px;border-radius:14px;background:var(--ink);color:#e9e2ff;font:12.5px/1.6 var(--mono);overflow:auto;white-space:pre-wrap;word-break:break-all}
.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}

/* verify */
.verify{background:linear-gradient(180deg,#ffe9e0,#f4ecff)}
.vtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.vtabs button{font:600 14px var(--sans);padding:11px 16px;border-radius:999px;border:0;background:#ffffffb3;color:var(--ink-2);cursor:pointer;transition:background .2s ease,color .2s ease}
.vtabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.vpanel textarea#v-action{font-size:12.5px;margin:12px 0}
.vpanel .btn{margin-top:4px}
.vresult{margin-top:16px;padding:16px 18px;border-radius:14px;font-size:15px;display:none}
.vresult.ok,.vresult.bad{display:block}
.vresult.ok{background:#e3f8ef;color:#0f6b48}.vresult.bad{background:#ffe8e3;color:#a23421}

/* night */
.night{position:relative;overflow:hidden;color:#fff;padding:150px 0 140px;background:radial-gradient(80% 70% at 75% 15%,#5a3c9e 0,#271a55 50%,#120c2b 100%)}
.night #stars{position:absolute;inset:0;width:100%;height:100%}
.night-copy{position:relative;z-index:1}
.night h2 em{background:linear-gradient(90deg,#ffb38a,#ff7e6b);-webkit-background-clip:text;background-clip:text;color:transparent}
.night-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:880px}
.night-stats div{padding:22px;border-radius:18px;background:#ffffff10;border:1px solid #ffffff24;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.night-stats b{display:block;font:400 34px/1.1 var(--serif);margin-bottom:6px}.night-stats span{color:#cfc4ee;font-size:14.5px}

/* faq */
details{border-bottom:1px solid #e7dcef;padding:18px 0}
summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--tangerine);font-size:24px;line-height:1;transition:transform .3s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--ink-2);margin:12px 0 0}

/* footer */
.footer{position:relative;color:#fff;padding:120px 24px 0;overflow:hidden;background:url(/assets/pivot-hero.jpg) center bottom/cover}
.footer::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#5a3c9ecc 0%,#8f7ae680 40%,transparent 80%)}
.footer-cta{position:relative;text-align:center;max-width:760px;margin:0 auto 200px;display:grid;justify-items:center;gap:20px}
.footer-cta h2 em{background:linear-gradient(90deg,#ffe1cf,#ffb38a);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-bar{position:relative;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;max-width:1180px;margin:0 auto;padding:18px 22px;border-radius:18px 18px 0 0;background:#14161cd9;backdrop-filter:blur(8px);font-size:14px;color:#ddd6ea}
.footer-bar a{text-decoration:none}

/* responsive */
@media(max-width:980px){
  .cards.three{grid-template-columns:1fr 1fr}
  .pg-grid{grid-template-columns:1fr}
  .how{height:auto}.how-grid{position:static;height:auto;grid-template-columns:1fr;padding:110px 24px}
  .how-step{opacity:1}.how-visual{order:-1}.stack-stage{max-width:340px}
  .night-stats{grid-template-columns:1fr}.night{padding-bottom:200px}
}
@media(max-width:620px){
  .cards.three{grid-template-columns:1fr}.section{padding:84px 0}.two{grid-template-columns:1fr}
  .nav{inset:10px 10px auto;gap:12px}.hero{height:max(680px,92vh)}
  .sign-row{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track{animation-duration:80s}}

/* header with centered early CA */
.nav{display:grid;grid-template-columns:1fr auto 1fr;gap:20px}
.nav .brand{justify-self:start}.nav-end{justify-self:end;display:flex;align-items:center;gap:22px}
.nav nav{margin-left:0}.nav-end a,.nav .btn{white-space:nowrap}
.ca-pill{position:relative;display:inline-flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;border:1px solid #14161c1f;background:#ffffffd9;color:var(--ink);cursor:pointer;font:inherit;transition:background .15s ease,transform .2s ease}
.ca-pill:hover{background:#fff;transform:translateY(-1px)}
.ca-label{font:700 11px var(--mono);letter-spacing:.12em;color:var(--tangerine)}
.ca-pill code{font:500 13px var(--mono)}
.ca-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff}
.ca-copied{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);font:600 12px var(--sans);color:#fff;background:var(--ink);padding:5px 10px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease;white-space:nowrap}
.ca-pill.copied .ca-copied{opacity:1}
@media(max-width:980px){.nav{grid-template-columns:auto 1fr auto}.ca-pill{justify-self:center}.nav-end nav{display:none}}
@media(max-width:620px){.nav{grid-template-columns:1fr auto;grid-template-areas:"brand end" "ca ca";border-radius:26px;row-gap:10px}.nav .brand{grid-area:brand}.nav-end{grid-area:end}.ca-pill{grid-area:ca;justify-self:stretch;justify-content:center}}