@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;700&display=swap');

:root{--black:#050505;--white:#f2f2ee;--gray:#9a9a9a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;width:100%}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
header{position:fixed;top:0;left:0;right:0;height:76px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;z-index:20;background:rgba(5,5,5,.82);backdrop-filter:blur(12px);border-bottom:1px solid #2a2a2a}
.logo{font:28px "Archivo Black"}
nav{display:flex;gap:28px}
nav a{font:11px "IBM Plex Mono";letter-spacing:.13em}
.hero{position:relative;min-height:100vh;padding-top:76px;display:grid;align-items:end;overflow:hidden}
.hero-img{position:absolute;inset:76px 0 0;height:calc(100% - 76px);object-fit:cover}
.hero-wash{position:absolute;inset:76px 0 0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.68) 36%,rgba(0,0,0,.08) 70%),linear-gradient(0deg,rgba(0,0,0,.76),transparent 45%)}
.hero-copy{position:relative;z-index:2;padding:8vw 4vw 7vw;max-width:900px}
.case{font:10px "IBM Plex Mono";letter-spacing:.2em;color:#aaa}
h1{font:clamp(58px,8vw,132px)/.8 "Archivo Black";letter-spacing:-.065em;margin:24px 0 28px}
h1 em{font-style:normal;color:transparent;-webkit-text-stroke:2px white}
.hero-copy p{max-width:590px;font-size:18px;line-height:1.6;color:#c0c0c0}
.actions{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border:1px solid;font:11px "IBM Plex Mono";letter-spacing:.12em}
.btn.white{background:white;color:black;border-color:white}
.btn.clear{border-color:#777}
.btn.black{background:black;color:white;border-color:black}
.status{position:absolute;right:3vw;bottom:3vw;z-index:3;width:250px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.72);padding:18px;display:grid;grid-template-columns:1fr;gap:6px}
.status span{font:9px "IBM Plex Mono";letter-spacing:.15em;color:#888}
.status strong{font:12px "IBM Plex Mono";margin-bottom:9px}
.transition-section{padding:130px 5vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center;background:#0b0b0b}
.transition-copy span,.proof-head span,.buy>div>span{font:10px "IBM Plex Mono";letter-spacing:.2em;color:#888}
.transition-copy h2,.proof h2,.buy h2{font:clamp(50px,7vw,110px)/.88 "Archivo Black";letter-spacing:-.06em;margin:20px 0 28px}
.transition-copy p,.buy p{max-width:580px;color:#aaa;line-height:1.8}
.portrait-wrap{position:relative;overflow:hidden;border:1px solid #555}
.portrait-wrap img{filter:grayscale(1);aspect-ratio:1;object-fit:cover}
.wipe{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 48%,rgba(255,255,255,.92) 52% 100%);mix-blend-mode:screen;transform:translateX(-100%);animation:wipe 6s ease-in-out infinite alternate}
.before-label,.after-label{position:absolute;bottom:14px;font:10px "IBM Plex Mono";letter-spacing:.12em;background:#050505;padding:8px 10px}
.before-label{left:14px}.after-label{right:14px;background:white;color:black}
.proof{padding:130px 5vw;background:var(--white);color:black}
.proof-head{max-width:1100px}
.timeline{margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid black;border-left:2px solid black}
.timeline article{min-height:260px;padding:28px;border-right:2px solid black;border-bottom:2px solid black}
.timeline span{font:11px "IBM Plex Mono"}
.timeline h3{font:28px/1 "Archivo Black";margin:80px 0 16px}
.timeline p{line-height:1.6;color:#444}
.split{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.split>div:not(.center-tag){padding:6vw;display:flex;flex-direction:column;justify-content:flex-end}
.dark{background:#050505;color:white}.light{background:white;color:black}
.split span{font:10px "IBM Plex Mono";letter-spacing:.2em}
.split h3{font:clamp(58px,8vw,130px)/.84 "Archivo Black";letter-spacing:-.06em;margin:18px 0 0}
.center-tag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);font:11px "IBM Plex Mono";letter-spacing:.18em;color:white;mix-blend-mode:difference}
.manifesto{padding:90px 4vw;border-top:1px solid white;border-bottom:1px solid white}
.manifesto p{margin:0;font:clamp(42px,8vw,120px)/.9 "Archivo Black";letter-spacing:-.06em}
.manifesto p:nth-child(2){color:transparent;-webkit-text-stroke:1px white}
.buy{display:grid;grid-template-columns:.9fr 1.1fr}
.buy>div:first-child{padding:110px 5vw;background:#111}
.panel{background:white;color:black;padding:110px 5vw}
.ca-row{display:grid;grid-template-columns:1fr auto;border:2px solid black}
.ca-row code{padding:24px;font:18px "IBM Plex Mono"}
.ca-row button{border:0;background:black;color:white;padding:0 24px;font:11px "IBM Plex Mono"}
#feedback{height:26px;padding-top:8px;font:10px "IBM Plex Mono"}
.steps{margin:40px 0;border-top:2px solid black}
.steps div{display:grid;grid-template-columns:50px 1fr;padding:18px 0;border-bottom:1px solid #999}
.steps span,.steps p{margin:0;font:11px "IBM Plex Mono"}
footer{padding:60px 5vw;display:grid;grid-template-columns:.5fr 1fr 1.5fr;gap:40px;border-top:1px solid #333}
footer strong{font:60px "Archivo Black"}
footer div{display:grid;gap:10px;font:11px "IBM Plex Mono"}
footer p{margin:0;color:#777;line-height:1.7;font-size:12px}
@keyframes wipe{to{transform:translateX(100%)}}
@media(max-width:900px){nav{display:none}.transition-section,.buy{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}.status{position:relative;right:auto;bottom:auto;margin:0 4vw 32px}.split{grid-template-columns:1fr;min-height:900px}.center-tag{transform:translate(-50%,-50%)}footer{grid-template-columns:1fr}}
@media(max-width:620px){header{height:66px}.hero{padding-top:66px}.hero-img,.hero-wash{inset:66px 0 0}.hero-copy{padding:120px 20px 40px}h1{font-size:58px}h1 em{-webkit-text-stroke-width:1px}.status{width:auto;margin:0 20px 20px}.transition-section,.proof,.buy>div:first-child,.panel{padding:90px 20px}.timeline{grid-template-columns:1fr}.split>div:not(.center-tag){padding:60px 20px}.manifesto{padding:70px 20px}.ca-row{grid-template-columns:1fr}.ca-row button{min-height:50px}footer{padding:50px 20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}