:root {
  --bg: #08090d;
  --panel: rgba(255,255,255,.075);
  --text: #f4f1ea;
  --muted: #b8b1a6;
  --line: rgba(255,255,255,.18);
  --hot: #ff4d7d;
  --cold: #61dafb;
  --gold: #ffd166;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
main { overflow: hidden; }
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  padding: 6rem 1.25rem;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,77,125,.28), transparent 28rem),
    radial-gradient(circle at 80% 20%, rgba(97,218,251,.22), transparent 25rem),
    linear-gradient(135deg, #090a10, #11131f 55%, #07080b);
}
.noise {
  position: absolute; inset: 0; opacity: .14; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.orb { position: absolute; border-radius: 999px; filter: blur(20px); opacity: .55; animation: drift 9s ease-in-out infinite alternate; }
.orb.one { width: 14rem; height: 14rem; background: var(--hot); left: 8%; bottom: 12%; }
.orb.two { width: 18rem; height: 18rem; background: var(--cold); right: 7%; top: 10%; animation-delay: -3s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(2rem,-1rem,0) scale(1.08); } }
.hero-inner { max-width: 980px; position: relative; z-index: 1; text-align: center; }
.eyebrow, .small, .label { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; }
h1 { font-size: clamp(3.25rem, 10vw, 8.8rem); line-height: .85; letter-spacing: -.08em; margin: .25em 0; text-wrap: balance; }
.lede { max-width: 780px; margin: 0 auto 2rem; font-size: clamp(1.05rem, 2.2vw, 1.45rem); color: var(--muted); }
.cta, button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.08);
  border-radius: 999px; padding: .9rem 1.15rem; text-decoration: none; font-weight: 750;
  backdrop-filter: blur(10px); cursor: pointer; transition: transform .2s, background .2s;
}
.cta:hover, button:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.card { min-height: 62vh; padding: clamp(1.25rem, 5vw, 4rem); background: #0e1018; display: flex; flex-direction: column; justify-content: flex-end; }
.card h2, .tension h2, .blackbox h2 { font-size: clamp(2rem, 5vw, 4.5rem); line-height: .93; letter-spacing: -.05em; margin: .2em 0; }
.card p, .formula p, .blackbox p, .manifesto p, .sticky p { color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.3rem); max-width: 720px; }
.human { background: linear-gradient(160deg, rgba(255,77,125,.12), #0e1018 55%); }
.machine { background: linear-gradient(200deg, rgba(97,218,251,.12), #0e1018 55%); }
.formula { padding: clamp(3rem, 8vw, 8rem) 1.25rem; max-width: 1100px; margin: 0 auto; text-align: center; }
.equation { margin: 1rem auto; padding: clamp(1rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: 28px; background: var(--panel); font-size: clamp(1.3rem, 4vw, 3.2rem); letter-spacing: -.04em; box-shadow: 0 20px 90px rgba(0,0,0,.28); }
.equation strong { color: var(--gold); }
.tension { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 5vw, 5rem); padding: clamp(3rem, 8vw, 8rem) clamp(1.25rem, 6vw, 6rem); border-top: 1px solid var(--line); }
.sticky { align-self: start; position: sticky; top: 2rem; }
.steps { display: grid; gap: 1rem; }
.steps div { border: 1px solid var(--line); border-radius: 24px; padding: 1.25rem; background: var(--panel); display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: center; }
.steps b { font-size: 2rem; color: var(--gold); }
.steps span { font-size: clamp(1.1rem, 2vw, 1.55rem); }
.blackbox { text-align: center; padding: clamp(3rem, 8vw, 8rem) 1.25rem; background: radial-gradient(circle at 50% 0%, rgba(255,209,102,.15), transparent 28rem); }
.blackbox h2 { max-width: 900px; margin-inline: auto; }
.blackbox p { margin-inline: auto; }
.perturbation { min-height: 2lh; transition: opacity .2s, transform .2s; }
.manifesto { padding: clamp(3rem, 8vw, 8rem) clamp(1.25rem, 12vw, 12rem); border-top: 1px solid var(--line); background: #f4f1ea; color: #11131f; }
.manifesto p { color: #11131f; font-size: clamp(1.55rem, 4vw, 4rem); line-height: 1.05; letter-spacing: -.055em; max-width: 1200px; }
@media (max-width: 760px) { .split, .tension { grid-template-columns: 1fr; } .card { min-height: 48vh; } .sticky { position: static; } }