/* ============================================================================
   boatramp.dev — site styles (design direction 2a "Depth + Organized").
   Every value references a token from tokens.css. Content is fully readable
   with zero JS; the Dioxus island only *enhances* the terminal + copy/tabs.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg-desk);
  /* the marine depth gradient: surface at the top, abyss at the base */
  background-image: linear-gradient(180deg,
    var(--depth-800) 0%, var(--depth-900) 32%, var(--depth-850) 72%, #020a11 100%);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--launch); color: var(--depth-900); }

h1, h2 { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

.wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }

/* Accessibility: skip link + focus visibility ------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--launch); color: var(--depth-900); font-weight: 700;
  padding: 10px 16px; border-radius: 0 0 var(--radius-btn) 0;
}
.skip:focus { left: 0; color: var(--depth-900); }
:focus-visible { outline: 2px solid var(--seafoam); outline-offset: 2px; border-radius: 3px; }

.mono { font-family: var(--font-mono); }
.accent { color: var(--launch); }

/* ---- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--hairline);
  background: rgba(5, 20, 31, 0.72);
  backdrop-filter: blur(8px);
}
.nav__brand { display: inline-flex; align-items: center; gap: 11px; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text-strong); letter-spacing: -0.02em; }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 14.5px; }
/* Exclude the solid Star pill: the generic link color (light foam) would
   otherwise win on specificity and render its label near-invisible on white. */
.nav__links a:not(.nav__star) { color: var(--depth-100); }
.nav__links a:not(.nav__star):hover { color: var(--text-strong); }
.nav__ext { font-size: 11px; color: var(--text-muted); }
.nav__star {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--text-strong); color: var(--depth-900);
  padding: 8px 15px; border-radius: var(--radius-chip); font-weight: 600; font-size: 13.5px;
}
.nav__star:hover { color: var(--depth-900); filter: brightness(0.95); }
.nav__star-count { font-family: var(--font-mono); font-size: 12px; color: var(--depth-500); background: rgba(5, 20, 31, 0.07); padding: 1px 8px; border-radius: var(--radius-pill); }
.nav__star-count[hidden] { display: none; }
/* Depth signal on the Features nav link — one item that advertises scale. */
.nav__count { font-family: var(--font-mono); font-size: 11px; color: var(--seafoam); background: rgba(53, 224, 196, 0.12); padding: 0 6px; border-radius: var(--radius-pill); margin-left: 5px; vertical-align: middle; }

/* ---- Hero ----------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 78px 0 34px; }
.hero__inner { position: relative; z-index: 2; max-width: 760px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.06em;
  color: var(--launch-2);
  border: 1px solid rgba(255, 210, 63, 0.32); background: rgba(255, 210, 63, 0.06);
  padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 26px;
}
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--launch-2); animation: br-blink 1.6s steps(1) infinite; }

.hero h1 { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: var(--tracking-tight); margin: 0 0 22px; text-wrap: balance; }
.hero__sub { font-size: var(--fs-lead); color: var(--text); max-width: 560px; margin: 0 0 34px; }

.actions { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15.5px; padding: 14px 22px; border-radius: var(--radius-btn); transition: transform var(--dur-fast) var(--ease-launch), box-shadow var(--dur-fast) var(--ease-launch); }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--launch); color: var(--depth-900); font-weight: 700; padding-inline: 24px; box-shadow: var(--shadow-cta); }
.btn--primary:hover { color: var(--depth-900); }
.btn--ghost { color: var(--text-strong); border: 1px solid rgba(207, 230, 239, 0.2); }
.btn--ghost:hover { color: var(--text-strong); border-color: rgba(207, 230, 239, 0.4); }
.btn__ext { color: var(--text-muted); font-size: 12px; }

/* install one-liner */
.cli {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 14px; color: var(--depth-100);
  background: var(--surface-inset); border: 1px solid rgba(53, 224, 196, 0.2);
  border-radius: var(--radius-btn); padding: 11px 12px 11px 16px; max-width: 100%;
}
.cli__prompt { color: var(--seafoam); }
.cli__cmd { overflow-x: auto; white-space: nowrap; }
.copy {
  cursor: pointer; font-family: var(--font-mono); font-size: 12px;
  color: var(--depth-900); background: var(--seafoam); border: none;
  padding: 6px 11px; border-radius: 6px; font-weight: 700; flex: 0 0 auto;
}
.copy:hover { filter: brightness(1.06); }

/* dogfood badge */
.dogfood { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.dogfood__badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(53, 224, 196, 0.25); border-radius: var(--radius-pill); padding: 5px 12px; color: var(--seafoam); }
.dogfood__id { color: var(--depth-100); }
.anchor-bob { display: inline-block; animation: br-bob 3s ease-in-out infinite; }

/* hero motion: falling bytes + waterline */
.bytes { position: absolute; top: -10px; right: 120px; width: 400px; height: 360px; pointer-events: none; z-index: 1; }
.byte { position: absolute; top: 0; border-radius: 2px; animation: br-fall linear infinite; }
.waterline { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; overflow: hidden; pointer-events: none; z-index: 1; }
.wave { position: absolute; bottom: -2px; left: 0; width: 1600px; height: 70px; }
.wave--1 { fill: rgba(32, 136, 193, 0.16); animation: br-wave 9s linear infinite; }
.wave--2 { fill: rgba(53, 224, 196, 0.10); animation: br-wave2 6.5s linear infinite; }

/* ---- Three truths --------------------------------------------------------- */
.truths { position: relative; z-index: 2; border-top: 1px solid rgba(53, 224, 196, 0.16); background: rgba(2, 10, 17, 0.5); }
.truths__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.truth { padding: 26px var(--gutter); }
.truth + .truth { border-left: 1px solid rgba(207, 230, 239, 0.07); }
.truth__idx { font-family: var(--font-mono); font-size: 12px; margin-bottom: 8px; }
.truth:nth-child(1) .truth__idx { color: var(--launch); }
.truth:nth-child(2) .truth__idx { color: var(--launch-2); }
.truth:nth-child(3) .truth__idx { color: var(--seafoam); }
.truth__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-strong); margin-bottom: 4px; }
.truth__desc { font-size: 13.5px; color: var(--text-muted); }

/* ---- Modules -------------------------------------------------------------- */
.module { position: relative; z-index: 2; padding: 64px 0 8px; }
.module__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.eyebrow-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-eyebrow); color: var(--seafoam); }
.module h2 { font-size: var(--fs-h2-sm); letter-spacing: var(--tracking-h2); margin: 0; }
.module__note { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--seafoam); }

/* ---- Terminal ------------------------------------------------------------- */
.terminal { border: 1px solid var(--hairline-strong); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-inset); box-shadow: var(--shadow-panel); }
.terminal__bar { display: flex; align-items: center; gap: 8px; padding: 12px 15px; background: var(--depth-700); border-bottom: 1px solid var(--hairline); }
.dots { display: flex; gap: 8px; }
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot--1 { background: var(--launch); } .dot--2 { background: var(--launch-2); } .dot--3 { background: var(--seafoam); }
.tabs { display: flex; gap: 4px; margin-left: 16px; }
.tab { cursor: pointer; font-family: var(--font-mono); font-size: 11.5px; padding: 4px 11px; border-radius: 6px; border: none; background: transparent; color: var(--text-muted); }
.tab[aria-selected="true"] { background: rgba(53, 224, 196, 0.16); color: var(--seafoam); }
.terminal__copy { margin-left: auto; cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); background: transparent; border: 1px solid rgba(207, 230, 239, 0.16); padding: 4px 10px; border-radius: 6px; }
.terminal__grid { display: grid; grid-template-columns: 1.35fr 1fr; }
.terminal__body { padding: 22px 20px; font-family: var(--font-mono); font-size: var(--fs-cap); line-height: 1.95; min-height: 200px; border-right: 1px solid rgba(207, 230, 239, 0.1); }
.term-line { color: var(--text-strong); white-space: pre-wrap; }
.term-prompt { color: var(--seafoam); }
.term-caret { color: var(--seafoam); animation: br-blink 1s steps(1) infinite; }
.flip-badge.is-flipping { transform-origin: left center; animation: br-flip var(--dur-flip) var(--ease-launch); }
@keyframes br-flip { from { transform: rotateX(88deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
.term-out { color: var(--text-muted); }
.flip-badge { margin-top: 10px; display: inline-flex; align-items: center; gap: 9px; color: var(--depth-900); background: var(--launch); padding: 7px 14px; border-radius: var(--radius-chip); font-weight: 700; font-size: 13px; }
.terminal__notes { padding: 22px 20px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); line-height: 1.95; }
.terminal__notes-h { color: var(--seafoam); margin-bottom: 10px; }
.note-row { display: flex; gap: 8px; }
.note-row > span { color: var(--launch); }
.note-roll { margin-top: 12px; color: var(--launch-2); }

/* ---- Capabilities spec sheet + payoff ------------------------------------- */
.spec-wrap { border: 1px solid rgba(207, 230, 239, 0.1); border-radius: var(--radius-card); overflow: hidden; background: rgba(7, 26, 38, 0.4); }
.spec { display: grid; grid-template-columns: 44px 1.05fr 1.5fr 92px; }
.spec__cell { padding: 20px 18px; border-bottom: 1px solid rgba(53, 224, 196, 0.12); display: flex; align-items: center; }
.spec__row:last-child .spec__cell { border-bottom: none; }
.spec__idx { justify-content: center; padding-inline: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.spec__name { gap: 14px; padding-left: 6px; }
.spec__icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 107, 53, 0.08); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.spec__name b { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); }
.spec__desc { font-size: 14px; color: var(--text); line-height: 1.5; }
.spec__tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--seafoam); }

.payoff { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.payoff__card { border-radius: var(--radius-card); padding: 24px 26px; }
.payoff__card b { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-stat); color: var(--text-strong); letter-spacing: -0.02em; margin-bottom: 8px; }
.payoff__card p { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0; }
.payoff--launch { border: 1px solid rgba(255, 107, 53, 0.22); background: rgba(255, 107, 53, 0.05); }
.payoff--seafoam { border: 1px solid rgba(53, 224, 196, 0.22); background: rgba(53, 224, 196, 0.05); }

/* ---- Beyond static (home) -------------------------------------------------- */
.module__note--link:hover { color: var(--link-hover); }
.beyond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.beyond-card { display: flex; flex-direction: column; border: 1px solid var(--hairline-strong); border-radius: var(--radius-card); padding: 22px 20px; background: rgba(7, 26, 38, 0.5); transition: border-color var(--dur) var(--ease-launch), transform var(--dur) var(--ease-launch); }
.beyond-card:hover { border-color: rgba(53, 224, 196, 0.4); transform: translateY(-3px); }
.beyond-card__tag { font-size: 11px; letter-spacing: 0.08em; color: var(--seafoam); margin-bottom: 12px; }
.beyond-card__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text-strong); margin: 0 0 10px; letter-spacing: -0.01em; }
.beyond-card__desc { font-size: 13.5px; line-height: 1.5; color: var(--text); margin: 0 0 16px; flex: 1; }
.beyond-card__desc code, .feat__desc code { font-family: var(--font-mono); font-size: 0.88em; color: var(--depth-100); }
.beyond-card__more { font-size: 12.5px; color: var(--seafoam); }

/* ---- Features CTA band (home → /features) --------------------------------- */
/* Seafoam-bordered band, NOT orange: keeps --launch reserved for the hero CTA.
   The whole band is the link; the inner .btn--ghost is a visual affordance. */
.features-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-top: 24px; padding: 26px 28px;
  border: 1px solid var(--hairline-seafoam); border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(53, 224, 196, 0.05), rgba(53, 224, 196, 0.02));
  color: var(--text);
  transition: border-color var(--dur) var(--ease-launch), transform var(--dur) var(--ease-launch);
}
.features-cta:hover { color: var(--text); border-color: rgba(53, 224, 196, 0.4); transform: translateY(-2px); }
.features-cta__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; max-width: 62ch; }
.features-cta__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2-sm); line-height: 1.1; letter-spacing: var(--tracking-h2); color: var(--text-strong); }
.features-cta__desc { font-size: var(--fs-sm); line-height: 1.55; color: var(--text); }
.features-cta__action { flex: 0 0 auto; }
.features-cta__btn { transition: border-color var(--dur-fast) var(--ease-launch), transform var(--dur-fast) var(--ease-launch); }
.features-cta:hover .features-cta__btn { border-color: rgba(207, 230, 239, 0.4); transform: translateY(-2px); }
.features-cta__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-launch); }
.features-cta:hover .features-cta__arrow { transform: translateX(3px); }
.features-cta:focus-visible { outline: 2px solid var(--seafoam); outline-offset: 3px; border-radius: var(--radius-card); }
@media (max-width: 860px) {
  .features-cta { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .features-cta__action { align-self: stretch; }
  .features-cta__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .features-cta, .features-cta:hover, .features-cta__btn,
  .features-cta:hover .features-cta__btn, .features-cta__arrow,
  .features-cta:hover .features-cta__arrow { transform: none; }
}

/* ---- Agent-native / MCP band (home 04) ------------------------------------ */
/* Two-up: a lede with a natural-language demo prompt, and the how-it-works
   points. Seafoam/tide gradient — --launch stays reserved for the hero CTA. */
.mcp-band {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px;
  margin-top: 22px; padding: 30px 32px;
  border: 1px solid var(--hairline-seafoam); border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(53, 224, 196, 0.06), rgba(32, 136, 193, 0.045));
}
.mcp-band__lede { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mcp-band__kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--seafoam); }
.mcp-band__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--text-strong); margin: 0; }
.mcp-band__demo {
  font-size: 12.5px; line-height: 1.6; color: var(--text);
  padding: 14px 16px; border-radius: var(--radius-btn);
  border: 1px solid rgba(53, 224, 196, 0.16); background: rgba(4, 18, 27, 0.55);
  overflow-wrap: anywhere;
}
.mcp-band__you { color: var(--seafoam); }
.mcp-band__arg { color: var(--launch-2); }
.mcp-band__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.mcp-band__points li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.mcp-band__points li::before { content: "▸"; position: absolute; left: 0; top: 1px; color: var(--seafoam); font-size: 11px; }
.mcp-band__points .mono { color: var(--depth-100); font-size: 0.92em; }
.mcp-band__points em { color: var(--text-strong); font-style: italic; }
@media (max-width: 860px) {
  .mcp-band { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
}

/* ---- Projects / apply band (home 04) -------------------------------------- */
/* Two-up: a declarative apply.cfg snippet, and how projects + apply work.
   Seafoam→amber wash to read distinct from the MCP band above it. */
.proj-band {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch;
  margin-top: 22px; padding: 26px 28px;
  border: 1px solid var(--hairline-seafoam); border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(53, 224, 196, 0.05), rgba(255, 210, 63, 0.035));
}
.proj-band__code { display: flex; flex-direction: column; min-width: 0; border: 1px solid rgba(53, 224, 196, 0.16); border-radius: var(--radius-btn); background: rgba(4, 18, 27, 0.6); overflow: hidden; }
.proj-band__code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid rgba(53, 224, 196, 0.14); font-size: 11px; }
.proj-band__file { color: var(--seafoam); }
.proj-band__hint { color: var(--text-muted); }
.proj-band__pre { margin: 0; padding: 14px 16px; font-size: 12px; line-height: 1.55; color: var(--text); overflow-x: auto; flex: 1; }
.proj-band__pre code { font-family: var(--font-mono); }
.proj-band__run { padding: 11px 16px; border-top: 1px solid rgba(53, 224, 196, 0.14); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.proj-band__you { color: var(--seafoam); margin-right: 6px; }
.proj-band__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.proj-band__points li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.proj-band__points li::before { content: "▸"; position: absolute; left: 0; top: 1px; color: var(--seafoam); font-size: 11px; }
.proj-band__points .mono { color: var(--depth-100); font-size: 0.92em; }
.proj-band__points strong { color: var(--text-strong); font-weight: 600; }
.proj-band__points em { color: var(--text-strong); font-style: italic; }
@media (max-width: 860px) {
  .proj-band { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
}

/* ---- Features page --------------------------------------------------------- */
.feat-hero { padding: 56px 0 8px; }
.feat-hero h1 { font-size: clamp(2.4rem, 6vw, 3.25rem); line-height: 1.04; letter-spacing: var(--tracking-tight); margin: 0 0 16px; }
.feat-hero p { font-size: var(--fs-lead); color: var(--text); max-width: 620px; margin: 0; }
.feat-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.feat-toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 26px 0 0; font-family: var(--font-mono); font-size: 12.5px; }
.feat-toc a { color: var(--text-muted); }
.feat-toc a:hover { color: var(--seafoam); }
.feat-group { padding: 44px 0 4px; scroll-margin-top: 80px; }

.feat-wrap { border: 1px solid rgba(207, 230, 239, 0.1); border-radius: var(--radius-card); overflow: hidden; background: rgba(7, 26, 38, 0.4); }
.feat { display: grid; grid-template-columns: minmax(150px, 1fr) 1.7fr auto; }
.feat__row { display: contents; }
.feat__cell { padding: 16px 18px; border-bottom: 1px solid rgba(53, 224, 196, 0.1); display: flex; align-items: flex-start; }
.feat__row:last-child .feat__cell { border-bottom: none; }
.feat__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-strong); gap: 8px; flex-wrap: wrap; }
/* Block flow (NOT the flex from .feat__cell) so the description reads as one
   paragraph — otherwise each text run and inline <code> becomes a flex item. */
.feat__desc { display: block; font-size: 14px; color: var(--text); line-height: 1.5; }
.feat__tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--seafoam); white-space: nowrap; justify-content: flex-end; }

.chip { font-family: var(--font-mono); font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); white-space: nowrap; }
.chip--beta { color: var(--launch-2); border: 1px solid rgba(255, 210, 63, 0.4); }
.chip--seam { color: var(--tide); border: 1px solid rgba(32, 136, 193, 0.45); }
.chip--wip { color: var(--launch); border: 1px solid rgba(255, 107, 53, 0.4); }

/* ---- Deploy targets ------------------------------------------------------- */
.manifest { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.target { border: 1px solid rgba(53, 224, 196, 0.16); border-radius: var(--radius-btn); padding: 16px; background: rgba(4, 18, 27, 0.5); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.target > div { min-width: 0; }
.target__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-strong); margin-bottom: 5px; }
.target__cmd { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.target__ok { font-family: var(--font-mono); font-size: 10px; color: var(--seafoam); white-space: nowrap; flex: 0 0 auto; }

/* ---- Honesty callout ------------------------------------------------------ */
.honesty { position: relative; z-index: 2; padding: 44px 0 72px; }
.honesty__box { border-left: 3px solid var(--launch-2); background: rgba(255, 210, 63, 0.05); border-radius: 0 12px 12px 0; padding: 24px 28px; display: flex; gap: 18px; align-items: flex-start; }
.honesty__label { font-family: var(--font-display); font-weight: 700; color: var(--launch-2); font-size: 15px; white-space: nowrap; }
.honesty__box p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--depth-100); }

/* ---- Footer --------------------------------------------------------------- */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--hairline); background: #020a11; padding: 44px 0 34px; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 34px; }
.footer__brand { max-width: 280px; }
.footer__brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer__brand p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.footer__cols { display: flex; gap: 56px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.footer__col a { color: var(--depth-100); }
.footer__col a:hover { color: var(--text-strong); }
.footer__col-h { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; margin-bottom: 4px; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(207, 230, 239, 0.06); font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.footer__served { display: inline-flex; align-items: center; gap: 7px; color: var(--seafoam); }

/* ---- Keyframes (neutralized by the reduced-motion block in tokens.css) ----- */
@keyframes br-wave  { from { transform: translateX(0); } to { transform: translateX(-260px); } }
@keyframes br-wave2 { from { transform: translateX(0); } to { transform: translateX(-390px); } }
@keyframes br-fall  { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(150px, 340px) rotate(120deg); opacity: 0; } }
@keyframes br-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes br-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --gutter: 22px; }
  .nav__links { gap: 16px; }
  .nav__links a:not(.nav__star) { display: none; }
  .hero { padding-top: 52px; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, var(--fs-hero)); }
  .truths__grid { grid-template-columns: 1fr; }
  .truth + .truth { border-left: none; border-top: 1px solid rgba(207, 230, 239, 0.07); }
  .terminal__grid { grid-template-columns: 1fr; }
  .terminal__body { border-right: none; border-bottom: 1px solid rgba(207, 230, 239, 0.1); }
  .spec { grid-template-columns: 32px 1fr; }
  .spec__desc, .spec__tag { display: none; }
  .payoff { grid-template-columns: 1fr; }
  .bytes { display: none; }
  .beyond-grid { grid-template-columns: 1fr 1fr; }
  .feat { grid-template-columns: 1fr; }
  .feat__tag { display: none; }
  .feat__name { border-bottom: none; padding-bottom: 2px; }
  .feat__desc { padding-top: 0; }
}
@media (max-width: 560px) {
  .beyond-grid { grid-template-columns: 1fr; }
}