:root { --bg: #050b16; --ink: #eef4fc; --soft: #c5d1e0; --muted: #8fa1b8; --data: #65c8f1; --ai: #f2b544; --human: #4bdc98; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 Inter, system-ui, sans-serif; }
a { color: inherit; }
.btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 99px; background: var(--ink); color: var(--bg); font: 600 .875rem Inter, sans-serif; text-decoration: none; transition: transform .3s, box-shadow .3s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(101, 200, 241, .6); }
.btn--ghost { background: rgba(255, 255, 255, .04); color: var(--ink); border: 1px solid rgba(255, 255, 255, .2); }
.nav { position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 32px)); display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 20px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 8px; font: 600 1.0625rem "Space Grotesk", sans-serif; text-decoration: none; }
.brand b { color: var(--data); }
.brand span { color: var(--muted); font-weight: 500; }
.nav nav { display: flex; gap: 22px; margin-left: auto; font-size: .875rem; color: var(--soft); }
.nav nav a { text-decoration: none; transition: color .2s; } .nav nav a:hover { color: var(--ink); }
.nav .btn { min-height: 40px; padding: 0 18px; }
.nav > .btn { margin-left: auto; } .nav nav + .btn { margin-left: 8px; }

.hero { position: relative; height: 280svh; }
.pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
#gl, #labels { position: absolute; inset: 0; }
#labels { pointer-events: none; }
.pin::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 11, 22, .9) 0%, rgba(5, 11, 22, .4) 22%, transparent 40%, transparent 84%, rgba(5, 11, 22, .85) 100%); }
.intro { position: absolute; z-index: 5; left: 0; right: 0; top: 0; padding: 96px 24px 0; text-align: center; will-change: transform, opacity; }
.k { margin: 0; font: 500 .75rem "Space Grotesk", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--data); }
.intro h1 { margin: 10px auto 18px; max-width: 22em; font: 600 clamp(1.7rem, 2.7vw, 2.75rem)/1.08 "Space Grotesk", sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.intro h1 .w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(8px); animation: rise 1.1s cubic-bezier(.22, 1, .36, 1) forwards; }
.intro h1 .hl .w { background: linear-gradient(90deg, #b9ecff, #65c8f1 60%, #9fe2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.acts { display: flex; justify-content: center; gap: 12px; opacity: 0; animation: fade 1.2s 1s forwards; }
@keyframes fade { to { opacity: 1; } }
.cap { position: absolute; z-index: 5; left: 50%; bottom: 10svh; width: min(92vw, 1000px); transform: translateX(-50%); text-align: center; opacity: 0; }
.cap h2 { margin: 0; font: 600 clamp(1.8rem, 3.2vw, 3rem)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.scrollhint { position: absolute; z-index: 5; right: 28px; bottom: 22px; display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--muted); }
.scrollhint b { width: 2px; height: 34px; border-radius: 2px; background: linear-gradient(var(--data), transparent); animation: drip 1.8s 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; } }

.lbl .in { padding: 5px 11px; border-radius: 99px; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--soft); background: rgba(10, 22, 42, .85); border: 1px solid rgba(255, 255, 255, .14); }
.lbl.left .in { color: #9fb0c6; border-style: dashed; }
.lbl.left.know .in { color: #bff3da; border-color: rgba(75, 220, 152, .55); }
.lbl.right .in { transform: translateX(55%); color: var(--ink); border-color: var(--c, rgba(101, 200, 241, .5)); }
.lbl.right.tick .in::after { content: " ✓"; color: var(--human); }
.lbl.layer .in { transform: translateY(-18px); background: none; border: 0; backdrop-filter: none; padding: 0; font: 600 14px "Space Grotesk", sans-serif; letter-spacing: .02em; color: var(--ink); text-align: center; }
.lbl.layer small { display: block; font: 500 10.5px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--data); }

.after { padding: 14svh 24px 18svh; max-width: 1180px; margin: 0 auto; }
.after h2 { margin: 0 0 12px; font: 600 clamp(1.8rem, 3vw, 2.8rem)/1.08 "Space Grotesk", sans-serif; letter-spacing: -.03em; }
.after > p { margin: 0 0 32px; color: var(--soft); max-width: 36em; }
@media (max-width: 760px) { .lbl.left { display: none; } .lbl.right .in { transform: translateX(-35%); } .nav nav { display: none; } .intro { padding-top: 88px; } .intro h1 { font-size: 1.65rem; } .lbl .in { font-size: 10.5px; padding: 4px 8px; } }
@media (prefers-reduced-motion: reduce) { .intro h1 .w, .acts { animation: none; opacity: 1; transform: none; filter: none; } .scrollhint b { animation: none; } }