:root {
  --ink: #f3f0e9;
  --muted: #aaa9a4;
  --paper: #101115;
  --acid: #d8f85b;
  --line: rgba(243, 240, 233, 0.18);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--paper); }

body {
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
}

.landing { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; background:
  radial-gradient(circle at 78% 42%, rgba(216, 248, 91, 0.08), transparent 25%),
  radial-gradient(circle at 10% 90%, rgba(217, 131, 76, 0.08), transparent 23%), var(--paper); }

.noise { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .055; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); }

.grid-glow { position: absolute; inset: 0; z-index: -1; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 7rem 7rem; mask-image: linear-gradient(to bottom, transparent, black 20%, black 75%, transparent); }

.topbar, .footer { position: absolute; z-index: 10; left: clamp(1.5rem, 5vw, 5.5rem); right: clamp(1.5rem, 5vw, 5.5rem); display: flex; align-items: center; justify-content: space-between; }
.topbar { top: clamp(1.4rem, 4vw, 3rem); }
.footer { bottom: clamp(1.4rem, 4vw, 3rem); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: rgba(243,240,233,.56); }

.brand { display: inline-flex; gap: .7rem; align-items: center; color: var(--ink); text-decoration: none; font-weight: 720; letter-spacing: -.04em; font-size: 1.04rem; }
.brand-mark { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; position: relative; transform: rotate(30deg); }
.brand-mark i { display: block; width: .92rem; height: .92rem; border: 2px solid var(--acid); border-radius: 50%; position: absolute; }
.brand-mark i:nth-child(2) { transform: translate(.32rem, -.32rem); opacity: .65; }
.brand-mark i:nth-child(3) { transform: translate(-.32rem, .32rem); opacity: .33; }

.motion-toggle { border: 1px solid var(--line); background: rgba(16,17,21,.3); color: var(--muted); border-radius: 99px; padding: .58rem .78rem; font: inherit; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: .5rem; align-items: center; cursor: pointer; transition: border-color .25s, color .25s, background .25s; }
.motion-toggle:hover, .motion-toggle[aria-pressed="true"] { color: var(--ink); border-color: rgba(216,248,91,.5); background: rgba(216,248,91,.06); }
.status-dot { width: .4rem; height: .4rem; display: block; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 .22rem rgba(216,248,91,.11), 0 0 1rem rgba(216,248,91,.8); }
.motion-toggle[aria-pressed="true"] .status-dot { background: #aaa9a4; box-shadow: none; }

.hero { z-index: 6; position: absolute; width: min(36rem, 80vw); left: clamp(1.5rem, 12vw, 13rem); top: 50%; transform: translateY(-50%); }
.eyebrow { color: var(--acid); text-transform: uppercase; letter-spacing: .18em; font-size: .64rem; font-weight: 700; display: flex; align-items: center; gap: .65rem; margin: 0 0 2rem; }
.eyebrow span { display: block; width: 2.5rem; height: 1px; background: var(--acid); }
h1 { font-size: clamp(4.2rem, 10.8vw, 10.6rem); line-height: .8; letter-spacing: -.095em; font-weight: 500; margin: 0; }
h1 em { color: var(--acid); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.12em; padding-right: .08em; }
.intro { max-width: 22rem; margin: 2.1rem 0 2rem; color: var(--muted); line-height: 1.55; font-size: .92rem; }
.hero-link { display: inline-flex; align-items: center; gap: 1rem; padding-bottom: .7rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(243,240,233,.48); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; transition: color .25s, border-color .25s; }
.hero-link:hover { color: var(--acid); border-color: var(--acid); }
.arrow { font-size: 1.2rem; line-height: .6; transform: translateY(-.1rem); }

.gearfield { position: absolute; z-index: 1; inset: -8vh -5vw; pointer-events: none; }
.gear { position: absolute; overflow: visible; will-change: transform; animation: spin var(--duration) linear infinite var(--direction); filter: drop-shadow(0 1rem 1.5rem rgba(0,0,0,.28)); }
.gear-shape { fill: var(--gear-color); stroke: rgba(255,255,255,.22); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.gear-ring { fill: none; stroke: rgba(16,17,21,.38); stroke-width: 1.2; }
.gear-center { fill: var(--paper); stroke: rgba(255,255,255,.22); stroke-width: 2; }
.gear-spoke { stroke: rgba(16,17,21,.48); stroke-width: 1.3; stroke-linecap: round; }

@keyframes spin { to { transform: rotate(calc(var(--direction-deg) * 360deg)); } }

@media (max-width: 700px) {
  body { overflow: hidden; }
  .hero { left: 1.5rem; width: calc(100vw - 3rem); top: 56%; }
  h1 { font-size: clamp(4.25rem, 20vw, 8rem); }
  .intro { font-size: .84rem; max-width: 18rem; margin-top: 1.6rem; }
  .footer-note { display: none; }
  .gearfield { inset: -4vh -30vw; opacity: .86; }
  .topbar, .footer { left: 1.5rem; right: 1.5rem; }
  .motion-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gear { animation-play-state: paused; }
}