html{scroll-behavior:smooth}
.bgv,.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.logov{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.still .bgv,.still .logov{display:none}
@media (prefers-reduced-motion: reduce){.bgv,.logov{display:none}}
body{margin:0;background:#061427;color:#F1F4F8;font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#F2B134;text-decoration:none}
a:hover{color:#FFD27A}
.root{--eo:cubic-bezier(.16,1,.3,1);--b:0s;overflow-x:clip}
.root *{box-sizing:border-box}
.disp{font-family:'Archivo','Helvetica Neue',system-ui,sans-serif}
.mono{font-family:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace}
.wrap{width:calc(100% - 160px);max-width:1280px;margin-left:auto;margin-right:auto;position:relative}

/* sections + curtains */
.sec{position:relative;--b0:0s}
.hero.sec{--b0:var(--b)}
.pin{position:sticky;top:min(0px,calc(100vh - var(--h)))}
.still .pin{position:relative;top:auto}
.cur{margin-top:-40px}
.sheet{position:relative;height:100%;border-radius:40px 40px 0 0;box-shadow:0 -30px 60px rgba(3,10,22,.28)}
.ph{background-color:#0B2140;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 1px,transparent 1px 14px)}
.grid-bg{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px}

/* nav: see css/nav.css (shared by every page) */

/* atoms */
.tag{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);width:max-content}
.tag-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.tag-t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#DCE3EC}
.light .tag{border-color:rgba(11,36,66,.16);background:#FFFFFF}
.light .tag-dot{background:#0878B8}
.light .tag-t{color:#0B2442}
.btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;transition:transform .35s var(--eo),background-color .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn .arr{transition:transform .35s var(--eo)}
.btn:hover .arr{transform:translateX(4px)}
.btn-gold{background:var(--accent);color:#061427}
.btn-gold:hover{background:#FFC857;color:#061427}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:#F1F4F8}
.btn-ghost:hover{border-color:#FFFFFF;color:#FFFFFF}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(11,36,66,.18);background:#FFFFFF;font-size:14px;font-weight:500;color:#0B2442}
.chip-d{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-size:13px;color:#DCE3EC}
.ln{display:block;overflow:hidden;padding:.03em 0 .02em}
.w{display:inline-block}
.arrowline{position:absolute;left:80px;right:-36px;top:33px;height:1.5px;background:var(--accent);opacity:.65;transform-origin:left center}
.arrowline::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);transform:rotate(45deg)}
.flink{color:#C9D3DF;font-size:15px}
.flink:hover{color:#F2B134}

/* marquee */
.marq{position:absolute;left:0;right:0;bottom:0;height:64px;border-top:1px solid rgba(255,255,255,.12);overflow:hidden;display:flex;align-items:center;background:rgba(6,20,39,.6);z-index:2}
.marq-track{display:flex;width:max-content;animation:marq 70s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}

/* preloader */
.pre{position:fixed;inset:0;z-index:100;background:#061427;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:preWipe .9s cubic-bezier(.7,0,.12,1) 2s both}
.pre-in{display:flex;flex-direction:column;align-items:center;gap:22px;animation:preLift .9s cubic-bezier(.7,0,.12,1) 2s both}
.pre-stage{position:relative;width:236px;height:236px;display:flex;align-items:center;justify-content:center}
.pre-dot{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);animation:preDot 1.1s linear both}
.pre-mark{position:relative;animation:preMark .65s var(--eo) .78s both}
.pre-l1{font-size:34px;font-weight:800;font-stretch:115%;letter-spacing:.02em;color:#F1F4F8;line-height:1;display:flex}
.pre-l1 .ch{display:inline-block;animation:preCh .45s var(--eo) both;animation-delay:calc(.98s + var(--k) * 32ms)}
.pre-l2{margin-top:10px;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:#A8B5C7;text-align:center;animation:preFade .5s var(--eo) 1.42s both}
.pre-bar{display:flex;width:210px;height:4px;animation:preBar .5s var(--eo) 1.55s both}
@keyframes preDot{0%{transform:translateY(-220px);opacity:0;animation-timing-function:cubic-bezier(.55,0,.9,.4)}8%{opacity:1}45%{transform:translateY(0) scale(1);animation-timing-function:ease-out}52%{transform:translateY(0) scale(1.3,.75)}60%{transform:scale(1);animation-timing-function:cubic-bezier(.16,1,.3,1)}82%{transform:scale(12.6);opacity:1}100%{transform:scale(12.6);opacity:0}}
@keyframes preMark{from{opacity:0;transform:scale(.7) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes preCh{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
@keyframes preFade{from{opacity:0;letter-spacing:.7em}to{opacity:1}}
@keyframes preBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes preWipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes preLift{to{transform:translateY(-80px);opacity:0}}

/* reveal choreography: dot lands → chip opens → heading → body → cards */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes wordUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes dotLand{0%{opacity:0;transform:translateY(-26px) scale(.4)}60%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:1;transform:none}}
@keyframes chipOpen{from{clip-path:inset(0 calc(100% - 30px) 0 0 round 999px)}to{clip-path:inset(0 0 0 0 round 999px)}}
@keyframes chipText{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wipeL{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.m .sec:not(.in) :is(.rv,.tag,.loop,.arrowline){opacity:0}
.m .sec:not(.in) .w{transform:translateY(110%)}
.m .sec:not(.in) .strike{transform:scaleX(0)}
.m .in .tag-dot{animation:dotLand .55s var(--eo) var(--b0) both}
.m .in .tag{animation:chipOpen .7s var(--eo) calc(var(--b0) + .3s) both}
.m .in .tag-t{animation:chipText .5s var(--eo) calc(var(--b0) + .55s) both}
.m .in .w{animation:wordUp 1.1s var(--eo) both}
.m .in .w1{animation-delay:calc(var(--b0) + .4s)}
.m .in .w2{animation-delay:calc(var(--b0) + .5s)}
.m .in .w3{animation-delay:calc(var(--b0) + .6s)}
.m .in .w4{animation-delay:calc(var(--b0) + .7s)}
.m .in .rv{animation:rise 1s var(--eo) calc(var(--b0) + .7s) both}
.m .in .d2{animation-delay:calc(var(--b0) + .8s)}
.m .in .d3{animation-delay:calc(var(--b0) + .9s)}
.m .in .d4{animation-delay:calc(var(--b0) + 1s)}
.m .in .d5{animation-delay:calc(var(--b0) + 1.1s)}
.m .in .d6{animation-delay:calc(var(--b0) + 1.2s)}
.m .in .d7{animation-delay:calc(var(--b0) + 1.3s)}
.m .in .strike{animation:growX .8s var(--eo) calc(var(--b0) + 1.5s) both}
.m .in .bcards>:nth-child(2) .strike{animation-delay:calc(var(--b0) + 1.62s)}
.m .in .bcards>:nth-child(3) .strike{animation-delay:calc(var(--b0) + 1.74s)}
.m .in .bcards>:nth-child(4) .strike{animation-delay:calc(var(--b0) + 1.86s)}
.m .in .arrowline{animation:growX .7s var(--eo) calc(var(--b0) + 1.25s) both}
.m .in .conn>:nth-child(3) .arrowline{animation-delay:calc(var(--b0) + 1.45s)}
.m .in .loop{animation:wipeL 1.1s var(--eo) calc(var(--b0) + 1.7s) both}

/* scroll-linked: eased curtain landing */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.root:not(.still) .cur{view-timeline-name:--cur}
.root:not(.still) .cur>.sheet{animation:curtainIn linear both;animation-timeline:--cur;animation-range:entry 0% entry 100%}
}}
@keyframes curtainIn{0%{transform:none}10%{transform:translateY(-7.2vh)}20%{transform:translateY(-12.8vh)}30%{transform:translateY(-16.8vh)}40%{transform:translateY(-19.2vh)}50%{transform:translateY(-20vh)}60%{transform:translateY(-19.2vh)}70%{transform:translateY(-16.8vh)}80%{transform:translateY(-12.8vh)}90%{transform:translateY(-7.2vh)}100%{transform:none}}

@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.pin{position:relative;top:auto}
.marq-track{animation:none}
}

/* ---- standalone-site additions ---- */
.sheet{min-height:inherit;padding-bottom:80px}
html.no-intro .pre{display:none}
.cmark{position:relative;width:500px;height:500px;margin-top:-10px;margin-right:-20px;-webkit-mask-image:radial-gradient(circle,#000 62%,transparent 70%);mask-image:radial-gradient(circle,#000 62%,transparent 70%)}
@media (max-width: 1100px){
.wrap{width:calc(100% - 40px)}
.pin{position:relative !important;top:auto !important}
.cur{margin-top:0}
.sheet{border-radius:0;box-shadow:none;padding-bottom:64px}
.sec{min-height:0 !important}
.hero .wrap{padding-top:120px !important;padding-bottom:120px}
.hero h1{font-size:56px !important}
.hero p{font-size:18px !important}
h2.disp{font-size:36px !important}
blockquote.disp{font-size:40px !important}
.wrap[style*="grid-template-columns"],.bcards{display:flex !important;flex-direction:column;gap:32px !important;align-items:stretch !important}
.wrap[style*="grid-template-columns"] > *{grid-column:auto !important;padding-top:0 !important}
[style*="repeat(6"]{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:12px !important}
.cmark{width:min(440px,100%);height:auto;aspect-ratio:1;margin:0}
.sheet>.wrap[style*="padding-top: 128px"],.sec>.wrap[style*="padding-top: 128px"],.wrap[style*="padding-top: 140px"]{padding-top:88px !important}
footer .wrap[style*="justify-content: space-between"]{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width: 640px){
.hero h1{font-size:44px !important}
h2.disp{font-size:30px !important}
blockquote.disp{font-size:32px !important}
.btn{height:52px;padding:0 20px;font-size:15px}
[style*="repeat(6"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}