/* ============== Base / tokens ============== */
:root{
  --bg-1: #0b1220;
  --bg-2: #0f172a;
  --ink:  #e6e6e6;
  --muted:#9ca3af;

  --brand: #e81a51;
  --glass: rgba(255,255,255,.04);
  --panel-stroke: rgba(255,255,255,.06);

  --container: min(1100px, 92vw);
  --radius: 14px;

  --shadow-lg: 0 24px 48px rgba(0,0,0,.18);
  --blur: 6px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin:0;
  color: var(--ink);
  font-family: Inter, SF Pro Text, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background:
    radial-gradient(1200px 1700px at 45% 45%, #233a5a 0%, var(--bg-2) 45%, var(--bg-1) 100%);
  overflow-x: hidden;
}

/* Utility/layout */
.container{ width: var(--container); margin-inline:auto; }
.section{ padding: 92px 0; }
.section--alt{ background: #0e1527; }
.section--center{ text-align: center; }
.grid{ display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }

h1,h2,h3{ line-height:1.1; margin:0 0 .5em; }
p{ color:#cad2e1; max-width: 65ch; }
a{ color:#c0e0ff; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Buttons */
.btn{ display:inline-block; padding:.7em 1.05em; border-radius: 12px; font-weight:700; letter-spacing:.02em; }
.btn--primary{ background:#5aa9cb; color:#0b1220; box-shadow: var(--shadow-lg); }
.btn--primary:hover{ filter: brightness(1.05); text-decoration:none; }
.btn--quiet{ color:#cbd5e1; border:1px solid #2b3a55; }
.btn--ghost{ border:1px solid #334155; color:#cbd5e1; }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 10;
  backdrop-filter: blur(10px);
  background: linear-gradient(#0b1220cc, #0b1220aa);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:.04em; color:#fff; text-decoration:none; }
.brand__mark{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--brand); font-size:12px; font-weight:900; }
.brand__text{ font-weight:900; }

.nav__toggle{ display:none; }
.nav__list{ display:flex; gap:1.2rem; list-style:none; margin:0; padding:0; }
@media (max-width: 840px){
  .nav__toggle{ display:inline-block; border:1px solid #334155; border-radius:10px; background:transparent; color:#cbd5e1; padding:.5em .7em; }
  .nav__list{ position:absolute; right:var(--gap,4vw); top:62px; flex-direction:column; background:#0e1527; border:1px solid #27324a; border-radius:12px; padding:10px; display:none; }
  .nav__list.is-open{ display:flex; }
}

/* Hero */
.hero{ position: relative; min-height: 68vh; display:grid; align-items:center; }
.hero__content{ padding: 72px 0 24px; }
.hero__title{ font-size: clamp(34px, 6vw, 64px); }
.hero__accent{ color:#9beaf0; }
.hero__lede{ margin:.6rem 0 1.2rem; }
.actions{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.06); background:#0b1220; color:#94a3b8; }
.site-footer .container{ display:flex; gap:1rem; align-items:center; justify-content:space-between; padding: 26px 0; }
.site-footer nav a{ margin-left:1rem; }

/* ===================== Overlay & intro styles ===================== */

canvas{ display:block; position:fixed; inset:0; width:100vw; height:100vh; background:transparent; z-index:0; }
.overlay{ position:fixed; inset:0; z-index:1; pointer-events:none; display:grid; grid-template-rows:1fr auto; }

/* Stamp */
.stamp{
  --panel-scale: 1; /* JS writes to keep WebGL plane matched */
  place-self:center; text-align:left; color:#030000; letter-spacing:.02em; line-height:1.05;
  font-size:clamp(10px,1.6vw,18px); transform:translateY(-6vh);
  position: relative; padding: .9em 1.1em 1.05em 1.1em;
}
.stamp::before{
  content:""; position:absolute; inset:-0.7em;
  background: var(--glass);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--panel-stroke);
  backdrop-filter: blur(var(--blur));
  z-index: -1;
  transform: scale(var(--panel-scale));
  transform-origin: center;
}
.stamp .row{margin:.2em 0}.stamp .big{font-size:2.8em}.stamp .tight{display:flex;gap:1.1em;align-items:center}
.stamp .mono{font-feature-settings:"tnum"1,"ss01"1;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.stamp .roman{font-family:"Times New Roman",Times,serif;font-size:2.2em;margin-right:.6em;transform:translateY(.05em);display:inline-block}
.stamp .small{opacity:.95;letter-spacing:.06em}.stamp .bold{font-weight:800}
.stamp .pill{border:2px solid currentColor;border-radius:9999px;padding:.04em .55em;font-weight:700;line-height:1.2}
.stamp .badge{border:2px solid currentColor;border-radius:9999px;padding:.1em .6em .14em;font-weight:800;letter-spacing:.12em;margin-left:.6em}
.stamp .sp{letter-spacing:.18em;font-weight:700}.stamp .code{opacity:.9;letter-spacing:.08em}

/* ===================== INTRO (mosaic) ===================== */
.intro{
  position:fixed; inset:0; z-index:9999; background:#0f0a0a; color:#fff;
  display:grid; place-items:center; pointer-events:all;
  transition:opacity .65s ease, visibility .65s ease;
  background-image:
    linear-gradient(#ffffff20 1px, transparent 1px),
    linear-gradient(90deg, #ffffff20 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}
.intro.is-done{ opacity:0; visibility:hidden; }
.intro__stage{ position:absolute; inset:0; display:grid; place-items:center; }

/* Ticker (pre-roll) */
.ticker__row{ width:200vw; display:flex; gap:2rem; font-weight:900; letter-spacing:.06em;
  font-size:clamp(22px,6.2vw,72px); animation:ticker 14s linear infinite; text-transform:uppercase; }
.ticker__row span{ white-space:nowrap; }
.ticker__row--alt{ transform:translateY(1.2em); animation-direction:reverse; opacity:.85; }
@keyframes ticker{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.intro--stage2 .intro__ticker{ opacity:0; transition:opacity .4s ease; }

/* Tiles */
.intro__mosaic{ position:absolute; inset:0; overflow:hidden; }
.tile{
  position:absolute; width:var(--w); height:var(--h);
  left:0; top:0; transform:translate(var(--x), var(--y)) scale(1);
  background:#ffffff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);
  will-change: transform, opacity; opacity:1;
  transition: opacity .42s ease, transform .46s cubic-bezier(.2,.8,.2,1);
}
.tile--off{ opacity:0; transform:translate(var(--x), var(--y)) scale(.86); }

/* subtle paper/grain */
.intro::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.09; mix-blend-mode:screen;
  background-image:
    radial-gradient(#fff 0.6px, transparent 0.6px),
    radial-gradient(#fff 0.6px, transparent 0.6px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

/* click hints */
.click-hints{
  position: fixed; inset: 0; z-index: 2; pointer-events: none; transition: opacity .35s ease;
}
.click-hints.is-gone{ opacity: 0; }
.click-hints .hint{
  position: absolute; left: 0; top: 0;
  transform: translate(var(--x), var(--y));
  background: #ffffff19; color: #ea0f0fa9; font-weight: 800; font-size: 14px; letter-spacing: .06em;
  padding: .22em .55em; border-radius: 6px; text-transform: lowercase;
  box-shadow: 0 1px 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(255,255,255,.35);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
  opacity: 0; animation: clickPulse var(--dur,1.8s) ease-in-out infinite; animation-delay: var(--delay, 0s);
}
@keyframes clickPulse{
  0%   { opacity: 0;   transform: translate(var(--x), var(--y)) scale(.92); }
  50%  { opacity: .95; transform: translate(var(--x), var(--y)) scale(1);   }
  100% { opacity: 0;   transform: translate(var(--x), var(--y)) scale(.96); }
}

/* ===== Big animated headline INSIDE .stamp ===== */
.bigtype{
  /* inherits color from .stamp */
  pointer-events: none;
  font-weight: 900;
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase; /* caps */
  margin-top: .35em;         /* breathing room below existing rows */
}
.bigtype--in-stamp{ font-size: 2.8em; } /* same as .row.big */
.bigtype .row{ display:flex; flex-wrap:wrap; gap:.18em; }
.bigtype .w{
  display:inline-block;
  opacity: 0;
  transform: translateY(.6em) scale(.985);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.bigtype .w.on  { opacity: 1; transform: translateY(0) scale(1); }
.bigtype .w.off { opacity: 0; transform: translateY(-.35em) scale(.985); }

/* No HUD styles — agents 0/500 has been removed */