/* ───────────────────────────────────────────────────────────────────
   WIKIDESIGNCO · THE GIGA LIBRARY
   A reasoning substrate for agentic civilizations.

   Palette philosophy: deep indigo-black void as base, illuminated by
   four prismatic accents — cyan (knowledge), violet (epistemics),
   magenta (controversy), amber (consensus). Library spines + codex
   stacks + ambient quantum field.
   ─────────────────────────────────────────────────────────────────── */

:root{
  /* base — deep indigo void */
  --void:        #02030d;
  --void-2:      #06082a;
  --abyss:       #0a0e3f;
  --indigo:      #110c4d;
  --indigo-2:    #1a1466;
  --twilight:    #261a7a;

  /* prismatic accents */
  --cyan:        #14e0ff;        /* knowledge / retrieval */
  --cyan-deep:   #0099c8;
  --violet:      #b06bff;        /* epistemics / time */
  --violet-deep: #5b3df5;
  --magenta:     #ff3d8a;        /* controversy / contradiction */
  --magenta-deep:#c01e64;
  --amber:       #ffb547;        /* consensus / library gold */
  --amber-deep:  #d97a1f;

  /* monochrome ink + dust */
  --ink:         #ffffff;
  --moon:        #d8dcff;
  --silver:      #a4adda;
  --dust:        #6a6f95;
  --shadow:      #1c1f3e;
  --line:        rgba(176, 184, 240, 0.10);
  --line-strong: rgba(176, 184, 240, 0.22);

  /* surfaces */
  --glass:       rgba(255, 255, 255, 0.03);
  --glass-2:     rgba(255, 255, 255, 0.06);
  --card:        rgba(15, 16, 47, 0.55);
  --card-hi:     rgba(20, 22, 60, 0.75);

  /* type */
  --font-display: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'Inter Tight', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-serif:   'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  /* rhythm */
  --r-1:  4px;
  --r-2:  8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-5:  24px;

  --max:   1320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--void); color: var(--moon); font-family: var(--font-body); overflow-x: hidden; }
body {
  font-size: 16px; line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1200px 800px at 12% -10%, rgba(91,61,245,0.16) 0%, transparent 60%),
    radial-gradient(900px 700px at 95% 8%, rgba(20,224,255,0.10) 0%, transparent 65%),
    radial-gradient(1100px 800px at 50% 130%, rgba(255,61,138,0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--void) 0%, #050624 50%, var(--void) 100%);
  background-attachment: fixed;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ─── ambient quantum field ───────────────────────────────────── */
.quantum-field{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(20,224,255,0.04) 0px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(176,107,255,0.04) 0px, transparent 2px);
  background-size: 60px 60px, 80px 80px;
  opacity: 0.7;
}
.quantum-field::after{
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(255,255,255,0.012) 3px,
    rgba(255,255,255,0.012) 4px
  );
  mix-blend-mode: overlay;
}

main { position: relative; z-index: 1; }
.shell { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px){ .shell { padding: 0 20px; } }

/* ─── TOPNAV ───────────────────────────────────────────────────── */
.topnav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 0;
  transition: padding 280ms ease, background 280ms ease, backdrop-filter 280ms ease;
}
.topnav[data-scrolled="true"]{
  padding: 12px 0;
  background: rgba(2,3,13, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
.topnav__inner{
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 40px; height: 40px; flex: 0 0 40px; filter: drop-shadow(0 0 12px rgba(91,61,245,0.5)); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
.brand__sub  { font-family: var(--font-mono); font-size: 9px; color: var(--dust); letter-spacing: 0.2em; margin-top: 4px; }

.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--silver);
  padding: 8px 14px; border-radius: 100px;
  transition: color 200ms, background 200ms;
  text-transform: uppercase;
}
.nav-links a:hover{ color: var(--cyan); background: rgba(20,224,255,0.06); }
.nav-links a[data-active="true"]{ color: var(--ink); background: rgba(176,107,255,0.10); }
@media (max-width: 900px) { .nav-links { display: none; } }

.nav-cta{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--void);
  background: linear-gradient(95deg, var(--cyan) 0%, var(--violet) 100%);
  padding: 10px 18px; border-radius: 100px;
  font-weight: 700;
  box-shadow: 0 4px 24px rgba(20,224,255,0.30), 0 0 0 1px rgba(255,255,255,0.10) inset;
  transition: transform 200ms, box-shadow 200ms;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 30px rgba(20,224,255,0.45); }

/* ─── TYPE SYSTEM ──────────────────────────────────────────────── */
.h1, .h2, .h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.018em; text-wrap: balance; }
.h1 { font-size: clamp(44px, 6.8vw, 96px); font-weight: 800; line-height: 0.96; }
.h2 { font-size: clamp(34px, 4.2vw, 64px); font-weight: 700; line-height: 1.02; }
.h3 { font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; line-height: 1.15; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow::before { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); }
.eyebrow--magenta { color: var(--magenta); }
.eyebrow--magenta::before { background: linear-gradient(90deg, transparent, var(--magenta)); }
.eyebrow--amber { color: var(--amber); }
.eyebrow--amber::before { background: linear-gradient(90deg, transparent, var(--amber)); }

.gradient-cyan { background: linear-gradient(96deg, var(--cyan) 0%, var(--violet) 60%, var(--magenta) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gradient-warm { background: linear-gradient(96deg, var(--amber) 0%, var(--magenta) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flash { font-style: italic; font-family: var(--font-serif); font-weight: 500; }

.lede { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--silver); max-width: 60ch; }
.mono { font-family: var(--font-mono); letter-spacing: 0.08em; }

/* ─── BUTTONS ──────────────────────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  padding: 16px 28px; border-radius: 100px;
  cursor: pointer; border: none;
  transition: transform 200ms, box-shadow 240ms, background 240ms;
}
.btn--primary{
  color: var(--void);
  background: linear-gradient(95deg, var(--cyan) 0%, var(--violet) 100%);
  box-shadow: 0 12px 40px rgba(20,224,255,0.34), 0 0 0 1px rgba(255,255,255,0.12) inset;
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 20px 60px rgba(91,61,245,0.5); }
.btn--ghost{
  color: var(--moon);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover{ background: rgba(255,255,255,0.08); color: var(--ink); }

/* ─── HERO ─────────────────────────────────────────────────────── */
.hero{
  padding: 180px 0 120px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(800px 600px at 20% 30%, rgba(91,61,245,0.18) 0%, transparent 60%),
    radial-gradient(700px 500px at 85% 70%, rgba(20,224,255,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.hero__grid{
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 80px; align-items: center;
  position: relative;
}
@media (max-width: 1024px){ .hero__grid { grid-template-columns: 1fr; gap: 60px; } }

.hero__copy { max-width: 720px; }
.hero__ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

.hero__meta{
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 700px){ .hero__meta { grid-template-columns: repeat(2, 1fr); } }
.hero__meta-item { display: flex; flex-direction: column; gap: 6px; }
.hero__meta-item strong{
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink);
  letter-spacing: -0.01em;
}
.hero__meta-item span{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dust);
}

/* metagraph viz */
.metagraph{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-5);
  background:
    radial-gradient(circle at 50% 50%, rgba(91,61,245,0.18) 0%, transparent 60%),
    linear-gradient(160deg, rgba(20,22,60,0.6) 0%, rgba(8,8,28,0.85) 100%);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(2,3,13,0.6),
    inset 0 0 80px rgba(176,107,255,0.08);
}
.metagraph canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.metagraph__corner{
  position: absolute; top: 18px; left: 18px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--silver); text-transform: uppercase;
  display: flex; flex-direction: column; gap: 4px;
}
.metagraph__corner em{
  font-style: normal;
}
.metagraph__corner em::before{
  content: "● "; color: var(--cyan); margin-right: 4px;
}
.metagraph__readout{
  position: absolute; bottom: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--silver);
  background: rgba(2,3,13,0.5);
  padding: 12px 14px; border-radius: var(--r-3);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.metagraph__readout span { display: flex; justify-content: space-between; gap: 16px; }
.metagraph__readout strong { color: var(--ink); font-weight: 600; }
.metagraph__readout em { font-style: normal; color: var(--dust); }

/* ─── SECTION BASE + ATMOSPHERES ───────────────────────────────── */
.section{
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.section::before{
  content:""; position: absolute; inset: 0;
  pointer-events: none;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.atm-violet::before{
  background-image:
    radial-gradient(900px 600px at 10% 20%, rgba(176,107,255,0.10) 0%, transparent 65%),
    radial-gradient(700px 500px at 90% 80%, rgba(91,61,245,0.14) 0%, transparent 65%);
}
.atm-cyan::before{
  background-image:
    radial-gradient(800px 600px at 85% 10%, rgba(20,224,255,0.10) 0%, transparent 65%),
    radial-gradient(700px 500px at 10% 85%, rgba(91,61,245,0.08) 0%, transparent 65%);
}
.atm-magenta::before{
  background-image:
    radial-gradient(900px 700px at 20% 90%, rgba(255,61,138,0.10) 0%, transparent 65%),
    radial-gradient(700px 600px at 90% 20%, rgba(176,107,255,0.10) 0%, transparent 65%);
}
.atm-amber::before{
  background-image:
    radial-gradient(900px 700px at 80% 30%, rgba(255,181,71,0.08) 0%, transparent 65%),
    radial-gradient(700px 600px at 15% 80%, rgba(255,61,138,0.10) 0%, transparent 65%);
}

.section__head{
  display: grid; grid-template-columns: 0.4fr 1fr; gap: 60px;
  align-items: start;
  margin-bottom: 80px;
}
@media (max-width: 900px){ .section__head { grid-template-columns: 1fr; gap: 24px; } }
.section__head-l { display: flex; flex-direction: column; gap: 18px; }
.index{ color: var(--dust); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }

/* ─── CARDS ────────────────────────────────────────────────────── */
.card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  padding: 32px;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), border-color 320ms ease, box-shadow 320ms ease;
}
.card:hover{ transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 30px 80px rgba(2,3,13,0.5); }
.card--glow{
  background: linear-gradient(160deg, rgba(20,22,60,0.85) 0%, rgba(10,11,40,0.7) 100%);
  border-color: rgba(176,107,255,0.18);
  box-shadow: 0 20px 60px rgba(91,61,245,0.10), inset 0 0 40px rgba(20,224,255,0.04);
}

/* tags */
.tag{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid rgba(20,224,255,0.3); background: rgba(20,224,255,0.06);
}
.tag::before { content:"●"; color: var(--cyan); }
.tag--magenta{ color: var(--magenta); border-color: rgba(255,61,138,0.3); background: rgba(255,61,138,0.06); }
.tag--magenta::before{ color: var(--magenta); }
.tag--violet{ color: var(--violet); border-color: rgba(176,107,255,0.3); background: rgba(176,107,255,0.06); }
.tag--violet::before{ color: var(--violet); }
.tag--amber{ color: var(--amber); border-color: rgba(255,181,71,0.3); background: rgba(255,181,71,0.06); }
.tag--amber::before{ color: var(--amber); }

/* ─── EVOLUTION CARDS ──────────────────────────────────────────── */
.evolution {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px){ .evolution { grid-template-columns: 1fr; } }
.evo-card{ display: flex; flex-direction: column; gap: 16px; min-height: 360px; }
.evo-card__diagram{
  height: 160px;
  background: radial-gradient(circle at 50% 50%, rgba(91,61,245,0.10) 0%, transparent 70%);
  border-radius: var(--r-3);
  display: flex; align-items: center; justify-content: center;
}
.evo-card__diagram svg{ width: 100%; height: 100%; }
.evo-card__cap{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dust); }
.evo-card p { font-size: 15px; color: var(--silver); line-height: 1.6; }

/* ─── FEATURE LANES ────────────────────────────────────────────── */
.feature-lane{
  display: grid; grid-template-columns: 0.95fr 1.1fr; gap: 60px; align-items: center;
}
.feature-lane--rev{ grid-template-columns: 1.1fr 0.95fr; }
.feature-lane--rev .feature-lane__copy{ order: 2; }
.feature-lane--rev .feature-lane__demo{ order: 1; }
@media (max-width: 1000px){
  .feature-lane, .feature-lane--rev{ grid-template-columns: 1fr; gap: 40px; }
  .feature-lane--rev .feature-lane__copy{ order: 1; }
  .feature-lane--rev .feature-lane__demo{ order: 2; }
}
.feature-lane__copy p{ color: var(--silver); margin: 18px 0; font-size: 16px; line-height: 1.7; }
.feature-lane__bullets{
  list-style: none; margin-top: 24px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.feature-lane__bullets li{
  position: relative;
  padding-left: 24px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--silver); line-height: 1.6;
}
.feature-lane__bullets li::before{
  content: "→";
  position: absolute; left: 0; top: 1px;
  color: var(--cyan);
  font-weight: 700;
}

/* demo wrapper */
.feature-lane__demo{
  background: linear-gradient(160deg, rgba(20,22,60,0.85) 0%, rgba(8,10,32,0.92) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-5);
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(2,3,13,0.4), inset 0 0 60px rgba(91,61,245,0.06);
}
.demo-head{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.demo-head__title{ font-family: var(--font-mono); font-size: 11px; color: var(--moon); letter-spacing: 0.12em; text-transform: uppercase; }
.demo-head__status{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: 6px;
}
.demo-head__status::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }

/* ─── PILLARS ──────────────────────────────────────────────────── */
.pillars{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px){ .pillars { grid-template-columns: 1fr; } }
.pillar{ display: flex; flex-direction: column; gap: 16px; min-height: 280px; }
.pillar__icon{
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-3);
  background: rgba(20,224,255,0.06);
  border: 1px solid rgba(20,224,255,0.16);
}
.pillar--yt .pillar__icon{ background: rgba(255,61,138,0.06); border-color: rgba(255,61,138,0.16); }
.pillar--paper .pillar__icon{ background: rgba(176,107,255,0.06); border-color: rgba(176,107,255,0.16); }
.pillar p{ font-size: 15px; color: var(--silver); line-height: 1.65; }
.pillar__signal{
  margin-top: auto;
  padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
}
.pillar__signal em{ font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dust); }
.pillar__signal strong{ font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.pillar--yt .pillar__signal strong{ color: var(--magenta); }
.pillar--paper .pillar__signal strong{ color: var(--violet); }
.pillar--book .pillar__signal strong{ color: var(--cyan); }

/* ─── INGEST CONVEYOR ──────────────────────────────────────────── */
.conveyor{
  position: relative;
  height: 280px;
  border-radius: var(--r-3);
  background: linear-gradient(180deg, rgba(8,10,32,0.95) 0%, rgba(2,3,13,1) 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}
.conveyor__lanes{
  position: absolute; inset: 0;
  display: grid; grid-template-rows: repeat(4, 1fr);
}
.conveyor__lane{
  position: relative;
  border-bottom: 1px dashed var(--line);
  overflow: hidden;
}
.conveyor__lane:last-child{ border-bottom: none; }
.conveyor__lane-label{
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dust);
  z-index: 5;
  background: rgba(2,3,13,0.7);
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
}
.token{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  padding: 6px 10px;
  background: rgba(20,22,60,0.92);
  border: 1px solid var(--cyan);
  border-radius: var(--r-2);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--moon);
  white-space: nowrap;
  animation: conveyor-slide 14s linear infinite;
  box-shadow: 0 4px 16px rgba(20,224,255,0.2);
}
.token--book{ border-color: var(--cyan); color: var(--cyan); }
.token--yt{ border-color: var(--magenta); color: var(--magenta); box-shadow: 0 4px 16px rgba(255,61,138,0.2); }
.token--paper{ border-color: var(--violet); color: var(--violet); box-shadow: 0 4px 16px rgba(176,107,255,0.2); }
.token--social{ border-color: var(--amber); color: var(--amber); box-shadow: 0 4px 16px rgba(255,181,71,0.2); }
@keyframes conveyor-slide{
  0%   { left: -240px; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.conveyor__stages{
  position: absolute; inset: 0;
  display: flex; pointer-events: none;
  z-index: 2;
}
.conveyor__stage{
  flex: 1;
  border-right: 1px solid rgba(20,224,255,0.10);
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center;
  padding: 8px 4px;
  position: relative;
}
.conveyor__stage:last-child{ border-right: none; }
.conveyor__stage::before{
  content:""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(20,224,255,0.18) 0%, transparent 100%);
}
.conveyor__stage em{ font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); }
.conveyor__stage span{ font-family: var(--font-mono); font-size: 9px; color: var(--cyan); margin-top: 2px; }

/* ─── TEMPORAL SCRUBBER ────────────────────────────────────────── */
.temporal{ display: flex; flex-direction: column; gap: 24px; padding: 8px 0; }
.temporal__viewport{
  background: rgba(8,10,32,0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 24px;
  min-height: 200px;
  display: flex; flex-direction: column; gap: 16px;
}
.temporal__year{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  color: var(--cyan);
  letter-spacing: -0.02em;
  line-height: 1;
}
.temporal__claim{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.4;
  font-weight: 500;
}
.temporal__attr{
  display: flex; flex-wrap: wrap; gap: 24px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--silver);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.temporal__attr em{ font-style: normal; color: var(--dust); margin-right: 8px; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; }
.temporal__scrubber{ padding: 6px 0; }
.temporal__track{
  position: relative;
  height: 48px;
  background: linear-gradient(90deg, rgba(20,224,255,0.06) 0%, rgba(176,107,255,0.10) 50%, rgba(255,61,138,0.10) 100%);
  border: 1px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
}
.temporal__ticks{
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--dust);
  pointer-events: none;
}
.temporal__handle{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--cyan) 0%, var(--violet) 100%);
  border: 2px solid var(--ink);
  box-shadow: 0 0 24px rgba(20,224,255,0.6), 0 0 0 6px rgba(20,224,255,0.10);
  cursor: grab;
  transition: box-shadow 200ms ease;
}
.temporal__handle:active{ cursor: grabbing; }
.temporal__handle:hover{ box-shadow: 0 0 30px rgba(20,224,255,0.9), 0 0 0 10px rgba(20,224,255,0.14); }

/* ─── CONTRADICTION ENGINE ─────────────────────────────────────── */
.contradiction{ display: flex; flex-direction: column; gap: 14px; }
.contradiction__claim{
  background: rgba(20,224,255,0.05);
  border: 1px solid rgba(20,224,255,0.25);
  border-radius: var(--r-3);
  padding: 16px 18px;
}
.contradiction__claim--b{
  background: rgba(255,61,138,0.05);
  border-color: rgba(255,61,138,0.25);
}
.contradiction__claim-src{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: 8px;
}
.contradiction__claim--b .contradiction__claim-src{ color: var(--magenta); }
.contradiction__claim-text{ font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink); line-height: 1.4; }
.contradiction__claim-meta{
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: var(--font-mono); font-size: 11px; color: var(--silver);
}
.contradiction__claim-meta em{ font-style: normal; color: var(--dust); margin-right: 6px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 9px; }

.controversy{
  background: linear-gradient(160deg, rgba(255,181,71,0.06) 0%, rgba(255,61,138,0.06) 100%);
  border: 1px solid rgba(255,181,71,0.3);
  border-radius: var(--r-3);
  padding: 16px 18px;
  position: relative;
}
.controversy__label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); }
.controversy__name{ font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); margin-top: 6px; }
.controversy__chart{ width: 100%; height: 50px; margin: 12px 0; }
.controversy__resolution{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver);
}
.controversy__resolution em{ font-style: normal; color: var(--cyan); }
.controversy__resolution em:last-child{ color: var(--magenta); }
.controversy__resolution span{ color: var(--amber); }

/* ─── RETRIEVAL LAB ────────────────────────────────────────────── */
.retrieval { display: flex; flex-direction: column; gap: 18px; }
.retrieval__query{
  display: flex; gap: 8px; align-items: center;
  background: rgba(8,10,32,0.6);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 6px 6px 18px;
}
.retrieval__query input{
  flex: 1;
  background: transparent; border: none; outline: none;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink); letter-spacing: 0.01em;
  padding: 10px 0;
}
.retrieval__query button{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; font-weight: 700;
  padding: 10px 18px; border-radius: 100px;
  background: linear-gradient(95deg, var(--cyan), var(--violet));
  color: var(--void); border: none; cursor: pointer;
}
.retrieval__lanes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px){ .retrieval__lanes { grid-template-columns: 1fr; } }
.retrieval__lane{
  background: rgba(8,10,32,0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.retrieval__lane h4{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.retrieval__lane[data-mode="graph"] h4{ color: var(--violet); }
.retrieval__lane[data-mode="bm25"] h4{ color: var(--magenta); }
.retrieval__result{
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 10px 12px;
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.retrieval__result:hover{ background: rgba(20,224,255,0.05); border-color: rgba(20,224,255,0.18); transform: translateX(2px); }
.retrieval__result-title{
  font-family: var(--font-body); font-size: 13px; color: var(--moon); line-height: 1.35;
}
.retrieval__result-meta{
  margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--dust); letter-spacing: 0.04em;
}
.retrieval__result-meta em{ font-style: normal; color: var(--cyan); }
.retrieval__lane[data-mode="graph"] .retrieval__result-meta em{ color: var(--violet); }
.retrieval__lane[data-mode="bm25"] .retrieval__result-meta em{ color: var(--magenta); }

/* ─── STACK / 4 LAYERS ─────────────────────────────────────────── */
.stack{
  display: flex; flex-direction: column; gap: 12px;
  padding: 8px 0;
}
.layer{
  display: grid; grid-template-columns: 80px 1.2fr 2fr; gap: 32px;
  align-items: center;
  background: linear-gradient(95deg, rgba(20,22,60,0.85) 0%, rgba(8,10,32,0.5) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), border-color 320ms ease;
}
.layer::before{
  content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
}
.layer:nth-child(2)::before{ background: linear-gradient(180deg, var(--violet), var(--magenta)); }
.layer:nth-child(3)::before{ background: linear-gradient(180deg, var(--magenta), var(--amber)); }
.layer:nth-child(4)::before{ background: linear-gradient(180deg, var(--amber), var(--cyan)); }
.layer:hover{ transform: translateX(4px); border-color: var(--line-strong); }
@media (max-width: 900px){ .layer { grid-template-columns: 1fr; gap: 14px; padding: 24px; } }

.layer__no{
  font-family: var(--font-display); font-weight: 800; font-size: 48px;
  color: var(--cyan); letter-spacing: -0.04em; line-height: 1;
  -webkit-text-stroke: 1px var(--cyan); color: transparent;
}
.layer:nth-child(2) .layer__no{ -webkit-text-stroke-color: var(--violet); }
.layer:nth-child(3) .layer__no{ -webkit-text-stroke-color: var(--magenta); }
.layer:nth-child(4) .layer__no{ -webkit-text-stroke-color: var(--amber); }

.layer__title em{
  font-style: normal;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dust);
}
.layer__title h3{ margin-top: 6px; }
.layer__body{ font-size: 15px; color: var(--silver); line-height: 1.65; }

/* ─── REDWOOD ──────────────────────────────────────────────────── */
.redwood{
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.redwood canvas{ width: 100%; height: 100%; }
.redwood__core{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700; font-size: 18px;
  color: var(--ink);
  text-align: center;
  background: rgba(2,3,13,0.7); padding: 14px 18px; border-radius: 100px;
  border: 1px solid var(--line-strong); backdrop-filter: blur(8px);
}
.redwood__core span{ display:block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); margin-top: 4px; font-weight: 500; }

/* ─── COMPARE TABLE ────────────────────────────────────────────── */
.compare{
  background: linear-gradient(160deg, rgba(20,22,60,0.5) 0%, rgba(8,10,32,0.7) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-4);
  overflow: hidden;
  overflow-x: auto;
}
.compare table{ width: 100%; border-collapse: collapse; min-width: 720px; }
.compare th, .compare td{ text-align: center; padding: 16px 12px; border-bottom: 1px solid var(--line); }
.compare th{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dust); font-weight: 600;
  background: rgba(8,10,32,0.6);
  position: sticky; top: 0;
}
.compare td:first-child, .compare th:first-child{ text-align: left; padding-left: 24px; }
.compare__name{ font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--moon); }
.compare__name--us{
  background: linear-gradient(96deg, var(--cyan), var(--violet), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; font-size: 17px;
}
.compare__row--us{ background: rgba(20,224,255,0.04); }
.compare__row--us td{ border-bottom-color: rgba(20,224,255,0.18); }
.yes{ color: var(--cyan); font-size: 18px; font-weight: 700; }
.compare__row--us .yes{ color: var(--cyan); text-shadow: 0 0 16px rgba(20,224,255,0.5); }
.no { color: var(--dust); font-size: 14px; }

/* ─── PRICING ──────────────────────────────────────────────────── */
.pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px){ .pricing-grid { grid-template-columns: 1fr; } }
.price{
  background: linear-gradient(160deg, rgba(20,22,60,0.6) 0%, rgba(8,10,32,0.8) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), border-color 320ms;
}
.price:hover{ transform: translateY(-6px); border-color: var(--line-strong); }
.price--featured{
  background: linear-gradient(160deg, rgba(91,61,245,0.20) 0%, rgba(20,22,60,0.85) 100%);
  border: 1px solid var(--violet);
  box-shadow: 0 30px 80px rgba(91,61,245,0.30);
  transform: translateY(-8px);
}
.price__tag{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dust); }
.price--featured .price__tag{ color: var(--violet); }
.price__name{ font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--ink); line-height: 1; }
.price__cost{ font-family: var(--font-display); font-weight: 800; font-size: 56px; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.price__cost em{ font-style: normal; font-size: 16px; color: var(--dust); font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.price__desc{ color: var(--silver); font-size: 15px; line-height: 1.5; }
.price__features{ list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.price__features li{
  position: relative;
  padding-left: 24px;
  font-size: 14px; color: var(--silver); line-height: 1.5;
}
.price__features li::before{ content: "✓"; position: absolute; left: 0; top: 0; color: var(--cyan); font-weight: 700; }
.price--featured .price__features li::before{ color: var(--violet); }
.price__cta{
  margin-top: auto;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  padding: 14px 20px; border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms, transform 200ms;
}
.price__cta:hover{ background: rgba(20,224,255,0.10); transform: translateY(-2px); }
.price--featured .price__cta{
  background: linear-gradient(95deg, var(--cyan), var(--violet));
  color: var(--void);
  border: none;
  font-weight: 800;
}

/* ─── FAQ ──────────────────────────────────────────────────────── */
.faq{ display: flex; flex-direction: column; gap: 0; max-width: 920px; }
.faq__item{
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.faq__item summary{
  cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 40px;
  transition: color 200ms;
}
.faq__item summary::-webkit-details-marker{ display: none; }
.faq__item summary::after{
  content: "+";
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 22px; font-weight: 400;
  color: var(--cyan);
  transition: transform 200ms ease, color 200ms ease;
}
.faq__item[open] summary::after{ transform: translateY(-50%) rotate(45deg); color: var(--magenta); }
.faq__item[open] summary{ color: var(--cyan); }
.faq__body{ font-size: 15px; color: var(--silver); line-height: 1.7; margin-top: 16px; max-width: 70ch; }

/* ─── CTA FINAL ────────────────────────────────────────────────── */
#waitlist{ padding: 160px 0; position: relative; }
.cta-final{
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.cta-final::before{
  content:""; position: absolute; inset: -200px;
  background: radial-gradient(circle at 50% 50%, rgba(91,61,245,0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.cta-final p{
  margin-top: 28px;
  font-size: 17px; color: var(--silver); line-height: 1.7; max-width: 60ch; margin-left: auto; margin-right: auto;
}
.cta-final__buttons{ display: flex; gap: 12px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

/* ─── FOOTER ───────────────────────────────────────────────────── */
footer{
  background: rgba(2,3,13,0.85);
  border-top: 1px solid var(--line);
  padding: 80px 0 32px;
  position: relative;
  z-index: 2;
}
.footer-grid{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  margin-bottom: 60px;
}
@media (max-width: 760px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer-col h5{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px; font-weight: 600;
}
.footer-col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a{ font-size: 14px; color: var(--moon); transition: color 200ms; }
.footer-col a:hover{ color: var(--cyan); }
.footer__base{
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dust);
}

/* ─── ANIMATIONS / FADE UP ─────────────────────────────────────── */
.fade-up{ opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1); }
.fade-up.is-in{ opacity: 1; transform: none; }

/* utility text effect */
em.q::before{ content:"\201C"; color: var(--violet); }
em.q::after{ content:"\201D"; color: var(--violet); }

/* selection */
::selection{ background: rgba(176,107,255,0.4); color: var(--ink); }