/* ============================================================
   OpenSSL Corp — Premium Redesign Explorations
   Three directions: Obsidian / Editorial / Mainframe
   All keep brand teal palette.
============================================================ */

:root {
  /* Brand (locked) */
  --deep:     #003C46;
  --teal:     #0F8FA1;
  --mint:     #01E8D7;
  --cyan-ice: #A1FDFF;
  --sky:      #ABD1D9;
  --fog:      #CEE4E9;
  --mist:     #E9F2F5;
  --haze:     #F5F9FA;

  /* Premium type stacks */
  --sans:     'Geist', -apple-system, system-ui, sans-serif;
  --mono:     'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display:  'Neue Machina', 'Geist', -apple-system, system-ui, sans-serif;
  --plex:     'IBM Plex Sans', system-ui, sans-serif;
  --plex-mono:'IBM Plex Mono', ui-monospace, monospace;
  --serif:    'Instrument Serif', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; background: #FBFCFC; }
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }

/* ---- Page chrome ---- */
.page { min-height: 100vh; background: #FBFCFC; transition: color 320ms cubic-bezier(.2,0,.2,1); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

/* =============================================================
   ============ VARIANT A — OBSIDIAN ============================
   Vercel / Stripe energy. Near-black, teal accents, mono labels.
============================================================= */
.page[data-v="obsidian"] {
  --bg:        #FBFCFC;
  --bg-elev:   #F2F7F8;
  --bg-card:   #FFFFFF;
  --bg-soft:   #ECF3F5;
  --border:    rgba(0,60,70,0.08);
  --border-hi: rgba(0,60,70,0.20);
  --text:      #003C46;
  --text-dim:  #3E7C8B;
  --text-mute: #7FA3AF;
  --accent:    var(--teal);
  --accent-2:  var(--deep);
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
.page[data-v="obsidian"] .mono { font-family: var(--mono); letter-spacing: 0.02em; }

/* Hero background grid */
.page[data-v="obsidian"] .hero {
  position: relative;
  padding: 140px 0 120px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page[data-v="obsidian"] .hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,60,70,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,60,70,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  pointer-events: none;
}
.page[data-v="obsidian"] .hero::after {
  content: '';
  position: absolute;
  right: -200px; top: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(1,232,215,0.30) 0%, transparent 60%);
  pointer-events: none;
}

.page[data-v="obsidian"] .h-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding: 8px 14px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: rgba(15,143,161,0.05);
}
.page[data-v="obsidian"] .h-kicker .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.page[data-v="obsidian"] .h-title {
  font-family: var(--sans);
  font-size: clamp(48px, 7.5vw, 104px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 28px 0 32px;
  color: var(--text);
  max-width: 1000px;
}
.page[data-v="obsidian"] .h-title .grad {
  background: linear-gradient(180deg, #003C46 0%, #6E9CA6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page[data-v="obsidian"] .h-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--teal) 0%, var(--deep) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page[data-v="obsidian"] .h-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 0 40px;
  font-weight: 400;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; padding: 12px 22px; border-radius: 8px; transition: all 180ms ease; cursor: pointer; white-space: nowrap; }
.btn-icon { transition: transform 180ms ease; }
.btn:hover .btn-icon { transform: translateX(3px); }

.page[data-v="obsidian"] .btn-pri {
  background: var(--teal);
  color: #fff;
}
.page[data-v="obsidian"] .btn-pri:hover { background: var(--deep); }
.page[data-v="obsidian"] .btn-sec {
  border: 1px solid var(--border-hi);
  color: var(--text);
  background: transparent;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 220ms ease, border-color 220ms ease, transform 180ms ease;
}
.page[data-v="obsidian"] .btn-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(15,143,161,0.08) 0%,
    rgba(0,229,255,0.18) 35%,
    rgba(155,110,247,0.22) 65%,
    rgba(15,143,161,0.08) 100%);
  background-size: 200% 100%;
  background-position: 100% 50%;
  opacity: 0;
  transition: opacity 220ms ease, background-position 600ms ease;
  z-index: -1;
}
.page[data-v="obsidian"] .btn-sec:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.page[data-v="obsidian"] .btn-sec:hover::before {
  opacity: 1;
  background-position: 0% 50%;
}

/* Stats row in hero */
.page[data-v="obsidian"] .hero-stats {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.page[data-v="obsidian"] .hero-stats .stat {
  padding: 28px 24px;
  border-right: 1px solid var(--border);
}
.page[data-v="obsidian"] .hero-stats .stat:last-child { border-right: none; }
.page[data-v="obsidian"] .hero-stats .stat .v {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.page[data-v="obsidian"] .hero-stats .stat .v .mint { color: var(--teal); }
.page[data-v="obsidian"] .hero-stats .stat .l {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
}

/* Section labels */
.page[data-v="obsidian"] .sec-label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.page[data-v="obsidian"] .sec-label::before {
  content: ''; width: 28px; height: 1px; background: var(--accent);
}
.page[data-v="obsidian"] .sec-title {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 24px;
  max-width: 800px;
}
.page[data-v="obsidian"] .sec-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0;
}

.page[data-v="obsidian"] section {
  padding: 120px 0;
}

/* Solutions cards */
.page[data-v="obsidian"] .sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 64px;
}
.page[data-v="obsidian"] .sol-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  display: flex; flex-direction: column;
  transition: all 220ms ease;
  position: relative; overflow: hidden;
}
.page[data-v="obsidian"] .sol-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 220ms ease;
}
.page[data-v="obsidian"] .sol-card:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.page[data-v="obsidian"] .sol-card:hover::before { opacity: 1; }
.page[data-v="obsidian"] .sol-card .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.14em;
}
.page[data-v="obsidian"] .sol-card .ic {
  margin: 28px 0 24px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--teal);
}
.page[data-v="obsidian"] .sol-card h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text);
}
.page[data-v="obsidian"] .sol-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 28px;
  flex: 1;
}
.page[data-v="obsidian"] .sol-card .link {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--teal);
  display: inline-flex; align-items: center; gap: 8px;
}

/* Mission */
.page[data-v="obsidian"] .mission {
  background: var(--bg-elev);
  border-radius: 16px;
  padding: 80px;
  margin: 0 32px;
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
}
.page[data-v="obsidian"] .mission::after {
  content: '';
  position: absolute;
  right: -100px; bottom: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(1,232,215,0.35) 0%, transparent 60%);
}
.page[data-v="obsidian"] .mission h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
  max-width: 900px;
  position: relative;
}
.page[data-v="obsidian"] .mission h2 em {
  font-style: normal;
  color: var(--teal);
}

/* Blog */
.page[data-v="obsidian"] .blog-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  margin-top: 64px;
}
.page[data-v="obsidian"] .blog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 220ms ease;
  display: flex; flex-direction: column;
}
.page[data-v="obsidian"] .blog-card:hover { border-color: var(--border-hi); }
.page[data-v="obsidian"] .blog-card .thumb {
  aspect-ratio: 16/9;
  background: var(--bg-soft);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page[data-v="obsidian"] .blog-card.feat .thumb { aspect-ratio: 16/10; }
.page[data-v="obsidian"] .blog-card .thumb-art {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.page[data-v="obsidian"] .blog-card .body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.page[data-v="obsidian"] .blog-card .meta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  margin-bottom: 14px;
  display: flex; gap: 16px;
}
.page[data-v="obsidian"] .blog-card .meta .tag { color: var(--teal); }
.page[data-v="obsidian"] .blog-card h3 {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text);
}
.page[data-v="obsidian"] .blog-card.feat h3 { font-size: 26px; line-height: 1.2; }
.page[data-v="obsidian"] .blog-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  flex: 1;
}

/* Logo strip */
.page[data-v="obsidian"] .logos {
  padding: 80px 0;
}
.page[data-v="obsidian"] .logos-label {
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  margin-bottom: 48px;
}
.page[data-v="obsidian"] .logos-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 32px;
  opacity: 0.55;
}
.page[data-v="obsidian"] .logos-row .lg {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text-dim);
  text-align: center;
}

/* =============================================================
   ============ VARIANT B — EDITORIAL ===========================
   Apple / Palantir energy. White, ultra-thin display.
============================================================= */
.page[data-v="editorial"] {
  --bg:        #FBFCFC;
  --bg-soft:   #F0F5F6;
  --bg-card:   #FFFFFF;
  --border:    rgba(0,60,70,0.08);
  --border-hi: rgba(0,60,70,0.18);
  --text:      #003C46;
  --text-dim:  #3E7C8B;
  --text-mute: #7FA3AF;
  --accent:    var(--teal);
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}

.page[data-v="editorial"] section {
  padding: 140px 0;
}
.page[data-v="editorial"] section + section { border-top: 1px solid var(--border); }

.page[data-v="editorial"] .hero {
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.page[data-v="editorial"] .h-kicker {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  display: flex; align-items: center; gap: 14px;
}
.page[data-v="editorial"] .h-kicker::before {
  content: ''; width: 32px; height: 1px; background: var(--accent);
}

.page[data-v="editorial"] .h-title {
  font-family: var(--sans);
  font-size: clamp(56px, 9vw, 132px);
  font-weight: 200;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 40px 0 48px;
  color: var(--text);
  max-width: 1200px;
}
.page[data-v="editorial"] .h-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.page[data-v="editorial"] .h-sub {
  font-size: 22px;
  line-height: 1.45;
  color: var(--text-dim);
  font-weight: 300;
  max-width: 720px;
  margin: 0 0 56px;
}

.page[data-v="editorial"] .btn-pri {
  background: var(--text);
  color: #fff;
  border-radius: 999px;
  padding: 14px 28px;
}
.page[data-v="editorial"] .btn-pri:hover { background: var(--teal); }
.page[data-v="editorial"] .btn-sec {
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  padding: 14px 28px;
  color: var(--text);
}
.page[data-v="editorial"] .btn-sec:hover { background: var(--bg-soft); }

/* Big numerals row */
.page[data-v="editorial"] .hero-stats {
  margin-top: 120px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.page[data-v="editorial"] .hero-stats .stat .v {
  font-family: var(--sans);
  font-size: 80px;
  font-weight: 100;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
}
.page[data-v="editorial"] .hero-stats .stat .v sup {
  font-size: 28px; font-weight: 300; vertical-align: super;
  color: var(--accent);
}
.page[data-v="editorial"] .hero-stats .stat .l {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  max-width: 220px;
}

.page[data-v="editorial"] .sec-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 32px;
}
.page[data-v="editorial"] .sec-label::before {
  content: ''; width: 32px; height: 1px; background: var(--accent);
}
.page[data-v="editorial"] .sec-title {
  font-family: var(--sans);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 32px;
  max-width: 1000px;
}
.page[data-v="editorial"] .sec-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.page[data-v="editorial"] .sec-lede {
  font-size: 22px;
  line-height: 1.45;
  color: var(--text-dim);
  font-weight: 300;
  max-width: 680px;
  margin: 0;
}

.page[data-v="editorial"] .sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 80px;
}
.page[data-v="editorial"] .sol-card {
  background: transparent;
  padding: 40px 0;
  border-top: 1px solid var(--text);
  display: flex; flex-direction: column;
  transition: transform 220ms ease;
}
.page[data-v="editorial"] .sol-card:hover { transform: translateY(-4px); }
.page[data-v="editorial"] .sol-card .num {
  font-size: 13px;
  color: var(--text-mute);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.page[data-v="editorial"] .sol-card .ic {
  margin: 80px 0 24px;
  color: var(--accent);
}
.page[data-v="editorial"] .sol-card h3 {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--text);
}
.page[data-v="editorial"] .sol-card p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 32px;
  flex: 1;
}
.page[data-v="editorial"] .sol-card .link {
  font-size: 15px;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}

.page[data-v="editorial"] .mission {
  text-align: center;
  padding: 0 32px;
}
.page[data-v="editorial"] .mission h2 {
  font-family: var(--sans);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 auto 48px;
  color: var(--text);
  max-width: 1100px;
}
.page[data-v="editorial"] .mission h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.page[data-v="editorial"] .blog-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-top: 64px;
}
.page[data-v="editorial"] .blog-card {
  display: flex; flex-direction: column;
  transition: transform 220ms ease;
}
.page[data-v="editorial"] .blog-card:hover { transform: translateY(-4px); }
.page[data-v="editorial"] .blog-card .thumb {
  aspect-ratio: 4/3;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
}
.page[data-v="editorial"] .blog-card.feat .thumb { aspect-ratio: 16/10; }
.page[data-v="editorial"] .blog-card .thumb-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.page[data-v="editorial"] .blog-card .meta {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 16px;
  display: flex; gap: 16px;
}
.page[data-v="editorial"] .blog-card .meta .tag { color: var(--accent); }
.page[data-v="editorial"] .blog-card h3 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--text);
}
.page[data-v="editorial"] .blog-card.feat h3 { font-size: 36px; font-weight: 200; line-height: 1.1; }
.page[data-v="editorial"] .blog-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

.page[data-v="editorial"] .logos { padding: 80px 0; border-top: 1px solid var(--border); }
.page[data-v="editorial"] .logos-label {
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  margin-bottom: 56px;
}
.page[data-v="editorial"] .logos-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 48px;
}
.page[data-v="editorial"] .logos-row .lg {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text-mute);
  text-align: center;
}

/* =============================================================
   ============ VARIANT C — MAINFRAME ===========================
   Cloudflare / Tailscale energy. Charcoal, technical, data-rich.
============================================================= */
.page[data-v="mainframe"] {
  --bg:        #F5F9FA;
  --bg-elev:   #FFFFFF;
  --bg-card:   #FFFFFF;
  --bg-soft:   #E9F2F5;
  --border:    rgba(0,60,70,0.10);
  --border-hi: rgba(0,60,70,0.22);
  --text:      #003C46;
  --text-dim:  #3E7C8B;
  --text-mute: #7FA3AF;
  --accent:    var(--teal);
  --accent-2:  var(--deep);
  background: var(--bg);
  color: var(--text);
  font-family: var(--plex);
}
.page[data-v="mainframe"] .mono { font-family: var(--plex-mono); }

.page[data-v="mainframe"] .hero {
  position: relative;
  padding: 120px 0 100px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page[data-v="mainframe"] .hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,60,70,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,60,70,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.page[data-v="mainframe"] .hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
}

.page[data-v="mainframe"] .h-kicker {
  font-family: var(--plex-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border-hi);
  background: var(--bg-elev);
  border-radius: 4px;
}

.page[data-v="mainframe"] .h-title {
  font-family: var(--plex);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 24px 0 28px;
  color: var(--text);
}
.page[data-v="mainframe"] .h-title em {
  font-style: normal;
  color: var(--teal);
  position: relative;
}

.page[data-v="mainframe"] .h-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 580px;
  margin: 0 0 36px;
}

.page[data-v="mainframe"] .btn-pri {
  background: var(--teal);
  color: #fff;
  font-family: var(--plex-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  padding: 14px 22px;
  border-radius: 4px;
}
.page[data-v="mainframe"] .btn-pri:hover { background: var(--deep); }
.page[data-v="mainframe"] .btn-sec {
  border: 1px solid var(--border-hi);
  font-family: var(--plex-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  padding: 14px 22px;
  border-radius: 4px;
  color: var(--text);
  background: var(--bg-elev);
}
.page[data-v="mainframe"] .btn-sec:hover { background: var(--bg-soft); border-color: var(--text); }

/* Hero status panel */
.page[data-v="mainframe"] .status-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  padding: 24px;
  font-family: var(--plex-mono);
}
.page[data-v="mainframe"] .status-panel .sp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.page[data-v="mainframe"] .status-panel .sp-head .live {
  display: flex; align-items: center; gap: 6px;
  color: var(--teal);
}
.page[data-v="mainframe"] .status-panel .sp-head .live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  animation: pulse 1.6s ease-in-out infinite;
}
.page[data-v="mainframe"] .status-panel .sp-row {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border);
}
.page[data-v="mainframe"] .status-panel .sp-row:last-child { border-bottom: none; }
.page[data-v="mainframe"] .status-panel .sp-row .k { color: var(--text-mute); }
.page[data-v="mainframe"] .status-panel .sp-row .v { color: var(--text); }
.page[data-v="mainframe"] .status-panel .sp-row .v.ok { color: var(--teal); font-weight: 500; }

.page[data-v="mainframe"] section {
  padding: 120px 0;
  position: relative;
}

.page[data-v="mainframe"] .sec-label {
  font-family: var(--plex-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.page[data-v="mainframe"] .sec-label .bracket { color: var(--text-mute); }
.page[data-v="mainframe"] .sec-title {
  font-family: var(--plex);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 20px;
  max-width: 900px;
}
.page[data-v="mainframe"] .sec-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0;
}

.page[data-v="mainframe"] .sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 64px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}
.page[data-v="mainframe"] .sol-card {
  padding: 36px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: relative;
  transition: background 220ms ease;
}
.page[data-v="mainframe"] .sol-card:last-child { border-right: none; }
.page[data-v="mainframe"] .sol-card:hover { background: var(--bg-soft); }
.page[data-v="mainframe"] .sol-card .head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
}
.page[data-v="mainframe"] .sol-card .num {
  font-family: var(--plex-mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
}
.page[data-v="mainframe"] .sol-card .pill {
  font-family: var(--plex-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  padding: 4px 10px;
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  background: var(--bg-soft);
}
.page[data-v="mainframe"] .sol-card .ic { color: var(--teal); margin-bottom: 28px; }
.page[data-v="mainframe"] .sol-card h3 {
  font-family: var(--plex);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--text);
}
.page[data-v="mainframe"] .sol-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 28px;
  flex: 1;
}
.page[data-v="mainframe"] .sol-card .feat-list {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 20px;
}
.page[data-v="mainframe"] .sol-card .feat-list li {
  font-family: var(--plex-mono);
  font-size: 12px;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 10px;
}
.page[data-v="mainframe"] .sol-card .feat-list li::before {
  content: '+';
  color: var(--teal);
  font-weight: 600;
}
.page[data-v="mainframe"] .sol-card .link {
  font-family: var(--plex-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  display: inline-flex; align-items: center; gap: 8px;
}

.page[data-v="mainframe"] .mission {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 64px;
  margin: 0 32px;
  position: relative;
  overflow: hidden;
}
.page[data-v="mainframe"] .mission::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,60,70,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,60,70,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 60%);
}
.page[data-v="mainframe"] .mission h2 {
  font-family: var(--plex);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
  position: relative;
  max-width: 900px;
}
.page[data-v="mainframe"] .mission h2 em {
  font-style: normal;
  color: var(--teal);
}

.page[data-v="mainframe"] .blog-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  margin-top: 56px;
}
.page[data-v="mainframe"] .blog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 220ms ease;
  display: flex; flex-direction: column;
}
.page[data-v="mainframe"] .blog-card:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.page[data-v="mainframe"] .blog-card .thumb {
  aspect-ratio: 16/9;
  background: var(--bg-soft);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page[data-v="mainframe"] .blog-card.feat .thumb { aspect-ratio: 16/10; }
.page[data-v="mainframe"] .blog-card .thumb-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.page[data-v="mainframe"] .blog-card .body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.page[data-v="mainframe"] .blog-card .meta {
  font-family: var(--plex-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-bottom: 12px;
  display: flex; gap: 14px;
}
.page[data-v="mainframe"] .blog-card .meta .tag { color: var(--teal); }
.page[data-v="mainframe"] .blog-card h3 {
  font-family: var(--plex);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--text);
}
.page[data-v="mainframe"] .blog-card.feat h3 { font-size: 26px; line-height: 1.2; }
.page[data-v="mainframe"] .blog-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

.page[data-v="mainframe"] .logos { padding: 80px 0; }
.page[data-v="mainframe"] .logos-label {
  font-family: var(--plex-mono);
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  margin-bottom: 48px;
}
.page[data-v="mainframe"] .logos-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 32px;
  opacity: 0.55;
}
.page[data-v="mainframe"] .logos-row .lg {
  font-family: var(--plex);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  text-align: center;
}

/* =============================================================
   Header — variant aware
============================================================= */
.hdr {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.page[data-v="obsidian"] .hdr { background: rgba(251,252,252,0.78); }
.page[data-v="editorial"] .hdr { background: rgba(251,252,252,0.78); }
.page[data-v="mainframe"] .hdr { background: rgba(245,249,250,0.85); }

.hdr-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.hdr-brand { display: flex; align-items: center; gap: 12px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); font-size: 16px; }
.hdr-brand .logo { width: 22px; height: 30px; color: var(--accent); }
.hdr-brand .hdr-logo { height: 38px; width: auto; display: block; }
.hdr-status {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 14px;
  padding: 5px 10px;
  border: 1px solid rgba(0,60,70,0.12);
  border-radius: 999px;
  background: rgba(15,143,161,0.04);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.page[data-v="mainframe"] .hdr-status { font-family: var(--plex-mono); }
.hdr-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1F8A5B;
  box-shadow: 0 0 8px rgba(31,138,91,0.6);
  animation: hdr-status-pulse 2.2s ease-in-out infinite;
}
@keyframes hdr-status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Industry trust strip */
.industry-trust {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.industry-trust .it-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.page[data-v="mainframe"] .industry-trust .it-inner { font-family: var(--plex-mono); }
.industry-trust .it-l { color: var(--text-mute); }
.industry-trust .it-i { color: var(--text); font-weight: 500; }
.industry-trust .it-sep { color: var(--text-mute); opacity: 0.4; }
.hdr-brand .sup {
  font-family: var(--mono); font-size: 10px; padding: 2px 6px;
  background: rgba(15,143,161,0.10); color: var(--accent);
  border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-left: 6px;
}
.page[data-v="mainframe"] .hdr-brand .sup { font-family: var(--plex-mono); }
.page[data-v="editorial"] .hdr-brand .sup { background: var(--bg-soft); color: var(--accent); }

.hdr-nav { display: flex; gap: 4px; align-items: center; }
.hdr-nav a, .hdr-nav button {
  position: relative;
  font-size: 14px;
  font-weight: 450;
  padding: 8px 14px;
  color: var(--text-dim);
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 160ms ease, background 160ms ease;
  white-space: nowrap;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 450;
}
.hdr-nav a:hover, .hdr-nav button:hover { color: var(--text); }
.hdr-nav-item { position: relative; }
.hdr-nav-trigger .hdr-chev { transition: transform 180ms ease; opacity: 0.7; }
.hdr-nav-item.is-open .hdr-nav-trigger { color: var(--text); }
.hdr-nav-item.is-open .hdr-chev { transform: rotate(180deg); }
.hdr-menu {
  position: absolute;
  top: 100%; left: -8px;
  min-width: 280px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 60;
  padding-top: 8px;
}
.hdr-menu::before {
  content: '';
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 16px;
}
.hdr-nav-item.is-open .hdr-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hdr-menu-inner {
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  padding: 8px;
  display: flex; flex-direction: column;
}
.hdr-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  border-radius: 8px;
  transition: background 140ms ease, color 140ms ease;
  text-decoration: none;
  white-space: normal !important;
  gap: 12px;
}
.hdr-menu-item:hover { background: var(--bg-soft); color: var(--accent) !important; }
.hdr-menu-item svg { flex-shrink: 0; opacity: 0.5; }
.hdr-menu-item:hover svg { opacity: 1; }

.hdr-cta { display: flex; align-items: center; gap: 12px; }
.hdr-cta .portal {
  font-size: 13px;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 6px;
}
.hdr-cta .portal:hover { color: var(--text); background: var(--bg-soft); }
.page[data-v="editorial"] .hdr-cta .portal:hover { background: var(--bg-soft); }

.hdr-cta .cta {
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
}
.page[data-v="editorial"] .hdr-cta .cta { border-radius: 999px; }
.page[data-v="obsidian"] .hdr-cta .cta { background: var(--teal); color: #fff; }
.page[data-v="mainframe"] .hdr-cta .cta { font-family: var(--plex-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; padding: 10px 16px; border-radius: 4px; background: var(--teal); color: #fff; }
.page[data-v="obsidian"] .hdr-cta .cta:hover { background: var(--deep); }
.page[data-v="editorial"] .hdr-cta .cta:hover { background: var(--teal); }
.page[data-v="mainframe"] .hdr-cta .cta:hover { background: var(--deep); }

/* =============================================================
   Footer — variant aware
============================================================= */
.ftr { padding: 80px 0 0; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
/* Brand data-pin pattern raining down from the top edge — aurora-toned, faint */
.ftr::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 360px;
  background: url('assets/pattern-aurora.png') center top / 115% auto no-repeat;
  opacity: 0.30;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.5) 55%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.5) 55%, transparent 92%);
  pointer-events: none;
  z-index: 0;
}
.ftr .container-wide { position: relative; z-index: 1; }
.ftr-glyph {
  position: absolute;
  right: -120px; bottom: -60px;
  width: 720px;
  color: rgba(15,143,161,0.08);
  pointer-events: none;
  z-index: 0;
}
.ftr-col a:hover { color: var(--accent); }
.ftr-tagline {
  border-top: 1px solid var(--border);
  padding: 56px 0 64px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  text-align: center;
}
.ftr-tagline-mark { color: var(--accent); font-weight: 500; }
.ftr-tagline-sep { color: var(--text-mute); opacity: 0.4; }
.ftr-tagline-year {
  color: var(--text); font-weight: 600;
  background: linear-gradient(105deg, #0F8FA1 0%, #00E5FF 35%, #9B6EF7 65%, #0F8FA1 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-flow 14s ease-in-out infinite;
}
.ftr-glyph svg { width: 100%; height: auto; display: block; }
.ftr > .container-wide { position: relative; z-index: 2; }
.ftr-tagline {
  border-top: 1px solid var(--border);
  padding: 28px 0 32px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  flex-wrap: wrap;
}
.ftr-tagline-mark { color: var(--accent); font-weight: 500; }
.ftr-tagline-sep { color: var(--text-mute); opacity: 0.4; }
.ftr-tagline-year { color: var(--text); font-weight: 500; }
.ftr-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px;
  margin-bottom: 64px;
}
.ftr-col h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  font-weight: 500;
  margin: 0 0 20px;
}
.page[data-v="obsidian"] .ftr-col h5,
.page[data-v="mainframe"] .ftr-col h5 { font-family: var(--mono); }
.page[data-v="mainframe"] .ftr-col h5 { font-family: var(--plex-mono); }

.ftr-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ftr-col a { font-size: 14px; color: var(--text-dim); transition: color 160ms ease; }
.ftr-col a:hover { color: var(--text); }
.ftr-col .new {
  font-family: var(--mono); font-size: 9px; padding: 2px 5px;
  background: var(--teal); color: #fff;
  border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-left: 6px; vertical-align: middle;
}
.page[data-v="mainframe"] .ftr-col .new { font-family: var(--plex-mono); }

.ftr-brand .logo {
  width: 28px; height: 38px;
  color: var(--accent);
  margin-bottom: 20px;
}
.ftr-brand-logo {
  height: 38px; width: auto;
  display: block;
  margin-bottom: 22px;
}
.ftr-brand p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 300px;
}
.ftr-brand .socials { display: flex; gap: 10px; }
.ftr-brand .socials a {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: all 160ms ease;
}
.ftr-brand .socials a:hover { color: var(--text); border-color: var(--border-hi); }

.ftr-bottom {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px;
}
.ftr-bottom .meta {
  font-size: 13px; color: var(--text-mute);
}
.ftr-bottom .props { display: flex; gap: 20px; }
.ftr-bottom .props a {
  font-size: 13px; color: var(--text-mute);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: all 160ms ease;
}
.ftr-bottom .props a:hover { color: var(--text); border-color: var(--border-hi); }

/* Shared utility */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Global typography — prevent orphan words & awkward line breaks site-wide */
h1, h2, h3, h4, .sec-title, .page-hero-title, .hs-title, .gs-h, .nl-title,
.md-quote, .be-feat-title, .bp-card-title, .ps-h, .lead-subgroup { text-wrap: balance; }
p, .sec-lede, .hs-sub, .page-hero-sub, li, .be-feat-desc, .bp-card-desc { text-wrap: pretty; }

/* Site-wide card depth — subtle resting elevation on light cards for consistency */
.hp-card, .gs-card, .person-card, .comm-cat-card, .report-card,
.plan-card, .tr-card, .partner-card, .ni-card {
  box-shadow: 0 14px 38px -30px rgba(6,64,73,0.40);
}

/* Site-wide 3D hero illustration — gentle float + tilt so header art feels like
   it lifts off the page (sub-page hero badges: FIPS ring, PQC ring, roadmap, blog). */
@media (prefers-reduced-motion: no-preference) {
  .page-hero-badge { perspective: 1000px; }
  .page-hero-badge > * { animation: om-hero-float 6.5s ease-in-out infinite; transform-style: preserve-3d; will-change: transform; }
}
@keyframes om-hero-float {
  0%, 100% { transform: translateY(0) rotateX(2.5deg) rotateY(-3.5deg); }
  50%      { transform: translateY(-13px) rotateX(-2.5deg) rotateY(3.5deg); }
}

/* === Universal scroll-reveal (all pages) === */
.om-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(.2,0,.2,1), transform 0.7s cubic-bezier(.2,0,.2,1);
  transition-delay: var(--om-d, 0ms);
  will-change: opacity, transform;
}
.om-reveal.om-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .om-reveal, .om-reveal.om-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.flex-between { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }

/* Hero loop glyph — obsidian/mainframe */
.loop-glyph {
  position: absolute;
  pointer-events: none;
  color: var(--accent);
  opacity: 0.12;
}
.page[data-v="obsidian"] .loop-glyph { right: -80px; bottom: -20px; width: 560px; opacity: 0.10; color: var(--teal); }
.page[data-v="mainframe"] .loop-glyph { right: -40px; top: 40px; width: 380px; opacity: 0.10; color: var(--teal); }
.page[data-v="editorial"] .loop-glyph { right: -60px; top: 20%; width: 480px; opacity: 0.5; color: var(--bg-soft); }

/* Image art placeholders for blog */
.thumb-art svg { width: 100%; height: 100%; }

/* =============================================================
   Card grid for "About / Team / Conference" trio under hero
============================================================= */
.page[data-v="obsidian"] .pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 0;
}
.page[data-v="obsidian"] .pillar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: all 250ms ease;
}
.page[data-v="obsidian"] .pillar:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.page[data-v="obsidian"] .pillar .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.14em;
  margin-bottom: 80px;
  display: block;
}
.page[data-v="obsidian"] .pillar h3 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.1;
}
.page[data-v="obsidian"] .pillar p { font-size: 15px; color: var(--text-dim); margin: 0 0 32px; line-height: 1.55; }
.page[data-v="obsidian"] .pillar .link { font-family: var(--mono); font-size: 12px; color: var(--teal); text-transform: uppercase; letter-spacing: 0.12em; display: inline-flex; align-items: center; gap: 6px; }

.page[data-v="editorial"] .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.page[data-v="editorial"] .pillar { background: var(--bg); padding: 56px 32px; display: flex; flex-direction: column; transition: background 220ms ease; }
.page[data-v="editorial"] .pillar:hover { background: var(--bg-soft); }
.page[data-v="editorial"] .pillar .num { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 80px; display: block; }
.page[data-v="editorial"] .pillar h3 { font-family: var(--sans); font-size: 36px; font-weight: 200; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 16px; color: var(--text); }
.page[data-v="editorial"] .pillar h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.page[data-v="editorial"] .pillar p { font-size: 17px; color: var(--text-dim); margin: 0 0 32px; line-height: 1.55; }
.page[data-v="editorial"] .pillar .link { font-size: 14px; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }

.page[data-v="mainframe"] .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-card); }
.page[data-v="mainframe"] .pillar { padding: 36px; border-right: 1px solid var(--border); transition: background 220ms ease; }
.page[data-v="mainframe"] .pillar:last-child { border-right: none; }
.page[data-v="mainframe"] .pillar:hover { background: var(--bg-soft); }
.page[data-v="mainframe"] .pillar .num { font-family: var(--plex-mono); font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 60px; display: block; }
.page[data-v="mainframe"] .pillar h3 { font-family: var(--plex); font-size: 24px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--text); line-height: 1.1; }
.page[data-v="mainframe"] .pillar p { font-size: 14px; color: var(--text-dim); margin: 0 0 24px; line-height: 1.6; }
.page[data-v="mainframe"] .pillar .link { font-family: var(--plex-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; }

/* =============================================================
   ============ DOTTED SPHERE HERO (universal) ==================
   3A sphere visual, lives at the top of every variant.
============================================================= */
.hero-sphere {
  position: relative;
  padding: 60px 0 24px;
  min-height: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Hero padding must beat the generic `[data-v] section { padding:120px 0 }`
   rule (higher specificity) so the hero keeps its own tighter top spacing. */
.page[data-v="obsidian"] .hero-sphere,
.page[data-v="editorial"] .hero-sphere,
.page[data-v="mainframe"] .hero-sphere { padding: 64px 0 80px; }
.page[data-v="obsidian"] .hero-sphere { background: radial-gradient(ellipse at 70% 50%, #FBFCFC 0%, #ECF3F5 100%); }
.page[data-v="editorial"] .hero-sphere { background: linear-gradient(180deg, #FBFCFC 0%, #F0F5F6 100%); }
.page[data-v="mainframe"] .hero-sphere { background: #F5F9FA; }

.hero-sphere .container-wide {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 600px;
}

.hero-sphere .orb-host {
  position: absolute;
  right: -120px; top: 0; bottom: 0;
  width: 920px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 1;
}

/* Mesh canvas host — same right-side layout as orb-host */
.hero-mesh .mesh-host {
  position: absolute;
  right: -20px; top: 0; bottom: 0;
  width: 1280px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.hero-mesh .mesh-host canvas { display: block; }
/* Fade the constellation out on the left so it never sits behind the hero copy
   (keeps it vivid on the right where there's no text). */
.hero-mesh .mesh-host {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0,0,0,0.6) 56%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0,0,0,0.6) 56%, #000 70%);
}
.hero-mesh .hs-text { max-width: 980px; position: relative; z-index: 5; }

/* === Optional office photo bleed behind the hero (Tweak-controlled) ===
   Sits at z-0: above the section's own background, below the constellation
   (z-1) and the copy (z-5). Off by default; fades in when enabled. */
.hero-photo-bleed {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-size: cover;
  background-repeat: no-repeat;
}
[data-hero-photo="on"] .hero-photo-bleed { opacity: var(--hp-op, 0.12); }
[data-hero-img="beam"] .hero-photo-bleed { background-image: url('assets/office-beam.jpg'); }
[data-hero-img="office"] .hero-photo-bleed { background-image: url('assets/office-scene.jpg'); }
[data-hero-pos="bl"] .hero-photo-bleed {
  left: 0; top: 0; bottom: 0; width: 50%;
  background-position: left center;
  -webkit-mask-image: linear-gradient(58deg, #000 0%, rgba(0,0,0,0.42) 48%, transparent 78%);
          mask-image: linear-gradient(58deg, #000 0%, rgba(0,0,0,0.42) 48%, transparent 78%);
}
[data-hero-pos="br"] .hero-photo-bleed {
  right: 0; top: 0; bottom: 0; width: 50%;
  background-position: right center;
  -webkit-mask-image: linear-gradient(-58deg, #000 0%, rgba(0,0,0,0.42) 48%, transparent 78%);
          mask-image: linear-gradient(-58deg, #000 0%, rgba(0,0,0,0.42) 48%, transparent 78%);
}
[data-hero-pos="full"] .hero-photo-bleed {
  inset: 0; width: 100%; height: 100%;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 28% 72%, #000 0%, rgba(0,0,0,0.3) 55%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 85% at 28% 72%, #000 0%, rgba(0,0,0,0.3) 55%, transparent 80%);
}

/* Brand pattern backdrop — sits behind the mesh; lets variant gradient show through */
.page[data-v="obsidian"] .hero-mesh {
  background:
    radial-gradient(ellipse 60% 70% at 95% 10%, rgba(0,229,255,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 80% 75% at 85% 25%, rgba(15,143,161,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 100% 5%, rgba(155,110,247,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, #FBFCFC 0%, #ECF3F5 100%);
}
.page[data-v="editorial"] .hero-mesh {
  background:
    radial-gradient(ellipse 60% 70% at 95% 10%, rgba(0,229,255,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 80% 75% at 85% 25%, rgba(15,143,161,0.16) 0%, transparent 65%),
    linear-gradient(180deg, #FBFCFC 0%, #F0F5F6 100%);
}
.page[data-v="mainframe"] .hero-mesh {
  background:
    radial-gradient(ellipse 60% 70% at 95% 10%, rgba(0,229,255,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 80% 75% at 85% 25%, rgba(15,143,161,0.16) 0%, transparent 65%),
    #F5F9FA;
}
.hero-mesh::before {
  /* Brand pipe motif top-right — matches the sub-page heroes (e.g. Support Plans):
     pattern-aurora-deep, larger scale, radial corner fade. Sits at z-0, below the
     constellation (z-1) and copy (z-5). */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('assets/pattern-aurora-deep.png') right -30px top -40px / auto 150% no-repeat;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(150% 135% at 100% 0%, #000 0%, rgba(0,0,0,0.55) 38%, transparent 68%);
          mask-image: radial-gradient(150% 135% at 100% 0%, #000 0%, rgba(0,0,0,0.55) 38%, transparent 68%);
  pointer-events: none;
}
/* Hero bottom fade — softens the transition into the next section */
.hero-mesh::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent 0%, #E9F2F5 100%);
  pointer-events: none;
  z-index: 3;
}

/* =============================================================
   PAGE ENTRANCE + SCROLL REVEALS
============================================================= */
@keyframes pe-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-mesh .hs-text > * {
  opacity: 0;
  animation: pe-fade-up 0.8s cubic-bezier(.2,0,.2,1) forwards;
}
.hero-mesh .hs-text .hb-kicker { animation-delay: 0.1s; }
.hero-mesh .hs-text .hs-title  { animation-delay: 0.25s; }
.hero-mesh .hs-text .hs-sub    { animation-delay: 0.45s; }
.hero-mesh .hs-text .cta-row   { animation-delay: 0.6s; }
.hero-mesh .hs-text .hs-meta   { animation-delay: 0.75s; }
.hero-mesh .mesh-host {
  opacity: 0;
  animation: pe-fade-up 1.2s cubic-bezier(.2,0,.2,1) forwards;
  animation-delay: 0.3s;
}

/* Scroll-reveal sections — class added by IntersectionObserver in app.jsx */
.reveal-section {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .reveal-section.in-view {
    animation: om-reveal-rise 700ms cubic-bezier(.2,0,.2,1) both;
  }
}
@keyframes om-reveal-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Mission word-by-word reveal */
.mission-dark .md-quote .word {
  display: inline-block;
  margin-right: 0.28em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(.2,0,.2,1);
}
.mission-dark.in-view .md-quote .word {
  opacity: 1;
  transform: translateY(0);
}
.hero-sphere .orb-ring {
  position: absolute;
  width: 760px; height: 760px;
  border: 1px dashed rgba(0,60,70,0.10);
  border-radius: 50%;
  animation: hp-ring-rot 60s linear infinite;
}
.hero-sphere .orb-ring.r2 {
  width: 860px; height: 860px;
  border-color: rgba(0,60,70,0.06);
  animation-direction: reverse;
  animation-duration: 90s;
}
@keyframes hp-ring-rot { to { transform: rotate(360deg); } }

.hero-sphere .orb-persp {
  perspective: 1800px;
  perspective-origin: center;
  width: 720px; height: 720px;
}
.hero-sphere .orb-3d {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: hp-sphere-rot 28s linear infinite;
}
@keyframes hp-sphere-rot {
  from { transform: rotateY(0deg) rotateX(-10deg); }
  to   { transform: rotateY(360deg) rotateX(-10deg); }
}
.hero-sphere .orb-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--ossl-deep, #003C46);
  transform-style: preserve-3d;
}
.hero-sphere .orb-dot.hi {
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--ossl-teal, #0F8FA1);
  box-shadow: 0 0 14px var(--ossl-teal, #0F8FA1);
  animation: hp-hi-pulse 2.4s ease-in-out infinite;
}
@keyframes hp-hi-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero-sphere .lab {
  position: absolute;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ossl-teal, #0F8FA1);
  padding: 6px 12px;
  background: rgba(251,252,252,0.92);
  border: 1px solid rgba(0,60,70,0.14);
  border-radius: 4px;
  white-space: nowrap;
  z-index: 6;
}
.hero-sphere .lab::before { content: ''; position: absolute; width: 28px; height: 1px; background: var(--ossl-teal, #0F8FA1); left: -32px; top: 50%; }
.hero-sphere .lab.l1 { top: 18%; right: 60px; }
.hero-sphere .lab.l2 { top: 50%; right: 30px; transform: translateY(-50%); }
.hero-sphere .lab.l3 { bottom: 18%; right: 80px; }

.hero-sphere .hs-text { position: relative; z-index: 5; }
/* Hero headline letter cascade — letters reveal one by one on load via stagger */
.hero-mesh .hs-title {
  font-family: var(--sans);
  font-size: clamp(52px, 5.9vw, 88px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ossl-deep, #003C46);
  margin: 40px 0 0;
  max-width: 980px;
  text-shadow: 0 5px 12px rgba(15,143,161,0.26);
}
.hero-mesh .hs-title .hl-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}
.hero-mesh .hs-title .hl-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  animation: hl-rise 0.7s cubic-bezier(.2,0,.2,1) forwards;
  margin-right: 0.22em;
}
@keyframes hl-rise {
  to { opacity: 1; transform: translateY(0); }
}
/* Safety: never leave hero content stuck hidden if animations don't run
   (reduced-motion, or animation throttled/blocked). Visible end-state fallback. */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh .hs-text > *,
  .hero-mesh .hs-title .hl-word,
  .hero-mesh .mesh-host { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* === PROUD STATEMENT — dark confidence band with timeline anchor === */
.proud-statement {
  position: relative;
  background: linear-gradient(180deg, #062126 0%, #0A1418 100%);
  color: #fff;
  padding: 140px 0 120px;
  overflow: hidden;
}

/* === GET STARTED — Final CTA before footer === */
.get-started-cta {
  position: relative;
  padding: 96px 0 100px;
  background: var(--bg);
  overflow: hidden;
}
.get-started-cta::before {
  content: '';
  position: absolute;
  right: -100px; top: -80px;
  width: 700px; height: 600px;
  background:
    radial-gradient(ellipse 50% 60% at 70% 30%, rgba(0,229,255,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 80% 50%, rgba(155,110,247,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.get-started-cta .container-wide { position: relative; z-index: 2; text-align: left; }
.gs-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(.2,0,.2,1);
}
.gs-label::before { content: ''; width: 32px; height: 1px; background: var(--accent); }
.gs-in .gs-label { opacity: 1; transform: translateY(0); }
.gs-h {
  font-family: var(--sans);
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 28px;
  max-width: 1100px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms ease-out 200ms, transform 900ms cubic-bezier(.2,0,.2,1) 200ms;
}
.gs-in .gs-h { opacity: 1; transform: translateY(0); }
.gs-h em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(105deg, #0F8FA1 0%, #00C2D6 32%, #7C6CF0 66%, #0F8FA1 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gs-p {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 48px;
  max-width: 680px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms ease-out 400ms, transform 800ms cubic-bezier(.2,0,.2,1) 400ms;
}
.gs-in .gs-p { opacity: 1; transform: translateY(0); }
.gs-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms ease-out 550ms, transform 800ms cubic-bezier(.2,0,.2,1) 550ms;
}
.gs-in .gs-actions { opacity: 1; transform: translateY(0); }
.gs-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px;
  font-weight: 500;
  padding: 16px 26px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 200ms ease;
}
.gs-btn-pri {
  background: var(--accent);
  color: #fff;
  background-image: linear-gradient(105deg, var(--accent) 0%, var(--accent) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 600ms ease, background-image 220ms ease, transform 180ms ease;
}
.gs-btn-pri:hover {
  background-image: linear-gradient(105deg, #0F8FA1 0%, #00E5FF 35%, #9B6EF7 65%, #0F8FA1 100%);
  background-size: 200% 100%;
  background-position: 100% 50%;
  transform: translateY(-1px);
}
.gs-btn-sec {
  border: 1px solid var(--border-hi);
  color: var(--text);
  background: var(--bg-card);
}
.gs-btn-sec:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* === CONTRIBUTORS STRIP — quiet logos row before footer === */
.contributors-strip {
  padding: 48px 0 56px;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
/* Faint circuit ribbon underlay — ties the contributors band together */
.contributors-strip::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  background: url('assets/circuit-strip.png') center bottom / auto 100% repeat-x;
  opacity: 0.10;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  pointer-events: none;
}
.contributors-strip .container-wide { position: relative; z-index: 1; }
.cs-label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 40px;
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 500;
}
.cs-label::before { content: ''; width: 32px; height: 1px; background: var(--accent); }
.cs-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 72px;
  align-items: center;
}
.cs-lg-img {
  height: 40px;
  width: auto;
  max-width: 140px;
  opacity: 0.85;
  transition: opacity 200ms ease, transform 200ms ease;
  object-fit: contain;
  display: block;
}
.cs-lg-img:hover { opacity: 1; transform: translateY(-3px); }
.cs-lg { display: inline-flex; align-items: center; }
.cs-lg-fallback {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ossl-deep, #003C46);
  opacity: 0.7;
}

/* === LATEST NEWS TICKER — thin link strip between hero and pillars === */
.latest-ticker {
  display: block;
  text-decoration: none;
  background: linear-gradient(180deg, #FBFCFC 0%, var(--bg-soft) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  transition: background 220ms ease;
  position: relative;
  overflow: hidden;
}
.latest-ticker:hover { background: var(--bg-soft); }
.lt-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 13px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.lt-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid rgba(0,229,255,0.35);
  border-radius: 999px;
  background: rgba(0,229,255,0.05);
  flex-shrink: 0;
}
.lt-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1F8A5B;
  box-shadow: 0 0 8px rgba(31,138,91,0.6);
  animation: hdr-status-pulse 2s ease-in-out infinite;
}
.lt-date {
  color: var(--text-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.lt-sep { color: var(--text-mute); opacity: 0.4; flex-shrink: 0; }
.lt-tag {
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.lt-title {
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  flex-shrink: 0;
  transition: gap 180ms ease;
}
.latest-ticker:hover .lt-cta { gap: 10px; color: var(--text); }

@media (max-width: 800px) {
  .lt-sep, .lt-date { display: none; }
  .lt-title { font-size: 14px; }
}

.proud-statement::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,229,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,229,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.proud-statement::after {
  content: '';
  position: absolute;
  left: -200px; top: -200px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(155,110,247,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.proud-statement .container-wide { position: relative; z-index: 5; }

.ps-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #00E5FF;
  margin-bottom: 56px;
}
.ps-label::before { content: ''; width: 32px; height: 1px; background: #00E5FF; }

.ps-timeline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  margin-bottom: 80px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms ease-out 200ms, transform 900ms cubic-bezier(.2,0,.2,1) 200ms;
}
.ps-in .ps-timeline { opacity: 1; transform: translateY(0); }
.ps-year {
  font-family: var(--sans);
  font-size: clamp(56px, 7vw, 100px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ps-year-end {
  background: linear-gradient(105deg, #1AA9BC 0%, #00E5FF 35%, #A78BFF 70%, #1AA9BC 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ps-axis { position: relative; height: 60px; }
.ps-axis-line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0,229,255,0.2) 0%, rgba(0,229,255,0.5) 50%, rgba(0,229,255,0.2) 100%);
}
.ps-axis-tick {
  position: absolute;
  top: 50%;
  width: 2px; height: 14px;
  background: rgba(0,229,255,0.6);
  transform: translateY(-50%);
}
.ps-tick-start { left: 0; }
.ps-tick-end { right: 0; }
.ps-axis-marker {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #062126 0%, #0A1418 100%);
  padding: 6px 18px;
  border: 1px solid rgba(0,229,255,0.4);
  border-radius: 999px;
  display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.ps-axis-marker-n {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ps-axis-marker-l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00E5FF;
}

.ps-h {
  font-family: var(--sans);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 56px;
  max-width: 1180px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms ease-out 400ms, transform 900ms cubic-bezier(.2,0,.2,1) 400ms;
}
.ps-in .ps-h { opacity: 1; transform: translateY(0); }
.ps-h em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(105deg, #1AA9BC 0%, #00E5FF 35%, #A78BFF 70%, #1AA9BC 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ps-h-2 { color: #9BB8BF; }
.ps-h-2 em { color: #fff; -webkit-text-fill-color: initial; background: none; }

.ps-rule {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0,229,255,0) 0%, rgba(0,229,255,0.32) 50%, rgba(0,229,255,0) 100%);
  margin: 0 0 56px;
}

.ps-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.ps-stat-n {
  font-family: var(--sans);
  font-size: clamp(64px, 8vw, 116px);
  font-weight: 500;
  letter-spacing: -0.045em;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline;
}
.ps-pct { font-size: 40%; color: #00E5FF; margin-left: 2px; font-weight: 500; }
.ps-stat-l {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.55;
  color: #9BB8BF;
  max-width: 300px;
}

.ps-source {
  display: inline-flex;
  margin-top: 56px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(155,184,191,0.85);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 999px;
  transition: all 200ms ease;
}
.ps-source:hover {
  color: #fff;
  border-color: #00E5FF;
  background: rgba(0,229,255,0.06);
}

@media (max-width: 900px) {
  .ps-timeline { grid-template-columns: 1fr; gap: 16px; }
  .ps-axis { height: 40px; }
  .ps-stats { grid-template-columns: 1fr; gap: 32px; }
}
/* === AURORA SPECTRUM ===
   AI-era signature: teal → cyan → violet → magenta flowing gradient.
   Used on motion-only surfaces — em accents, CTA hovers, key moments. */

/* Aurora text selection across the site */
::selection {
  background: linear-gradient(105deg, rgba(0,229,255,0.55), rgba(155,110,247,0.55));
  background: rgba(0,229,255,0.45);
  color: #003C46;
}
::-moz-selection {
  background: rgba(0,229,255,0.45);
  color: #003C46;
}

/* On dark backgrounds (Mission, Proud Statement), invert */
.mission-dark ::selection,
.proud-statement ::selection {
  background: rgba(0,229,255,0.45);
  color: #fff;
}

@keyframes aurora-flow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@keyframes aurora-pulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.15) saturate(1.2); }
}

/* Aurora scroll-progress bar — fixed top, fills as you scroll */
.aurora-scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg,
    #0F8FA1 0%,
    #00E5FF 35%,
    #9B6EF7 65%,
    #0F8FA1 100%);
  background-size: 200% 100%;
  animation: aurora-flow 6s ease-in-out infinite;
  z-index: 200;
  pointer-events: none;
  transition: width 60ms linear;
  box-shadow: 0 0 8px rgba(0,229,255,0.5);
}

/* Aurora section-divider rail — replaces hard borders between sections */
.aurora-divider {
  position: relative;
  height: 1px;
  background: transparent;
  pointer-events: none;
  margin: 0;
}

/* Motif transition strip — now a clean spacer (legacy "pipes" image retired) */
.motif-divider {
  position: relative;
  height: 24px;
  background: var(--bg);
  overflow: hidden;
  pointer-events: none;
}
.motif-divider::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
}
.motif-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 8%, transparent 92%, var(--bg) 100%);
  pointer-events: none;
}
.motif-divider.motif-on-soft {
  height: 56px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.motif-divider.motif-on-soft::after { background: none; }
/* Circuit-strip seam — the brand ribbon as a full-width structural divider */
.motif-circuit {
  position: relative;
  height: 60px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  overflow: hidden;
  pointer-events: none;
}
.motif-circuit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/circuit-strip.png') left center / auto 100% repeat-x;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.motif-divider.motif-on-dark { background: #0A1418; }
.motif-divider.motif-on-dark::before { mix-blend-mode: lighten; opacity: 0.35; filter: none; }
.motif-divider.motif-on-dark::after { background: linear-gradient(90deg, #0A1418 0%, transparent 8%, transparent 92%, #0A1418 100%); }
.motif-divider.motif-breath { height: 48px; }
/* Gentle tint bridge from hero into the pillars section */
.motif-divider.motif-bridge { background: #E9F2F5; }
.motif-divider.motif-bridge::before { opacity: 0.5; }
.motif-divider.motif-bridge::after { background: linear-gradient(90deg, #E9F2F5 0%, transparent 8%, transparent 92%, #E9F2F5 100%); }

/* === CONTRIBUTORS STRIP — elevated with bigger logos === */
.contributors-strip-x { display: none; }
.aurora-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(15,143,161,0.0) 10%,
    rgba(0,229,255,0.55) 35%,
    rgba(155,110,247,0.7) 50%,
    rgba(0,229,255,0.55) 65%,
    rgba(15,143,161,0.0) 90%,
    transparent 100%);
  background-size: 200% 100%;
  animation: aurora-flow 11s ease-in-out infinite;
}
.aurora-divider::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 7px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,255,0.0) 20%,
    rgba(0,229,255,0.25) 45%,
    rgba(155,110,247,0.35) 50%,
    rgba(0,229,255,0.25) 55%,
    rgba(0,229,255,0.0) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: aurora-flow 11s ease-in-out infinite;
  filter: blur(4px);
}

/* HOLOGRAPHIC CARD HOVER — prismatic shimmer on key surfaces */
.hp-card,
.plan-card,
.fips-cert-card,
.partner-card,
.report-card {
  position: relative;
}
.hp-card::after,
.plan-card::after,
.partner-card::after,
.report-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    var(--hg-angle, 105deg),
    rgba(0,229,255,0) 0%,
    rgba(0,229,255,0.28) 30%,
    rgba(155,110,247,0.32) 50%,
    rgba(0,229,255,0.28) 70%,
    rgba(0,229,255,0) 100%
  );
  opacity: 0;
  transition: opacity 320ms ease;
  mix-blend-mode: screen;
}
.hp-card:hover::after,
.plan-card:hover::after,
.partner-card:hover::after,
.report-card:hover::after {
  opacity: 0.7;
}

/* Featured plan card — legacy stroke-cell accent retired for a clean surface */
.plan-card.plan-featured::after {
  display: none;
}

/* Hero em accent — now aurora */
.hero-mesh .hs-title em {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  filter: drop-shadow(0 5px 11px rgba(15,143,161,0.26));
  background: linear-gradient(105deg,
    #0F8FA1 0%,
    #00C2D6 32%,
    #7C6CF0 66%,
    #0F8FA1 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-mesh .hs-title em::before {
  content: none;
}

/* Primary CTA — solid teal at rest, aurora on hover */
.hero-mesh .cta-row .btn-pri,
.cta-row .btn-pri {
  background: var(--teal, #0F8FA1);
  color: #fff;
  background-image: linear-gradient(105deg,
    #0F8FA1 0%,
    #0F8FA1 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 600ms ease, background-image 220ms ease, transform 180ms ease;
  position: relative;
  overflow: hidden;
}
.hero-mesh .cta-row .btn-pri:hover,
.cta-row .btn-pri:hover {
  background-image: linear-gradient(105deg,
    #0F8FA1 0%,
    #00E5FF 35%,
    #9B6EF7 65%,
    #0F8FA1 100%);
  background-size: 200% 100%;
  background-position: 100% 50%;
  transform: translateY(-1px);
}
.hero-sphere .hs-title em {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  filter: drop-shadow(0 5px 11px rgba(15,143,161,0.26));
  background: linear-gradient(105deg,
    #0F8FA1 0%,
    #00C2D6 32%,
    #7C6CF0 66%,
    #0F8FA1 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes metal-wave {
  0%, 100% { background-position: 100% 50%; }
  50%      { background-position: 0% 50%; }
}
.hero-sphere .hs-title em::before { display: none; }

/* Editorial only — italic serif + shimmer underline */
.page[data-v="editorial"] .hero-sphere .hs-title em,
.page[data-v="editorial"] .sec-title em,
.page[data-v="editorial"] .flex-between em,
.page[data-v="editorial"] .bignums .head em,
.page[data-v="editorial"] .gs-card em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06em;
  letter-spacing: -0.02em;
}
.page[data-v="editorial"] .hero-sphere .hs-title em::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%; bottom: 0.06em;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #01E8D7 50%, transparent 100%);
  opacity: 0.55;
  animation: shimmer-line 5s ease-in-out infinite;
}

/* Schematic — sans (Plex), 500 weight, normal style; gradient color only */
.page[data-v="mainframe"] .hero-sphere .hs-title em,
.page[data-v="mainframe"] .sec-title em,
.page[data-v="mainframe"] .flex-between em,
.page[data-v="mainframe"] .bignums .head em {
  font-family: var(--plex);
  font-style: normal;
  font-weight: 500;
}

/* Studio — sans (Geist), no italic, just gradient color */
.page[data-v="obsidian"] .hero-sphere .hs-title em,
.page[data-v="obsidian"] .sec-title em,
.page[data-v="obsidian"] .flex-between em,
.page[data-v="obsidian"] .bignums .head em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
}
/* Hero headline accent matches the Geist Regular headline weight */
.page[data-v="obsidian"] .hero-mesh .hs-title em { font-weight: 400; }

@keyframes sheen-pass {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes liquid-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
@keyframes shimmer-line {
  0%, 100% { opacity: 0.25; transform: scaleX(0.85); }
  50%      { opacity: 0.75; transform: scaleX(1);    }
}

/* Base em treatment for all section title accents — gradient + glow,
   variant-specific font handled by overrides above */
.sec-title em,
.bignums .head em,
.flex-between em,
.gs-card em {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(105deg, #0F8FA1 0%, #00C2D6 32%, #7C6CF0 66%, #0F8FA1 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-title em::before,
.bignums .head em::before,
.flex-between em::before,
.gs-card em::before { display: none; }
.hero-sphere .hs-sub {
  font-size: 22px;
  line-height: 1.55;
  color: var(--text-dim, #3E7C8B);
  max-width: 580px;
  margin: 32px 0 0;
  font-weight: 400;
}
.hero-mesh .cta-row { margin-top: 44px; }
.page[data-v="editorial"] .hero-sphere .hs-sub { font-size: 22px; font-weight: 300; line-height: 1.45; }
.hero-mesh .hs-sub .hs-sub-em { color: var(--ossl-deep, #003C46); font-weight: 500; }
.hero-sphere .hs-meta {
  margin-top: 56px;
  display: flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.hero-sphere .hs-meta .item { display: flex; align-items: center; gap: 8px; }
.hero-sphere .hs-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ossl-teal, #0F8FA1); }

/* Hero trust statement — single confident claim line under CTAs */
.hero-mesh .hs-trust {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.hero-mesh .hs-trust-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(15,143,161,0.6);
  animation: hdr-status-pulse 2s ease-in-out infinite;
}
.hero-mesh .hs-trust-text strong {
  color: var(--ossl-deep, #003C46);
  font-weight: 600;
}

/* Bigger hero CTAs */
.hero-mesh .btn-hero-cta {
  font-size: 16px;
  font-weight: 500;
  padding: 16px 26px;
  border-radius: 10px;
}

/* Scroll affordance */
.hero-mesh .hs-scroll {
  position: absolute;
  left: 32px; bottom: 32px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  text-decoration: none;
  transition: color 200ms ease;
  z-index: 5;
  opacity: 0;
  animation: scroll-fade-in 1s ease-out 1.4s forwards;
}
.hero-mesh .hs-scroll:hover { color: var(--accent); }
.hero-mesh .hs-scroll svg { animation: scroll-bob 2.4s ease-in-out infinite; }
@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@keyframes scroll-fade-in {
  to { opacity: 1; }
}

/* =============================================================
   PROOF BAR — thin animated logo strip
============================================================= */
.proof-bar {
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.proof-bar .trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.proof-bar .trust-strip .ts-item {
  padding: 0 24px;
  border-right: 1px solid var(--border);
}
.proof-bar .trust-strip .ts-item:first-child { padding-left: 0; }
.proof-bar .trust-strip .ts-item:last-child { border-right: none; padding-right: 0; }
.proof-bar .trust-strip .ts-l {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 6px;
  font-weight: 500;
}
.page[data-v="mainframe"] .proof-bar .trust-strip .ts-l { font-family: var(--plex-mono); }
.proof-bar .trust-strip .ts-v {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.proof-bar .pb-inner {
  display: flex; align-items: center; gap: 48px;
}
.proof-bar .pb-lbl {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  white-space: nowrap;
  padding-right: 32px;
  border-right: 1px solid var(--border);
}
.proof-bar .pb-track {
  display: flex;
  flex: 1;
}
.proof-bar .pb-row {
  display: flex; flex: 1;
  justify-content: space-around;
  align-items: center;
  gap: 32px;
}
.proof-bar .pb-row .lg {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text-dim);
  white-space: nowrap;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
}
.proof-bar .pb-lg-img {
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
}
.proof-bar .pb-lg-fallback { display: none; }

/* =============================================================
   BIG NUMERALS — Stripe-style massive stats
============================================================= */
.bignums {
  padding: 140px 0;
}
.page[data-v="obsidian"] .bignums,
.page[data-v="mainframe"] .bignums { background: var(--bg-soft); }
.bignums .head { margin-bottom: 80px; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.bignums .head .left { max-width: 720px; }
.bignums .head .right { max-width: 420px; }
.bignums .bn-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--text);
}
.bignums .bn-item {
  padding: 40px 0;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.bignums .bn-item:last-child { border-right: none; }
.bignums .bn-item .num {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(72px, 8.6vw, 124px);
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bignums .bn-item .num sup {
  font-size: 0.32em;
  vertical-align: super;
  font-weight: 500;
  color: var(--accent);
}
.bignums .bn-item .num .tx {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-dim);
}
.bignums .bn-item .lbl {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.bignums .bn-item .ctx {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-dim);
  max-width: 220px;
  line-height: 1.4;
}
.page[data-v="mainframe"] .bignums .bn-item .lbl { font-family: var(--plex-mono); }

/* =============================================================
   THE STACK — DARK signature section with glowing connections
============================================================= */
.stack-sec {
  padding: 160px 0;
  position: relative;
  background: linear-gradient(180deg, #003C46 0%, #062126 100%);
  color: #E8F4F6;
  overflow: hidden;
}
.stack-sec::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(1,232,215,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1,232,215,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.stack-sec .container-wide { position: relative; z-index: 2; }
.stack-sec .sec-label { color: #01E8D7 !important; }
.stack-sec .sec-title { color: #fff !important; }
.stack-sec .sec-lede { color: #9BB8BF !important; }
.stack-sec .sec-title em { color: #01E8D7 !important; }

.stack-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
  margin-top: 80px;
}
.stack-grid > div:first-child .sec-lede { color: #9BB8BF !important; }
.stack-grid > div:first-child span[style*="text-mute"],
.stack-grid > div:first-child span { color: #9BB8BF !important; }

.stack-diagram {
  display: flex; flex-direction: column;
  gap: 12px;
  position: relative;
}
.stack-diagram:hover .stack-layer { opacity: 0.4; transition: opacity 220ms ease, all 220ms ease; }
.stack-diagram:hover .stack-layer:hover { opacity: 1; }
.stack-diagram::before {
  content: '';
  position: absolute;
  left: 60px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(1,232,215,0.5) 20%, rgba(1,232,215,0.5) 80%, transparent 100%);
  pointer-events: none;
}
.stack-layer {
  position: relative;
  background: rgba(11,32,38,0.65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(1,232,215,0.18);
  border-radius: 12px;
  padding: 22px 28px 22px 96px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 220ms ease;
  z-index: 1;
}
.stack-layer::after {
  content: '';
  position: absolute;
  left: 54px; top: 50%;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #003C46;
  border: 2px solid #01E8D7;
  transform: translate(0, -50%);
  box-shadow: 0 0 14px rgba(1,232,215,0.5);
  transition: all 220ms ease;
}
.stack-layer:hover {
  border-color: #01E8D7;
  background: rgba(15,80,92,0.65);
  transform: translateX(6px);
}
.stack-layer:hover::after { background: #01E8D7; box-shadow: 0 0 24px rgba(1,232,215,0.8); }
.stack-layer .left { display: flex; align-items: center; gap: 16px; }
.stack-layer .ix {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(1,232,215,0.7);
  letter-spacing: 0.14em;
  min-width: 32px;
  font-weight: 500;
}
.page[data-v="mainframe"] .stack-layer .ix { font-family: var(--plex-mono); }
.stack-layer .name {
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.015em;
  color: #fff;
}
.stack-layer .desc {
  font-size: 13px;
  color: #9BB8BF;
  margin-top: 4px;
}
.stack-layer .badges { display: flex; gap: 6px; }
.stack-layer .b {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border: 1px solid rgba(1,232,215,0.22);
  border-radius: 999px;
  color: #9BB8BF;
  text-transform: uppercase;
}
.page[data-v="mainframe"] .stack-layer .b { font-family: var(--plex-mono); border-radius: 4px; }
.stack-layer .b.hi {
  color: #01E8D7;
  border-color: rgba(1,232,215,0.45);
  background: rgba(1,232,215,0.08);
}

/* =============================================================
   MAINTAINERS — team grid + locations
============================================================= */
.maint-sec { padding: 140px 0; }
.page[data-v="obsidian"] .maint-sec,
.page[data-v="mainframe"] .maint-sec { background: var(--bg-soft); border-bottom: 1px solid var(--border); }

.maint-grid {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.maint-card {
  background: var(--bg);
  padding: 32px;
  display: flex; flex-direction: column;
  transition: background 220ms ease;
}
.maint-card:hover { background: var(--bg-soft); }
.maint-card .ava {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--text));
  margin-bottom: 28px;
  position: relative;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 22px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.04em;
}
.maint-card .ava[data-tone="0"] { background: linear-gradient(135deg, #0F8FA1, #003C46); }
.maint-card .ava[data-tone="1"] { background: linear-gradient(135deg, #01E8D7, #0F8FA1); color: #003C46; }
.maint-card .ava[data-tone="2"] { background: linear-gradient(135deg, #003C46, #1C2F35); }
.maint-card .ava[data-tone="3"] { background: linear-gradient(135deg, #ABD1D9, #3E7C8B); color: #003C46; }
.maint-card .ava[data-tone="4"] { background: linear-gradient(135deg, #0F8FA1, #1C2F35); }
.maint-card .ava[data-tone="5"] { background: linear-gradient(135deg, #A1FDFF, #0F8FA1); color: #003C46; }
.maint-card .ava[data-tone="6"] { background: linear-gradient(135deg, #003C46, #0F8FA1); }
.maint-card .ava[data-tone="7"] { background: linear-gradient(135deg, #3E7C8B, #003C46); }
.page[data-v="mainframe"] .maint-card .ava { font-family: var(--plex-mono); }
.maint-card .name {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  margin-bottom: 6px;
}
.maint-card .role {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 20px;
  line-height: 1.45;
}
.maint-card .loc {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
  font-weight: 500;
}
.page[data-v="mainframe"] .maint-card .loc { font-family: var(--plex-mono); }
.maint-card .loc::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.maint-offices {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.maint-office {
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.page[data-v="mainframe"] .maint-office { border-radius: 8px; }
.maint-office .city {
  font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.maint-office .coord {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
}
.page[data-v="mainframe"] .maint-office .coord { font-family: var(--plex-mono); }
.maint-office .team {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-dim);
}

/* =============================================================
   RELEASE TIMELINE
============================================================= */
.timeline-sec { padding: 140px 0; }
.timeline-wrap {
  margin-top: 96px;
  position: relative;
  padding: 80px 0 24px;
}
.timeline-wrap::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 8%, var(--border) 92%, transparent 100%);
}
.timeline-track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.timeline-event {
  position: relative;
  padding-top: 24px;
}
.timeline-event::before {
  content: '';
  position: absolute;
  top: -44px; left: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  transition: all 220ms ease;
}
.timeline-event.lts::before { background: var(--accent); }
.timeline-event.current::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(15,143,161,0.18), 0 0 24px rgba(15,143,161,0.55);
  animation: tl-pulse 2.4s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(15,143,161,0.18), 0 0 24px rgba(15,143,161,0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(15,143,161,0.10), 0 0 32px rgba(15,143,161,0.75); }
}
.timeline-event .ver {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mute);
  font-weight: 500;
}
.page[data-v="mainframe"] .timeline-event .ver { font-family: var(--plex-mono); }
.timeline-event .lbl {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.timeline-event .lbl em { font-style: normal; color: var(--accent); }
.timeline-event .date {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-dim);
}
.timeline-event .ltsbar {
  margin-top: 16px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  position: relative;
}
.timeline-event .ltsbar .lts-lbl {
  position: absolute;
  top: 8px; left: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.page[data-v="mainframe"] .timeline-event .ltsbar .lts-lbl { font-family: var(--plex-mono); }
.timeline-event.future { opacity: 0.55; }
.timeline-event.future::before { background: var(--bg); border-color: var(--text-mute); border-style: solid; }
.timeline-event.future::after {
  content: '';
  position: absolute;
  top: -32px; left: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-mute);
}

/* =============================================================
   GET STARTED CARDS
============================================================= */
.get-started { padding: 140px 0; border-bottom: 1px solid var(--border); }
.gs-grid {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gs-card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  display: flex; flex-direction: column;
  transition: all 220ms ease;
  position: relative; overflow: hidden;
}
.page[data-v="editorial"] .gs-card { background: var(--bg-card); }
.page[data-v="mainframe"] .gs-card { border-radius: 8px; }
.gs-card:hover { border-color: var(--text); transform: translateY(-3px); }
.gs-card .ix {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.14em;
}
.page[data-v="mainframe"] .gs-card .ix { font-family: var(--plex-mono); }
.gs-card .ic {
  width: 44px; height: 44px;
  margin: 80px 0 20px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.page[data-v="mainframe"] .gs-card .ic { border-radius: 4px; }
.gs-card .ttl {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 10px;
}
.gs-card .dsc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 28px;
  flex: 1;
}
.gs-card .lnk {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.page[data-v="mainframe"] .gs-card .lnk { font-family: var(--plex-mono); }
.v-chip {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  display: none;
  pointer-events: none;
}
.page[data-v="mainframe"] .v-chip { font-family: var(--plex-mono); }

/* =============================================================
   MISSION — DARK FULL-BLEED SIGNATURE
============================================================= */
.mission-dark {
  position: relative;
  background: linear-gradient(180deg, #0F8FA1 0%, #003C46 100%);
  color: #fff;
  padding: 150px 0;
  overflow: hidden;
}
/* Mission aurora rail — thin moving gradient across the section mid-height */
.mission-dark::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(1,232,215,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1,232,215,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.mission-dark .md-aurora-rail {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 229, 255, 0.0) 10%,
    rgba(0, 229, 255, 0.7) 40%,
    rgba(155, 110, 247, 0.9) 50%,
    rgba(0, 229, 255, 0.7) 60%,
    rgba(0, 229, 255, 0.0) 90%,
    transparent 100%);
  background-size: 250% 100%;
  animation: aurora-flow 10s ease-in-out infinite;
  filter: blur(0.3px);
  z-index: 2;
  pointer-events: none;
}
.mission-dark .md-aurora-rail::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -8px; bottom: -8px;
  background: inherit;
  filter: blur(8px);
  opacity: 0.6;
}
.mission-dark::after {
  content: '';
  position: absolute;
  right: -180px; top: -180px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(1,232,215,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.mission-dark .md-glyph {
  position: absolute;
  left: -60px; bottom: -40px;
  width: 540px;
  color: rgba(1,232,215,0.12);
  pointer-events: none;
  z-index: 1;
}
.mission-dark .md-glyph svg { width: 100%; height: auto; }
.mission-dark .md-glyph-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
  transition: stroke-dashoffset 2.4s ease-out, fill-opacity 1s ease-out 1.8s;
}
.mission-dark .md-glyph.drawn .md-glyph-path {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}
.mission-dark .container-wide { position: relative; z-index: 5; }

/* Centered, cinematic composition */
.mission-dark .md-inner {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mission-dark .md-inner > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(.2,0,.2,1), transform 0.8s cubic-bezier(.2,0,.2,1);
}
.mission-dark.in-view .md-inner > * { opacity: 1; transform: none; }
.mission-dark.in-view .md-inner > *:nth-child(2) { transition-delay: 0.12s; }
.mission-dark.in-view .md-inner > *:nth-child(3) { transition-delay: 0.24s; }
.mission-dark.in-view .md-inner > *:nth-child(4) { transition-delay: 0.36s; }

/* Aurora loop mark — large, faint glowing brand watermark behind the quote */
.mission-dark .md-loopmark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  width: min(760px, 76%);
  height: auto;
  opacity: 0.12;
  filter: drop-shadow(0 0 40px rgba(0,229,255,0.4));
  pointer-events: none;
  z-index: 2;
}

.mission-dark .md-label {
  display: inline-flex;
  align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #01E8D7;
  margin-bottom: 36px;
}
.mission-dark .md-label::before {
  content: ''; width: 32px; height: 1px; background: #01E8D7;
}
.page[data-v="mainframe"] .mission-dark .md-label { font-family: var(--plex-mono); }

.mission-dark .md-quote {
  font-family: var(--sans);
  font-size: clamp(40px, 5.4vw, 80px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.mission-dark .md-quote em {
  font-style: normal;
  font-weight: 400;
  background: linear-gradient(105deg, #1AA9BC 0%, #00E5FF 35%, #A78BFF 70%, #1AA9BC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #01E8D7;
}
.page[data-v="editorial"] .mission-dark .md-quote em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.mission-dark .md-sub {
  margin: 28px 0 0;
  font-family: var(--sans);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  font-weight: 400;
  color: #B6D2D8;
  max-width: 600px;
}

.mission-dark .md-cite {
  margin-top: 48px;
  display: flex; justify-content: center; align-items: center;
  gap: 28px; flex-wrap: wrap;
}
.mission-dark .md-sig {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #9BB8BF;
}
.page[data-v="mainframe"] .mission-dark .md-sig { font-family: var(--plex-mono); }
.mission-dark .md-cta {
  background: #01E8D7;
  color: #003C46;
  font-weight: 500;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 8px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 180ms ease;
}
.mission-dark .md-cta:hover { background: #fff; transform: translateY(-2px); }

/* =============================================================
   Section title weight bump — make headlines hit harder
============================================================= */
.sec-title {
  font-weight: 600 !important;
  letter-spacing: -0.034em !important;
}

/* Solutions price block */
.sol-card .price-block {
  margin: 8px 0 20px;
}
.sol-card .price {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page[data-v="mainframe"] .sol-card .price { font-family: var(--plex); }
.sol-card .cycle {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
}
.page[data-v="mainframe"] .sol-card .cycle { font-family: var(--plex-mono); }

/* =============================================================
   HOME PILLARS — 3 cards matching live site (About/Team/Conference)
   With giant background numerals + featured middle card.
============================================================= */
.home-pillars {
  padding: 0 0 100px;
  margin-top: -20px;
  background: linear-gradient(180deg, #E9F2F5 0%, #F4F9FA 200px, #FBFCFC 360px);
}
/* Pull the section title up — beat the generic [data-v] section 120px top padding */
.page[data-v="obsidian"] .home-pillars,
.page[data-v="editorial"] .home-pillars,
.page[data-v="mainframe"] .home-pillars { padding-top: 48px; }
.hp-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.hp-card.hp-manifesto {
  background: linear-gradient(180deg, #062126 0%, #0A1418 100%);
  border: 1px solid rgba(0,229,255,0.18);
  color: #fff;
  padding: 56px 44px;
  position: relative;
  overflow: hidden;
  transform: translateY(-12px);
}
.hp-card.hp-manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,229,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,229,255,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.hp-card.hp-manifesto .hp-bignum { color: rgba(0,229,255,0.18); }
.hp-card.hp-manifesto .hp-n { color: rgba(0,229,255,0.7); }
.hp-card.hp-manifesto .hp-tag { color: #00E5FF; background: rgba(0,229,255,0.08); border-color: rgba(0,229,255,0.24); }
.hp-card.hp-manifesto .hp-t { color: #fff; font-size: 30px; }
.hp-card.hp-manifesto .hp-d { color: #9BB8BF; }
.hp-card.hp-manifesto .hp-lnk { color: #00E5FF; }
.hp-card.hp-manifesto:hover { transform: translateY(-16px); border-color: #00E5FF; }
.hp-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 48px 40px 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: all 220ms cubic-bezier(.2,0,.2,1);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.hp-card.hp-card-feat {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-soft) 100%);
  border-color: var(--border-hi);
  transform: translateY(-8px);
  box-shadow: 0 12px 36px rgba(0,60,70,0.09);
}
.hp-card.hp-card-feat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ossl-teal, #0F8FA1) 0%, #00E5FF 100%);
  border-radius: 16px 16px 0 0;
  z-index: 2;
}
.hp-card:hover {
  border-color: var(--accent);
  transform: translateY(-12px);
}
.hp-card.hp-card-feat:hover { transform: translateY(-16px); }
.hp-bignum {
  position: absolute;
  right: -10px; top: -30px;
  font-family: var(--sans);
  font-size: 220px;
  font-weight: 200;
  letter-spacing: -0.06em;
  color: rgba(15,143,161,0.06);
  line-height: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.hp-card.hp-card-feat .hp-bignum { color: rgba(15,143,161,0.10); }
.hp-card-head {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 56px;
}
.hp-card.hp-card-feat .hp-card-head { margin-bottom: 80px; }
.hp-n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.14em;
  font-weight: 500;
}
.hp-tag {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: var(--bg-soft);
}
.hp-t {
  position: relative;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.1;
  margin: 0 0 16px;
}
.hp-card.hp-card-feat .hp-t { font-size: 32px; }
.hp-d {
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 32px;
  flex: 1;
}
.hp-lnk {
  position: relative;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 180ms ease;
}
.hp-card:hover .hp-lnk { gap: 12px; }

/* =============================================================
   BLOG — Editorial asymmetric layout
============================================================= */
.blog-editorial {
  padding: 64px 0 120px;
}
/* Beat the generic `[data-v] section { padding:120px 0 }` rule so the blog's
   tighter top spacing actually applies (a motif divider already sits above it). */
.page[data-v="obsidian"] .blog-editorial,
.page[data-v="editorial"] .blog-editorial,
.page[data-v="mainframe"] .blog-editorial { padding: 56px 0 120px; }
.be-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: stretch;
}
.be-feat {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 24px 60px -34px rgba(6,64,73,0.42);
  transition: transform 240ms cubic-bezier(.2,0,.2,1), box-shadow 240ms ease, border-color 240ms ease;
}
.be-feat:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 36px 80px -32px rgba(6,64,73,0.5); }
.be-feat-thumb {
  aspect-ratio: 16 / 10;
  background: var(--bg-soft);
  overflow: hidden;
  position: relative;
}
.be-feat-thumb svg,
.be-feat-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.be-feat-pill {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(105deg,
    #0F8FA1 0%,
    #00E5FF 35%,
    #9B6EF7 65%,
    #0F8FA1 100%);
  background-size: 240% 100%;
  animation: aurora-flow 8s ease-in-out infinite;
  padding: 6px 12px;
  border-radius: 4px;
}
.be-feat-body { padding: 36px 40px 40px; }
.be-meta {
  display: flex; gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 20px;
}
.be-tag { color: var(--accent); }
.be-series {
  color: var(--ossl-deep, #003C46);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.be-item-tag .be-series, .be-item .be-series { font-weight: 600; }
.be-feat-title {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.1;
  margin: 0 0 18px;
}
.be-feat-desc {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 28px;
}
.be-read {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
}

.be-list {
  display: flex; flex-direction: column;
  gap: 16px;
}
.be-item {
  display: grid;
  text-decoration: none;
  color: inherit;
  grid-template-columns: 116px 1fr;
  gap: 18px;
  align-items: stretch;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px -28px rgba(6,64,73,0.4);
  transition: transform 220ms cubic-bezier(.2,0,.2,1), border-color 220ms ease, box-shadow 220ms ease;
}
.be-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #0F8FA1, #7C6CF0);
  opacity: 0;
  transition: opacity 220ms ease;
}
.be-item:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 22px 48px -28px rgba(6,64,73,0.5);
}
.be-item:hover::before { opacity: 1; }
.be-item-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  border-radius: 9px;
  overflow: hidden;
}
.be-item-thumb svg,
.be-item-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.be-item-body { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.be-item-meta {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.be-item-date-sm {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.be-item-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.be-item-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

/* =============================================================
   CLOSING BAND — Contributors + Newsletter side-by-side
============================================================= */
.closing-band {
  padding: 100px 0 120px;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.closing-band::before {
  content: '';
  position: absolute;
  right: -100px; top: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(15,143,161,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.closing-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/pattern-aurora-deep.png') 0% 100% / 520px auto no-repeat;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.cb-grid {
  display: grid;
  grid-template-columns: 1.2fr 1px 1fr;
  gap: 64px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}
.cb-divider {
  background: var(--border);
  width: 1px;
  align-self: stretch;
}
.cb-h {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--text);
  line-height: 1.2;
  margin: 16px 0 28px;
}
.cb-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 36px;
  align-items: center;
  margin-top: 24px;
}
.cb-lg {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text-dim);
  opacity: 0.65;
  display: inline-flex;
  align-items: center;
}
.cb-lg-fallback { color: var(--ossl-deep, #003C46); }
.cb-lg-img {
  height: 32px;
  width: auto;
  max-width: 130px;
  opacity: 1;
  transition: transform 200ms ease;
  object-fit: contain;
  display: block;
}
.cb-lg-img:hover { transform: translateY(-2px); }
.cb-form {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  padding: 5px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  margin-top: 8px;
}
.cb-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15,143,161,0.12);
}
.cb-input {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  padding: 12px 16px;
  color: var(--text);
  outline: none;
}
.cb-input::placeholder { color: var(--text-mute); }
.cb-btn {
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background 180ms ease;
  white-space: nowrap;
}
.cb-btn:hover { background: var(--text); }
.cb-meta {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
}
.cb-thanks {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 10px;
  margin-top: 8px;
}
.cb-thanks-mark {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.cb-thanks-t { font-size: 14px; color: var(--text); font-weight: 500; }

@media (max-width: 1100px) {
  .be-grid { grid-template-columns: 1fr; }
  .cb-grid { grid-template-columns: 1fr; gap: 48px; }
  .cb-divider { display: none; }
}

/* =============================================================
   NEWSLETTER — "Stay in the loop"
============================================================= */
.newsletter {
  padding: 84px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute;
  right: -120px; top: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(15,143,161,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.nl-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.nl-title {
  font-family: var(--sans);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
  margin: 0 0 24px;
  max-width: 580px;
}
.page[data-v="mainframe"] .nl-title { font-family: var(--plex); }
.nl-title em {
  font-style: normal;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 500;
}
.page[data-v="editorial"] .nl-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.nl-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  max-width: 460px;
}
.nl-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.nl-social-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.nl-social-links { display: flex; gap: 8px; }
.nl-social-links a {
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.nl-social-links a:hover {
  color: var(--accent);
  border-color: var(--border-hi);
  transform: translateY(-2px);
}
.nl-form {
  display: flex;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  padding: 6px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.page[data-v="mainframe"] .nl-form { border-radius: 4px; }
.nl-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15,143,161,0.15);
}
.nl-input {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  padding: 14px 18px;
  color: var(--text);
  outline: none;
}
.nl-input::placeholder { color: var(--text-mute); }
.nl-btn {
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 180ms ease;
  white-space: nowrap;
}
.page[data-v="mainframe"] .nl-btn { font-family: var(--plex-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; border-radius: 2px; }
.nl-btn:hover { background: var(--text); }
.nl-meta {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  display: flex; gap: 10px;
  flex-wrap: wrap;
}
.page[data-v="mainframe"] .nl-meta { font-family: var(--plex-mono); }
.nl-thanks {
  display: flex; gap: 16px; align-items: center;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 12px;
}
.page[data-v="mainframe"] .nl-thanks { border-radius: 4px; }
.nl-thanks-mark {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.nl-thanks-t { font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.nl-thanks-s { font-size: 14px; color: var(--text-dim); }

/* responsive */
/* =============================================================
   HAMBURGER + MOBILE DRAWER
============================================================= */
.hdr-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-left: 8px;
  background: none; border: none; cursor: pointer;
  padding: 10px;
  z-index: 1201;
}
.hdr-burger span {
  display: block;
  height: 2px; width: 100%;
  background: var(--text, #003C46);
  border-radius: 2px;
  transition: transform 280ms cubic-bezier(.2,.7,.3,1), opacity 200ms ease;
}
.hdr-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-burger.is-open span:nth-child(2) { opacity: 0; }
.hdr-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hdr-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 86vw);
  height: 100dvh;
  background: var(--bg, #fff);
  border-left: 1px solid var(--border);
  box-shadow: -30px 0 80px -30px rgba(6,64,73,0.4);
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(.2,.7,.3,1), visibility 360ms;
  visibility: hidden;
  z-index: 1200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.hdr-drawer.is-open { transform: translateX(0); visibility: visible; }
.hdr-drawer-nav { padding: 96px 28px 40px; }
.hdr-drawer-link {
  display: block;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text, #003C46);
  text-decoration: none;
  padding: 12px 0;
}
.hdr-drawer-group { margin-top: 26px; }
.hdr-drawer-grouplbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.hdr-drawer-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider, #E3ECEE);
}
.hdr-drawer-sublink:hover { color: var(--accent); }
.hdr-drawer-sublink svg { color: var(--text-mute); flex-shrink: 0; }
.hdr-drawer-cta {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hdr-drawer-portal,
.hdr-drawer-contact {
  display: block;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.hdr-drawer-portal { border: 1px solid var(--border); color: var(--text); }
.hdr-drawer-contact { background: var(--teal, #0F8FA1); color: #fff; }

/* =============================================================
   RESPONSIVE — tablet + mobile
============================================================= */
@media (max-width: 1000px) {
  .container-wide { padding-left: 28px; padding-right: 28px; }
  .hp-grid, .home-pillars .hp-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 860px) {
  .hdr-nav { display: none; }
  .hdr-cta { display: none; }
  .hdr-burger { display: flex; }

  /* Homepage hero — stack, drop the right-side constellation */
  .hero-mesh .hs-title { font-size: clamp(40px, 9vw, 60px) !important; }
  .hero-mesh .mesh-host { opacity: 0.5; }
  .hero-mesh .hs-text { max-width: 100% !important; }

  /* Generic grids → single column */
  .hero-stats, .sol-grid, .blog-grid, .pillars, .logos-row,
  .reports-grid, .person-grid, .comm-member-grid, .comm-cat-grid,
  .be-grid, .cb-grid, .eco-flow, .gov-flow, .plans-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-grid { grid-template-columns: 1fr !important; }
  section { padding-top: 72px !important; padding-bottom: 72px !important; }

  /* Mission band — comfortable on phones */
  .mission-dark .md-quote { font-size: clamp(30px, 8vw, 44px) !important; }

  /* Footer columns wrap */
  .ftr-grid { grid-template-columns: 1fr 1fr !important; gap: 36px 24px !important; }
}

@media (max-width: 540px) {
  .container-wide { padding-left: 20px; padding-right: 20px; }
  .person-grid, .ftr-grid, .eco-family-grid { grid-template-columns: 1fr !important; }
  .reports-grid { grid-template-columns: 1fr !important; }
  .report-year { font-size: 72px !important; }
  .pb-row { flex-wrap: wrap !important; justify-content: center !important; gap: 20px 28px !important; }
  .about-facts { grid-template-columns: 1fr !important; gap: 18px !important; }
  .md-cite { flex-direction: column !important; gap: 18px !important; }
}


/* === MISSION BACKGROUND DOTS — subtle world-map pattern === */
.mission-dark .md-globe-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(0,229,255,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 18% 45%, rgba(0,229,255,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 22% 25%, rgba(0,229,255,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 28% 50%, rgba(155,110,247,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 35% 32%, rgba(0,229,255,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 42% 48%, rgba(0,229,255,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 48% 28%, rgba(155,110,247,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 54% 42%, rgba(0,229,255,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 60% 35%, rgba(0,229,255,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 65% 52%, rgba(0,229,255,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 38%, rgba(155,110,247,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 78% 30%, rgba(0,229,255,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 82% 48%, rgba(0,229,255,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 88% 38%, rgba(0,229,255,0.4) 1px, transparent 1.5px);
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 30%, transparent 80%);
}

/* === PAGE TRANSITION WIPE === */
.aurora-wipe {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  background: linear-gradient(105deg,
    rgba(15,143,161,0.92) 0%,
    rgba(0,229,255,0.92) 35%,
    rgba(155,110,247,0.92) 65%,
    rgba(15,143,161,0.92) 100%);
  background-size: 200% 100%;
  transform: translateX(-100%);
  opacity: 0;
  transition: opacity 80ms ease;
}
.aurora-wipe.active {
  opacity: 1;
  animation: aurora-wipe-anim 700ms cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes aurora-wipe-anim {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}


/* === DISPLAY FONT — Neue Machina applied to headline/display surfaces === */
.sec-title,
.ps-h, .ps-year, .ps-axis-marker-n,
.mission-dark .md-quote,
.gs-h,
.hp-t, .hp-card-feat .hp-t,
.page-hero-title,
.bp-feat-title, .bp-card-title,
.plan-tier, .plan-price,
.fips-cert-num, .fips-badge-num,
.committee-name, .committees-cta-h,
.cb-h, .not-sure-h,
.tr-num, .ssp-num,
.partner-name, .event-title, .report-year,
.lead-subgroup, .person-name,
.be-feat-title, .nl-title {
  font-family: var(--display) !important;
}


/* === MISSION PHOTO BACKGROUND === */
.mission-dark .md-photo-bg {
  position: absolute;
  inset: 0;
  background: url('assets/office-beam.jpg') center / cover no-repeat;
  opacity: 0.20;
  filter: saturate(1.1) hue-rotate(-15deg) brightness(0.85);
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.mission-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0,60,70,0.35) 0%, rgba(0,60,70,0.6) 70%, rgba(0,48,56,0.78) 100%);
  pointer-events: none;
  z-index: 1;
}
.mission-dark .container-wide { z-index: 5; }
.mission-dark .md-globe-dots { z-index: 2; }
.mission-dark .md-aurora-rail { z-index: 2; }
.mission-dark .md-loopmark { z-index: 2; }