/* ============================================================
   NerveStax — launch site
   Data-native / terminal direction: mono display type, hairline
   rules as the structural device, dark "artifact" panels that stay
   dark in both themes so they read as real engineering output.

   COLOUR IS NOT AUTHORED HERE. Every value below is transcribed from
   the brand system: docs/design/ux/Nervestax - Brand.html (§03 Palette),
   vendored from the claude.ai/design "Nervestax SaaS" project.
   If the brand changes, re-sync that file and re-copy — don't tune by eye.

   One deliberate deviation, for accessibility: the brand's `text-3`
   (0.62 light / 0.56 dark) measures 3.5–4.1:1, under WCAG AA for text
   below 24px. Small text therefore uses `text-2`; `text-3` is kept for
   large or decorative type only. Every text node passes AA in both themes.
   ============================================================ */

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

:root {
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Brand accent — violet, hue 274, chroma 0.17 held constant across themes.
     Only lightness moves. Source: docs/design/ux/Nervestax - Brand.html §03 */
  --violet-300: oklch(0.74 0.17 274);
  --violet-400: oklch(0.68 0.17 274);   /* dark theme accent */
  --violet:     oklch(0.62 0.17 274);
  --violet-500: oklch(0.56 0.17 274);   /* light theme accent */
  /* the one gradient — 288° → 250°. Identity only: the mark, nothing else. */
  --brand-gradient: linear-gradient(135deg, oklch(0.66 0.19 288), oklch(0.66 0.16 250));

  --ok:   oklch(0.62 0.13 155);
  --warn: oklch(0.72 0.13 75);
  --err:  oklch(0.60 0.18 25);
  --info: oklch(0.62 0.12 240);

  --maxw: 1240px;
  --gutter: 28px;

  /* artifact panels — brand dark surfaces, identical in both themes on purpose */
  --panel: oklch(0.165 0.006 274);
  --panel-2: oklch(0.215 0.008 274);
  --panel-rule: oklch(0.29 0.01 274);
  --panel-ink: oklch(0.95 0.004 274);
  --panel-ink-2: oklch(0.72 0.01 274);
  --panel-ink-3: oklch(0.56 0.012 274);
}

/* ---------- LIGHT — brand light surfaces ---------- */
[data-theme="light"] {
  --bg: oklch(0.985 0.002 270);
  --surface: oklch(1 0 0);
  --bg-2: oklch(0.975 0.003 270);
  --ink: oklch(0.24 0.012 270);
  --ink-2: oklch(0.46 0.012 270);
  --ink-3: oklch(0.62 0.01 270);
  --rule: oklch(0.91 0.004 270);
  --rule-soft: oklch(0.955 0.004 270);
  --rule-strong: oklch(0.85 0.006 270);
  --accent: var(--violet-500);
  --accent-hover: oklch(0.50 0.17 274);
  --accent-soft: oklch(0.56 0.17 274 / 0.10);
  --field: oklch(1 0 0);
}

/* ---------- DARK — brand dark surfaces ---------- */
[data-theme="dark"] {
  --bg: oklch(0.165 0.006 274);
  --surface: oklch(0.195 0.007 274);
  --bg-2: oklch(0.215 0.008 274);
  --ink: oklch(0.95 0.004 274);
  --ink-2: oklch(0.72 0.01 274);
  --ink-3: oklch(0.56 0.012 274);
  --rule: oklch(0.29 0.01 274);
  --rule-soft: oklch(0.235 0.009 274);
  --rule-strong: oklch(0.36 0.012 274);
  --accent: var(--violet-400);
  --accent-hover: var(--violet-300);
  --accent-soft: oklch(0.68 0.17 274 / 0.16);
  --field: oklch(0.195 0.007 274);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--font-mono); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================
   TYPE
   ============================================================ */
.display {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.96;
  margin: 0;
  font-size: clamp(32px, 5.4vw, 68px);
}
.display-sm { font-size: clamp(26px, 3.6vw, 44px); }
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.tag em { font-style: normal; color: var(--accent); }
.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 54ch; margin: 0; }
p { margin: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
/* "Restraint earns color — color signals action and identity, nothing else."
   So the primary action is the one violet thing on the screen. Calm, not loud:
   no offset slabs, no transforms. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 15px 22px; border: 1px solid transparent; border-radius: 6px;
  background: var(--violet-500); color: #fff;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { background: oklch(0.50 0.17 274); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 3px; background: none; border-width: 0 0 1px; cursor: pointer;
}
.btn-link:hover { color: var(--ink); border-color: var(--ink); }

/* ============================================================
   NAV
   ============================================================ */
.topbar {
  background: var(--panel); color: var(--panel-ink-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 8px 16px;
}
.topbar b { color: var(--panel-ink); font-weight: 500; }
.topbar a { color: inherit; }
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.stuck { border-bottom-color: var(--rule); }
.nav-in { display: flex; align-items: center; gap: 26px; height: 62px; }
/* Wordmark lockup per brand §02: mark + IBM Plex Sans 600, tight tracking,
   "Stax" in the secondary ink. Clearspace = mark height. */
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  letter-spacing: -0.02em;
}
.brand .mark { width: 22px; height: 22px; flex: none; display: block; color: var(--ink); }
.brand .tile {
  width: 26px; height: 26px; flex: none; border-radius: 28%;
  background: var(--brand-gradient); display: grid; place-items: center;
}
.brand .tile svg { width: 15px; height: 15px; display: block; color: #fff; }
.brand .sfx { color: var(--ink-2); }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }
.nav-side { display: flex; align-items: center; gap: 12px; }
.nav .btn { padding: 10px 15px; font-size: 11.5px; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--rule); background: none; cursor: pointer; color: var(--ink-2); }
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 900px) { .nav-links { display: none; } .nav-side { margin-left: auto; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(30px, 4.4vw, 58px) 0 0; position: relative; }
/* Full-bleed-within-grid rule: it divides the whole hero, so it spans the whole
   measure rather than stopping under one column. */
.hero .rule-under { height: 1px; background: var(--ink); margin: 20px 0 26px; opacity: .85; }
.hero-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(32px, 4vw, 56px); align-items: end; }
/* balance stops the last line becoming an orphan at mid widths */
.hero h1 { max-width: 16ch; text-wrap: balance; }
.hero-aside { padding-bottom: 6px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.hero-note { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0.04em; }
@media (max-width: 900px) { .hero-head { grid-template-columns: 1fr; gap: 24px; align-items: start; } }

/* spec sheet — honest facts, not invented metrics */
.spec { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); margin-top: 36px; }
.spec > div { padding: 16px 20px 18px 0; border-right: 1px solid var(--rule-soft); }
.spec > div:last-child { border-right: 0; }
.spec dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.spec dd { margin: 7px 0 0; font-size: 14.5px; font-weight: 450; color: var(--ink); }
@media (max-width: 760px) { .spec { grid-template-columns: repeat(2, 1fr); } .spec > div { padding-right: 14px; } }

/* ============================================================
   ARTIFACT PANELS (terminal / product frames) — dark in both themes
   ============================================================ */
.panel {
  background: var(--panel); color: var(--panel-ink);
  border: 1px solid var(--panel-rule);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
  box-shadow: 0 24px 60px oklch(0.15 0.02 274 / 0.28);
}
.panel-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--panel-rule); color: var(--panel-ink-2); font-size: 11px; letter-spacing: 0.05em;
}
.panel-bar .dots { display: flex; gap: 5px; margin-right: 6px; }
.panel-bar .dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--panel-rule); display: block; }
.panel-bar .right { margin-left: auto; }
.panel-body { padding: 16px 18px 18px; }

.hero-panel { margin-top: 34px; }
/* Reserve the streaming output's final height so the panel never jumps mid-run. */
#out { min-height: 146px; }  /* 6 lines: seeded command + 5 streamed */

/* prompt line + caret */
.p-prompt { color: var(--panel-ink); }
.p-prompt .chev { color: var(--violet-300); margin-right: 8px; }
.caret { display: inline-block; width: 8px; height: 15px; background: var(--accent); vertical-align: -2px; animation: blink 1.05s steps(1) infinite; }
/* hidden, not removed — display:none drops a wrapped line and shrinks the panel */
.caret.done { visibility: hidden; }
@keyframes blink { 50% { opacity: 0; } }

.p-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.p-steps li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; color: var(--panel-ink-2); opacity: 0; transform: translateY(3px); transition: opacity .3s, transform .3s; }
.p-steps li.on { opacity: 1; transform: none; }
.p-steps .m { color: var(--panel-ink-2); }
.st { width: 13px; height: 13px; margin-top: 4px; border: 1px solid var(--panel-ink-3); border-radius: 99px; display: block; position: relative; }
li.done .st { border-color: var(--ok); background: var(--ok); }
li.done .st::after { content: ''; position: absolute; inset: 0; background: var(--panel); clip-path: polygon(20% 48%, 42% 70%, 82% 26%, 88% 34%, 42% 84%, 14% 56%); }
li.run .st { border-color: var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Terminal output never wraps — it scrolls, like a real terminal. Wrapping
   reflows the panel mid-stream and makes the height jump on narrow screens. */
.p-out { margin: 16px 0 0; padding: 12px 14px; background: oklch(0.13 0.006 274); border-left: 2px solid var(--panel-rule); color: var(--panel-ink-2); white-space: pre; overflow-x: auto; font-size: 11.5px; line-height: 1.75; min-height: 1px; }
.p-out .ok { color: var(--ok); }
.p-out .dim { color: var(--panel-ink-2); }
.p-out b { color: var(--panel-ink); font-weight: 600; }
.p-out .cmd { color: var(--panel-ink); }

.p-gate {
  margin-top: 16px; border: 1px dashed var(--accent); background: oklch(0.72 0.17 274 / 0.10);
  padding: 13px 15px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s;
}
.p-gate.on { opacity: 1; transform: none; }
.p-gate .lbl { color: var(--panel-ink); }
.p-gate .acts { margin-left: auto; display: flex; gap: 8px; }
.p-gate button { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--panel-rule); background: transparent; color: var(--panel-ink); cursor: default; }
.p-gate button.primary { background: var(--violet-500); border-color: var(--violet-500); color: #fff; }

.replay { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 15px 0; overflow: hidden; margin-top: 64px; }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: slide 34s linear infinite; }
.marquee span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.marquee span::after { content: '/'; margin-left: 48px; color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding: clamp(64px, 9vw, 116px) 0; }
.sec-head { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; align-items: start; }
.sec-head .lede { margin-top: 18px; }
@media (max-width: 820px) { .sec-head { grid-template-columns: 1fr; gap: 14px; } }

/* problem: two-column ledger */
.ledger { border-top: 1px solid var(--ink); margin-top: 44px; }
.ledger-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.ledger-row .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-2); }
.ledger-row h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.ledger-row p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 820px) { .ledger-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; } }

/* feature bands */
.band { border-top: 1px solid var(--rule); padding: clamp(56px, 7vw, 92px) 0; }
.band-in { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* grid items default to min-width:auto, which lets the non-wrapping terminal
   output widen its column and push the page sideways */
.band-in > * { min-width: 0; }
.panel-body, .panel { min-width: 0; }
.band.flip .band-in > .band-copy { order: 2; }
.band-copy .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent); }
.band-copy h2 { margin: 14px 0 0; }
.band-copy p { color: var(--ink-2); font-size: 16.5px; margin-top: 18px; max-width: 48ch; }
.band-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 5px 10px; color: var(--ink-2);
}
@media (max-width: 900px) {
  .band-in { grid-template-columns: 1fr; gap: 32px; }
  .band.flip .band-in > .band-copy { order: 0; }
}

/* lineage artifact */
.graph { background: var(--panel); border: 1px solid var(--panel-rule); padding: 20px; box-shadow: 0 24px 60px oklch(0.15 0.02 274 / 0.24); }
.graph-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--panel-ink-2); margin-bottom: 14px; }
.graph-head b { color: var(--panel-ink); font-size: 13px; font-weight: 600; }
.graph-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.lg { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--panel-rule); color: var(--panel-ink-2); }
.lg.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 45%, transparent); }
.lg.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, transparent); }

/* usage bars artifact */
.bars { display: grid; gap: 12px; margin-top: 4px; }
.bar-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 62px; gap: 14px; align-items: center; font-size: 11.5px; color: var(--panel-ink-2); }
.bar { height: 9px; background: oklch(0.13 0.006 274); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); width: var(--w, 40%); display: block; }
.bar-row .v { text-align: right; color: var(--panel-ink); }
.bar-row.total { border-top: 1px solid var(--panel-rule); padding-top: 12px; margin-top: 4px; color: var(--panel-ink); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); margin-top: 44px; }
/* Rule on the left, not the right: with border-right the following column's text
   sat flush against the divider while the preceding one had 26px of air. */
.step { padding: 26px 26px 30px; border-left: 1px solid var(--rule); }
.step:first-child { border-left: 0; padding-left: 0; }
.step:last-child { padding-right: 0; }
.step .n { font-family: var(--font-mono); font-size: 40px; font-weight: 600; letter-spacing: -0.04em; color: var(--ink-3); line-height: 1; }
.step h3 { margin: 16px 0 0; font-size: 18px; letter-spacing: -0.01em; }
.step p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
/* No background chip in prose: its padding visually detaches trailing punctuation
   ("stg_orders ." instead of "stg_orders."). Mono against sans is already a strong
   enough signal, and full-strength ink separates it from the body colour. */
code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .step { border-left: 0; border-bottom: 1px solid var(--rule); padding: 22px 0 24px; } .step:last-child { border-bottom: 0; } }

/* security manifest */
.manifest { border-top: 1px solid var(--ink); margin-top: 44px; font-family: var(--font-mono); }
.manifest-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.manifest-row dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.manifest-row dd { margin: 0; font-family: var(--font-sans); font-size: 15.5px; color: var(--ink-2); }
.manifest-row dd b { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .manifest-row { grid-template-columns: 1fr; gap: 8px; } }

/* FAQ */
.faq { border-top: 1px solid var(--ink); margin-top: 44px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 60px minmax(0, 1fr) 24px;
  gap: 16px; padding: 22px 0; align-items: baseline; font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.08em; }
.faq summary .sign { font-family: var(--font-mono); font-size: 17px; color: var(--ink-2); text-align: right; }
.faq details[open] summary .sign { color: var(--accent); }
.faq summary:hover { color: var(--accent); }
.faq .a { padding: 0 24px 24px 76px; color: var(--ink-2); font-size: 15.5px; max-width: 76ch; }
.faq .a + .a { padding-top: 0; margin-top: -10px; }
@media (max-width: 700px) {
  .faq summary { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 10px; font-size: 16px; }
  .faq .a { padding-left: 44px; }
}

/* ============================================================
   CLOSER + FORM
   ============================================================ */
/* Always the brand dark surface, in both themes — the same "artifact" logic as
   the terminal panels, so the closing band reads as part of the product. */
.closer { background: var(--panel); color: var(--panel-ink); padding: clamp(64px, 8vw, 104px) 0; }
.closer .display { color: var(--panel-ink); }
.closer .tag { color: var(--panel-ink-2); }
.closer .brand .sfx { color: var(--panel-ink-3); }
.closer-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 76px); align-items: start; }
.closer-aside p { color: var(--panel-ink-2); font-size: 16.5px; margin-top: 22px; max-width: 42ch; }
.closer-aside .direct { margin-top: 26px; font-family: var(--font-mono); font-size: 13px; }
.closer-aside .direct a { color: var(--violet-300); }
@media (max-width: 900px) { .closer-in { grid-template-columns: 1fr; gap: 36px; } }

/* the form lives on the dark closer; fields invert */
.form { display: grid; gap: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-2 { grid-template-columns: 1fr; } }
.f label, .seg-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--panel-ink-2); margin-bottom: 7px; }
.f input, .f textarea {
  width: 100%; padding: 12px 14px; border-radius: 6px;
  background: var(--panel-2); color: var(--panel-ink);
  border: 1px solid var(--panel-rule); font-size: 15px;
}
.f input::placeholder, .f textarea::placeholder { color: var(--panel-ink-3); }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 3px oklch(0.68 0.17 274 / 0.25); }
.f textarea { min-height: 116px; resize: vertical; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--panel-rule); border-radius: 6px; overflow: hidden; }
.seg label { position: relative; margin: 0; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span {
  display: block; text-align: center; padding: 11px 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--panel-ink-2); border-right: 1px solid var(--panel-rule);
}
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--violet-500); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--panel-ink); outline-offset: -3px; }
.consent { display: flex; gap: 10px; align-items: start; font-size: 13px; color: var(--panel-ink-2); }
.consent input { margin-top: 3px; accent-color: var(--violet-400); }
.closer .btn { background: var(--violet-500); color: #fff; justify-content: center; }
.closer .btn:hover { background: oklch(0.50 0.17 274); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; min-height: 18px; margin-top: 10px; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--err); }
.closer .form-msg.ok { color: oklch(0.78 0.14 155); }
.closer .form-msg.err { color: oklch(0.75 0.16 25); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: 34px 0; border-top: 1px solid var(--rule); }
.footer-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--ink-2); }
.footer-in a { text-decoration: none; }
.footer-in a:hover { color: var(--ink); }
.footer-links { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }