/* ═══════════════════════════════════════════════════════════════
   superGM.ai — Restraint Edition
   One sans, one serif-italic-for-em, near-black backdrop, whitespace.
   Modeled after chaosinc.com: substance > decoration.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Typefaces — only two */
  --S: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;  /* Everything */
  --F: 'Instrument Serif', Georgia, serif;                                /* Emphasis inside headlines */

  /* Legacy aliases — kept so inner pages don't break. */
  --D: var(--S);  /* Display → Inter (same as body, per chaos-style one-font rule) */
  /* --M was monospace for tactical labels. Aliased to system mono — zero font load,
     always available, still preserves the "operational readout" feel where inner
     pages use it for small uppercase labels. */
  --M: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Legacy color aliases — inner pages use these inline. Map to new tokens. */
  --nb: rgba(255,255,255,.10);   /* was "navy border" — now line color */
  --nt: rgba(230,232,235,.62);   /* was "navy text" — now t3 body text */
  --bm: rgba(230,232,235,.42);   /* was muted label — now t4 */
  --w1: #12171f;                 /* was light surface — now c1 card */
  --w2: #151b25;                 /* was hover surface — now c2 */

  /* Surface */
  --bg:   #0a0e14;
  --bg2:  #0d1117;
  --c1:   #12171f;
  --c2:   #151b25;
  --c3:   #1b2230;
  --c4:   #1b2230;

  /* Light sections — keep for any page that inverts */
  --lt:   #f3f2ee;
  --lt2:  #e9e7e0;
  --lt3:  #dcd9d0;

  /* Lines */
  --ln:   rgba(255,255,255,.06);
  --ln2:  rgba(255,255,255,.10);
  --ln3:  rgba(255,255,255,.18);
  --bdr:  rgba(255,255,255,.10);

  /* Text on dark */
  --t1:  #e6e8eb;
  --t2:  #c9ccd1;
  --t3:  rgba(230,232,235,.62);
  --t4:  rgba(230,232,235,.42);

  /* Text on light */
  --lt1: #0a0e14;
  --lt2t: #1a2030;
  --lt3t: #4a5268;
  --lt4t: rgba(10,14,20,.4);

  /* Accent — used at most 3x per page */
  --ac:   #f0520a;
  --ac2:  #c94208;
  --acg:  rgba(240,82,10,.14);
  --acl:  rgba(240,82,10,.06);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur:  .2s;

  /* Layout */
  --pad: clamp(24px, 5vw, 64px);
  --maxw: 1120px;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--S);
  font-size: 17px;
  line-height: 1.65;
  color: var(--t2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; background: none; border: none; color: inherit; }
input, button, select { -webkit-appearance: none; appearance: none; font-family: inherit; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1 {
  font-family: var(--S);
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--t1);
}
h2 {
  font-family: var(--S);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--t1);
}
h3 {
  font-family: var(--S);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--t1);
}
h1 em, h2 em, h3 em {
  font-family: var(--F);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--t1);
}
p { line-height: 1.75; color: var(--t2); }
.bt   { font-size: 17px; color: var(--t3); max-width: 62ch; line-height: 1.75; }
.deck { font-size: clamp(18px, 1.6vw, 22px); color: var(--t2); max-width: 58ch; line-height: 1.55; margin: 20px 0 32px; font-weight: 300; }
.pull, .pq { font-family: var(--F); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; color: var(--t1); max-width: 760px; margin: 56px auto; padding: 0; background: none; border: none; }

/* Inner-page override hooks */
.on-light, .on-light h1, .on-light h2, .on-light h3 { color: var(--lt1); }
.on-light .bt, .on-light p { color: var(--lt3t); }

/* Eyebrow — now a small uppercase tag, no orange line */
.ey {
  display: inline-block;
  font-family: var(--S);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 24px;
}
.ey.dim { color: var(--t4); }

.rule { display: none; } /* retired — whitespace does this job now */

/* ── LAYOUT ─────────────────────────────────────────────────── */
main, nav, footer, section { position: relative; z-index: 2; }
section {
  padding: clamp(96px, 12vw, 160px) var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
section + section { padding-top: 0; }
section.on-light { background: var(--lt); }

.card {
  padding: clamp(28px, 3vw, 44px);
  background: transparent;
  border: 1px solid var(--ln2);
  border-radius: 2px;
}
.two   { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }

/* ── NAV ────────────────────────────────────────────────────── */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  z-index: 100;
  transition: background .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
body > nav.scrolled {
  background: rgba(10,14,20,.88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--ln);
}
.logo {
  font-family: var(--S);
  font-weight: 600;
  font-size: 15px;
  color: var(--t1);
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.logo-mark { flex-shrink: 0; color: var(--t1); }
.logo-mark circle:first-of-type { animation: none; } /* kill radar pulse */
.logo-wm em { font-family: var(--F); font-style: italic; font-weight: 400; }
.logo-tld { color: var(--t4); font-weight: 400; }
.logo-sub { color: var(--t4); font-weight: 400; font-size: 12px; margin-left: 12px; border-left: 1px solid var(--ln3); padding-left: 12px; }
.logo-pipe { display: none; }

.navr { display: flex; align-items: center; gap: 28px; }
.nl {
  font-family: var(--S);
  font-size: 14px;
  font-weight: 500;
  color: var(--t3);
  transition: color .15s;
  letter-spacing: -.005em;
}
.nl:hover, .nl.active { color: var(--t1); }
.nl-cta {
  padding: 9px 16px;
  background: var(--t1);
  color: var(--bg);
  border-radius: 2px;
  font-weight: 600;
  margin-left: 8px;
  transition: background .15s;
}
.nl-cta:hover { background: var(--ac); color: #fff; }

/* ── HAMBURGER + MOBILE MENU ────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: 12px;
}
.hamburger span {
  width: 22px; height: 1.5px;
  background: var(--t2);
  display: block;
  transition: transform .2s, opacity .2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: rgba(10,14,20,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ln2);
  z-index: 99;
  padding: 12px 0;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  font-family: var(--S);
  font-size: 15px;
  font-weight: 500;
  color: var(--t2);
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--ln);
  transition: color .15s, background .15s;
}
.mobile-menu a:hover { color: var(--t1); background: var(--ln); }
.mobile-menu a.cta-mob {
  background: var(--t1);
  color: var(--bg);
  margin: 12px 24px 0;
  text-align: center;
  border: none;
  border-radius: 2px;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--S);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 2px;
  background: var(--t1);
  color: var(--bg);
  transition: background .15s, transform .15s;
  letter-spacing: -.005em;
}
.btn:hover { background: var(--ac); color: #fff; }
.btn.btno { background: transparent; color: var(--t1); border: 1px solid var(--ln3); }
.btn.btno:hover { border-color: var(--t1); background: var(--t1); color: var(--bg); }
.btn.inv { background: var(--bg); color: var(--t1); }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(640px, 92vh, 960px);
  padding: 140px var(--pad) 96px;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero::before {
  /* Dark atmospheric backdrop — pure CSS, beautiful without an image.
     When you have /images/hero.jpg ready, append it as a layer:
       url('/images/hero.jpg'),
     above the base gradient, and add cover/center to the size/position stacks. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,14,20,.35) 0%, rgba(10,14,20,.92) 100%),
    radial-gradient(ellipse at 72% 38%, rgba(240,82,10,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(30,60,120,.12) 0%, transparent 55%),
    linear-gradient(135deg, #0a0e14 0%, #10151e 100%);
  z-index: -1;
}
.hero-l { max-width: 860px; }
.hero-r { display: none; } /* retired — chaos hero has no sidebar */
.htag {
  font-family: var(--S);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 28px;
}
.scan { animation: none; } /* kill any scan-line effect */

/* ── WAITLIST FORM ──────────────────────────────────────────── */
.wlf {
  display: flex;
  gap: 0;
  max-width: 560px;
  border: 1px solid var(--ln3);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(10,14,20,.5);
}
.wli {
  flex: 1;
  padding: 16px 18px;
  background: transparent;
  border: none;
  color: var(--t1);
  font-size: 15px;
  font-family: var(--S);
  outline: none;
}
.wli::placeholder { color: var(--t4); }
.wli:focus { background: rgba(255,255,255,.03); }
.wlb {
  padding: 16px 22px;
  background: var(--t1);
  color: var(--bg);
  font-family: var(--S);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: background .15s;
  white-space: nowrap;
}
.wlb:hover { background: var(--ac); color: #fff; }
.wlb:disabled { opacity: .6; cursor: wait; }
.form-error {
  font-family: var(--S);
  font-size: 13px;
  color: #ff7b5c;
  margin-top: 10px;
  display: none;
}
.form-error.visible { display: block; }

/* ── SCORECARD ──────────────────────────────────────────────── */
.sc-row { display: grid; grid-template-columns: 1fr 56px 1.2fr; border-top: 1px solid var(--ln); }
.sc-row:last-child { border-bottom: 1px solid var(--ln); }
.sc-label { padding: 18px 0; font-size: 14px; color: var(--t2); font-weight: 500; }
.sc-mark { padding: 18px 12px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--ln); border-right: 1px solid var(--ln); font-weight: 600; color: var(--ac); }
.sc-note { padding: 18px 16px; font-size: 14px; color: var(--t3); line-height: 1.6; }

/* ── CTA SECTION ────────────────────────────────────────────── */
.ctasec {
  position: relative;
  padding: clamp(96px, 12vw, 160px) var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--ln);
}
.ctasec::before, .ctasec::after { content: none; } /* ghost text and gradients retired */

/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
  padding: 48px var(--pad);
  border-top: 1px solid var(--ln);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  color: var(--t4);
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: 0 auto;
}
.fl { font-family: var(--S); font-weight: 600; color: var(--t2); }
.fl em { font-family: var(--F); font-style: italic; font-weight: 400; }
.fc { font-family: var(--S); color: var(--t4); flex: 1; min-width: 240px; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-item { border-top: 1px solid var(--ln); }
.faq-item:last-child { border-bottom: 1px solid var(--ln); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--t1);
}
.faq-q .icon {
  font-family: var(--S);
  font-size: 18px;
  font-weight: 300;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--t3);
  transition: transform .2s, color .2s;
}
.faq-item.open .faq-q .icon { transform: rotate(45deg); color: var(--ac); }
.faq-a { font-size: 15px; color: var(--t3); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease), padding .3s; }
.faq-item.open .faq-a { max-height: 600px; padding-bottom: 24px; }

/* ── BACK TO TOP ────────────────────────────────────────────── */
.back-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 40px; height: 40px;
  background: rgba(10,14,20,.8);
  border: 1px solid var(--ln2);
  border-radius: 2px;
  color: var(--t3);
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, border-color .2s, color .2s;
  pointer-events: none;
  backdrop-filter: blur(10px);
}
.back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-top:hover { border-color: var(--t1); color: var(--t1); }

/* ── TICKER ─────────────────────────────────────────────────── */
.ticker, .tkr { display: none; } /* ticker retired — chaos has no marquee */

/* ── VENDOR / CATEGORY STUBS (inner pages) ──────────────────── */
.vcat { font-family: var(--S); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); margin-bottom: 8px; font-weight: 600; }
.vname { font-family: var(--S); font-size: 20px; font-weight: 600; color: var(--t1); margin-bottom: 6px; letter-spacing: -.01em; }
.vtext { font-family: var(--S); font-size: 14px; color: var(--t3); }

/* ── ICON TILE (from PR #8 iconset) ─────────────────────────── */
.ic-tile {
  width: 44px; height: 44px;
  border: 1px solid var(--ln2);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  color: var(--t2);
}
.ic-tile::before, .ic-tile::after { content: none; } /* corner brackets retired */
.ic-tile svg { width: 20px; height: 20px; }

/* ── BLOG GRID + POST CARDS ─────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: 48px; }
.post-card {
  padding: 32px;
  border: 1px solid var(--ln2);
  border-radius: 2px;
  transition: border-color .2s;
  background: transparent;
}
.post-card:hover { border-color: var(--ln3); }

/* ── ANGLED DIVIDERS — RETIRED ──────────────────────────────── */
.clip-bottom, .clip-top { clip-path: none; margin-top: 0; }

/* ── SECTION NUMBERS — RETIRED ──────────────────────────────── */
.sec-num { display: none; }

/* ── FOCUS ──────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ── REVEAL (sections fade in on scroll) ────────────────────── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── ANDURIL ARTIFACTS RETIRED ──────────────────────────────── */
/* Background grid and grain: removed — chaos has neither */
body::before, body::after { content: none; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hamburger { display: flex; }
  .navr .nl, .navr .nl-cta { display: none; }
  .two, .three { grid-template-columns: 1fr; }
  .logo-sub { display: none; }
}

@media (max-width: 768px) {
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:180px 1fr"],
  [style*="grid-template-columns:200px 1fr"],
  [style*="grid-template-columns:280px 60px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  :root { --pad: 20px; }
  body { font-size: 16px; }
  .hero { min-height: auto; padding-top: 120px; padding-bottom: 72px; }
  footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .back-top { bottom: 16px; right: 16px; }
  .wlf { flex-direction: column; }
  .wlb { width: 100%; }
  .sc-row { grid-template-columns: 1fr; }
  .sc-mark { border-left: none; border-right: none; border-top: 1px solid var(--ln); justify-content: flex-start; padding: 10px 16px; }
  .sc-label { padding: 16px 0 0; }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="gap:48px"] { gap: 24px !important; }
  [style*="gap:32px"] { gap: 20px !important; }
}