/* TidyChaos — design tokens & base */
:root {
  --bg: #020202;
  --bg-elev: #0a0a0a;
  --fg: #f4f4f4;
  --fg-muted: rgba(244, 244, 244, 0.62);
  --fg-faint: rgba(244, 244, 244, 0.38);
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --accent-cyan: #7AE6FF;
  --accent-violet: #B47CFF;
  --accent-grad: linear-gradient(110deg, #7AE6FF 0%, #B47CFF 100%);
  --container: 1440px;
  --pad: 48px;
  --radius-pill: 999px;
  --radius-card: 18px;
  --radius-lg: 28px;
  --type-display: "Onest", "Inter", system-ui, sans-serif;
  --type-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--type-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
  letter-spacing: -0.011em;
}
body { overflow-x: hidden; min-height: 100vh; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: var(--accent-violet); color: #000; }

:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; border-radius: 4px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (max-width: 720px) { :root { --pad: 20px; } }

/* ─── Type scale ─────────────────────────────────────────── */
.eyebrow {
  font-family: var(--type-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.section-label {
  font-family: var(--type-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan);
}
.h-section {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.96;
  text-wrap: balance;
}
.body-lg { font-size: 1.125rem; line-height: 1.55; color: var(--fg-muted); max-width: 56ch; }
.body { font-size: 1rem; line-height: 1.6; color: var(--fg-muted); }
.caps-mono {
  font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-muted);
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.btn .icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.12);
}
.btn .icon svg { width: 14px; height: 14px; }
.btn-primary {
  background: var(--fg);
  color: #000;
}
.btn-primary .icon { background: rgba(0,0,0,.08); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 40px -10px rgba(180,124,255,0.4); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--hairline-strong);
}
.btn-ghost .icon { background: rgba(255,255,255,.06); border: 1px solid var(--hairline); }
.btn-ghost:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.32); }

.btn-sm { padding: 6px 6px 6px 16px; font-size: 13px; }
.btn-sm .icon { width: 26px; height: 26px; }
.btn-sm .icon svg { width: 12px; height: 12px; }

/* ─── Cards & hairlines ──────────────────────────────────── */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.card:hover { border-color: var(--hairline-strong); }
.hr { height: 1px; background: var(--hairline); width: 100%; }

/* ─── Nav ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(2,2,2,0.55);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
}
.wordmark {
  font-weight: 600; letter-spacing: -0.02em; font-size: 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.wordmark .dot {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--accent-grad);
  box-shadow: 0 0 14px rgba(122,230,255,0.6);
}
.nav-links { display: flex; gap: 30px; justify-self: center; }
.nav-links a {
  font-size: 14px; color: var(--fg-muted);
  transition: color .2s var(--ease);
  position: relative;
  padding: 6px 2px;
}
.nav-links a:hover { color: var(--fg); }
.nav-cta { justify-self: end; display: flex; gap: 12px; align-items: center; }
@media (max-width: 880px) { .nav-links { display: none; } .nav-inner { grid-template-columns: 1fr auto; } }

/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 56px 0 96px;
  overflow: hidden;
}
.hero-shader {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-shader canvas { width: 100% !important; height: 100% !important; display: block; }
.hero-shader::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(2,2,2,0.4) 55%, rgba(2,2,2,0.95) 100%),
    linear-gradient(180deg, transparent 60%, var(--bg) 100%);
  pointer-events: none;
}
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.hero-inner { position: relative; z-index: 2; padding-top: 28px; }
.meta-strip {
  display: flex; gap: 20px; align-items: center;
  font-family: var(--type-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.meta-strip .sep { opacity: .4; }
.meta-strip .live::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent-cyan); margin-right: 8px;
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.hero-headline {
  font-size: clamp(3rem, 9.4vw, 9.5rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-top: 32px;
  text-wrap: balance;
}
.hero-headline .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.18em; }
.hero-headline .word-italic { font-style: italic; font-weight: 400; color: var(--fg-muted); }
.inline-media {
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #000;
}
.inline-media canvas { width: 100% !important; height: 100% !important; display: block; }
.inline-media .pill-tag {
  position: absolute; bottom: 10px; left: 12px;
  font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.4); padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px);
}

/* Fixed top-right shader tile (decorative, behind content text). */
.inline-media-fixed {
  position: fixed;
  top: 96px;
  right: 32px;
  width: clamp(160px, 16vw, 240px);
  height: clamp(110px, 11vw, 160px);
  z-index: 1;
  pointer-events: none;
  animation: ime-fixed-in 720ms cubic-bezier(.2,.7,.2,1) 200ms backwards;
}
@keyframes ime-fixed-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .inline-media-fixed {
    top: 80px; right: 16px;
    width: 120px; height: 78px;
  }
}

.hero-bottom {
  margin-top: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center;
}
.avatar-stack { display: flex; align-items: center; gap: 14px; }
.avatars { display: flex; }
.avatars .av {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -10px;
  display: grid; place-items: center;
  font-family: var(--type-mono); font-size: 11px; font-weight: 600;
  color: #000;
}
.avatars .av:first-child { margin-left: 0; }
.av.a1 { background: linear-gradient(135deg, #7AE6FF, #5fc7e3); }
.av.a2 { background: linear-gradient(135deg, #B47CFF, #8b5fd9); }
.av.a3 { background: linear-gradient(135deg, #f0f0f0, #c4c4c4); }
.av.a4 { background: linear-gradient(135deg, #2a2a2a, #4a4a4a); color: #fff; }
.av.a5 { background: linear-gradient(135deg, #ffd28a, #ffae5a); }

.trust { display: flex; flex-direction: column; gap: 4px; }
.trust .stars { color: var(--accent-cyan); font-size: 13px; letter-spacing: 2px; }
.trust .label { font-size: 12px; color: var(--fg-muted); }

.hero-pitch {
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-muted);
}

@media (max-width: 980px) {
  .hero-bottom { grid-template-columns: 1fr; gap: 28px; }
}

/* ─── CTA marquee strip ─────────────────────────────────── */
.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  padding: 18px 0;
  background: rgba(255,255,255,0.02);
}
.marquee-track {
  display: flex; gap: 56px;
  animation: scroll 38s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee-track span {
  font-family: var(--type-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 56px;
}
.marquee-track span::after {
  content: "✦"; color: var(--accent-cyan); font-size: 10px;
}
@keyframes scroll { to { transform: translateX(-50%); } }

/* ─── Section base ───────────────────────────────────────── */
/* All sections sit above the fixed top-right shader tile (z-index 1). */
section { position: relative; z-index: 2; }
.marquee, footer { position: relative; z-index: 2; }
.section-pad { padding: 140px 0; }
@media (max-width: 720px) { .section-pad { padding: 88px 0; } }
.section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 880px) { .section-head { grid-template-columns: 1fr; gap: 24px; } }

/* ─── Chaos collage ──────────────────────────────────────── */
.chaos {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 980px) { .chaos { grid-template-columns: 1fr; gap: 48px; } }
.chaos-stage {
  position: relative;
  height: 560px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 20%, rgba(122,230,255,.06), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(180,124,255,.06), transparent 50%),
    var(--bg-elev);
  overflow: hidden;
}
.chaos-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .35;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.chaos-card {
  position: absolute;
  background: #111;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--type-mono); font-size: 11px;
  color: var(--fg-muted);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.6);
  width: 220px;
  transition: transform .4s var(--ease), z-index 0s;
}
.chaos-card:hover { transform: translateZ(0) scale(1.04) rotate(0deg) !important; z-index: 50; }
.chaos-card .h {
  display: flex; justify-content: space-between; align-items: center;
  color: #fff; font-weight: 500; margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.chaos-card .h .tag {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint);
}
.chaos-card .row { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
.chaos-card .row .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-faint); flex: none; }
.chaos-card .row .pip.r { background: #ff6363; }
.chaos-card .row .pip.y { background: #ffd28a; }
.chaos-card .row .pip.g { background: #7AE6FF; }
.chaos-card .bar { height: 4px; background: var(--hairline); border-radius: 2px; margin: 8px 0; overflow: hidden; }
.chaos-card .bar i { display: block; height: 100%; background: var(--fg-muted); }

/* layout placements */
.cc-1 { top: 40px; left: 30px; transform: rotate(-7deg); }
.cc-2 { top: 60px; right: 50px; transform: rotate(5deg); width: 240px; }
.cc-3 { top: 230px; left: 110px; transform: rotate(3deg); width: 200px; }
.cc-4 { bottom: 80px; left: 30px; transform: rotate(-3deg); width: 230px; }
.cc-5 { bottom: 40px; right: 40px; transform: rotate(6deg); }
.cc-6 { top: 230px; right: 30px; transform: rotate(-4deg); width: 180px; }
.cc-7 { bottom: 200px; left: 50%; transform: translateX(-50%) rotate(-1deg); width: 210px; }

.chaos-pain { display: flex; flex-direction: column; gap: 36px; }
.chaos-pain .pain-list { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.chaos-pain .pain-item {
  display: grid; grid-template-columns: 28px 1fr; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--hairline);
  align-items: start;
}
.chaos-pain .pain-item:last-child { border-bottom: 1px solid var(--hairline); }
.chaos-pain .pain-item .num {
  font-family: var(--type-mono); font-size: 11px; color: var(--fg-faint);
  letter-spacing: 0.1em; padding-top: 4px;
}
.chaos-pain .pain-item h4 {
  font-size: 17px; font-weight: 500; color: var(--fg); margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.chaos-pain .pain-item p { font-size: 14px; color: var(--fg-muted); line-height: 1.5; }

/* ─── Agents grid ────────────────────────────────────────── */
.agents-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 880px) { .agents-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .agents-grid { grid-template-columns: 1fr; } }
.agent-card {
  background: var(--bg-elev);
  padding: 32px 30px;
  display: flex; flex-direction: column;
  min-height: 280px;
  position: relative;
  cursor: default;
  transition: background .35s var(--ease);
  overflow: hidden;
}
.agent-card:hover { background: #0e0e0e; }
.agent-card .icon-wrap {
  width: 44px; height: 44px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 28px;
  background: rgba(255,255,255,0.03);
  color: var(--fg);
}
.agent-card .icon-wrap svg { width: 20px; height: 20px; stroke-width: 1.2; }
.agent-card .name {
  font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.agent-card .role { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--fg-faint); text-transform: uppercase; margin-bottom: 14px; }
.agent-card .desc { font-size: 14.5px; color: var(--fg-muted); line-height: 1.5; flex: 1; }
.agent-card .reveal {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--hairline);
  font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-faint);
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), margin-top .4s var(--ease), padding-top .4s var(--ease);
}
.agent-card:hover .reveal { max-height: 200px; opacity: 1; }
.agent-card .reveal .chip {
  border: 1px solid var(--hairline);
  padding: 4px 10px; border-radius: 999px;
}

/* ─── How it works ───────────────────────────────────────── */
.timeline {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}
@media (max-width: 880px) { .timeline { grid-template-columns: 1fr; gap: 64px; } }
.timeline::before {
  content: "";
  position: absolute; top: 64px; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong) 15%, var(--hairline-strong) 85%, transparent);
}
@media (max-width: 880px) { .timeline::before { display: none; } }
.tl-step { position: relative; }
.tl-step .num-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-muted);
  border: 1px solid var(--hairline-strong);
  background: var(--bg);
  padding: 8px 14px; border-radius: 999px;
  position: relative; z-index: 1;
}
.tl-step .num-pill .n {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-grad); color: #000;
  font-size: 10px; font-weight: 700;
}
.tl-diagram {
  margin-top: 32px;
  height: 220px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 50% 50%, rgba(122,230,255,.04), transparent 70%),
    var(--bg-elev);
  position: relative;
  overflow: hidden;
}
.tl-step h3 { margin-top: 24px; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.tl-step p { margin-top: 10px; color: var(--fg-muted); font-size: 14.5px; line-height: 1.55; max-width: 38ch; }

/* ─── Manifesto ──────────────────────────────────────────── */
.manifesto {
  text-align: center;
  padding: 180px 0;
  position: relative;
}
.manifesto::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(122,230,255,.07), transparent 50%),
    radial-gradient(circle at 30% 20%, rgba(180,124,255,.05), transparent 60%);
  pointer-events: none;
}
.manifesto-quote {
  position: relative;
  font-size: clamp(2rem, 5.5vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin: 32px auto 48px;
  text-wrap: balance;
}
.manifesto-quote em {
  font-style: italic;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.manifesto-attrib { font-family: var(--type-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq { max-width: 880px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-q {
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 0;
  font-size: 19px; font-weight: 500; letter-spacing: -0.015em;
  transition: color .2s var(--ease);
}
.faq-q:hover { color: var(--accent-cyan); }
.faq-q .toggle {
  width: 32px; height: 32px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
  flex: none;
}
.faq-q .toggle::before, .faq-q .toggle::after {
  content: "";
  position: absolute;
  background: var(--fg);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-q .toggle::before { width: 12px; height: 1px; }
.faq-q .toggle::after { width: 1px; height: 12px; }
.faq-item.open .faq-q .toggle { border-color: var(--accent-cyan); }
.faq-item.open .faq-q .toggle::after { transform: scaleY(0); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease);
  font-size: 15px; line-height: 1.6; color: var(--fg-muted);
}
.faq-a > div { padding-bottom: 28px; max-width: 64ch; }
.faq-item.open .faq-a { max-height: 400px; }

/* ─── Waitlist ───────────────────────────────────────────── */
.waitlist { text-align: center; max-width: 720px; margin: 0 auto; }
.waitlist h2 { margin-bottom: 20px; }
.waitlist-form {
  margin-top: 40px;
  display: flex; align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 8px 8px 8px 24px;
  transition: border-color .2s var(--ease);
}
.waitlist-form:focus-within { border-color: var(--accent-cyan); }
.waitlist-form input {
  flex: 1; background: none; border: 0; outline: 0;
  color: var(--fg); font: inherit; font-size: 15px;
  padding: 12px 0;
}
.waitlist-form input::placeholder { color: var(--fg-faint); }
.waitlist-sub {
  margin-top: 18px;
  font-family: var(--type-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* ─── Footer ─────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--hairline); padding-top: 80px; padding-bottom: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr) auto;
  gap: 48px;
  padding-bottom: 80px;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h5 {
  font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-faint); margin-bottom: 18px; font-weight: 500;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--fg-muted); transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--fg); }
.lang-toggle {
  display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; padding: 4px;
}
.lang-toggle button {
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--fg-muted);
}
.lang-toggle button.active { background: var(--fg); color: #000; }

.giant-mark {
  font-size: clamp(4rem, 22vw, 22rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.85;
  text-align: center;
  -webkit-text-stroke: 1px rgba(255,255,255,0.22);
  color: transparent;
  padding: 40px 0 60px;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}
.footer-bottom {
  border-top: 1px solid var(--hairline);
  padding: 28px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-faint);
}

/* ─── Variant B: architectural diagram ───────────────────── */
.diagram-stage {
  position: absolute; inset: 0;
  background: var(--bg);
}
.diagram-stage svg { width: 100%; height: 100%; }
.diagram-stage canvas { width: 100% !important; height: 100% !important; display: block; }
.diagram-node circle { transition: r .3s var(--ease); }
.diagram-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(2,2,2,0.85) 90%);
  pointer-events: none;
}

/* ─── i18n: character-decoder text swap ─────────────────── */
[data-i18n-anim] {
  transition:
    color 320ms cubic-bezier(.2,.7,.2,1),
    text-shadow 320ms cubic-bezier(.2,.7,.2,1);
  font-variant-ligatures: none;
}
[data-i18n-anim].decoding {
  color: #d8f5ff;
  text-shadow:
    0 0 14px rgba(122, 230, 255, 0.45),
    0 0 28px rgba(180, 124, 255, 0.20),
    0 0 1px rgba(255, 255, 255, 0.6);
  overflow: hidden; /* clip pool chars that happen wider than the locked box */
}
/* Headlines deserve a slightly stronger glow. */
.hero-headline [data-i18n-anim].decoding,
.hero-headline.decoding,
.manifesto-quote.decoding {
  text-shadow:
    0 0 18px rgba(122, 230, 255, 0.55),
    0 0 36px rgba(180, 124, 255, 0.28),
    0 0 2px rgba(255, 255, 255, 0.7);
}

/* ─── Floating language-rotation control ─────────────── */
.lang-rotate {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hairline);
  color: var(--fg-muted);
  font-family: var(--type-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.lang-rotate:hover { color: var(--fg); border-color: rgba(255,255,255,0.25); background: rgba(20,20,20,0.8); }
.lang-rotate .lr-sep  { opacity: 0.4; }
.lang-rotate .lr-lang { color: var(--fg); font-weight: 500; min-width: 1.6em; text-align: center; }
.lang-rotate .lr-icon { width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; }
.lang-rotate .lr-icon svg { width: 100%; height: 100%; fill: currentColor; }
.lang-rotate .lr-play { display: none; }
.lang-rotate.paused .lr-pause { display: none; }
.lang-rotate.paused .lr-play  { display: block; }
.lang-rotate.paused,
.lang-rotate.paused .lr-lang { color: var(--accent-cyan, #7AE6FF); }
.lang-rotate.paused { border-color: rgba(122,230,255,0.4); }
@media (max-width: 640px) {
  .lang-rotate { bottom: 16px; right: 16px; padding: 8px 12px; font-size: 9.5px; }
}

/* ─── Contact modal / drawer ─────────────────────────────── */
.contact-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.contact-modal.open { visibility: visible; pointer-events: auto; }
.cm-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,2,2,0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 280ms cubic-bezier(.2,.7,.2,1);
}
.contact-modal.open .cm-backdrop { opacity: 1; }

.cm-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(480px, 92vw);
  background: #0a0a0a;
  border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1),
              height 320ms cubic-bezier(.22, 1, .36, 1),
              border-radius 320ms cubic-bezier(.22, 1, .36, 1);
  box-shadow: -24px 0 60px rgba(0,0,0,0.5);
}
.contact-modal.open .cm-panel { transform: none; }

.cm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
  transition: padding 240ms cubic-bezier(.2,.7,.2,1);
}
.cm-title {
  font-family: var(--type-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted);
}
.cm-close {
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent; color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.cm-close:hover { color: var(--fg); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.04); }

.cm-form-wrap {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
  transition: max-height 320ms cubic-bezier(.22, 1, .36, 1),
              padding 320ms cubic-bezier(.22, 1, .36, 1),
              opacity 220ms ease;
  max-height: 520px;
  overflow: hidden;
}
.contact-modal.chat-expanded .cm-form-wrap {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0;
}
.cm-form-lede {
  font-size: 14px; line-height: 1.5; color: var(--fg-muted);
  margin-bottom: 18px;
}
.cm-form { display: flex; flex-direction: column; gap: 12px; }
.cm-field { display: flex; flex-direction: column; gap: 6px; }
.cm-label {
  font-family: var(--type-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint);
}
.cm-label em { font-style: italic; opacity: 0.6; text-transform: none; letter-spacing: 0.04em; }
.cm-form input[type="email"],
.cm-form input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--fg);
  font: inherit; font-size: 14.5px;
  transition: border-color .2s, background .2s;
}
.cm-form input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  background: rgba(122,230,255,0.04);
}
.cm-form input.cm-needs-attention {
  border-color: var(--accent-cyan);
  background: rgba(122,230,255,0.06);
  animation: cm-pulse 1.6s ease-out 2;
}
@keyframes cm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(122,230,255,0.45); }
  60%  { box-shadow: 0 0 0 8px rgba(122,230,255,0);   }
  100% { box-shadow: 0 0 0 0 rgba(122,230,255,0);     }
}
.cm-submit { align-self: flex-start; margin-top: 6px; }
.cm-status {
  margin-top: 10px;
  font-family: var(--type-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--fg-faint);
}
.cm-status:empty { display: none; margin: 0; }
.cm-status[data-kind="ok"]  { color: var(--accent-cyan); }
.cm-status[data-kind="err"] { color: #ff7a7a; }

.cm-chat {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.cm-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--hairline);
}
.cm-chat-title {
  font-family: var(--type-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted);
}
.cm-chat-collapse {
  width: 24px; height: 24px; border-radius: 999px;
  border: 1px solid var(--hairline); background: transparent;
  color: var(--fg-muted);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.cm-chat-collapse:hover { color: var(--fg); border-color: rgba(255,255,255,0.25); }
.contact-modal.chat-expanded .cm-chat-collapse { display: inline-flex; }

.cm-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 24px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
}
.cm-chat-messages::-webkit-scrollbar { width: 6px; }
.cm-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; }

.cm-msg { display: flex; }
.cm-msg-user { justify-content: flex-end; }
.cm-msg-assistant { justify-content: flex-start; }
.cm-msg-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  word-wrap: break-word;
}
.cm-msg-user .cm-msg-bubble {
  background: var(--accent-grad); color: #000;
  border-bottom-right-radius: 4px;
}
.cm-msg-assistant .cm-msg-bubble {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  color: var(--fg);
  border-bottom-left-radius: 4px;
}
.cm-msg-typing .cm-msg-bubble {
  display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px;
}
.cm-msg-typing .cm-msg-bubble span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-muted);
  animation: cm-typing 1.2s ease-in-out infinite;
}
.cm-msg-typing .cm-msg-bubble span:nth-child(2) { animation-delay: .15s; }
.cm-msg-typing .cm-msg-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes cm-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.cm-chat-form {
  display: flex; gap: 8px; align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--hairline);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
#cmChatInput {
  flex: 1;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--fg);
  font: inherit; font-size: 14px;
  transition: border-color .2s, background .2s;
}
#cmChatInput:focus {
  outline: none;
  border-color: var(--accent-cyan);
  background: rgba(122,230,255,0.04);
}
.cm-chat-send {
  width: 38px; height: 38px; border-radius: 999px; border: none;
  background: var(--accent-grad); color: #000;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform .15s ease;
}
.cm-chat-send:hover  { transform: translateY(-1px); }
.cm-chat-send:active { transform: translateY(0); }

/* Mobile: bottom drawer instead of right slide-in */
@media (max-width: 720px) {
  .cm-panel {
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%;
    height: 92vh;            /* fallback */
    height: 92dvh;           /* tracks visual viewport */
    border-left: none;
    border-top: 1px solid var(--hairline);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -24px 60px rgba(0,0,0,0.5);
  }
  .contact-modal.open .cm-panel { transform: none; }

  /* Bump inputs to 16px to prevent iOS Safari auto-zoom on focus. */
  .cm-form input[type="email"],
  .cm-form input[type="text"],
  #cmChatInput {
    font-size: 16px;
  }

  /* Compact mobile header */
  .cm-header { padding: 14px 20px; }

  /* Compact form: tighter paddings, smaller lede, less gap below the Send button */
  .cm-form-wrap { padding: 12px 20px 10px; }
  .cm-form-lede { font-size: 13px; line-height: 1.4; margin-bottom: 10px; }
  .cm-form { gap: 8px; }
  .cm-field { gap: 4px; }
  .cm-form input[type="email"],
  .cm-form input[type="text"] { padding: 10px 12px; }
  .cm-submit { margin-top: 4px; }
  .cm-status { margin-top: 6px; }

  /* Hide chat-head when not expanded — saves ~50px so the greeting bubble fits.
     Only show it when chat is expanded (gives back-to-form chevron). */
  .cm-chat-head { display: none; }
  .contact-modal.chat-expanded .cm-chat-head {
    display: flex;
    padding: 10px 20px;
  }
  .contact-modal.chat-expanded .cm-chat-title { font-size: 10px; }

  .cm-chat-messages { padding: 14px 20px; }
  .cm-chat-form { padding: 10px 14px; }

  /* Non-expanded drawer: anchor at bottom, push above keyboard if any. */
  .cm-panel { bottom: var(--kb-h, 0); }

  /* When chat is expanded on mobile, anchor the drawer to the visual viewport
     instead of the layout viewport. This stops iOS Safari from scrolling the
     headers out of view when the keyboard appears: --vv-top and --vv-height
     are updated by JS (visualViewport API) so the drawer always covers exactly
     the visible area above the keyboard. position: fixed is required so the
     drawer detaches from any parent scroll context. */
  .contact-modal.chat-expanded .cm-panel {
    position: fixed;
    top: var(--vv-top, 0px);
    bottom: auto;
    left: 0; right: 0;
    height: var(--vv-height, 100dvh);
    border-radius: 0;
    border-top: none;
  }
  .contact-modal.chat-expanded .cm-header { padding: 10px 20px; }
  .contact-modal.chat-expanded .cm-title { font-size: 10px; }
}

/* When modal is open, lock body scroll. */
body.contact-modal-open { overflow: hidden; }

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .meta-strip .live::before { animation: none; }
  .hero-shader canvas, .diagram-stage canvas { display: none; }
  .hero-shader { background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(122,230,255,0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 60% 40%, rgba(180,124,255,0.16), transparent 60%), #020202; }
  .diagram-stage { background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(122,230,255,0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 60% 40%, rgba(180,124,255,0.14), transparent 60%), #020202; }
  [data-i18n-anim] { transition: none; }
  [data-i18n-anim].decoding { color: inherit; text-shadow: none; }
}