@font-face{font-family:"Clash Display";src:url("fonts/clash-display-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("fonts/clash-display-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Palette: Tailwind slate / blue / cyan / sky. Type: Fontshare Clash Display + Satoshi. */
:root{--bg:#020617;--bg2:#0f172a;--ink:#f1f5f9;--mute:#94a3b8;--blue:#3b82f6;--deep:#1e3a8a;--cyan:#22d3ee;--sky:#38bdf8;--line:rgba(148,163,184,.16);--glass:rgba(255,255,255,.05);--glass-line:rgba(255,255,255,.13);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 Satoshi,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.display{font-family:'Clash Display',Satoshi,sans-serif;font-weight:600;line-height:1.02;letter-spacing:-.02em;margin:0}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.eyebrow{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 16px}
.mute{color:var(--mute)}
.glass{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-radius:20px}

/* nav */
.nav{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:50%;translate:-50% 0;z-index:20;display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;width:max-content;max-width:calc(100% - 32px)}
.nav a{text-decoration:none;font-size:.9rem;color:var(--mute);padding:8px 14px;border-radius:999px;white-space:nowrap;transition:color .2s,background .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background:rgba(255,255,255,.06)}
.nav .logo{font-family:'Clash Display';color:var(--ink);font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;padding:13px 22px;border-radius:999px;text-decoration:none;font-weight:500;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 40px -10px var(--blue)}
.btn.ghost{background:transparent;border:1px solid var(--glass-line)}
.btn.ghost:hover{box-shadow:none;background:rgba(255,255,255,.06)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:100px 0 60px}
.hero .glow{position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,70%) var(--my,35%),rgba(59,130,246,.28),transparent 60%),radial-gradient(900px circle at 85% 20%,rgba(30,58,138,.55),transparent 65%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;width:100%}
.panel{padding:clamp(24px,4vw,44px)}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem)}
.type{display:block;font-size:clamp(1.6rem,3.6vw,2.6rem);color:var(--sky);min-height:1.2em;margin-top:14px;font-weight:500}
.caret{display:inline-block;width:3px;height:.85em;margin-left:4px;vertical-align:-.08em;background:var(--cyan);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero p.lead{font-size:1.15rem;color:var(--mute);max-width:520px;margin:22px 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.scroll-cue{position:absolute;bottom:24px;left:50%;translate:-50% 0;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.scroll-cue:after{content:"";display:block;width:1px;height:36px;margin:10px auto 0;background:linear-gradient(var(--cyan),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* atom */
.atom{position:relative;width:min(420px,80vw);aspect-ratio:1;margin:auto;color:var(--sky)}
.atom .ring{position:absolute;inset:0}
.atom .ring:nth-child(2){rotate:60deg}.atom .ring:nth-child(3){rotate:-60deg}
.atom .orbit{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(56,189,248,.35);transform:scaleY(.36)}
.atom .e{position:absolute;inset:0;animation:spin 6s linear infinite;transform:scaleY(.36)}
.atom .ring:nth-child(2) .e{animation-duration:8s;animation-direction:reverse}
.atom .ring:nth-child(3) .e{animation-duration:10s}
.atom .e:before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px 4px var(--cyan)}
.atom .core{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;background:radial-gradient(circle,#e0f2fe,var(--sky) 45%,var(--blue));box-shadow:0 0 60px 20px rgba(56,189,248,.45),0 0 140px 50px rgba(59,130,246,.25);animation:pulse 3s ease-in-out infinite}
@keyframes spin{to{rotate:360deg}}
@keyframes pulse{50%{box-shadow:0 0 80px 28px rgba(56,189,248,.6),0 0 180px 70px rgba(59,130,246,.3)}}

/* story (pinned scroll) */
.story{height:320vh;position:relative}
.story .pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;max-width:1160px;margin:0 auto;padding:80px 20px 40px}
.story svg{width:100%;max-height:72svh;overflow:visible}
.story circle{fill:var(--sky);filter:drop-shadow(0 0 6px rgba(56,189,248,.8))}
.story line,.story ellipse{stroke:rgba(56,189,248,.35);stroke-width:1;fill:none}
.story .edges{transition:opacity .6s}
.chapters{position:relative;min-height:560px}
.pts{list-style:none;margin:0 0 24px;padding:0;max-width:480px}
.pts li{position:relative;padding:7px 0 7px 22px;color:var(--mute);font-size:.98rem;line-height:1.45;border-top:1px solid var(--line)}
.pts li:before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.chap.on .pts li{animation:pt .6s both}
.chap.on .pts li:nth-child(2){animation-delay:.08s}.chap.on .pts li:nth-child(3){animation-delay:.16s}.chap.on .pts li:nth-child(4){animation-delay:.24s}.chap.on .pts li:nth-child(5){animation-delay:.32s}
@keyframes pt{from{opacity:0;transform:translateX(-12px)}}
.rail{display:flex;gap:8px;margin-bottom:28px}
.rail span{flex:1;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:10px;border-top:2px solid var(--line);transition:color .4s,border-color .4s}
.rail span.on{color:var(--cyan);border-color:var(--cyan)}
.chap{position:absolute;inset:56px 0 auto;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s;pointer-events:none}
.chap.on{opacity:1;transform:none;pointer-events:auto}
.chap .when{font-size:.85rem;color:var(--mute)}
.chap h2{font-size:clamp(2rem,4vw,3.2rem);margin:10px 0 16px}
.chap p{color:var(--mute);max-width:440px;margin:0 0 22px}
.big{font-family:'Clash Display';font-weight:600;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--ink);line-height:1}
.big small{display:block;font:400 .9rem Satoshi;color:var(--mute);margin-top:6px}

/* strategy x operator */
.duo{padding:120px 0}
.duo h2{font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:48px}
.duo h2 em{font-style:normal;color:var(--cyan)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.col{padding:32px}
.col h3{font-size:1.4rem;margin-bottom:20px;display:flex;justify-content:space-between;align-items:baseline}
.col h3 span{font:400 .8rem Satoshi;color:var(--mute);letter-spacing:.14em;text-transform:uppercase}
.col ul{list-style:none;margin:0;padding:0}
.col li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.col li b{font-family:'Clash Display';font-weight:600;font-size:1.5rem;min-width:96px;color:var(--sky)}
.col li span{color:var(--mute)}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee div{display:flex;gap:48px;width:max-content;animation:slide 40s linear infinite}
.marquee span{font-family:'Clash Display';font-size:clamp(1.4rem,3vw,2.2rem);color:var(--mute);white-space:nowrap}
.marquee span:nth-child(odd){color:var(--ink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* end */
.end{padding:120px 0 60px;position:relative;overflow:hidden}
.end .glow{position:absolute;inset:auto 0 -40% 0;height:80%;background:radial-gradient(closest-side,rgba(59,130,246,.35),transparent);pointer-events:none}
.end h2{font-size:clamp(2.8rem,8vw,6.4rem);margin-bottom:28px;position:relative}
.end footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:100px;color:var(--mute);font-size:.9rem;position:relative}

/* about page */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{padding:26px;transition:transform .3s,border-color .3s}
.tile:hover{transform:translateY(-4px);border-color:rgba(56,189,248,.5)}
.tile .k{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.tile h3{font-size:1.6rem;margin:8px 0}
.tile p{margin:0;color:var(--mute)}

/* about page: flying disc, photo bento */
.disc{position:absolute;width:64px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,#e0f2fe,var(--sky) 55%,var(--blue));box-shadow:0 0 30px 6px rgba(56,189,248,.5);offset-path:path("M -100 420 C 300 80, 900 60, 1700 300");animation:fly 7s cubic-bezier(.45,.05,.4,1) infinite;opacity:.9}
/* each flight swaps the object: disc -> tennis ball -> chess knight (main.js) */
.disc.ball{width:36px;height:36px;overflow:hidden;background:radial-gradient(circle at 35% 30%,#f7fee7,#bef264 45%,#65a30d);box-shadow:0 0 30px 6px rgba(190,242,100,.45)}
.disc.ball:before,.disc.ball:after{content:"";position:absolute;top:-4px;bottom:-4px;width:30px;border:2px solid rgba(255,255,255,.85);border-radius:50%}
.disc.ball:before{left:-22px}.disc.ball:after{right:-22px}
.disc.chess{width:auto;height:auto;background:none;border-radius:0;box-shadow:none;font-size:60px;line-height:1;color:var(--sky);text-shadow:0 0 22px rgba(56,189,248,.8)}
.disc.chess:before{content:"\265E\FE0E"}
@keyframes fly{0%{offset-distance:0%;rotate:-8deg}100%{offset-distance:100%;rotate:12deg}}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:340px;gap:16px}
.ph{position:relative;margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--glass-line);background:radial-gradient(circle at 30% 20%,var(--deep),var(--bg2) 70%);transform-style:preserve-3d;transition:transform .2s ease-out,border-color .3s}
.ph:hover{border-color:rgba(56,189,248,.5)}
.big-ph{grid-column:span 2;grid-row:span 2}
.wide-ph{grid-column:span 2}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ph:hover img{transform:scale(1.06)}
.ph:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 40%,rgba(2,6,23,.85))}
.ph.nophoto:after{content:attr(data-label);position:absolute;left:24px;top:18px;font:600 clamp(2.6rem,6vw,5rem)/1 'Clash Display';color:transparent;-webkit-text-stroke:1px rgba(56,189,248,.45)}
.ph figcaption{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;padding:16px 18px;transform:translateY(8px);transition:transform .4s}
.ph:hover figcaption{transform:none}
.ph h3{font-size:1.4rem;margin:4px 0}
.ph p{margin:0;color:var(--mute);font-size:.95rem}
.k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.snap .slide{position:absolute;inset:0}
.ph .slide,.snap .slide{opacity:0;transition:opacity 1.2s,transform .8s cubic-bezier(.2,.7,.2,1)}
.ph .slide.on,.snap .slide.on{opacity:1}
/* story chapter photos */
.proof{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;max-width:520px}
.snap{position:relative;margin:0;flex:none;width:210px;aspect-ratio:4/3;max-width:48%;border-radius:12px;overflow:hidden;border:1px solid var(--glass-line);rotate:3deg;box-shadow:0 20px 40px -20px rgba(56,189,248,.5);transition:rotate .4s}
.snap:hover{rotate:0deg}
.snap img{width:100%;height:100%;object-fit:cover;display:block}
/* contact email */
.email{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;position:relative}
.email code{font:500 1.1rem Satoshi,system-ui,sans-serif;color:var(--ink);user-select:all;padding:10px 16px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line)}
.email button{font:inherit;cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--glass-line);border-radius:999px;padding:10px 18px}
.email button:hover{background:rgba(255,255,255,.06)}

/* reveal */
/* Content rests visible; where supported, it rises in as it scrolls into view (no observers). */
@keyframes rise{from{opacity:.25;transform:translateY(40px)}}
@supports (animation-timeline:view()){.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .atom{position:absolute;right:-30%;top:-8%;width:110vw;opacity:.35;z-index:-1}
  /* phones: no pinning; chapters stack so every photo shows and nothing scrolls past empty */
  .story{height:auto}
  .story .pin{position:static;height:auto;grid-template-columns:1fr;gap:0;padding-top:96px;padding-bottom:64px}
  .story svg{max-height:240px}
  .chapters{min-height:0;display:grid;gap:56px}
  .rail{display:none}
  .chap,.chap.on{position:static;opacity:1;transform:none;pointer-events:auto}
  .chap h2{font-size:1.75rem;margin:6px 0 10px}
  .chap p{margin-bottom:10px}
  .pts{margin-bottom:12px}
  .pts li{font-size:.9rem;padding:5px 0 5px 20px}
  .pts li:before{top:12px}
  .big{font-size:2rem}
  .snap{width:180px}
  .cols{grid-template-columns:1fr}
  .duo{padding:72px 0}
  .end{padding-top:72px}
  .bento{grid-template-columns:1fr;grid-auto-rows:440px}
  .big-ph,.wide-ph{grid-column:auto;grid-row:auto}
  .big-ph{grid-row:span 1}
  .col{padding:24px}
  .col li b{min-width:80px;font-size:1.3rem}
  .nav a{padding:8px 10px;font-size:.85rem}
  .nav .hide-sm{display:none}
}
@media(min-width:821px) and (max-height:820px){.snap{width:170px}.pts li{padding-block:4px}.chap h2{margin:6px 0 12px}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* motion hero (hero.js drives every value from one clock; CSS only sets the rest states) */
.hm{padding:84px 0 40px}
.hm .panel{padding:clamp(22px,3vw,36px)}
.hm p.lead{font-size:1.04rem;max-width:none;margin:16px 0 22px}
.hm .type{margin-top:8px}
.hm .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px}
.hm-copy{display:grid;min-width:0}
.hm-copy>*{grid-area:1/1;min-width:0}
.hm-act{align-self:center;pointer-events:none}
.hm-kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.hm-idx{font-family:'Clash Display';font-size:.95rem;letter-spacing:0;color:var(--ink);padding:3px 9px;border:1px solid var(--glass-line);border-radius:999px}
.hm-word{font-size:clamp(3rem,7.5vw,6.2rem);margin:0;white-space:nowrap}
.hm-word span{display:inline-block;will-change:transform,opacity,filter}
.hm-num{margin:18px 0 0;font-size:clamp(2.6rem,6vw,4.8rem);font-weight:500;color:var(--sky);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hm-unit{font:500 clamp(1rem,1.6vw,1.25rem) Satoshi,sans-serif;color:var(--mute);letter-spacing:0}
.hm-cap{max-width:440px;margin:16px 0 0;color:var(--mute);font-size:1.05rem}
.hm-final{will-change:opacity,transform}
.hm-name{white-space:nowrap}
.hm-name span{display:inline-block}
.hm-recap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.hm-recap div{min-width:0}
.hm-recap dt{font-family:'Clash Display';font-weight:600;font-size:clamp(1.1rem,1.9vw,1.45rem);color:var(--ink);font-variant-numeric:tabular-nums}
.hm-recap dd{margin:2px 0 0;font-size:.78rem;line-height:1.3;color:var(--mute)}
.hm-stage{position:relative;min-width:0}
.hm-stage svg{transform-origin:50% 50%;display:block;width:100%;height:auto;overflow:visible;font-family:Satoshi,sans-serif}
.hm-stage .atom{position:absolute;inset:0;width:auto;margin:auto;max-width:420px;opacity:0;pointer-events:none}
.hm svg text{fill:var(--mute);font-size:11px;letter-spacing:.12em}
.hm svg .t-ink{fill:var(--ink)}
.hm svg .t-big{font-family:'Clash Display';font-weight:600;letter-spacing:0}
.hm-bar{grid-column:1/-1;display:flex;align-items:center;gap:16px;min-width:0}
.hm-ctl{flex:none;min-width:84px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);color:var(--ink);font:500 .85rem Satoshi,sans-serif;cursor:pointer;backdrop-filter:blur(12px);transition:background .2s,transform .15s}
.hm-ctl:hover{background:rgba(255,255,255,.1)}
.hm-ctl:active{transform:scale(.96)}
.hm-skip{min-width:0}
.hm.done .hm-play,.hm.done .hm-skip,.hm.done .hm-time{display:none}
.hm-chaps{flex:1;min-width:0;display:grid;grid-template-columns:3.2fr 3.4fr 4fr 4.4fr;gap:6px;list-style:none;margin:0;padding:0}
.hm-chaps button{all:unset;display:block;width:100%;min-height:44px;cursor:pointer;box-sizing:border-box;padding-top:12px}
.hm-chaps span{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-chaps i{display:block;height:2px;border-radius:2px;background:var(--line);background-image:linear-gradient(90deg,var(--cyan),var(--sky));background-repeat:no-repeat;background-size:var(--p,0%) 100%}
.hm-chaps button.on span{color:var(--ink)}
.hm-chaps button:hover span{color:var(--ink)}
.hm-chaps button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}
.hm.still .hm-bar{display:none}
.hm-time{flex:none;font:500 .8rem Satoshi,sans-serif;color:var(--mute);font-variant-numeric:tabular-nums;width:3.2em;text-align:right}
@media(max-width:820px){
  .hm{padding:76px 0 32px;align-items:flex-start}
  .hm .wrap{grid-template-columns:1fr;gap:8px}
  .hm-stage{order:-2;max-width:460px;width:100%;margin:0 auto}
  .hm-bar{order:-1;margin:4px 0 12px}
  .hm-word{font-size:clamp(2.6rem,13vw,4rem)}
  .hm-cap{font-size:.95rem}
  .hm-act{align-self:start;padding-top:8px}
  .hm-recap{display:none}
  .hm-chaps{min-width:0}
  .hm-chaps li{min-width:0}
  .hm-chaps span{display:none}
  .hm-chaps button{padding-top:21px}
  .hm-time{display:none}
  .hm-bar{gap:8px}
  .hm-ctl{min-width:0;padding:0 12px}
  .hm-replay{font-size:0;padding:0 14px}
  .hm-replay:before{content:"↺";font-size:1rem}
  .hm.done .hm-stage{position:absolute;inset:0;max-width:none;z-index:-1;opacity:.35}
}