@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #f2f0e9;
  --muted: #9c9d9b;
  --bg: #07080b;
  --panel: #101218;
  --acid: #c7ff3d;
  --violet: #8c68ff;
  --line: rgba(242,240,233,.17);
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  overflow-x: hidden;
}
::selection { color: var(--bg); background: var(--acid); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 50; padding: .8rem 1rem; color: #000; background: var(--acid); font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; 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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; }
.orb-a { width: 28rem; height: 28rem; top: 4rem; right: -12rem; background: var(--violet); }
.orb-b { width: 20rem; height: 20rem; top: 74rem; left: -10rem; background: var(--acid); }

.site-header { height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem, 4vw, 4rem); border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { width: 25px; height: 25px; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; transform: rotate(-12deg); }
.brand-mark i { border-radius: 99px; background: var(--acid); transform-origin: bottom; animation: bars 1.4s ease-in-out infinite alternate; }
.brand-mark i:nth-child(2) { animation-delay: -.4s; }
.brand-mark i:nth-child(3) { animation-delay: -.8s; }
@keyframes bars { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.header-meta { display: flex; align-items: center; gap: .7rem; color: var(--muted); font: 400 .68rem var(--mono); letter-spacing: .11em; }
.header-time { min-width: 65px; color: var(--ink); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }

.hero { position: relative; min-height: calc(100vh - 84px); padding: clamp(3rem, 8vh, 7rem) clamp(1.25rem, 4vw, 4rem) 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.eyebrow { display: flex; justify-content: space-between; color: var(--muted); font: .72rem var(--mono); letter-spacing: .13em; }
.hero-title { margin: auto 0 0; font-size: clamp(4rem, 11.5vw, 11.5rem); font-weight: 600; letter-spacing: -.08em; line-height: .81; }
.hero-title span { display: block; }
.hero-title .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(242,240,233,.85); margin-left: 7vw; }
.hero-lower { display: flex; justify-content: space-between; align-items: end; gap: 3rem; padding: clamp(2rem, 6vh, 5rem) 9vw 0 7vw; }
.hero-lower p { max-width: 36rem; margin: 0; color: #c3c3bf; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.55; }
.round-cta { width: 104px; height: 104px; flex: 0 0 104px; border: 1px solid rgba(199,255,61,.6); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .4rem; color: var(--acid); text-decoration: none; font: .7rem var(--mono); transition: color .3s, background .3s, transform .3s; }
.round-cta svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.round-cta:hover { color: #090a0b; background: var(--acid); transform: rotate(8deg); }
.hero-index { position: absolute; right: 4vw; top: 24%; color: rgba(242,240,233,.12); font: 300 clamp(4rem,8vw,8rem) var(--mono); }
.hero-index span { font-size: .2em; color: var(--muted); }

.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--acid); color: #080908; transform: rotate(-1.2deg) scale(1.02); }
.marquee-track { width: max-content; display: flex; gap: 2rem; align-items: center; padding: 1rem 0; font: 600 .76rem var(--mono); letter-spacing: .12em; animation: marquee 22s linear infinite; }
.marquee-track b { font-size: 1.1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

.playground { padding: clamp(7rem, 13vw, 13rem) clamp(1.25rem, 4vw, 4rem); display: grid; grid-template-columns: minmax(210px,.34fr) 1fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.section-copy { align-self: start; padding-top: 2rem; }
.kicker { color: var(--acid) !important; font: .7rem var(--mono) !important; letter-spacing: .12em; }
.section-copy h2, .manifesto h2 { margin: 1.2rem 0; font-size: clamp(3rem, 6vw, 6.7rem); line-height: .92; letter-spacing: -.075em; font-weight: 500; }
.section-copy p { color: var(--muted); line-height: 1.7; font-size: .95rem; }
.signal-panel { position: relative; height: min(68vw, 650px); min-height: 440px; border: 1px solid var(--line); background: radial-gradient(circle at center, rgba(140,104,255,.08), transparent 55%), #0a0b0f; cursor: crosshair; overflow: hidden; }
#signalCanvas { width: 100%; height: 100%; display: block; }
.panel-top { position: absolute; top: 1.2rem; left: 1.3rem; right: 1.3rem; display: flex; justify-content: space-between; color: var(--muted); font: .65rem var(--mono); letter-spacing: .1em; pointer-events: none; }
.reset-button { position: absolute; right: 1.3rem; bottom: 1.3rem; border: 0; color: var(--ink); background: rgba(7,8,11,.75); backdrop-filter: blur(10px); padding: .7rem .8rem; font: .64rem var(--mono); letter-spacing: .1em; cursor: pointer; }
.reset-button span { color: var(--acid); font-size: 1rem; margin-left: .4rem; }
.reset-button:hover, .reset-button:focus-visible { outline: 1px solid var(--acid); }
.panel-corner { position: absolute; width: 18px; height: 18px; border-color: var(--acid); opacity: .8; pointer-events: none; }
.corner-tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.corner-tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

.manifesto { border-top: 1px solid var(--line); padding: clamp(6rem, 12vw, 12rem) clamp(1.25rem, 4vw, 4rem) 5rem; }
.manifesto-label { color: var(--muted); font: .7rem var(--mono); letter-spacing: .14em; }
.manifesto-copy { display: grid; grid-template-columns: 1.3fr .7fr; gap: 8vw; margin: 3rem 0 8rem; align-items: end; }
.manifesto h2 { max-width: 900px; margin: 0; }
.manifesto-copy p { max-width: 33rem; color: #b9bab6; line-height: 1.75; }
.metrics { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }
.metrics article { min-height: 190px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.metrics article:last-child { border: 0; }
.metrics strong { color: var(--acid); font: 300 clamp(3.5rem,7vw,7rem) var(--mono); letter-spacing: -.08em; }
.metrics span { color: var(--muted); font: .68rem var(--mono); letter-spacing: .12em; }
footer { min-height: 110px; border-top: 1px solid var(--line); padding: 2rem clamp(1.25rem, 4vw, 4rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; color: var(--muted); font: .64rem var(--mono); letter-spacing: .1em; }
footer p:last-child { text-align: right; }
footer a { text-decoration: none; color: var(--ink); }
footer a span { color: var(--acid); margin-left: .4rem; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.75,.3,1), transform .8s cubic-bezier(.2,.75,.3,1); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .site-header { height: 70px; }
  .header-meta > span:nth-child(2), .header-time { display: none; }
  .hero { min-height: calc(100svh - 70px); padding-top: 2rem; }
  .hero-title { font-size: clamp(3.7rem, 18vw, 7rem); line-height: .86; margin-top: auto; }
  .hero-title .outline { margin-left: 0; }
  .hero-index { display: none; }
  .hero-lower { padding: 2.5rem 0 0; gap: 1rem; }
  .round-cta { width: 82px; height: 82px; flex-basis: 82px; }
  .playground { grid-template-columns: 1fr; }
  .section-copy { max-width: 32rem; }
  .signal-panel { height: 70svh; min-height: 480px; }
  .manifesto-copy { grid-template-columns: 1fr; margin-bottom: 5rem; }
  .manifesto-copy p { margin-left: 15vw; }
  .metrics { grid-template-columns: 1fr; }
  .metrics article { min-height: 140px; border-right: 0; border-bottom: 1px solid var(--line); }
  footer { grid-template-columns: 1fr 1fr; }
  footer p:first-child { display: none; }
}
@media (max-width: 480px) {
  .eyebrow span:last-child { display: none; }
  .hero-lower p { font-size: .9rem; }
  .round-cta { width: 72px; height: 72px; flex-basis: 72px; }
  .manifesto-copy p { margin-left: 0; }
  .signal-panel { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}