/* ============================================================
   PROOF brand v3 — site styles
   Tokens, type, and components adapted from the brand system
   in switchboard/brand/proof.html + brand/switchboard.html.
   Scoped to the new-brand pages (home + /switchboard).
   ============================================================ */

:root {
  /* Primary palette */
  --beacon:   #FF6A2C;
  --beacon-2: #E5571B;
  --ink:      #0E1218;
  --ink-soft: #1A2030;
  --frost:    #F7F8FA;

  /* Supporting palette */
  --hull: #1A2538;
  --tide: #0E7CFF;
  --sun:  #FFC93D;
  --acurast: #5B9DF9; /* Acurast brand blue — co-brand accents only */

  /* Neutrals */
  --smoke: #E7EAEE;
  --stone: #9098A6;
  --steel: #3D4654;

  /* Tints */
  --beacon-tint: rgba(255, 106, 44, 0.12);
  --tide-tint:   rgba(14, 124, 255, 0.10);
  --sun-tint:    rgba(255, 201, 61, 0.16);
  --hull-tint:   rgba(26, 37, 56, 0.06);

  --maxw: 1180px;
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--frost);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* guard against any wide decorative element */
}

.display { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -0.015em; }
.mono    { font-family: "JetBrains Mono", ui-monospace, monospace; }

a { color: inherit; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Eyebrow / section scaffolding ---------- */

.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beacon);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--beacon);
  flex-shrink: 0;
}

.section-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: "";
  width: 32px; height: 2px;
  background: var(--beacon);
}

.section-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}
.section-title em { font-style: normal; color: var(--beacon); }

.section-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--steel);
  max-width: 680px;
  margin: 0 0 40px;
}

.section { padding: 96px 0; }
.section--tight { padding: 72px 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--beacon);
  color: var(--frost);
  border: 1.5px solid var(--beacon);
  padding: 14px 24px;
  border-radius: 999px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--beacon-2); border-color: var(--beacon-2); transform: translateY(-1px); }
.btn .arrow { transition: transform 140ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--frost); border-color: var(--ink); }

.btn-dark { background: var(--ink); color: var(--beacon); border-color: var(--ink); }
.btn-dark:hover { background: #000; border-color: #000; transform: translateY(-1px); }

/* On dark surfaces */
.on-dark .btn-ghost { color: var(--frost); border-color: rgba(247,248,250,0.5); }
.on-dark .btn-ghost:hover { background: var(--frost); color: var(--ink); border-color: var(--frost); }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--smoke);
  background: var(--frost);
  color: var(--ink);
  font-weight: 500;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--beacon); }
.pill.pill-tide .dot { background: var(--tide); }
.pill.pill-sun  .dot { background: var(--sun); }
.pill.pill-live { background: rgba(28,160,90,0.12); border-color: rgba(28,160,90,0.30); color: #15803d; }
.pill.pill-live .dot { background: #15803d; }

/* "Public alpha" status flag + disclaimers */
.pill.pill-alpha { background: var(--sun-tint); border-color: rgba(255, 201, 61, 0.45); color: var(--sun); }
.pill.pill-alpha .dot { background: var(--sun); }
/* Pinned overlay so the centered hero keeps its height and fits the viewport */
.home-hero .alpha-flag {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 3;
}
.sb-hero .sb-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(247, 248, 250, 0.62);
}

/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 248, 250, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--smoke);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.brand .proof-mark { width: 26px; height: 26px; display: block; }
.brand .proof-word {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}
.brand .proof-word .dot { color: var(--beacon); }

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  transition: color 120ms ease;
}
.nav a:hover { color: var(--beacon); }
.nav .nav-x { display: inline-flex; color: var(--steel); }
.nav .nav-x:hover { color: var(--ink); }
.nav .nav-x svg { width: 19px; height: 19px; }

/* ============================================================
   HOME — hero
   ============================================================ */

.home-hero {
  background: var(--hull);
  color: var(--frost);
  position: relative;
  overflow: hidden;
  text-align: center;
  min-height: 100vh; /* full-screen minimal hero (homepage has no top bar) */
  display: flex;
  align-items: center;
}
.home-hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-hero .eyebrow { color: var(--beacon); }

/* soft radial glow behind the mark (kept subtle / physical, not neon) */
.home-hero::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  height: 760px;
  max-width: 120vw;
  background: radial-gradient(circle, rgba(255,106,44,0.16) 0%, rgba(255,106,44,0) 62%);
  z-index: 0;
  pointer-events: none;
}

.home-hero .wordmark {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 8vw, 76px); /* single word can't wrap — scale to fit */
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 8px 0 0;
  max-width: 100%;
}
.home-hero .wordmark .dot { color: var(--beacon); }

.home-hero .tagline {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--frost);
  margin: 12px 0 0;
}
.home-hero .pitch {
  font-size: 18px;
  line-height: 1.5;
  color: rgba(247, 248, 250, 0.66);
  max-width: 560px;
  margin: 10px 0 0;
}
.home-hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

/* Single-screen homepage: hero fills, footer pinned to the bottom — no scroll */
@media (min-width: 881px) {
  body.page-home { display: flex; flex-direction: column; min-height: 100vh; }
  body.page-home .home-hero { flex: 1 1 auto; min-height: 0; }
  body.page-home .site-footer { flex: 0 0 auto; }
}
body.page-home .site-footer { padding-top: 30px; padding-bottom: 30px; }

/* ---------- The animated cable mark ---------- */

.cable-mark {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 8px auto 0;
  overflow: visible;
}
.cable-mark .cable {
  stroke: var(--frost);
  stroke-width: 14;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: cable-draw 1100ms cubic-bezier(0.65, 0, 0.35, 1) 200ms forwards;
}
.cable-mark .cable-dot {
  fill: var(--beacon);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: dot-pop 620ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.cable-mark .cable-dot.left  { animation-delay: 980ms; }
.cable-mark .cable-dot.right { animation-delay: 1180ms; }

/* gentle, slow "breathing" once connected — physical, not a current */
.cable-mark .cable-dot.left  { animation: dot-pop 620ms cubic-bezier(0.34,1.56,0.64,1) 980ms forwards,  dot-breathe 4.5s ease-in-out 1900ms infinite; }
.cable-mark .cable-dot.right { animation: dot-pop 620ms cubic-bezier(0.34,1.56,0.64,1) 1180ms forwards, dot-breathe 4.5s ease-in-out 2100ms infinite; }

/* A Beacon signal that rides the cable from one endpoint to the other,
   on a loop — a switchboard routing a connection. Overlaid copy of the
   cable path with a single round dash that travels via dashoffset. */
.cable-mark .cable-pulse {
  stroke: var(--beacon);
  stroke-width: 15;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 4 96;
  opacity: 0;
  animation: cable-signal 2.8s ease-in-out 1700ms infinite;
}
@keyframes cable-signal {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  10%  { opacity: 1; }
  48%  { stroke-dashoffset: -100; opacity: 1; }
  58%  { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes cable-draw { to { stroke-dashoffset: 0; } }
@keyframes dot-pop    { to { transform: scale(1); } }
@keyframes dot-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .cable-mark .cable { animation: none; stroke-dashoffset: 0; }
  .cable-mark .cable-dot { animation: none; transform: scale(1); }
  .cable-mark .cable-pulse { display: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   SWITCHBOARD PAGE
   ============================================================ */

.sb-hero {
  background: var(--hull);
  color: var(--frost);
  position: relative;
  overflow: hidden;
}
.sb-hero .wrap { position: relative; z-index: 2; padding-top: 50px; padding-bottom: 56px; }
/* decorative cable bleeding off the top-right (from brand/switchboard.html) */
.sb-hero .hero-cable {
  position: absolute;
  top: -120px; right: -140px;
  width: 700px; height: 460px;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}
.sb-hero .eyebrow { color: var(--beacon); }

.sb-hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 7.5vw, 66px); /* single word can't wrap — scale to fit */
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 100%;
}
.sb-hero h1 .dot { color: var(--beacon); }
.sb-hero .sb-tagline {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--frost);
  margin: 16px 0 0;
}
.sb-hero .lede {
  font-size: 19px;
  line-height: 1.45;
  color: rgba(247, 248, 250, 0.74);
  max-width: 600px;
  margin: 10px 0 0;
}
.sb-hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---------- Section rhythm ---------- */
.section--alt { background: #fff; }

/* ---------- Problem: two-tier stack ---------- */
.tier-stack { margin-top: 8px; }
.tier { border-radius: 16px; padding: 26px 30px; }
.tier .tier-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tier .tier-name {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 26px; letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.05;
}
.tier .tier-desc { margin: 0; font-size: 14px; }
.tier.ingress { border: 2px solid var(--beacon); background: var(--beacon-tint); }
.tier.ingress .tier-label { color: var(--beacon-2); }
.tier.ingress .tier-name { color: var(--ink); }
.tier.ingress .tier-desc { color: var(--steel); }
.tier.ingress .tier-gap {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em;
  background: var(--beacon); color: var(--frost); padding: 3px 9px; border-radius: 999px;
}
.tier-join {
  text-align: center; color: var(--beacon); font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 0;
}
.tier.compute { background: var(--hull); color: var(--frost); }
.tier.compute .tier-label { color: rgba(247,248,250,0.6); }
.tier.compute .tier-name { color: var(--frost); }
.tier.compute .tier-desc { color: rgba(247,248,250,0.85); }

/* ---------- Innovation: six-gap cards ---------- */
.gap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gap-card {
  border: 1px solid var(--smoke); border-top: 3px solid var(--beacon);
  background: var(--frost); border-radius: 16px; padding: 22px 24px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 5px;
  align-content: start;
}
.gap-card .gap-top { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.gap-card .gap-n {
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em;
  color: var(--beacon); font-weight: 700;
}
.gap-card h3 {
  grid-column: 2; grid-row: 2; align-self: start;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 19px;
  letter-spacing: -0.015em; margin: 0; line-height: 1.15;
}
.gap-card .gap-line { grid-column: 2; grid-row: 3; align-self: start; margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--steel); }
.gap-card .gap-line strong { color: var(--ink); font-weight: 600; }
.gap-card .mono { font-family: "JetBrains Mono", monospace; font-size: 0.9em; color: var(--beacon-2); }
.gap-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px; font-weight: 700; white-space: nowrap;
}
.gap-status .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.gap-status.live { background: rgba(28,160,90,0.13); color: #15803d; }
.gap-status.build { background: var(--sun-tint); color: #8a6a00; }

/* ---------- How it works — flow ---------- */

.flow-wrap { background: var(--ink); color: var(--frost); border-radius: 22px; padding: 48px 44px; }
.flow-wrap .flow-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beacon);
  margin: 0 0 28px;
}
.flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}
.flow-node {
  flex: 1 1 0;
  min-width: 140px;
  background: rgba(247, 248, 250, 0.04);
  border: 1px solid rgba(247, 248, 250, 0.12);
  border-radius: 14px;
  padding: 20px 18px;
}
.flow-node .fn-step {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--stone);
  margin: 0 0 10px;
}
.flow-node .fn-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.flow-node .fn-desc { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(247,248,250,0.6); }
.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beacon);
  font-size: 20px;
  padding: 0 10px;
  flex: 0 0 auto;
}
.flow-foot {
  margin: 26px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247, 248, 250, 0.62);
}
.flow-foot strong { color: var(--frost); font-weight: 600; }

/* ---------- How-it-works diagram ---------- */
.sw-diagram { width: 100%; height: auto; display: block; margin: 2px 0 10px; }
.sw-diagram .flow-pulse {
  stroke: #FF6A2C; stroke-width: 20; stroke-linecap: round; fill: none;
  stroke-dasharray: 4 96; opacity: 0;
  animation: flow-run 3s ease-in-out 500ms infinite;
}
@keyframes flow-run {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  8%   { opacity: 1; }
  52%  { stroke-dashoffset: -100; opacity: 1; }
  62%  { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sw-diagram .flow-pulse { display: none; } }

/* ---------- "Proven, then paid" money diagram ---------- */
/* Reuses .flow-wrap / .sw-diagram; only the rail/gate animation is new.
   The money spark travels only on the RELEASED side (gate → PAY): money
   flows out only after the validator signature opens the gate. */
.money-pulse {
  fill: none; stroke: #FF6A2C; stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 6 300; opacity: 0;
  animation: money-run 3.4s ease-in-out 0.3s infinite;
}
@keyframes money-run {
  0%   { stroke-dashoffset: 6;    opacity: 0; }
  10%  { opacity: 1; }
  70%  { stroke-dashoffset: -280; opacity: 1; }
  80%  { stroke-dashoffset: -280; opacity: 0; }
  100% { opacity: 0; }
}
/* the cobalt validator signature drops onto the gate just before money crosses */
.money-diagram .sig-drop { transform-box: view-box; transform-origin: 685px 190px; animation: sig-run 3.4s ease-in-out 0.3s infinite; }
@keyframes sig-run {
  0%, 26% { opacity: 0; transform: translateY(-8px); }
  36%     { opacity: 1; transform: translateY(0); }
  74%     { opacity: 1; transform: translateY(0); }
  86%     { opacity: 0; transform: translateY(0); }
  100%    { opacity: 0; }
}
/* the gate glow blooms as it opens */
.money-diagram .gate-open { animation: gate-open 3.4s ease-in-out 0.3s infinite; }
@keyframes gate-open {
  0%, 30% { opacity: 0.14; } 44% { opacity: 0.9; } 74% { opacity: 0.9; } 88% { opacity: 0.14; } 100% { opacity: 0.14; }
}
/* reduced motion: rest in the proven / gate-open state — signature delivered, money side lit */
@media (prefers-reduced-motion: reduce) {
  .money-pulse { display: none; }
  .money-diagram .sig-drop { animation: none; opacity: 1; transform: none; }
  .money-diagram .gate-open { animation: none; opacity: 0.5; }
}

/* ---------- Card glyph plate (the 9-icon system) ---------- */
.sb-ico {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: var(--beacon-tint);       /* beacon wash for pop */
  border: 1px solid rgba(255, 106, 44, 0.22);
  color: var(--steel);                 /* drives currentColor on the monoline */
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.sb-ico .sb-glyph { width: 40px; height: 40px; display: block; shape-rendering: geometricPrecision; }
.gap-card .sb-ico { grid-column: 1; grid-row: 2 / span 2; align-self: start; margin: 0; }
.concept-card .sb-ico { grid-column: 1; grid-row: 2 / span 2; align-self: start; margin: 0; }
.gap-card:hover .sb-ico,
.concept-card:hover .sb-ico { border-color: rgba(255,106,44,0.5); color: var(--ink); background: rgba(255,106,44,0.18); }

/* ---------- Concept cards ---------- */

.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.concept-card {
  border: 1px solid var(--smoke);
  background: #fff;
  border-radius: 16px;
  padding: 24px 26px;
  transition: border-color 140ms ease, transform 140ms ease;
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 5px;
  align-content: start;
}
.concept-card:hover { border-color: rgba(255,106,44,0.4); transform: translateY(-2px); }
.concept-card .cc-key {
  grid-column: 1 / -1; grid-row: 1; margin: 0 0 9px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beacon);
}
.concept-card h3 {
  grid-column: 2; grid-row: 2; align-self: start;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0;
}
.concept-card p { grid-column: 2; grid-row: 3; align-self: start; margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--steel); }

/* ---------- Transport: two-approach panels ---------- */
.tport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tport-panel {
  border: 1px solid var(--smoke); background: #fff; border-radius: 16px;
  padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 16px;
}
.tport-svg-wrap { background: var(--ink); border-radius: 12px; padding: 16px 18px; }
.tport-svg { width: 100%; height: auto; display: block; }
.tport-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.tport-name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.015em; margin: 0; }
.tport-tag {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--beacon-2); background: var(--beacon-tint); border: 1px solid rgba(255, 106, 44, 0.22);
  padding: 4px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap;
}
.tport-panel > p { margin: 0; padding: 0 4px; font-size: 14.5px; line-height: 1.55; color: var(--steel); }
.tport-panel > p strong { color: var(--ink); font-weight: 600; }

/* ---------- Terminal / quickstart ---------- */

.quickstart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.terminal {
  background: var(--ink);
  color: var(--frost);
  border-radius: 16px;
  padding: 24px 26px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px;
  line-height: 1.85;
  overflow-x: auto;
}
.terminal .prompt { color: var(--beacon); }
.terminal .cmd { color: var(--frost); }
.terminal .comment { color: var(--stone); }
.terminal .out { color: rgba(247, 248, 250, 0.7); }
.terminal .ok { color: var(--beacon); }

.endpoint-card {
  border: 1px solid var(--smoke);
  background: #fff;
  border-radius: 16px;
  padding: 26px;
}
.endpoint-card .ec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.endpoint-card .ec-host {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.endpoint-card .ec-rows { border-top: 1px solid var(--smoke); }
.endpoint-card .ec-row {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px dashed var(--smoke);
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
}
.endpoint-card .ec-row:last-child { border-bottom: none; }
.endpoint-card .ec-row .k { color: var(--stone); letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; padding-top: 2px; }
.endpoint-card .ec-row .v { color: var(--ink); font-weight: 500; }
.endpoint-card .ec-row .v.good { color: var(--beacon-2); }

/* ---------- CTA band ---------- */

.cta-band { background: var(--beacon); color: var(--frost); }
.cta-band .wrap { padding: 72px 40px; text-align: center; }
.cta-band h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.cta-band p { font-size: 18px; color: rgba(247,248,250,0.9); margin: 0 0 30px; }
.cta-band .btn-frost { background: var(--frost); color: var(--ink); border-color: var(--frost); }
.cta-band .btn-frost:hover { background: #fff; transform: translateY(-1px); }

/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer {
  background: var(--ink);
  color: rgba(247, 248, 250, 0.7);
  padding: 56px 0 48px;
}
.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand .fb-lockup { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand .fb-lockup svg { width: 22px; height: 22px; }
.footer-brand .fb-word {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.04em;
  color: var(--frost);
}
.footer-brand .fb-word .dot { color: var(--beacon); }
.footer-brand .fb-tag { margin: 0; font-size: 14px; color: var(--stone); }

.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.footer-social { display: flex; gap: 14px; }
.footer-social a { color: var(--stone); display: inline-flex; transition: color 120ms ease; }
.footer-social a:hover { color: var(--frost); }
.footer-social svg { width: 22px; height: 22px; }
.footer-legal { margin: 0; font-size: 12.5px; color: var(--stone); }
.footer-legal a { color: var(--stone); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--frost); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 880px) {
  .wrap { padding: 0 22px; }
  .section { padding: 64px 0; }

  .nav { gap: 18px; }
  .nav a:not(.nav-x) { display: none; }

  .home-hero { min-height: 0; display: block; }
  .home-hero .alpha-flag { position: static; padding-top: 22px; }
  .home-hero .tagline { font-size: 19px; }
  .home-hero .pitch { font-size: 16px; }

  .section-title { font-size: 36px; }
  .sb-hero .lede { font-size: 19px; }

  .concept-grid { grid-template-columns: 1fr; }
  .gap-grid { grid-template-columns: 1fr; }
  .tport-grid { grid-template-columns: 1fr; }
  .quickstart-grid { grid-template-columns: 1fr; }
  .tier .tier-name { font-size: 22px; }
  .flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); padding: 8px 0; }
  .flow-wrap { padding: 32px 24px; }
  .cta-band h2 { font-size: 32px; }
  .footer-inner { flex-direction: column; }
  .footer-right { align-items: flex-start; }
}