:root{--bg:#0C0C0B;--ink:#F4F1E8;--mute:#8E8A80;--dim:#5A5751;--lime:#C8FF3D;--hair:rgba(244,241,232,.12);
--e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.6,0,0,1);--pad:clamp(20px,3.9vw,56px)}
*{box-sizing:border-box;margin:0}
html,body{background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);}
.logo img{height:38px;width:auto;filter:invert(1) hue-rotate(180deg) brightness(1.05);mix-blend-mode:screen;display:block}
.nav nav{display:flex;gap:34px;font-size:14px;font-weight:500;color:var(--mute);letter-spacing:-.005em}
.nav nav a{transition:color .2s var(--e-out)} .nav nav a:hover{color:var(--ink)}
.nav-cta{font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;border:1px solid var(--hair);background:rgba(244,241,232,.04);backdrop-filter:blur(8px)}
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:-3;display:block}
.vignette{position:absolute;inset:0;z-index:-2;pointer-events:none;
background:linear-gradient(to top,rgba(12,12,11,.94) 0%,rgba(12,12,11,.7) 26%,rgba(12,12,11,0) 52%),radial-gradient(90% 60% at 20% 90%,rgba(12,12,11,.6),transparent 70%)}
.grain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5;opacity:.09;mix-blend-mode:overlay}
.grain__tile{position:absolute;inset:-256px;background:url(grain.png);animation:grain 1.6s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}12.5%{transform:translate(-83px,41px)}25%{transform:translate(57px,-121px)}37.5%{transform:translate(-140px,-30px)}50%{transform:translate(98px,77px)}62.5%{transform:translate(-22px,133px)}75%{transform:translate(161px,-64px)}87.5%{transform:translate(-111px,102px)}}
.eyebrow{position:absolute;top:118px;left:var(--pad);font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);display:flex;gap:10px;align-items:center}
.dot{width:6px;height:6px;background:var(--lime);display:inline-block}
.copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(36px,6vh,64px)}
h1{font-weight:600;font-size:clamp(40px,5.6vw,84px);line-height:.98;letter-spacing:-.045em;max-width:13.5em}
h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
h1 mark{white-space:nowrap;display:inline-block;background:none;color:var(--bg);position:relative;z-index:0;padding:0 .08em;margin:0 -.04em}
h1 mark::before{content:"";position:absolute;inset:.1em -.02em .02em;background:var(--lime);z-index:-1;border-radius:.12em .3em .16em .26em;transform:skew(-4deg) scaleX(var(--mk,1));transform-origin:left;transition:transform 1.1s var(--e-io) .9s}
.row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:34px;padding-top:22px;border-top:1px solid var(--hair)}
.sub{font-size:17px;line-height:1.5;color:#BDB8AC;max-width:30em;letter-spacing:-.01em}
.ctas{display:flex;gap:10px;flex-shrink:0}
.btn{font-size:15px;font-weight:600;letter-spacing:-.01em;padding:15px 22px;border-radius:999px;transition:transform .5s var(--e-out),background .2s}
.btn--main{background:var(--ink);color:var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px -10px rgba(200,255,61,.35)}
.btn--main span{display:inline-block;transition:transform .5s var(--e-out)} .btn--main:hover span{transform:translateX(4px)}
.btn--ghost{border:1px solid var(--hair);color:var(--ink)} .btn--ghost:hover{background:rgba(244,241,232,.06)}
.btn:active{transform:scale(.97)}
.engines span,.tag{position:absolute;left:0;top:0;font:400 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--mute);white-space:nowrap;will-change:transform;opacity:0;transition:opacity .8s var(--e-out)}
.engines span::before{content:"";position:absolute;left:0;top:14px;width:1px;height:18px;background:linear-gradient(var(--mute),transparent)}
.engines span::after{content:"";position:absolute;left:-2px;top:32px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.engines span{background:rgba(12,12,11,.78);padding:4px 7px;border-radius:3px;color:#CFCABF;backdrop-filter:blur(6px)} .engines span::before{left:7px;top:19px;height:13px} .engines span::after{left:5px;top:32px}
.tag{color:var(--ink);display:flex;gap:8px;align-items:center;margin-top:0}
.tag{padding:5px 8px;border-radius:4px;background:rgba(12,12,11,.7);backdrop-filter:blur(6px)} .tag i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.tag b{font-weight:400;color:var(--lime)} .tag em{font-style:normal;color:var(--mute)}
.caption{position:absolute;right:var(--pad);top:118px;font:400 10.5px/1.4 'JetBrains Mono',monospace;color:var(--dim);letter-spacing:.04em;max-width:22em;text-align:right}
.is-in .show{opacity:1}
/* intro */
.copy,.eyebrow,.caption{opacity:0;transform:translateY(14px);transition:opacity 1s var(--e-out),transform 1.2s var(--e-out)}
h1 .l>*,h1 .l{ }
.ready .copy,.ready .eyebrow,.ready .caption{opacity:1;transform:none}
.ready .eyebrow{transition-delay:.15s}.ready .copy{transition-delay:.3s}.ready .caption{transition-delay:.6s}
html:not(.ready) h1 mark{--mk:0}
@media (max-width:760px){
 .nav nav{display:none}.nav{padding:16px 20px}.logo img{height:30px}.nav-cta{font-size:12px;padding:9px 13px}
 .eyebrow{top:84px;font-size:10px}.caption{display:none}
 h1{font-size:40px;line-height:1;letter-spacing:-.04em}
 .row{flex-direction:column;align-items:stretch;gap:20px;margin-top:20px;padding-top:16px}
 .sub{font-size:15px}.ctas{flex-direction:column}.btn{text-align:center;padding:15px}
 .copy{bottom:24px}
 .vignette{background:linear-gradient(to top,rgba(12,12,11,.96) 0%,rgba(12,12,11,.75) 45%,transparent 75%)}
}
@media (prefers-reduced-motion:reduce){.grain__tile{animation:none}*{transition-duration:.01ms!important}}