*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --bg: #08080a;
    --surface: rgba(255,255,255,0.025);
    --surface-hover: rgba(255,255,255,0.05);
    --border: rgba(255,255,255,0.06);
    --border-light: rgba(255,255,255,0.1);
    --text: #f0f0f2;
    --text-dim: rgba(240,240,242,0.45);
    --text-muted: rgba(240,240,242,0.25);
    --accent: #a5b4fc;
    --accent-dim: rgba(165,180,252,0.12);
    --glow: rgba(165,180,252,0.06);
}

html{
    scroll-behavior:smooth;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.6;
}

::selection{background:var(--accent-dim);color:var(--accent)}

.grain{
    position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.02;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────────────────── NAV ─────────────────────────────── */
nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;justify-content:space-between;align-items:center;
    padding:1.75rem 3.5rem;
    background:transparent;
    transition:background 0.5s ease, border-color 0.5s ease;
    border-bottom:1px solid transparent;
}
nav.scrolled{
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    background:rgba(8,8,10,0.8);
    border-bottom-color:var(--border);
}
.nav-mark{font-size:1.25rem;font-weight:600;color:var(--text);text-decoration:none;letter-spacing:-0.02em}
.nav-cta{
    font-size:0.75rem;font-weight:400;color:var(--text-dim);text-decoration:none;
    letter-spacing:0.1em;text-transform:uppercase;
    padding:0.5rem 1.25rem;border:1px solid var(--border);border-radius:100px;
    transition:all 0.3s ease;
}
.nav-cta:hover{color:var(--text);border-color:var(--border-light);background:var(--surface)}

/* ─────────────────────────────── HERO ─────────────────────────────── */
.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 3rem;
    overflow:hidden;
}

.hero-content{
    position:relative;z-index:2;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.hero-number{
    font-size:clamp(3.5rem,10vw,9rem);
    font-weight:100;
    font-family:'JetBrains Mono',monospace;
    color:var(--text);
    letter-spacing:-0.04em;
    line-height:1;
    margin-bottom:1.5rem;
}

.hero h1{
    font-size:clamp(1.2rem,2.8vw,2rem);
    font-weight:300;
    line-height:1.4;
    letter-spacing:-0.01em;
    color:var(--text-dim);
    margin-bottom:2.5rem;
}

.fade-line{
    opacity:0;
    transform:translateY(15px);
    transition:opacity 1.2s ease, transform 1.2s ease;
}
.fade-line.visible{
    opacity:1;
    transform:translateY(0);
}

.hero-sub{
    font-size:clamp(1.1rem,2.5vw,1.5rem);
    color:var(--accent);
    font-weight:200;
    letter-spacing:0.01em;
}

.hero-glow{
    position:absolute;
    top:35%;left:50%;transform:translate(-50%,-50%);
    width:700px;height:700px;
    background:radial-gradient(circle,var(--glow) 0%,transparent 65%);
    pointer-events:none;z-index:1;
    animation:glowDrift 12s ease-in-out infinite alternate;
}
.hero-glow-2{
    position:absolute;
    top:55%;left:45%;transform:translate(-50%,-50%);
    width:500px;height:500px;
    background:radial-gradient(circle,rgba(120,80,220,0.04) 0%,transparent 65%);
    pointer-events:none;z-index:1;
    animation:glowDrift 16s ease-in-out infinite alternate-reverse;
}

@keyframes glowDrift{
    0%{transform:translate(-50%,-50%) scale(1)}
    100%{transform:translate(-48%,-52%) scale(1.08)}
}

/* ─────────────────────────────── STATEMENT ─────────────────────────────── */
.statement{
    padding:8rem 3rem;
}
.statement-inner{
    max-width:680px;
    margin:0 auto;
}
.statement-text{
    font-size:clamp(1rem,1.8vw,1.15rem);
    line-height:2;
    font-weight:300;
    color:var(--text-dim);
    text-align:center;
}

/* ─────────────────────────────── COMPARISON ─────────────────────────────── */
.comparison{
    padding:6rem 3rem 8rem;
    border-top:1px solid var(--border);
}

.comparison-header{
    text-align:center;
    margin-bottom:4rem;
}

.comparison-header h2{
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:100;
    line-height:1.25;
    letter-spacing:-0.03em;
}

.comparison-sub{
    font-size:1.1rem;
    color:var(--accent);
    font-weight:300;
    margin-top:0.75rem;
    letter-spacing:0.01em;
}

.section-label{
    font-size:0.6rem;
    letter-spacing:0.3em;
    color:var(--text-muted);
    text-transform:uppercase;
    margin-bottom:1.5rem;
    font-family:'JetBrains Mono',monospace;
    font-weight:300;
}

/* Bench table */
.bench-table{
    max-width:920px;
    margin:0 auto;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:var(--surface);
    backdrop-filter:blur(40px);
    -webkit-backdrop-filter:blur(40px);
    box-shadow:0 20px 80px rgba(0,0,0,0.3);
}

.bench-head{
    display:grid;
    grid-template-columns:1.8fr 1fr 1fr 0.85fr;
    padding:1rem 2rem;
    border-bottom:1px solid var(--border-light);
    background:rgba(255,255,255,0.015);
}
.bench-h-metric,.bench-h-before,.bench-h-after,.bench-h-gain{
    font-size:0.55rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--text-muted);
    font-family:'JetBrains Mono',monospace;
    font-weight:400;
}
.bench-h-after{color:var(--accent)}

.bench-group-label{
    padding:0.85rem 2rem 0.4rem;
    font-size:0.55rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--text-muted);
    font-weight:400;
    border-top:1px solid var(--border);
    background:rgba(255,255,255,0.01);
    font-family:'JetBrains Mono',monospace;
}

.bench-row{
    display:grid;
    grid-template-columns:1.8fr 1fr 1fr 0.85fr;
    padding:0.8rem 2rem;
    border-top:1px solid rgba(255,255,255,0.025);
    transition:background 0.3s ease;
    align-items:center;
}
.bench-row:hover{background:var(--surface-hover)}

.bench-metric{font-size:0.85rem;font-weight:400;color:var(--text)}
.bench-before{font-size:0.78rem;font-family:'JetBrains Mono',monospace;font-weight:300;color:var(--text-muted)}
.bench-after{font-size:0.78rem;font-family:'JetBrains Mono',monospace;font-weight:400;color:var(--text)}
.bench-gain{font-size:0.78rem;font-family:'JetBrains Mono',monospace;font-weight:400;color:var(--accent);text-align:right}

.last-row{border-bottom:none}

/* ─────────────────────────────── SCALE ─────────────────────────────── */
.scale{
    padding:8rem 3rem;
    border-top:1px solid var(--border);
}
.scale-header{text-align:center;margin-bottom:4rem}
.scale-header h2{
    font-size:clamp(1.8rem,3.5vw,2.8rem);
    font-weight:100;line-height:1.3;letter-spacing:-0.02em;
}
.scale-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    max-width:900px;margin:0 auto;
    background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden;
}
.glass-card{
    background:var(--surface);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
    padding:2.5rem 2rem;display:flex;flex-direction:column;gap:0.4rem;
    transition:background 0.4s ease;
}
.glass-card:hover{background:var(--surface-hover)}
.card-number{font-size:2.2rem;font-weight:200;letter-spacing:-0.03em;font-family:'JetBrains Mono',monospace}
.card-label{font-size:0.78rem;color:var(--text-muted);font-weight:300;letter-spacing:0.02em}
.accent-card .card-number{color:var(--accent)}

/* ─────────────────────────────── NUMBERS ─────────────────────────────── */
.numbers{padding:6rem 3rem;border-top:1px solid var(--border)}
.numbers-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:3.5rem}
.number-block{display:flex;flex-direction:column;align-items:center;gap:0.5rem;flex:1}
.big-num{font-size:clamp(2.5rem,5vw,3.8rem);font-weight:100;letter-spacing:-0.04em;font-family:'JetBrains Mono',monospace;color:var(--text)}
.num-label{font-size:0.72rem;color:var(--text-muted);text-align:center;font-weight:300;letter-spacing:0.02em}
.number-divider{width:1px;height:60px;background:var(--border)}

/* ─────────────────────────────── OS TEASE ─────────────────────────────── */
.os-tease{
    position:relative;
    padding:10rem 3rem;
    overflow:hidden;
    text-align:center;
    border-top:1px solid var(--border);
}
.tease-glow{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:500px;height:500px;
    background:radial-gradient(circle,rgba(165,180,252,0.03) 0%,transparent 60%);
    pointer-events:none;
}
.tease-content{position:relative;z-index:2}
.tease-whisper{font-size:0.95rem;color:var(--text-muted);font-weight:300;margin-bottom:2rem}
.os-tease h2{
    font-size:clamp(3rem,7vw,5rem);font-weight:100;letter-spacing:-0.05em;margin-bottom:0.5rem;
    background:linear-gradient(180deg,var(--text) 30%,var(--text-muted) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tease-sub{font-size:0.85rem;color:var(--text-muted);font-weight:300;letter-spacing:0.05em}

/* ─────────────────────────────── WAITLIST ─────────────────────────────── */
.waitlist{padding:10rem 3rem;text-align:center;border-top:1px solid var(--border)}
.waitlist-inner{max-width:480px;margin:0 auto}
.waitlist h2{
    font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:100;line-height:1.3;
    letter-spacing:-0.02em;margin-bottom:3rem;
}
.waitlist-form{margin-bottom:1.5rem}
.input-wrap{
    display:flex;border:1px solid var(--border);border-radius:100px;overflow:hidden;
    background:var(--surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-wrap:focus-within{border-color:var(--border-light);box-shadow:0 0 40px var(--glow)}
.input-wrap input{
    flex:1;padding:1rem 1.75rem;background:none;border:none;outline:none;
    color:var(--text);font-family:inherit;font-size:0.9rem;font-weight:300;
}
.input-wrap input::placeholder{color:var(--text-muted)}
.input-wrap button{
    padding:1rem 1.5rem;background:none;border:none;color:var(--text-dim);
    cursor:pointer;transition:color 0.3s ease;display:flex;align-items:center;
}
.input-wrap button:hover{color:var(--accent)}
.waitlist-note{font-size:0.72rem;color:var(--text-muted);font-weight:300}

/* ─────────────────────────────── FOOTER ─────────────────────────────── */
footer{padding:2rem 3.5rem;border-top:1px solid var(--border)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto}
.footer-mark{font-size:1rem;font-weight:600;letter-spacing:-0.02em}
.footer-copy,.footer-pat{font-size:0.68rem;color:var(--text-muted);font-weight:300;letter-spacing:0.02em}

/* ─────────────────────────────── SCROLL REVEALS ─────────────────────────────── */
.statement-inner,
.comparison-header,
.bench-table,
.scale-header,
.scale-grid,
.numbers-inner,
.tease-content,
.waitlist-inner{
    opacity:0;
    transform:translateY(40px);
    transition:opacity 1s ease, transform 1s ease;
}
.visible{opacity:1 !important;transform:translateY(0) !important}

/* ─────────────────────────────── RESPONSIVE ─────────────────────────────── */
@media(max-width:768px){
    nav{padding:1.25rem 1.5rem}
    .hero{padding:0 1.5rem}
    .statement,.comparison,.scale,.numbers,.os-tease,.waitlist{padding-left:1.5rem;padding-right:1.5rem}
    .bench-head,.bench-row{grid-template-columns:1.4fr 0.8fr 0.8fr 0.7fr;padding:0.6rem 1rem}
    .bench-metric{font-size:0.72rem}
    .bench-before,.bench-after,.bench-gain{font-size:0.65rem}
    .scale-grid{grid-template-columns:repeat(2,1fr)}
    .numbers-inner{flex-direction:column;gap:2rem}
    .number-divider{width:40px;height:1px}
}

@media(max-width:480px){
    .scale-grid{grid-template-columns:1fr}
    .bench-head,.bench-row{grid-template-columns:1fr 1fr}
    .bench-h-before,.bench-before{display:none}
    .bench-h-metric{display:none}
}