/* ============================================================
   TRACKHOUND — early access landing
   Direction: "Playbill Futurism"
   cream paper · warm ink · molten amber spotlight · viridian data
   ============================================================ */

:root{
  --paper:      #EFE7D6;
  --paper-2:    #E7DCC6;
  --ink:        #17130D;
  --ink-soft:   #4A4237;
  --amber:      #F0731A;   /* molten spotlight */
  --amber-deep: #C8560E;
  --viridian:   #12564A;   /* data curve */
  --viridian-2: #1C7A66;
  --rose:       #D8506B;   /* small pops */
  --line:       rgba(23,19,13,.14);

  --shadow: 0 2px 0 rgba(23,19,13,.9);
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Instrument Sans", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
.hidden{ position:absolute; left:-9999px; }
::selection{ background:var(--amber); color:var(--paper); }

/* ---------- atmosphere ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spot{
  position:fixed; border-radius:50%; z-index:0; pointer-events:none;
  filter:blur(70px); opacity:.5; mix-blend-mode:multiply;
}
.spot--a{ width:52vw; height:52vw; top:-18vw; right:-14vw;
  background:radial-gradient(circle,var(--amber),transparent 62%);
  animation:drift 22s ease-in-out infinite alternate; }
.spot--b{ width:44vw; height:44vw; bottom:-16vw; left:-14vw;
  background:radial-gradient(circle,var(--viridian),transparent 60%); opacity:.35;
  animation:drift 28s ease-in-out infinite alternate-reverse; }
@keyframes drift{ to{ transform:translate3d(4vw,3vw,0) scale(1.12); } }


/* ---------- marquee bulb rail ---------- */
.bulbrail{
  position:fixed; top:0; left:0; right:0; height:8px; z-index:60;
  display:flex; justify-content:space-between; padding:0 4px;
  background:var(--ink);
}
.bulbrail span{
  width:5px; height:5px; margin-top:1.5px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 6px var(--amber);
  animation:bulb 1.4s steps(1) infinite;
}
.bulbrail span:nth-child(2n){ animation-delay:.7s; }
.bulbrail span:nth-child(3n){ animation-delay:.35s; }
@keyframes bulb{ 0%,50%{opacity:1} 51%,100%{opacity:.22} }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:8px; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,52px);
  transition:background .3s, backdrop-filter .3s, box-shadow .3s;
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line);
}
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.brand__mark{ color:var(--amber); font-size:1.3em; transform:translateY(1px); }
.brand__word{ font-family:var(--serif); font-weight:600; font-size:1.32rem; letter-spacing:-.01em; }
.nav__links{ display:flex; gap:30px; }
.nav__links a{
  text-decoration:none; color:var(--ink-soft); font-size:.92rem; font-weight:500;
  position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px;
  background:var(--amber); transition:width .25s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }
@media(max-width:820px){ .nav__links{ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  border:1.5px solid var(--ink); border-radius:2px; padding:13px 22px;
  text-decoration:none; color:var(--ink); background:transparent;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, box-shadow .2s;
}
.btn--ghost{ padding:9px 16px; font-size:.9rem; }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--solid{ background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--amber); }
.btn--solid:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--amber); }
.btn--solid:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--amber); }
.btn--onink{ background:var(--amber); border-color:var(--amber); color:var(--ink);
  box-shadow:4px 4px 0 rgba(239,231,214,.28); }
.btn--onink:hover{ box-shadow:6px 6px 0 rgba(239,231,214,.4); }
.btn__arw{ transition:transform .2s; }
.btn:hover .btn__arw{ transform:translateX(4px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; z-index:1; padding:150px clamp(20px,4vw,52px) 0; max-width:var(--wrap); margin:0 auto; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px);
  align-items:center;
}
@media(max-width:940px){ .hero__grid{ grid-template-columns:1fr; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:100px; padding:7px 14px; margin-bottom:26px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 0 var(--rose);
  animation:ping 2s ease-out infinite; }
@keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(216,80,107,.6)} 100%{box-shadow:0 0 0 8px rgba(216,80,107,0)} }

.hero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.9rem,6.4vw,5.3rem); line-height:.98; letter-spacing:-.025em;
  font-optical-sizing:auto;
}
.hero__title .line{ display:block; }
.hero__title em{ font-style:italic; font-weight:400; color:var(--amber); }
.hero__lede{
  max-width:34ch; margin:30px 0 34px; font-size:1.12rem; color:var(--ink-soft); line-height:1.55;
}

/* signup */
.signup{ display:flex; gap:10px; max-width:480px; flex-wrap:wrap; }
.signup__input{
  flex:1 1 220px; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:color-mix(in srgb,var(--paper) 60%,#fff); border:1.5px solid var(--ink);
  border-radius:2px; padding:13px 16px;
}
.signup__input::placeholder{ color:#9a917f; }
.signup__input:focus{ outline:none; box-shadow:4px 4px 0 var(--viridian); }
.signup__note{ font-size:.86rem; color:var(--ink-soft); margin-top:16px; max-width:42ch; }
.signup--big{ margin-inline:auto; justify-content:center; }
.signup--big .signup__input{ background:rgba(239,231,214,.1); color:var(--paper); border-color:var(--paper); }
.signup--big .signup__input::placeholder{ color:rgba(239,231,214,.5); }

/* hero viz */
.hero__viz{ position:relative; }
.fcard{
  position:relative; background:var(--ink); color:var(--paper);
  border-radius:6px; padding:26px 26px 22px;
  box-shadow:14px 16px 0 rgba(18,86,74,.22), 0 30px 60px -30px rgba(23,19,13,.6);
}
.fcard__head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.fcard__label{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(239,231,214,.55); }
.fcard__title{ display:block; font-family:var(--serif); font-size:1.15rem; margin-top:3px; }
.pill{ font-family:var(--mono); font-size:.68rem; padding:5px 9px; border-radius:100px;
  text-transform:uppercase; letter-spacing:.04em; }
.pill--up{ background:rgba(28,122,102,.24); color:#7fe0c8; }
.fcard__big{ font-family:var(--serif); font-weight:600; font-size:2.9rem; line-height:1; letter-spacing:-.02em; }
.fcard__big .cur{ font-size:1.6rem; vertical-align:.35em; color:var(--amber); }
.fcard__of{ display:block; font-family:var(--sans); font-size:.8rem; font-weight:400;
  color:rgba(239,231,214,.55); margin-top:6px; letter-spacing:0; }

.chart{ width:100%; height:150px; margin:14px 0 6px; overflow:visible; }
.chart .grid line{ stroke:rgba(239,231,214,.09); stroke-width:1; }
.trace{ fill:none; stroke-width:3; stroke-linecap:round; }
.trace--actual{ stroke:var(--viridian-2); }
.trace--fc{ stroke:var(--amber); stroke-dasharray:2 8; stroke-width:2.5; }
.node{ fill:var(--amber); stroke:var(--ink); stroke-width:3;
  filter:drop-shadow(0 0 6px var(--amber)); }
.is-drawn .trace{ animation:draw 1.8s ease forwards; }
.is-drawn .trace--fc{ animation-delay:1.2s; }
.trace{ stroke-dashoffset:1; }

.fcard__foot{ display:flex; gap:18px; flex-wrap:wrap; margin-top:8px;
  padding-top:14px; border-top:1px solid rgba(239,231,214,.12); }
.tick{ font-family:var(--mono); font-size:.72rem; color:rgba(239,231,214,.6); }
.tick b{ color:var(--paper); }
.tick--live{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.tick--live i{ width:7px; height:7px; border-radius:50%; background:var(--rose);
  animation:ping 1.6s ease-out infinite; }

.chip{
  position:absolute; font-family:var(--mono); font-size:.74rem; font-weight:500;
  background:var(--paper); color:var(--ink); border:1.5px solid var(--ink);
  padding:8px 12px; border-radius:100px; box-shadow:3px 3px 0 var(--amber);
  white-space:nowrap;
}
.chip b{ color:var(--amber-deep); }
.chip--1{ top:-18px; left:-26px; animation:float 5s ease-in-out infinite; }
.chip--2{ bottom:-22px; right:-14px; animation:float 6.5s ease-in-out infinite .8s; box-shadow:3px 3px 0 var(--viridian); }
@keyframes float{ 50%{ transform:translateY(-10px); } }
@media(max-width:940px){ .chip--1{ left:0; } .chip--2{ right:0; } }

/* ticker */
.ticker{ margin-top:clamp(60px,9vw,110px); border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink); overflow:hidden; padding:14px 0;
  width:100vw; position:relative; left:50%; transform:translateX(-50%); }
.ticker__track{ display:inline-flex; align-items:center; gap:26px; white-space:nowrap;
  animation:scroll 34s linear infinite; }
.ticker__track span{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--ink); }
.ticker__track .sep{ color:var(--amber); font-style:normal; font-size:.9rem; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sec-head{ max-width:var(--wrap); margin:0 auto; padding:clamp(80px,11vw,150px) clamp(20px,4vw,52px) 0; }
.sec-head--wide{ }
.kicker{ font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber-deep); display:block; margin-bottom:20px; }
.kicker--light{ color:var(--amber); }
.sec-head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(2.1rem,4.6vw,3.6rem);
  line-height:1.02; letter-spacing:-.02em; }
.sec-head h2 em{ font-style:italic; color:var(--amber); font-weight:400; }
.sec-lede{ max-width:46ch; margin-top:22px; color:var(--ink-soft); font-size:1.1rem; }

/* ---------- stats ---------- */
.sees{ position:relative; z-index:1; }
.stats{ max-width:var(--wrap); margin:0 auto; padding:56px clamp(20px,4vw,52px) 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,52px); }
@media(max-width:820px){ .stats{ grid-template-columns:1fr; gap:38px; } }
.stat{ border-top:2px solid var(--ink); padding-top:20px; }
.stat__num{ font-family:var(--serif); font-weight:600; font-size:clamp(3rem,6vw,4.6rem);
  line-height:.9; letter-spacing:-.03em; display:block; }
.stat__suf{ font-size:.34em; color:var(--amber-deep); margin-left:4px; }
.stat__cap{ display:block; margin-top:16px; color:var(--ink-soft); font-size:.98rem; max-width:30ch; }

/* ============================================================
   INTELLIGENCE CARDS
   ============================================================ */
.cards{ max-width:var(--wrap); margin:0 auto; padding:56px clamp(20px,4vw,52px) 0;
  display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:760px){ .cards{ grid-template-columns:1fr; } }
.card{
  position:relative; overflow:hidden; background:var(--paper-2);
  border:1.5px solid var(--ink); border-radius:6px; padding:30px 28px 0;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  min-height:280px; display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -22px rgba(23,19,13,.5); }
.card__no{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--amber-deep);
  border:1.5px solid var(--ink); width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:20px; }
.card h3{ font-family:var(--serif); font-weight:500; font-size:1.7rem; letter-spacing:-.01em; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:.98rem; max-width:40ch; }
.card__art{ margin-top:auto; padding-top:24px; height:96px; }

.card__art--curve svg{ height:74px; width:100%; overflow:visible; }
.card__art--curve path{ fill:none; stroke:var(--viridian); stroke-width:3; stroke-linecap:round; }
.card:hover .card__art--curve path{ stroke:var(--amber); transition:stroke .4s; }

.card__art--bars{ display:flex; align-items:flex-end; gap:8px; height:96px; }
.card__art--bars i{ flex:1; height:var(--h); background:var(--ink); border-radius:2px 2px 0 0;
  transform-origin:bottom; animation:grow .8s ease both; }
.card:hover .card__art--bars i{ background:var(--amber); transition:background .4s; }
@keyframes grow{ from{ transform:scaleY(.2); } }

.card__art--pulse svg{ height:60px; width:100%; }
.card__art--pulse path{ fill:none; stroke:var(--rose); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

.card__art--shield{ display:flex; align-items:flex-end; }
.card__art--shield svg{ height:82px; overflow:visible; }
.card__art--shield path{ fill:none; stroke:var(--viridian); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.card:hover .card__art--shield path{ stroke:var(--amber); transition:stroke .4s; }

.card__art--net{ display:flex; align-items:flex-end; }
.card__art--net svg{ height:74px; width:100%; overflow:visible; }
.card__art--net line{ stroke:var(--line); stroke-width:2; }
.card__art--net circle{ fill:var(--ink); }
.card__art--net circle:first-of-type{ fill:var(--viridian); }
.card:hover .card__art--net circle:first-of-type{ fill:var(--amber); transition:fill .4s; }

.card__art--dots{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.card__art--dots i{ width:12px; height:12px; border-radius:50%; background:var(--line); }
.card__art--dots i:nth-child(3),.card__art--dots i:nth-child(8),.card__art--dots i:nth-child(11){
  background:var(--viridian); }
.card:hover .card__art--dots i:nth-child(3),
.card:hover .card__art--dots i:nth-child(8),
.card:hover .card__art--dots i:nth-child(11){ background:var(--amber); transition:background .4s; }

/* ============================================================
   THE NERVE CENTRE (integrations)
   ============================================================ */
.sources{ max-width:var(--wrap); margin:0 auto; padding:56px clamp(20px,4vw,52px) 0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
@media(max-width:900px){ .sources{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .sources{ grid-template-columns:repeat(2,1fr); } }
.source{ background:var(--paper-2); border:1.5px solid var(--ink); border-radius:6px;
  padding:20px 16px; display:flex; flex-direction:column; gap:5px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.source:hover{ transform:translateY(-5px); box-shadow:4px 6px 0 var(--amber); }
.source__name{ font-family:var(--serif); font-weight:500; font-size:1.35rem; letter-spacing:-.01em; }
.source__k{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft); }
.source--more{ background:transparent; border-style:dashed; }
.source--more .source__name{ color:var(--amber-deep); }

.nerve__out{ max-width:var(--wrap); margin:26px auto 0; padding:0 clamp(20px,4vw,52px);
  font-size:1.05rem; color:var(--ink-soft); display:flex; gap:10px; align-items:baseline; }
.nerve__out b{ color:var(--ink); }
.nerve__arw{ color:var(--amber-deep); font-weight:700; flex:0 0 auto; }

/* ============================================================
   THE MOAT · ASK ANYTHING
   ============================================================ */
.moat{ position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  padding-bottom:clamp(60px,9vw,110px); margin-top:clamp(80px,12vw,150px); }
.moat::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:radial-gradient(90% 60% at 80% 0%,rgba(240,115,26,.16),transparent 55%),
             radial-gradient(80% 60% at 0% 100%,rgba(28,122,102,.2),transparent 55%); }
.moat .sec-head{ position:relative; z-index:1; }
.moat .sec-head h2{ color:var(--paper); }
.moat .sec-head h2 em{ color:var(--amber); }
.sec-lede--light{ color:rgba(239,231,214,.66); }

.ask{ position:relative; z-index:1; width:min(700px, calc(100% - 40px));
  margin:clamp(40px,6vw,64px) auto 0;
  background:#0F0C08; border:1px solid rgba(239,231,214,.1); border-radius:10px;
  overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.ask__bar{ display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid rgba(239,231,214,.08); }
.ask__dot{ width:11px; height:11px; border-radius:50%; background:rgba(239,231,214,.18); }
.ask__dot:first-child{ background:var(--rose); }
.ask__name{ font-family:var(--mono); font-size:.74rem; letter-spacing:.04em;
  color:rgba(239,231,214,.5); margin-left:8px; }
.ask__body{ padding:24px clamp(18px,3vw,30px) 26px; }

.ask__q{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-family:var(--serif); font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.35;
  padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid rgba(239,231,214,.08); }
.ask__you,.ask__who{ font-family:var(--mono); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.08em; padding:4px 8px; border-radius:100px; flex:0 0 auto;
  transform:translateY(-2px); }
.ask__you{ color:rgba(239,231,214,.6); border:1px solid rgba(239,231,214,.18); }
.ask__who{ color:var(--ink); background:var(--amber); align-self:flex-start; }
.ask__type{ }
.caret{ display:inline-block; width:2px; height:1.1em; background:var(--amber);
  transform:translateY(3px); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.ask__a{ display:flex; flex-direction:column; gap:14px; }
.ask__msg p{ font-size:1rem; line-height:1.6; color:rgba(239,231,214,.8);
  margin-bottom:12px; }
.ask__msg p:last-child{ margin-bottom:0; }
.ask__msg b{ color:var(--paper); }
.ask__msg em{ font-style:italic; color:var(--amber); font-weight:400; }
.ask__sources{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.src{ font-family:var(--mono); font-size:.7rem; color:rgba(127,224,200,.9);
  border:1px solid rgba(28,122,102,.4); border-radius:100px; padding:5px 10px;
  background:rgba(28,122,102,.12); }

.moat__points{ position:relative; z-index:1; max-width:var(--wrap); margin:0 auto;
  padding:clamp(48px,7vw,80px) clamp(20px,4vw,52px) 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); }
@media(max-width:760px){ .moat__points{ grid-template-columns:1fr; gap:26px; } }
.mp{ border-top:2px solid rgba(240,115,26,.5); padding-top:16px; }
.mp__k{ font-family:var(--serif); font-size:1.4rem; display:block; margin-bottom:8px; }
.mp p{ color:rgba(239,231,214,.62); font-size:.96rem; max-width:34ch; }

/* ============================================================
   GUIDES
   ============================================================ */
.guide-row{ max-width:var(--wrap); margin:0 auto; padding:56px clamp(20px,4vw,52px) 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:820px){ .guide-row{ grid-template-columns:1fr; } }
.guide{
  position:relative; background:var(--ink); color:var(--paper); border-radius:6px;
  padding:28px 26px 34px; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.guide::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(120% 80% at 20% 0%,rgba(240,115,26,.28),transparent 60%); }
.guide:hover{ transform:translateY(-6px); }
.guide:hover::before{ opacity:1; }
.guide__badge{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--amber); border:1px solid rgba(240,115,26,.4); border-radius:100px; padding:5px 11px;
  display:inline-block; margin-bottom:22px; position:relative; }
.guide__name{ font-family:var(--serif); font-weight:500; font-size:2.6rem; letter-spacing:-.02em;
  margin-bottom:12px; position:relative; }
.guide p{ color:rgba(239,231,214,.7); font-size:.98rem; position:relative; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; margin-top:clamp(80px,12vw,150px); background:var(--ink); color:var(--paper);
  overflow:hidden; }
.cta__inner{ max-width:760px; margin:0 auto; padding:clamp(70px,10vw,120px) clamp(20px,4vw,52px);
  text-align:center; position:relative; z-index:2; }
.cta__title{ font-family:var(--serif); font-weight:500; font-size:clamp(2.3rem,5.5vw,4rem);
  line-height:1.02; letter-spacing:-.02em; margin-bottom:20px; }
.cta__lede{ color:rgba(239,231,214,.72); font-size:1.14rem; max-width:44ch; margin:0 auto 36px; }
.cta__note--light{ }
.signup__note--light{ color:rgba(239,231,214,.55); text-align:center; }
.cta__bulbs{ position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between;
  padding:0 20px 12px; z-index:1; }
.cta__bulbs span{ width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 8px var(--amber); animation:bulb 1.6s steps(1) infinite; }
.cta__bulbs span:nth-child(2n){ animation-delay:.5s; }
.cta__bulbs span:nth-child(3n){ animation-delay:.9s; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ max-width:var(--wrap); margin:0 auto; padding:52px clamp(20px,4vw,52px);
  display:flex; flex-direction:column; gap:8px; }
.foot__brand{ font-family:var(--serif); font-size:1.3rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.foot__brand .brand__mark{ color:var(--amber); }
.foot__line{ color:var(--ink-soft); }
.foot__fine{ font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); margin-top:6px; }
.foot__nav{ margin-top:14px; }

/* ============================================================
   DOCUMENT PAGES (about / transparency / privacy / terms / dpa)
   ============================================================ */
.nav--doc{ background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); }
.nav__links--doc a.is-current{ color:var(--ink); }
.nav__links--doc a.is-current::after{ width:100%; }
@media(max-width:900px){ .nav__links--doc{ display:none; } }

.doc{ position:relative; z-index:1; max-width:760px; margin:0 auto;
  padding:clamp(120px,15vw,168px) clamp(20px,5vw,40px) 0; }

.doc__head{ padding-bottom:clamp(30px,5vw,48px); margin-bottom:clamp(30px,5vw,48px);
  border-bottom:1.5px solid var(--ink); }
.doc__eyebrow{ font-family:var(--mono); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--amber-deep); display:block; margin-bottom:18px; }
.doc__title{ font-family:var(--serif); font-weight:500; letter-spacing:-.025em;
  font-size:clamp(2.4rem,6vw,3.6rem); line-height:1; }
.doc__title em{ font-style:italic; color:var(--amber); font-weight:400; }
.doc__sub{ margin-top:16px; color:var(--ink-soft); font-size:1.08rem; max-width:52ch; }

/* pre-launch notice callout */
.notice{ position:relative; background:var(--paper-2); border:1px solid var(--line);
  border-left:3px solid var(--amber); border-radius:4px;
  padding:18px 20px; margin-bottom:clamp(40px,6vw,60px); }
.notice p{ font-size:.96rem; color:var(--ink-soft); line-height:1.55; }
.notice b{ color:var(--ink); }

/* sections */
.doc section{ margin-bottom:clamp(38px,6vw,58px); }
.doc__k{ font-family:var(--mono); font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--amber-deep); margin-bottom:16px;
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.doc p{ font-size:1.05rem; line-height:1.68; color:var(--ink-soft); max-width:66ch; }
.doc p + p{ margin-top:14px; }
.doc h3{ font-family:var(--serif); font-weight:500; font-size:1.4rem; letter-spacing:-.01em;
  margin:26px 0 6px; }
.doc h3:first-child{ margin-top:0; }
.doc a{ color:var(--amber-deep); text-decoration:none; border-bottom:1px solid rgba(200,86,14,.35); }
.doc a:hover{ border-bottom-color:var(--amber-deep); }
.doc code{ font-family:var(--mono); font-size:.82em; background:var(--paper-2);
  border:1px solid var(--line); border-radius:3px; padding:1px 5px; }
.doc strong{ color:var(--ink); font-weight:600; }
.doc em{ font-style:italic; }
.attr{ font-family:var(--mono); font-size:.72rem; color:#9a917f; margin-top:8px; }

/* dash-marker lists */
.doc-list{ list-style:none; margin-top:14px; }
.doc-list li{ position:relative; padding-left:28px; margin-bottom:15px;
  font-size:1.05rem; line-height:1.62; color:var(--ink-soft); max-width:64ch; }
.doc-list li::before{ content:"—"; position:absolute; left:0; top:0;
  color:var(--amber-deep); font-weight:700; }
.doc-list--tight li{ margin-bottom:9px; }

/* guide rows in about */
.doc-guide{ border-left:2px solid var(--line); padding-left:18px; margin-top:20px; }
.doc-guide--live{ border-left-color:var(--amber); }
.doc-guide__name{ font-family:var(--serif); font-size:1.5rem; font-weight:500; margin-bottom:6px; }
.doc-guide__tag{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--amber-deep); }

/* legal footer */
.legalfoot{ position:relative; z-index:1; max-width:760px; margin:clamp(60px,9vw,110px) auto 0;
  padding:36px clamp(20px,5vw,40px) 60px; border-top:1.5px solid var(--ink);
  display:flex; flex-direction:column; gap:16px; }
.legalfoot__nav{ display:flex; flex-wrap:wrap; gap:20px; }
.legalfoot__nav a{ font-size:.9rem; color:var(--ink-soft); text-decoration:none; position:relative; }
.legalfoot__nav a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--amber); transition:width .25s; }
.legalfoot__nav a:hover{ color:var(--ink); }
.legalfoot__nav a:hover::after{ width:100%; }

/* ============================================================
   MOTION UTILITIES
   ============================================================ */
.reveal, .reveal-up{ opacity:0; }
.reveal{ transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-up{ transform:translateY(30px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal-up.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,.reveal-up{ opacity:1; transform:none; }
  .trace{ stroke-dashoffset:0 !important; }
}