:root {
  color-scheme: dark;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Brand surfaces */
  --bg: #050505;
  --charcoal: #101010;
  --graphite: #1a1a1a;

  /* Brand metals — gold is default/persistent, gold-bright is hover/illuminated only,
     champagne is a soft secondary accent. Reserve gold-bright for active/interactive moments. */
  --gold: #c6a15b;
  --gold-bright: #e0c078;
  --champagne: #f1e2be;
  --gold-shadow: #8f6f35;

  /* Text */
  --text: #ffffff;
  --silver: #d8d8d8;
  --muted: #a5a5a5;
  --dim: #a5a5a5;

  /* Semantic (not brand) — used only for form validation states */
  --color-error: #ff6b6b;
  --color-error-border: #e0504f;

  --border: rgba(255, 255, 255, 0.1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-mono: "SF Mono", "Roboto Mono", "JetBrains Mono", Consolas, monospace;

  /* Motion timing scale — pair with --ease for all transitions */
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 500ms;

  --nav-height: 64px;
}

/* Breakpoint scale (documented here since CSS custom properties can't be used
   inside @media conditions): 420px small phone, 860px nav collapse, 980px hero
   stack, tablet/desktop above that. Keep new breakpoints on this scale. */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

h1, h2, h3 {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--space-3);
  z-index: 200;
  background: var(--gold);
  color: #171208;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease);
}

.skip-link:focus {
  top: var(--space-3);
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}

.hero-wordmark {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 var(--space-5);
  padding-left: 0.35em;
}

/* ---------- Persistent 3D canvas ---------- */
#beaconCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}

#beaconCanvas.is-ready {
  opacity: 1;
}

body.no-webgl #beaconCanvas {
  display: none;
}

body.no-webgl {
  background:
    radial-gradient(circle at 50% 18%, rgba(198, 161, 91, 0.14), transparent 55%),
    linear-gradient(180deg, var(--charcoal), var(--bg) 40%);
  background-attachment: fixed;
}

/* Static hero mark shown only when WebGL is unavailable, so the hero still
   has a real focal point instead of empty gradient — this matters here
   specifically since locked-down corporate/venue IT networks are a realistic
   part of this site's own audience, not a hypothetical edge case. */
.hero-fallback-mark {
  display: none;
  width: clamp(120px, 16vw, 180px);
  height: auto;
  margin: 0 auto var(--space-4);
}

body.no-webgl .hero-fallback-mark {
  display: block;
}

/* Persistent engineering-grid overlay — sits between the 3D canvas and the
   content, present through the whole scroll (not just one scene) so the site
   reads as one continuous instrument rather than a plain page most of the time. */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(198, 161, 91, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 161, 91, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 30%, transparent 78%);
}

body.no-webgl .grid-overlay {
  mask-image: none;
  opacity: 0.3;
}

/* HUD readout — a fixed corner instrument panel present across the whole
   scroll: system label, live scroll telemetry, status pulse. */
.hud {
  position: fixed;
  top: calc(var(--nav-height) + var(--space-3));
  right: clamp(16px, 3vw, 40px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: right;
  pointer-events: none;
}

.hud-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  text-transform: uppercase;
}

.hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 6px rgba(224, 192, 120, 0.7);
  animation: hud-pulse 2.4s ease-in-out infinite;
}

@keyframes hud-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.hud-scroll {
  font-variant-numeric: tabular-nums;
}

/* Scroll-progress rail — the "journey" made literal as a precise vertical
   gauge on the edge of the viewport. */
.progress-rail {
  position: fixed;
  top: var(--nav-height);
  bottom: 0;
  right: 0;
  width: 2px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.06);
}

.progress-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 8px rgba(224, 192, 120, 0.5);
  transition: height 80ms linear;
}

@media (max-width: 860px) {
  .hud,
  .progress-rail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-dot {
    animation: none;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 600;
  min-height: 46px;
  padding: 0 24px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

.btn-primary {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(241, 226, 190, 0.35);
  color: #171208;
  background: linear-gradient(160deg, var(--champagne) 0%, var(--gold) 45%, var(--gold-shadow) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 28px rgba(143, 111, 53, 0.28);
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 600ms var(--ease);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 34px rgba(143, 111, 53, 0.36);
}

.btn-primary:hover::after {
  left: 130%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none !important;
  box-shadow: none !important;
}

.btn:disabled::after,
.btn[aria-disabled="true"]::after {
  display: none;
}

.btn.is-loading {
  cursor: progress;
  color: transparent !important;
}

.btn.is-loading::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: #171208;
  animation: btn-spin 700ms linear infinite;
}

.btn-ghost.is-loading::before {
  color: var(--text);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  border-color: rgba(198, 161, 91, 0.5);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

/* ---------- Nav (near-invisible, becomes glass on scroll) ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 400ms var(--ease), border-color 400ms var(--ease), backdrop-filter 400ms var(--ease);
}

.nav.scrolled {
  background: rgba(17, 17, 17, 0.68);
  border-bottom-color: var(--border);
  backdrop-filter: blur(16px) saturate(140%);
}

.nav-inner {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 clamp(20px, 4vw, 48px);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
}

.nav-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(198, 161, 91, 0.4);
  background: #0a0a09;
  object-fit: contain;
  padding: 3px;
}

.nav-links {
  display: flex;
  gap: var(--space-5);
  font-size: 0.86rem;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-cta {
  border: 1px solid rgba(198, 161, 91, 0.45);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 640;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.nav-cta:hover {
  background: rgba(198, 161, 91, 0.12);
  border-color: rgba(224, 192, 120, 0.7);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.calm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 12px 7px 9px;
  color: var(--muted);
  font-size: 0.78rem;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.calm-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 500ms var(--ease);
}

.calm-toggle:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}

.calm-toggle[aria-pressed="true"] {
  color: var(--gold-bright);
  border-color: rgba(224, 192, 120, 0.45);
  background: rgba(198, 161, 91, 0.1);
}

.calm-toggle[aria-pressed="true"] svg {
  transform: rotate(90deg);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.menu-toggle svg {
  width: 19px;
  height: 19px;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) clamp(20px, 4vw, 48px) var(--space-4);
  background: rgba(8, 8, 8, 0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.mobile-menu a {
  padding: 12px 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-menu-cta {
  margin-top: var(--space-3);
  text-align: center;
  border: 1px solid rgba(198, 161, 91, 0.5) !important;
  border-radius: var(--radius-pill);
  color: var(--text) !important;
}

/* ---------- Scenes ---------- */
.scene {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-7) clamp(var(--space-3), 5vw, var(--space-6));
}

.scene-light {
  min-height: 80svh;
}

.scene-copy {
  position: relative;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scene-copy::before {
  content: "";
  position: absolute;
  inset: -20% -30%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(5, 5, 5, 0.62), transparent 70%);
  pointer-events: none;
}

.scene-hero h1 {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.8vw, 2.9rem);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.scene h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  margin-bottom: var(--space-3);
}

.scene-sub {
  color: var(--silver);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 400;
  max-width: 44ch;
  margin-bottom: var(--space-5);
}

.scene-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.scroll-cue {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  animation: scroll-bob 2.4s ease-in-out infinite;
}

.scroll-cue svg {
  width: 20px;
  height: 20px;
}

@keyframes scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ---------- Pathfinding readout (The Problem) ----------
   A technical, blueprint-style diagram: a search that branches from a
   single start point, explores three directions, and dead-ends in all of
   them — read as Beacon's own routing engine failing without real venue
   and traveler data. Precise right angles and mono-font HUD labels keep it
   in the same "machined" visual language as the scroll HUD and progress
   rail, in deliberate contrast with the clean gold 3D route revealed once
   Personalization begins. The three path segments draw in sequentially on
   scroll, like a search exploring and rejecting each branch (see main.js). */
.problem-fragments {
  width: min(560px, 100%);
  height: auto;
  margin-top: var(--space-6);
  opacity: 0.9;
}

.route-start {
  fill: var(--dim);
  opacity: 0.8;
}

.route-spine,
.route-branch {
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: 0.7;
}

.route-branch {
  opacity: 0.5;
}

.route-deadend path {
  stroke: var(--dim);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.75;
}

.route-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  fill: var(--dim);
  text-anchor: middle;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .route-label {
    display: none;
  }
}

.problem-caption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
}

/* .reveal elements start visible; main.js (GSAP) sets the hidden starting
   state via inline style before animating in, so content degrades gracefully
   if JS fails to load rather than vanishing permanently. */

/* ---------- Personalization: route tabs ---------- */
.route-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.route-tab {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(26, 26, 26, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}

.route-tab:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.route-tab.is-active {
  color: #ffffff;
  background: rgba(198, 161, 91, 0.14);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px var(--gold), 0 0 0 1px rgba(224, 192, 120, 0.25);
  font-weight: 700;
}

.route-desc {
  margin-top: var(--space-4);
  color: var(--silver);
  font-size: 1rem;
  min-height: 1.4em;
}

/* ---------- Guidance ---------- */
.guidance-lines {
  display: grid;
  gap: 10px;
  margin-top: var(--space-4);
  font-size: 1.05rem;
  color: var(--silver);
}

/* ---------- Support constellation ---------- */
.support-constellation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 640px;
  margin-top: var(--space-5);
}

.support-item {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 8px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--silver);
  background: rgba(26, 26, 26, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  animation: float-label 5s ease-in-out infinite;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.support-item:hover {
  color: var(--text);
}

.support-item.is-active {
  color: #ffffff;
  border-color: var(--gold);
  background: rgba(198, 161, 91, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px var(--gold);
}

.support-constellation li:nth-child(odd) .support-item { animation-delay: -1.5s; }
.support-constellation li:nth-child(3n) .support-item { animation-delay: -3s; }

@keyframes float-label {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.detail-desc {
  margin-top: var(--space-4);
  color: var(--silver);
  font-size: 0.98rem;
  min-height: 1.4em;
  max-width: 52ch;
}

/* ---------- Mini dashboard ---------- */
.mini-dashboard {
  margin-top: var(--space-5);
  width: min(480px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: rgba(17, 17, 17, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  text-align: left;
}

.demo-badge {
  display: inline-block;
  border: 1px solid rgba(143, 111, 53, 0.55);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.mini-dashboard-rows {
  display: grid;
  gap: 10px;
}

.mini-dashboard-rows div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.mini-dashboard-rows i {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border);
  position: relative;
  font-style: normal;
  overflow: hidden;
}

.mini-dashboard-rows i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w, 50%);
  border-radius: var(--radius-pill);
  background: var(--gold);
}

/* ---------- Venue pills / integration cluster ---------- */
.venue-pills,
.integration-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 680px;
  margin-top: var(--space-5);
}

.integration-cluster li {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 9px 16px;
  font-size: 0.86rem;
  color: var(--silver);
  background: rgba(26, 26, 26, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.venue-item {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 9px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--silver);
  background: rgba(26, 26, 26, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.venue-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--muted);
  transition: color var(--duration-fast) var(--ease);
}

.venue-item:hover {
  color: var(--text);
}

.venue-item.is-primary,
.venue-item[aria-pressed="true"] {
  color: #ffffff;
  background: rgba(198, 161, 91, 0.14);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  font-weight: 700;
}

.venue-item.is-primary svg,
.venue-item[aria-pressed="true"] svg {
  color: var(--gold-bright);
}

.integration-note {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------- Vision / founder ---------- */
/* Deliberately warmer than the machined-metal surfaces elsewhere — this is the
   one moment the site should feel like it's from a person, not a system. */
.founder-portrait {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--champagne);
  background: radial-gradient(circle at 35% 30%, rgba(241, 226, 190, 0.22), rgba(198, 161, 91, 0.08) 70%);
  border: 1px solid rgba(241, 226, 190, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(198, 161, 91, 0.1);
}

.founder-signature {
  margin-top: var(--space-4);
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Demo form ---------- */
.demo-scene {
  align-items: center;
}

/* This eyebrow sits over the lighthouse cone/spokes rather than plain
   background, so it needs more than the default eyebrow treatment to
   stay legible against the gold geometry behind it. */
.demo-scene .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  color: var(--gold-bright);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 26px rgba(0, 0, 0, 0.7);
}

.demo-form {
  width: min(680px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  text-align: left;
  margin-top: var(--space-3);
}

/* display:grid above ties the browser's built-in [hidden]{display:none} rule on
   specificity, and being an author-stylesheet rule it wins the tie — so setting
   the hidden attribute alone silently fails to hide the form. Force it explicitly. */
.demo-form[hidden] {
  display: none;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.form-row-full {
  grid-column: 1 / -1;
}

.demo-form label {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: var(--text);
}

.demo-form label span[aria-hidden="true"] {
  color: var(--gold);
  margin-left: 2px;
}

.demo-form input,
.demo-form select,
.demo-form textarea {
  font: inherit;
  padding: 11px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: rgba(17, 17, 17, 0.75);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(0, 0, 0, 0.2);
  color: var(--text);
}

.demo-form input::placeholder,
.demo-form textarea::placeholder {
  color: var(--muted);
}

.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus {
  outline: 2px solid var(--gold-bright);
  outline-offset: 1px;
  border-color: transparent;
}

.demo-form input[aria-invalid="true"],
.demo-form select[aria-invalid="true"] {
  border-color: var(--color-error-border);
}

.form-error {
  min-height: 1em;
  font-size: 0.78rem;
  color: var(--color-error);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.form-fallback {
  font-size: 0.82rem;
  color: var(--silver);
}

.form-fallback a {
  color: var(--gold-bright);
  text-decoration: underline;
}

.demo-success {
  width: min(560px, 100%);
  text-align: center;
  border: 1px solid rgba(143, 111, 53, 0.4);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  background: rgba(17, 17, 17, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  margin-top: var(--space-4);
}

.demo-success h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

.demo-success p {
  color: var(--silver);
}

/* ---------- Footer ---------- */
.footer {
  position: relative;
  z-index: 1;
  padding: var(--space-6) clamp(var(--space-3), 4vw, var(--space-6)) var(--space-5);
  border-top: 1px solid var(--border);
  background: rgba(5, 5, 5, 0.75);
  backdrop-filter: blur(10px);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.footer-tagline {
  color: var(--silver);
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-links a[aria-disabled="true"] {
  opacity: 0.5;
}

.footer-legal {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 auto;
}

/* ---------- Legal pages ---------- */
.legal-page {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + var(--space-6)) var(--space-3) var(--space-7);
}

.legal-page h1 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: var(--space-4);
}

.legal-page p {
  color: var(--silver);
  line-height: 1.65;
  margin-bottom: var(--space-4);
}

.legal-placeholder-note {
  border: 1px solid rgba(143, 111, 53, 0.4);
  border-radius: var(--radius-control);
  padding: var(--space-3);
  color: var(--gold) !important;
  font-size: 0.88rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .mobile-menu:not([hidden]) {
    display: flex;
  }

  .calm-toggle span {
    display: none;
  }

  .calm-toggle {
    padding: 8px;
  }

  .demo-form {
    grid-template-columns: 1fr;
  }

  .mini-dashboard-rows div {
    grid-template-columns: 100px minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .nav-inner {
    padding: 0 14px;
    gap: 10px;
  }

  .nav-right {
    gap: 8px;
  }

  .nav-cta {
    padding: 8px 12px;
    font-size: 0.78rem;
  }

  .nav-brand span {
    display: none;
  }
}

@media (max-width: 520px) {
  .scene {
    padding: var(--space-6) var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-cue,
  .support-item {
    animation: none;
  }
}