/* =========================================================
   GhostMesh Grid — Design System
   Tokens: ink/graphite base, cold mesh-cyan structural accent,
   kill-switch amber-red reserved for containment/alert moments only.
   Type: Space Grotesk (structural/technical headlines) +
         IBM Plex Sans (body, legible/technical trust)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #0B0F14;
  --panel:      #10161D;
  --panel-2:    #151D26;
  --line:       #26333F;
  --line-soft:  #1B242D;
  --text:       #E7ECEF;
  --text-muted: #8FA0AC;
  --text-dim:   #5C6B77;
  --mesh:       #49D4C6;   /* cold cyan — network / structure */
  --mesh-dim:   #245C56;
  --kill:       #FF5A36;   /* alert amber-red — containment / CTA only */
  --kill-dim:   #7A2E1D;

  --font-head: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--mesh); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{ font-family: var(--font-head); font-weight:600; margin:0 0 .5em; line-height:1.15; color: var(--text); }
p{ margin:0 0 1em; color: var(--text-muted); max-width: 62ch; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ---------- Header ---------- */
.site-header{
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top:0; z-index: 50;
  background: rgba(11,15,20,0.92);
  backdrop-filter: blur(6px);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 72px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-head); font-weight:700; font-size:1.15rem; color:var(--text); }
.brand:hover{ text-decoration:none; }
.brand .mark{ width:20px; height:20px; flex:none; }
.brand .mark svg{ width:100%; height:100%; }
nav.primary-nav{ display:flex; align-items:center; gap:28px; }
nav.primary-nav a{ color: var(--text-muted); font-size:0.95rem; }
nav.primary-nav a:hover{ color: var(--text); text-decoration:none; }
nav.primary-nav a.current{ color: var(--mesh); }
.nav-cta{
  border:1px solid var(--kill); color: var(--text) !important;
  padding:8px 16px; border-radius:2px; font-size:0.9rem !important;
}
.nav-cta:hover{ background: var(--kill); text-decoration:none !important; }
.nav-toggle{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family: var(--font-body); font-weight:600;
  padding:13px 24px; border-radius:2px; font-size:0.95rem;
  border:1px solid var(--line); color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.btn:hover{ text-decoration:none; border-color: var(--text-dim); }
.btn-primary{ background: var(--kill); border-color: var(--kill); color:#0B0F14; font-weight:700; }
.btn-primary:hover{ background:#ff6f4f; border-color:#ff6f4f; }
.btn-ghost{ color: var(--mesh); border-color: var(--mesh-dim); }
.btn-ghost:hover{ border-color: var(--mesh); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 28px; }

/* ---------- Hero ---------- */
.hero{ padding: 88px 0 72px; border-bottom:1px solid var(--line-soft); }
.hero .container{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center; }
.hero-kicker{ font-family: var(--font-mono); font-size:0.82rem; color: var(--mesh); letter-spacing:0.02em; margin-bottom:18px; }
.hero h1{ font-size: clamp(2.1rem, 4vw, 3.1rem); max-width: 15ch; }
.hero .lede{ font-size:1.08rem; max-width: 46ch; margin-top: 16px; }
.hero-diagram{ border:1px solid var(--line); background: var(--panel); border-radius:3px; padding: 18px; }
.hero-diagram svg{ width:100%; height:auto; }

/* ---------- Sections ---------- */
section{ padding: 84px 0; border-bottom: 1px solid var(--line-soft); }
section:last-of-type{ border-bottom:none; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-label{ font-family: var(--font-mono); font-size:0.8rem; color: var(--text-dim); margin-bottom:12px; }
.section-head h2{ font-size: clamp(1.6rem,2.6vw,2.2rem); }

/* ---------- Problem framing ---------- */
.problem-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:start; }
.problem-grid .stat{ border-left:2px solid var(--kill); padding-left:16px; margin-bottom:28px; }
.problem-grid .stat .num{ font-family: var(--font-head); font-size:1.8rem; color: var(--text); display:block; }
.problem-grid .stat .lbl{ color: var(--text-dim); font-size:0.9rem; }

/* ---------- Architecture (schematic, not cards) ---------- */
.schematic{ border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.schem-row{
  display:grid; grid-template-columns: 220px 1fr 1fr; gap:0;
  border-bottom:1px solid var(--line-soft);
}
.schem-row:last-child{ border-bottom:none; }
.schem-row > div{ padding: 22px 24px; border-right:1px solid var(--line-soft); }
.schem-row > div:last-child{ border-right:none; }
.schem-row .comp-name{ font-family: var(--font-mono); color: var(--mesh); font-size:0.95rem; }
.schem-row .comp-role{ color: var(--text); font-weight:600; font-family: var(--font-head); }
.schem-row p{ margin:0; font-size:0.94rem; }
.schem-head{ background: var(--panel-2); font-family: var(--font-mono); color: var(--text-dim); font-size:0.78rem; }
.schem-head > div{ padding: 12px 24px; }

/* ---------- How it works (legit sequence — numbered) ---------- */
.pipeline{ display:grid; grid-template-columns: repeat(4,1fr); gap: 0; border:1px solid var(--line); border-radius:3px; }
.pipeline .step{ padding: 26px 22px; border-right:1px solid var(--line-soft); position:relative; }
.pipeline .step:last-child{ border-right:none; }
.pipeline .step .n{ font-family: var(--font-mono); color: var(--kill); font-size:0.85rem; }
.pipeline .step h4{ font-size:1.02rem; margin: 10px 0 8px; }
.pipeline .step p{ font-size:0.92rem; margin:0; }

/* ---------- Niche / positioning ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.compare > div{ padding: 28px 30px; }
.compare .not{ background: var(--panel); border-right:1px solid var(--line-soft); }
.compare .is{ background: var(--panel-2); }
.compare h4{ font-family: var(--font-mono); font-size:0.85rem; text-transform:none; color: var(--text-dim); margin-bottom:14px; }
.compare .is h4{ color: var(--mesh); }
.compare ul{ margin:0; padding-left:18px; color: var(--text-muted); font-size:0.94rem; }
.compare li{ margin-bottom:8px; }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--panel); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding: 64px 0; }
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cta-band h2{ margin:0; font-size:1.7rem; max-width:26ch; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; }
.contact-card{ border:1px solid var(--line); border-radius:3px; padding:26px; background: var(--panel); margin-bottom:16px; }
.contact-card .lbl{ font-family: var(--font-mono); font-size:0.78rem; color: var(--text-dim); margin-bottom:8px; }
.contact-card a, .contact-card span.val{ font-size:1.02rem; color: var(--text); }
.form-field{ margin-bottom: 18px; }
.form-field label{ display:block; font-size:0.88rem; color: var(--text-muted); margin-bottom:6px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background: var(--panel-2); border:1px solid var(--line); color: var(--text);
  padding:12px 14px; border-radius:2px; font-family: var(--font-body); font-size:0.96rem;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline: none; border-color: var(--mesh);
}
.form-note{ font-size:0.85rem; color: var(--text-dim); margin-top:14px; }
.alert{ padding:14px 16px; border-radius:2px; margin-bottom:20px; font-size:0.94rem; }
.alert-success{ background: rgba(73,212,198,0.08); border:1px solid var(--mesh-dim); color: var(--mesh); }
.alert-error{ background: rgba(255,90,54,0.08); border:1px solid var(--kill-dim); color: var(--kill); }

/* ---------- Footer ---------- */
footer.site-footer{ padding: 48px 0; }
footer.site-footer .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer.site-footer p{ margin:0; font-size:0.85rem; color: var(--text-dim); }
footer .foot-links{ display:flex; gap:20px; }
footer .foot-links a{ font-size:0.85rem; color: var(--text-dim); }
footer .foot-links a:hover{ color: var(--text-muted); }

/* ---------- Roadmap / excluded features note (about + contact) ---------- */
.roadmap-list{ list-style:none; margin:0; padding:0; }
.roadmap-list li{
  display:flex; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--line-soft); color: var(--text-muted); font-size:0.94rem;
}
.roadmap-list li:last-child{ border-bottom:none; }
.roadmap-list .tag{ font-family: var(--font-mono); font-size:0.75rem; color: var(--text-dim); white-space:nowrap; }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--mesh); outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  nav.primary-nav{ display:none; }
  .hero .container{ grid-template-columns: 1fr; }
  .problem-grid{ grid-template-columns: 1fr; }
  .schem-row{ grid-template-columns: 1fr; }
  .schem-row > div{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .schem-head{ display:none; }
  .pipeline{ grid-template-columns: 1fr; }
  .pipeline .step{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .compare{ grid-template-columns: 1fr; }
  .compare .not{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .contact-grid{ grid-template-columns: 1fr; }
  .cta-band .container{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}