/* ============================================================
   HAVEN256 // SHARED STYLESHEET
   Design system + base components + per-page sections
   Dark navy canvas, gold accent, technical typography
   Reusable components: pill, chip, ui-card, callout, stat, bookend
   ============================================================ */

* { box-sizing: border-box; }

:root {
  /* Brand palette . per HAVEN256 Design System (Figma) */
  --primary-900: #0F131A;
  --primary-800: #171E2A;
  --primary-700: #1E293A;
  --primary-600: #25354B;
  --primary-500: #2C3F5D;
  --primary-400: #53647C;
  --primary-300: #7C899C;
  --primary-200: #A7B0BC;
  --primary-100: #D2D7DD;

  --neutral-900: #202326;
  --neutral-800: #393F43;
  --neutral-700: #525960;
  --neutral-500: #8496A3;
  --neutral-400: #9CABB5;
  --neutral-300: #B4BFC8;
  --neutral-200: #CDD5D9;
  --neutral-100: #E6E9EC;

  /* Secondary (gold) . spec calls these "secondary-*" */
  --secondary-900: #312A09;
  --secondary-800: #5C4D0E;
  --secondary-700: #8E7515;
  --secondary-500: #E2BD41;
  --secondary-300: #F5D77A;

  /* Legacy gold-* aliases retained for existing rules */
  --gold-900: var(--secondary-900);
  --gold-700: var(--secondary-700);
  --gold-500: var(--secondary-500);
  --gold-300: var(--secondary-300);

  /* Theme aliases . dark default (page leans into the dark navy primary) */
  --bg:           var(--primary-900);
  --bg-2:         var(--primary-800);
  --bg-3:         var(--primary-700);
  --surface:      #131923;
  --surface-2:    #1B2330;
  --border:       rgba(230, 233, 236, 0.08);
  --border-2:     rgba(230, 233, 236, 0.16);
  --border-strong:rgba(230, 233, 236, 0.28);
  --text:         var(--neutral-200);
  --text-heading: var(--neutral-100);
  --text-muted:   var(--primary-200);
  --text-dim:     var(--primary-300);
  --text-faint:   var(--primary-300);
  --accent:       var(--secondary-500);
  --accent-dim:   var(--secondary-700);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Type scale (fluid) */
  --fs-display: clamp(3rem, 1.5rem + 6cqw, 7rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.5cqw, 4.5rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 2cqw, 3rem);
  --fs-h3:      clamp(1.375rem, 1rem + 1.4cqw, 2rem);
  --fs-h4:      clamp(1.125rem, 0.95rem + 0.6cqw, 1.375rem);
  --fs-body-lg: clamp(1.0625rem, 0.95rem + 0.5cqw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-mono-s:  0.8125rem;
  --fs-mono-xs: 0.6875rem;

  --max-width: 84rem;
  --container-margin: clamp(1.25rem, 4cqw, 3rem);

  /* Motion tokens . default to ~400ms with a soft ease-out so UI feels
     like it's listening rather than snapping. Use --t-fast for tight
     state changes (focus rings, dot pulses) and --t-slow for cards/lifts. */
  --t-fast:  180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-base:  400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow:  600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* On-brand text selection . gold accent fill with the dark navy text color
   used for primary buttons; readable on every surface in the site. */
::selection {
  background: var(--accent);
  color: var(--secondary-900);
  text-shadow: none;
}
::-moz-selection {
  background: var(--accent);
  color: var(--secondary-900);
  text-shadow: none;
}
/* Lite mode flips to the deeper amber so it doesn't blow out on white. */
:root[data-theme="light"] ::selection {
  background: var(--secondary-700);
  color: #FFFFFF;
}
:root[data-theme="light"] ::-moz-selection {
  background: var(--secondary-700);
  color: #FFFFFF;
}

/* Global focus-visible fallback . any keyboard-focused element that
   doesn't define its own ring still gets a clear, themed indicator. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Honor user motion preferences . if reduced motion is requested,
   collapse all transitions to instantaneous so nothing feels jittery. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;       /* belt-and-suspenders against horizontal scroll on iOS */
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
  max-width: 100%;
  min-width: 0;
}

/* Tasteful site-wide load: body fades in once scripts.js flags the DOM
   ready (mirrors the existing topbar fade-in pattern). The hero rises a
   touch into place to add subtle motion without choreographing every
   element. Respects prefers-reduced-motion. */
html:not(.is-ready) body { opacity: 0; }
body { transition: opacity 600ms ease; }
.hero,
.about-hero,
.platform-hero,
.contact-hero {
  transform: translateY(8px);
  opacity: 0;
  transition:
    opacity 700ms ease 80ms,
    transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms;
}
.is-ready .hero,
.is-ready .about-hero,
.is-ready .platform-hero,
.is-ready .contact-hero {
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.is-ready) body { opacity: 1; }
  .hero, .about-hero, .platform-hero, .contact-hero {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   CLICK-AFFORDANCE SYSTEM
   Single rule: every "clickable signal" speaks the brand gold.
   - Buttons: solid fill (loudest)
   - Outlined buttons: gold border
   - Inline links: gold text + animated gold underline
   - Nav active/hover: gold underline
   - Focus ring: gold (defined elsewhere)
   `--accent` automatically remaps to the deeper amber in Lite, so the
   same authoring rule works in both themes without per-theme overrides. */
.link-accent {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--t-base), border-color var(--t-base);
}
.link-accent:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
}
:root[data-theme="light"] .link-accent:hover { color: var(--neutral-900); }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-heading);
}
p { margin: 0; }
button { font: inherit; border: 0; cursor: pointer; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-feature-settings: 'liga';
  user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--container-margin);
  container-type: inline-size;
  container-name: page;
}

.section {
  padding-block: clamp(4rem, 8cqw, 8rem);
  position: relative;
}

.section--tight { padding-block: clamp(3rem, 5cqw, 5rem); }
.section--alt { background: var(--bg-2); }
.section--surface { background: var(--surface); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.t-display { font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.035em; font-weight: 700; }
.t-h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.025em; font-weight: 700; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.015em; font-weight: 700; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.005em; font-weight: 700; }
.t-body-lg { font-size: var(--fs-body-lg); line-height: 1.5; }
.t-body { font-size: var(--fs-body); line-height: 1.55; }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.t-mono { font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.15em; }

.t-em { color: var(--accent); }

.t-grad {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-300) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.t-slab {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 600;
  font-style: italic;
}

/* ============================================================
   COMPONENT: PILL . small status / category tag
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  background: rgba(226, 189, 65, 0.08);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(226, 189, 65, 0.25);
  transition: background var(--t-base), border-color var(--t-base);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 35em) {
  .pill { white-space: normal; }
}
.pill__dot {
  width: 0.4rem; height: 0.4rem;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: pillPulse 2.4s ease-in-out infinite;
}
@keyframes pillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 189, 65, 0.55), 0 0 8px var(--accent); }
  50%      { box-shadow: 0 0 0 6px rgba(226, 189, 65, 0),    0 0 8px var(--accent); }
}

.pill--neutral {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text-muted);
}
.pill--neutral .pill__dot { background: #4CAF50; box-shadow: 0 0 6px #4CAF50; }

/* ============================================================
   COMPONENT: CHIP . solid corner-tag, used in UI cards
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.625rem;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chip--gold { background: var(--accent); color: var(--gold-900); }
.chip--ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.chip--neutral { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border-2); }

/* ============================================================
   COMPONENT: BUTTON
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.375rem;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--t-base),
    color var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-fast);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 80ms; }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn .material-symbols-outlined {
  font-size: 1rem;
  transition: transform var(--t-base);
}
.btn:hover .material-symbols-outlined { transform: translateX(3px); }

/* Primary button: bright brand gold fill with deep navy-brown text in BOTH
   themes. Lock to the brightest gold (--secondary-500) so Lite never dims
   to muddy olive, and lock the text/icon to --secondary-900 so it never
   inherits a lighter body color and clashes white-on-yellow. */
.btn--primary {
  background: var(--secondary-500);
  color: var(--secondary-900);
  border: 1px solid var(--secondary-500);
}
.btn--primary:hover {
  background: var(--secondary-300);
  color: var(--secondary-900);
  border-color: var(--secondary-300);
  box-shadow: 0 8px 24px -8px rgba(226, 189, 65, 0.55);
}
.btn--primary .material-symbols-outlined { color: inherit; }

.btn--secondary { background: transparent; color: var(--text); border: 1px solid var(--accent); }
.btn--secondary:hover {
  background: var(--secondary-500);
  color: var(--secondary-900);
  border-color: var(--secondary-500);
  box-shadow: 0 8px 24px -8px rgba(226, 189, 65, 0.45);
}
.btn--secondary:hover .material-symbols-outlined { color: inherit; }

.btn--ghost { background: transparent; color: var(--text); border: 1px solid transparent; padding-inline: 1rem; }
.btn--ghost:hover { color: var(--accent); }

.btn--lg { padding: 1.0625rem 1.875rem; font-size: 1rem; }

/* ============================================================
   COMPONENT: TOPBAR
   ============================================================ */
/* Topbar stays dark in both themes (mirrors the in-app HAVEN256 chrome) */
.topbar {
  position: sticky; top: 0; z-index: 50;
  padding-block: 1rem;
  background: rgba(15, 19, 26, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(230, 233, 236, 0.08);
  color: var(--neutral-100);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--t-base), transform var(--t-base);
}

/* ---- Intro animation (runs once, on first paint) ----
   Logo slides in from the left, nav items cascade up one after another,
   CTA fades in last, and a gold underline sweep crosses beneath the topbar. */
.is-ready .topbar__brand {
  animation: navBrandIn 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.is-ready .topbar__nav a {
  animation: navItemIn 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.is-ready .topbar__nav a:nth-child(1) { animation-delay: 180ms; }
.is-ready .topbar__nav a:nth-child(2) { animation-delay: 260ms; }
.is-ready .topbar__nav a:nth-child(3) { animation-delay: 340ms; }
.is-ready .topbar__nav a:nth-child(4) { animation-delay: 420ms; }
.is-ready .topbar__cta {
  animation: navItemIn 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 480ms both;
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
.is-ready .topbar::after {
  animation: navUnderlineSweep 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms forwards;
}
@keyframes navBrandIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes navItemIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes navUnderlineSweep {
  0%   { opacity: 0; transform: scaleX(0); transform-origin: left center; }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1); transform-origin: right center; }
}
@media (prefers-reduced-motion: reduce) {
  .is-ready .topbar__brand,
  .is-ready .topbar__nav a,
  .is-ready .topbar__cta,
  .is-ready .topbar::after { animation: none !important; }
}
.topbar__brand:hover { opacity: 0.85; transform: translateY(-1px); }
.topbar__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.topbar__logo-svg { display: block; height: 2rem; width: auto; }

.topbar__nav {
  display: flex;
  gap: 2.5rem;
  align-self: stretch;
}
@media (max-width: 56em) { .topbar__nav { display: none; } }
.topbar__nav a {
  display: inline-flex;
  align-items: center;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-200);
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: color var(--t-base), border-bottom-color var(--t-base);
}
.topbar__nav a.is-active {
  color: var(--neutral-100);
  border-bottom-color: var(--accent);
}
.topbar__nav a:hover { color: #FFFFFF; border-bottom-color: var(--accent); }
.topbar__nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.topbar__cta { display: inline-flex; align-items: center; gap: 0.75rem; }
@media (max-width: 56em) {
  .topbar__cta > .btn { display: none; }
}

/* ============================================================
   COMPONENT: GRID-BG . subtle technical grid backdrop
   ============================================================ */
.grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(230, 233, 236, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 233, 236, 0.04) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 0%, transparent 90%);
  pointer-events: none;
}

/* ============================================================
   COMPONENT: UI-CARD . fake product UI for hero artwork
   ============================================================ */
.ui-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(226, 189, 65, 0.04);
  font-family: 'Roboto', sans-serif;
}
.ui-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(10, 13, 18, 0.4);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-mono-xs);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ui-card__head-l { display: flex; align-items: center; gap: 0.625rem; }
.ui-card__head-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #4CAF50;
  box-shadow: 0 0 6px #4CAF50;
}
.ui-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.ui-card__row {
  display: grid;
  grid-template-columns: 0.6fr 1.2fr 1fr 0.6fr;
  gap: 0.5rem;
  padding-block: 0.625rem;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  border-bottom: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  align-items: center;
  transition: background var(--t-base);
}
.ui-card__row:not(.ui-card__row--head):hover { background: rgba(226, 189, 65, 0.05); }
.ui-card__row:last-child { border-bottom: 0; }
.ui-card__row--head {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border-2);
}
.ui-card__cell--mono {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}
.ui-card__cell--accent { color: var(--accent); font-weight: 500; }

/* ============================================================
   COMPONENT: STAT . big number display
   ============================================================ */
.stat__value {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 2.5cqw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  display: block;
}
.stat__value-em { color: var(--accent); }
.stat__label {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.625rem;
  display: block;
}

/* ============================================================
   COMPONENT: CALLOUT-BOX . small floating spec/diagram
   ============================================================ */
.callout {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.callout__icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.375rem;
  background: rgba(226, 189, 65, 0.08);
  border: 1px solid rgba(226, 189, 65, 0.2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
}
.callout__icon .material-symbols-outlined { font-size: 1.125rem; }
.callout__title {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.callout__value {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text);
  text-transform: uppercase;
  margin-top: 0.125rem;
}

/* ============================================================
   COMPONENT: SECTION HEADER . eyebrow + title pattern
   ============================================================ */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 5cqw, 4rem);
}
.sec-head--centered { align-items: flex-start; margin-inline: 0; }

.eyebrow {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.eyebrow::before {
  content: '';
  width: 1.5rem; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.sec-head--centered .eyebrow::before { display: inline-block; }

.sec-head__title { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; color: var(--text); }
.sec-head__lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 38rem;
  line-height: 1.5;
}

/* ============================================================
   COMPONENT: FOOTER
   ============================================================ */
/* Footer mirrors the topbar: stays dark in both themes so adjacent dark
   sections (events, problem) don't bleed into a same-colored footer.
   Lock the appearance vars to their dark-theme values within this scope so
   text, borders, and the logo stay readable on the dark backdrop. */
.footer {
  background: #0F131A;
  border-top: 4px solid var(--secondary-500);
  padding-block: 4rem 2rem;
  color: var(--neutral-100);
  --text:        var(--neutral-200);
  --text-muted:  var(--primary-200);
  --text-faint:  var(--primary-300);
  --border:      rgba(230, 233, 236, 0.08);
  --surface:     #131923;
  --border-2:    rgba(230, 233, 236, 0.16);
  /* Lock the gold/accent palette to its Nite values so accents in the
     dark-locked footer stay bright in Lite mode (otherwise --accent shifts
     to a darker secondary-700 that reads muddy on this background). */
  --accent:      var(--secondary-500);
  --accent-dim:  var(--secondary-700);
  --gold-500:    var(--secondary-500);
  --gold-300:    var(--secondary-300);
}
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}
@container page (max-width: 56em) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.footer__brand { display: flex; flex-direction: column; gap: 1rem; max-width: 24rem; }
.footer__brand-logo { height: 2rem; width: auto; display: block; }
.footer__brand-copy { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; }
.footer__col h4 {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.footer__col a {
  color: var(--text-muted);
  font-size: 0.9375rem;
  transition: color var(--t-base), padding-left var(--t-base);
  display: inline-block;
}
.footer__col a:hover { color: var(--accent); padding-left: 0.25rem; }
.footer__col a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer__bottom-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__bottom-links a {
  color: var(--text-faint);
  transition: color var(--t-base);
}
.footer__bottom-links a:hover { color: var(--accent); }
.footer__bottom-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.footer__bottom-link-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--text-faint);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--t-base);
}
.footer__bottom-link-btn:hover { color: var(--accent); }
.footer__bottom-link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   PAGE: HOME
   ============================================================ */

/* HERO */
.hero {
  position: relative;
  padding-block: clamp(4rem, 8vh, 8rem) clamp(5rem, 10vh, 9rem);
  overflow: clip;
  isolation: isolate;
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(230, 233, 236, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 233, 236, 0.05) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: radial-gradient(ellipse 60% 50% at 30% 30%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 30% 30%, black 0%, transparent 80%);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(226, 189, 65, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 70%, rgba(44, 63, 93, 0.4), transparent 70%);
}

.hero__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 5rem;
  align-items: center;
  /* Perspective context so .hero__art can rotate as a 2.5D module */
  perspective: 1400px;
}
@container page (max-width: 68em) {
  .hero__layout { grid-template-columns: 1fr; gap: 3rem; }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Sit beneath the artwork: any italic display-headline overshoot tucks
     behind the dashboard rather than floating on top of it. */
  position: relative;
  z-index: 0;
}
.hero__pill { align-self: flex-start; }

.hero__title {
  /* A touch smaller than the raw display scale so both lines sit comfortably
     in the copy column and feel visually balanced against the artwork. */
  font-size: clamp(2.625rem, 1.3rem + 5.2cqw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 14ch;
  /* Italic slab glyphs overshoot their box; give them room before the gap */
  padding-right: 0.5rem;
}
.hero__title-em {
  font-family: 'Roboto Slab', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.98em;            /* near-parity with the sans line; the parent
                                    is already trimmed so it clears the art */
  padding-right: 0.15em;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 36rem;
  line-height: 1.5;
}

/* Body emphasis = same tone as body, heavier weight only. Keeps the eye
   moving through the sentence instead of color-jumping mid-thought, and
   leaves gold reserved for clickable affordances. */
.hero__lede-em {
  /* Inline emphasis: same size and color as the surrounding lede,
     two weight steps heavier (Roboto 500 → 700) to give the closing
     phrase "justice with confidence." a punchier finish. */
  color: inherit;
  font-weight: 700;
}

.hero__cta { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-top: 0.5rem; }

.hero__metrics {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2rem 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.hero__metric { display: flex; flex-direction: column; gap: 0.25rem; }
.hero__metric-value {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}
.hero__metric-label {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* HERO ARTWORK . fake live dashboard.
   Cursor-driven 2.5D tilt: the entire artwork rotates as a rigid module on
   --rx/--ry (set by JS in pointer move). Inner layers translateZ to create
   parallax depth. Perspective lives on .hero__layout. */
.hero__art {
  position: relative;
  z-index: 1;
  --rx: 0;
  --ry: 0;
  --tilt-strength: 1;
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--rx) * 5deg * var(--tilt-strength)))
    rotateX(calc(var(--ry) * -4deg * var(--tilt-strength)));
  /* CSS transition does the smoothing. Direct cursor binding in scripts.js
     sets the latest --rx/--ry on rAF, the cubic-bezier eases between
     values. Inner layers translateZ for layered parallax depth. */
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero__art { transform: none !important; }
}
.hero__dashboard {
  position: relative;
  z-index: 2;
  min-width: 0;          /* let the card shrink with the column it sits in */
  transform: translateZ(20px);
}
.hero__dashboard .ui-card__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hero__dashboard .ui-card__row {
  grid-template-columns: minmax(5.25rem, auto) minmax(7rem, 1fr) minmax(6.5rem, 1fr) minmax(4.5rem, auto) minmax(5.25rem, auto);
  column-gap: 0.875rem;
  min-width: 30rem;       /* preserve the table-feel; scrolls inside the card on tiny screens */
}
.hero__dashboard .ui-card__row > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.hero__art-mini {
  position: absolute;
  z-index: 3;
  background: rgba(27, 35, 48, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 14rem;
}
.hero__art-mini--top    { top: -1.75rem; right: -1.5rem; transform: translateZ(60px); }
.hero__art-mini--bottom { bottom: -1.75rem; left: -1.5rem; transform: translateZ(48px); }
.hero__art-mini {
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.hero__art-mini--top:hover {
  transform: translateZ(70px) translateY(-3px) scale(1.02);
  border-color: rgba(226, 189, 65, 0.45);
  box-shadow: 0 36px 64px -20px rgba(0, 0, 0, 0.55);
}
.hero__art-mini--bottom:hover {
  transform: translateZ(58px) translateY(-3px) scale(1.02);
  border-color: rgba(226, 189, 65, 0.45);
  box-shadow: 0 36px 64px -20px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .hero__art-mini--top,
  .hero__art-mini--bottom { transform: none !important; }
}
@container page (max-width: 68em) {
  .hero__art-mini { display: none; }
}

.hero__art-mini-label {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero__art-mini-value {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero__art-mini-value-em { color: inherit; }
.hero__art-mini-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4CAF50;
}
.hero__art-mini-trend .material-symbols-outlined { font-size: 0.875rem; }

/* PROBLEM section . bg-2 strip; bookend utility on the markup adds gold
   gradient strokes at top + bottom */
.problem { background: var(--bg-2); }
.problem__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
@container page (max-width: 56em) { .problem__layout { grid-template-columns: 1fr; gap: 3rem; } }

.problem__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.problem__title-em {
  display: block;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Roboto Slab', Georgia, serif;
  font-style: italic;
  font-weight: 600;
}
.problem__body { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.6; }
.problem__signoff {
  margin-top: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(226, 189, 65, 0.05);
  border-left: 2px solid var(--accent);
  border-radius: 0 0.375rem 0.375rem 0;
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.problem__visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.problem__card {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.problem__card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.4);
}
.problem__card--solution:hover {
  border-color: rgba(226, 189, 65, 0.5);
  box-shadow: 0 24px 48px -16px rgba(226, 189, 65, 0.18);
}
.problem__card-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.375rem;
  background: rgba(229, 57, 53, 0.1);
  border: 1px solid rgba(229, 57, 53, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: #E53935;
}
.problem__card-icon .material-symbols-outlined { font-size: 1.125rem; }
.problem__card-title {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.problem__card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.problem__card-list li {
  color: var(--text-muted);
  font-size: 0.9375rem;
  padding-left: 1rem;
  position: relative;
}
.problem__card-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.625rem;
  width: 0.375rem; height: 1px;
  background: var(--text-faint);
}

/* PRODUCT INTRO section */
.product {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.product::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: url('img/hero/home.jpg') center / cover no-repeat;
  opacity: 0.18;
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  pointer-events: none;
}
.product::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(15, 19, 26, 0.70) 0%,
      rgba(15, 19, 26, 0.45) 45%,
      rgba(15, 19, 26, 0.10) 80%,
      transparent 100%);
  pointer-events: none;
}
:root[data-theme="light"] .product::after {
  background:
    radial-gradient(ellipse 80% 55% at 50% 70%,
      rgba(230, 233, 236, 0.78) 0%,
      rgba(230, 233, 236, 0.50) 45%,
      rgba(230, 233, 236, 0.12) 80%,
      transparent 100%);
}
.product__head { max-width: 56rem; margin-bottom: 4rem; }
.product__title {
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
  max-width: 22ch;
}
.product__title-em { color: var(--accent); }
.product__lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 44rem;
  line-height: 1.55;
}

.product__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@container page (max-width: 56em) { .product__grid { grid-template-columns: 1fr; } }

.product-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base),
    background var(--t-base);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 189, 65, 0.4);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
}
.product-card:hover .product-card__icon {
  background: rgba(226, 189, 65, 0.16);
  border-color: rgba(226, 189, 65, 0.45);
}
.product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 60%);
  transition: background var(--t-base);
}
.product-card:hover::before {
  background: linear-gradient(90deg, var(--accent) 0%, transparent 90%);
}
.product-card__num {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.product-card__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.375rem;
  background: rgba(226, 189, 65, 0.08);
  border: 1px solid rgba(226, 189, 65, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 0.25rem;
  transition: background var(--t-base), border-color var(--t-base);
}
.product-card__icon .material-symbols-outlined { font-size: 1.375rem; }
.product-card__title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.product-card__copy { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; }

.product__cta { margin-top: 3rem; display: flex; justify-content: center; }

/* EVENTS strip */
.events { background: var(--bg-2); }
.events__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}
@container page (max-width: 56em) { .events__layout { grid-template-columns: 1fr; gap: 2.5rem; } }

.events__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.events__title { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.05; }
.events__title-em { color: var(--accent); font-style: italic; font-family: 'Roboto Slab', serif; font-weight: 600; }
.events__copy p { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.55; max-width: 38rem; }

.event-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  transition:
    transform var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base);
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 189, 65, 0.4);
  box-shadow: 0 36px 64px -16px rgba(0, 0, 0, 0.6);
}
.event-card:hover .event-card__media img {
  transform: scale(1.04);
}
.event-card__media {
  aspect-ratio: 16/9;
  background:
    linear-gradient(180deg, transparent 50%, rgba(15,19,26,0.6) 100%),
    radial-gradient(ellipse 100% 60% at 60% 50%, rgba(226,189,65,0.18), transparent 70%),
    linear-gradient(180deg, #2C3F5D, #0F131A);
  position: relative;
  overflow: hidden;
}
.event-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.event-card__body { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.625rem; }
.event-card__date {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.event-card__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.event-card__location {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.event-card__location .material-symbols-outlined { font-size: 1rem; color: var(--accent); }
.event-card__cta { margin-top: 0.5rem; align-self: flex-start; }

/* ABOUT strip */
.about__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  /* Perspective lives on the parent so .about__visual itself can rotate in 3D. */
  perspective: 1400px;
}
@container page (max-width: 56em) { .about__layout { grid-template-columns: 1fr; } }

/* About visual . in-product "Custody Hub" preview echoing the live dashboard.
   The 2.5D tilt: this whole backing plate rotates as one rigid module on the
   cursor's --rx/--ry; the parent (.about__layout) supplies perspective so the
   rotation reads as 3D. Inner elements get translateZ for parallax depth. */
.about__visual {
  position: relative;
  border-radius: 0.375rem;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(226, 189, 65, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 100%, rgba(44, 63, 93, 0.55), transparent 65%),
    linear-gradient(160deg, #171E2A 0%, #0F131A 100%);
  box-shadow:
    inset 0 1px 0 rgba(226, 189, 65, 0.10),
    0 30px 60px -25px rgba(0, 0, 0, 0.50);
  --rx: 0;
  --ry: 0;
  --tilt-strength: 1;
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--rx) * 7deg * var(--tilt-strength)))
    rotateX(calc(var(--ry) * -5deg * var(--tilt-strength)));
  transition:
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.about__visual:hover {
  /* Shadow follows the lift so the plate feels grounded while it tilts. */
  box-shadow:
    inset 0 1px 0 rgba(226, 189, 65, 0.16),
    0 50px 80px -25px rgba(0, 0, 0, 0.60);
}
@media (prefers-reduced-motion: reduce) {
  .about__visual { transform: none !important; }
}
:root[data-theme="light"] .about__visual {
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(142, 117, 21, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 100%, rgba(44, 63, 93, 0.10), transparent 65%),
    linear-gradient(160deg, #E6E9EC 0%, #CDD5D9 100%);
  box-shadow:
    inset 0 1px 0 rgba(142, 117, 21, 0.18),
    0 30px 60px -25px rgba(0, 0, 0, 0.18);
}

.hub-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.75rem;
  transform-style: preserve-3d;
}
/* Z-stacked layers parallax inside the tilted plate. */
.hub-preview__card   { transform: translateZ(24px); }
.hub-preview__head   { transform: translateZ(40px); }
.hub-preview__filter { transform: translateZ(56px); }
@media (prefers-reduced-motion: reduce) {
  .hub-preview__card,
  .hub-preview__head,
  .hub-preview__filter { transform: none !important; }
}

.hub-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.hub-preview__title {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.hub-preview__filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.625rem;
  background: rgba(15, 19, 26, 0.5);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
:root[data-theme="light"] .hub-preview__filter {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(32, 35, 38, 0.10);
}
.hub-preview__filter-label { color: var(--text-faint); font-size: 0.5625rem; }
.hub-preview__filter-value { color: var(--text); font-weight: 700; }
.hub-preview__filter .material-symbols-outlined { font-size: 0.95rem; color: var(--text-muted); }

.hub-preview__card {
  background: rgba(15, 19, 26, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] .hub-preview__card {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(32, 35, 38, 0.10);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.18);
}

.hub-preview__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.hub-preview__card-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
}
.hub-preview__card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.hub-preview__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.55rem;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 0.375rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}
.hub-preview__chip:hover { background: var(--accent); color: var(--secondary-900); }
.hub-preview__chip .material-symbols-outlined { font-size: 0.875rem; color: var(--accent); transition: color var(--t-base); }
.hub-preview__chip:hover .material-symbols-outlined { color: var(--secondary-900); }
.hub-preview__search {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  background: rgba(15, 19, 26, 0.5);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
:root[data-theme="light"] .hub-preview__search { background: rgba(255, 255, 255, 0.85); }
.hub-preview__search .material-symbols-outlined { font-size: 0.875rem; }

.hub-preview__table {
  display: flex;
  flex-direction: column;
}
.hub-preview__row {
  display: grid;
  grid-template-columns:
    1.6rem
    minmax(0, 1.4fr)
    minmax(0, 1fr)
    minmax(0, 1.6fr)
    minmax(0, 1fr)
    1.5rem
    1.5rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.875rem;
  border-bottom: 1px solid var(--border);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: background var(--t-base);
}
.hub-preview__row:last-child { border-bottom: 0; }
.hub-preview__row:not(.hub-preview__row--head):hover { background: rgba(226, 189, 65, 0.05); }
.hub-preview__row--head {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  background: rgba(15, 19, 26, 0.4);
  border-bottom: 1px solid var(--border-2);
}
:root[data-theme="light"] .hub-preview__row--head { background: rgba(32, 35, 38, 0.04); }

.hub-preview__col-actions { display: inline-flex; justify-content: center; }

.hub-preview__status {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.hub-preview__status .material-symbols-outlined { font-size: 0.875rem; }
.hub-preview__status--paused { background: #E53935; box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15); }
.hub-preview__status--closed { background: #2D6CDF; box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.15); }
.hub-preview__status--active { background: #2E7D32; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15); }

.hub-preview__case {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-preview__chev { font-size: 0.95rem !important; color: var(--text-faint); }
.hub-preview__date { color: var(--text-faint); white-space: nowrap; }
.hub-preview__date--empty { color: rgba(124, 137, 156, 0.4); }

.hub-preview__timeline {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.18rem;
}
.hub-preview__timeline i {
  height: 0.625rem;
  background: rgba(230, 233, 236, 0.10);
  border-radius: 1px;
}
:root[data-theme="light"] .hub-preview__timeline i { background: rgba(32, 35, 38, 0.10); }
.hub-preview__timeline i.is-active { background: #2E7D32; }
.hub-preview__timeline i.is-closed { background: #2D6CDF; }

.hub-preview__icon-btn {
  width: 1.5rem; height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 0.375rem;
  color: var(--accent);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), transform var(--t-fast);
}
.hub-preview__icon-btn:hover { background: var(--accent); color: var(--secondary-900); transform: translateY(-1px); }
.hub-preview__icon-btn .material-symbols-outlined { font-size: 0.875rem; }
.hub-preview__icon-btn--accent { background: var(--accent); color: var(--secondary-900); }

.hub-preview__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--border);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
}
.hub-preview__page {
  min-width: 1.25rem;
  padding: 0.2rem 0.4rem;
  text-align: center;
  color: var(--text-faint);
  border-radius: 0.375rem;
}
.hub-preview__page--active {
  background: var(--accent);
  color: var(--secondary-900);
  font-weight: 700;
}

/* Below 56em the hub-preview drops the date columns to keep rows readable */
@media (max-width: 56em) {
  .hub-preview__row {
    grid-template-columns:
      1.5rem
      minmax(0, 1.2fr)
      minmax(0, 1.6fr)
      1.5rem
      1.5rem;
  }
  .hub-preview__row > :nth-child(3),
  .hub-preview__row > :nth-child(5) { display: none; }
}

.about__copy { display: flex; flex-direction: column; gap: 1.5rem; }
.about__title { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; }
.about__title-em { color: var(--accent); font-style: italic; font-family: 'Roboto Slab', serif; font-weight: 600; }
.about__body p { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.6; }
.about__body p + p { margin-top: 1.25em; }

/* HOW WE WORK strip */
.how { background: var(--bg-2); }

.phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  position: relative;
}
@container page (max-width: 56em) { .phases { grid-template-columns: 1fr; } }

.phase {
  position: relative;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.phase--active { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(226, 189, 65, 0.4); }

.phase__num {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.phase__label {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.phase__title { font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: -0.005em; }
.phase__copy { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; }

/* CTA / Final */
.final {
  position: relative;
  padding-block: clamp(5rem, 10cqw, 9rem);
  overflow: clip;
  isolation: isolate;
}
.final > .container {
  position: relative;
  z-index: 1;
}
.final::before {
  content: '';
  position: absolute; inset: 0; z-index: -4;
  background: url('img/hero/cta.jpg') center / cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: normal;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  pointer-events: none;
}
.final__media {
  position: absolute; inset: 0; z-index: -3;
  background: url('img/hero/cta.jpg') center / cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  pointer-events: none;
}
:root[data-theme="light"] .final__media {
  opacity: 0.35;
  mix-blend-mode: multiply;
}
.final::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(15, 19, 26, 0.70) 0%,
      rgba(15, 19, 26, 0.45) 45%,
      rgba(15, 19, 26, 0.10) 80%,
      transparent 100%);
  pointer-events: none;
}
:root[data-theme="light"] .final::after {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(230, 233, 236, 0.88) 0%,
      rgba(230, 233, 236, 0.65) 45%,
      rgba(230, 233, 236, 0.25) 80%,
      transparent 100%);
}
.final__glow {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(226, 189, 65, 0.12), transparent 70%);
}
.final__eyebrow {
  margin-bottom: 1rem;
}
.final__title {
  font-size: var(--fs-h1);
  letter-spacing: -0.025em;
  line-height: 1;
  max-width: 20ch;
  margin: 0 0 1.5rem;
}
.final__title-em {
  font-family: 'Roboto Slab', serif;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.final__lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 36rem;
  margin: 0 0 2.5rem;
}
.final__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-start; }

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */
:root[data-theme="light"] {
  --bg:           var(--neutral-200);
  --bg-2:         var(--neutral-100);
  --bg-3:         var(--neutral-300);
  --surface:      #FFFFFF;
  --surface-2:    var(--neutral-100);
  --border:       rgba(32, 35, 38, 0.08);
  --border-2:     rgba(32, 35, 38, 0.14);
  --border-strong:rgba(32, 35, 38, 0.28);
  --text:         var(--neutral-700);
  --text-heading: var(--primary-700);
  --text-muted:   var(--primary-500);
  --text-dim:     var(--primary-400);
  --text-faint:   var(--neutral-800);
  --accent:       var(--secondary-700);
  --accent-dim:   var(--secondary-900);
  /* Shift the gradient gold aliases so text gradients stay readable on light bg */
  --gold-500:     var(--secondary-800);
  --gold-300:     var(--secondary-700);
}
/* Topbar stays dark even in light theme to match the in-app chrome */
:root[data-theme="light"] .topbar {
  /* Stay glassy in Lite but darken what bleeds through so the chrome doesn't
     read as muddy gray. High alpha + brightness(0.45) on the backdrop knocks
     the white page down before the navy tint, keeping the blur visible. */
  background: rgba(15, 19, 26, 0.92);
  backdrop-filter: saturate(160%) blur(14px) brightness(0.45);
  -webkit-backdrop-filter: saturate(160%) blur(14px) brightness(0.45);
  border-bottom-color: rgba(15, 19, 26, 0.40);
  color: var(--neutral-100);
}
:root[data-theme="light"] .topbar__nav a { color: var(--primary-200); }
:root[data-theme="light"] .topbar__nav a.is-active { color: var(--neutral-100); }
:root[data-theme="light"] .topbar__nav a:hover { color: #FFFFFF; }
/* Buttons now use a single theme-agnostic rule above; no Lite override needed. */
:root[data-theme="light"] .btn--secondary { color: var(--neutral-900); }

/* Logo swap: topbar AND footer are now both locked dark, so always Nite. */
.topbar__logo-svg--lite { display: none; }
.topbar__logo-svg--nite { display: block; }
.footer__brand-logo--lite { display: none; }
.footer__brand-logo--nite { display: block; }

/* Lede in Lite: deep readable blue body. Em inherits the same color and is
   distinguished by weight alone, per the unified emphasis system. */

/* Glass-tinted floating callouts in Lite mode */
:root[data-theme="light"] .hero__art-mini {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(32, 35, 38, 0.10);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.18);
}

/* UI card head: dark overlay reads as muddy gray on the white card in Lite,
   so swap to a soft tinted strip with a subtle bottom rule. */
:root[data-theme="light"] .ui-card__head {
  background: linear-gradient(180deg, var(--neutral-200) 0%, var(--neutral-100) 100%);
  border-bottom-color: var(--border-2);
  color: var(--primary-700);
}

/* Status indicators (theme-aware so contrast holds in both Nite + Lite) */
.status--ok      { color: #4CAF50; }
.status--pending { color: var(--accent); }
.status--closed  { color: var(--text-faint); }
:root[data-theme="light"] .status--ok { color: #2E7D32; }

/* Lite-mode contrast: bright-gold rgba decorations need darker amber to read
   on the cool light bg; pill, callout, product-card and contact-point icons. */
:root[data-theme="light"] .pill {
  background: rgba(142, 117, 21, 0.10);
  border-color: rgba(142, 117, 21, 0.40);
}
:root[data-theme="light"] .callout__icon,
:root[data-theme="light"] .product-card__icon,
:root[data-theme="light"] .contact__point-icon {
  background: rgba(142, 117, 21, 0.10);
  border-color: rgba(142, 117, 21, 0.40);
}
:root[data-theme="light"] .problem__signoff { background: rgba(142, 117, 21, 0.07); }

/* ============================================================
   COMPONENT: BG-MEDIA . placeholder for looping bg videos
   Drop a <video class="bg-media__video" autoplay muted loop playsinline>
   <source src="..." type="video/mp4"></video> inside any .bg-media wrapper
   ============================================================ */
.bg-media {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-media__video,
.bg-media__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Cloud imagery as subtle atmospheric texture (per haven256.com pattern):
   low opacity + blend mode + soft top/bottom mask so edges fade into the
   surrounding section color. Hero overrides this for a featured photo. */
.bg-media__poster {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
}
:root[data-theme="light"] .bg-media__poster {
  /* Lite source images are very pale; need higher opacity for the gold linework
     to show through after multiply blends with the light bg. */
  opacity: 0.55;
  mix-blend-mode: multiply;
}
/* Overlay stays minimal/transparent for atmospheric sections (image is faint) */
.bg-media__overlay {
  position: absolute; inset: 0;
  background: transparent;
}

/* ------------------------------------------------------------
   HERO TREATMENT — shared by all three page heroes.
   One raw asset (jpg/mp4) per page, theme-tinted via overlay.
   Drop a <video class="bg-media__video" autoplay muted loop
   playsinline><source src="img/hero/home.mp4" type="video/mp4">
   </video> inside .bg-media to replace the still poster.
   ------------------------------------------------------------ */
/* Shared mask + filter + alignment for poster + video */
.bg-media--hero .bg-media__poster,
.bg-media--hero .bg-media__video,
.bg-media--platform-hero .bg-media__poster,
.bg-media--platform-hero .bg-media__video,
.bg-media--about-hero .bg-media__poster,
.bg-media--about-hero .bg-media__video,
.bg-media--contact-hero .bg-media__poster,
.bg-media--contact-hero .bg-media__video {
  --asset-opacity: 0.65;
  mix-blend-mode: normal;
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}
.bg-media--about-hero .bg-media__poster,
.bg-media--about-hero .bg-media__video {
  mask-image: linear-gradient(to bottom, #000 0%, #000 15%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 15%, transparent 100%);
  filter: saturate(0.95);
  background-position: center top;
  object-position: center top;
}
:root[data-theme="light"] .bg-media--hero .bg-media__poster,
:root[data-theme="light"] .bg-media--hero .bg-media__video,
:root[data-theme="light"] .bg-media--platform-hero .bg-media__poster,
:root[data-theme="light"] .bg-media--platform-hero .bg-media__video,
:root[data-theme="light"] .bg-media--about-hero .bg-media__poster,
:root[data-theme="light"] .bg-media--about-hero .bg-media__video,
:root[data-theme="light"] .bg-media--contact-hero .bg-media__poster,
:root[data-theme="light"] .bg-media--contact-hero .bg-media__video {
  --asset-opacity: 0.55;
  filter: brightness(1.08) saturate(0.85);
}

/* Poster shows immediately at the full target opacity */
.bg-media--hero .bg-media__poster,
.bg-media--platform-hero .bg-media__poster,
.bg-media--about-hero .bg-media__poster,
.bg-media--contact-hero .bg-media__poster {
  opacity: var(--asset-opacity);
}

/* Video starts hidden and crossfades in over the poster once it's actually
   playing. JS adds .is-loaded on the video's first 'playing' event. */
.bg-media--hero .bg-media__video,
.bg-media--platform-hero .bg-media__video,
.bg-media--about-hero .bg-media__video,
.bg-media--contact-hero .bg-media__video {
  opacity: 0;
  transition: opacity 900ms ease;
  will-change: opacity;
}
.bg-media--hero .bg-media__video.is-loaded,
.bg-media--platform-hero .bg-media__video.is-loaded,
.bg-media--about-hero .bg-media__video.is-loaded,
.bg-media--contact-hero .bg-media__video.is-loaded {
  opacity: var(--asset-opacity);
}

/* Theme-aware color wash sits above the asset. Dark wash for nite,
   light wash for lite — same asset reads correctly in both themes.
   Includes a left-weighted scrim so the headline copy column stays legible
   over busy imagery without dimming the right-hand artwork. */
.bg-media--hero .bg-media__overlay,
.bg-media--platform-hero .bg-media__overlay,
.bg-media--about-hero .bg-media__overlay,
.bg-media--contact-hero .bg-media__overlay {
  background:
    linear-gradient(90deg, rgba(15,19,26,0.70) 0%, rgba(15,19,26,0.45) 35%, rgba(15,19,26,0.10) 65%, transparent 100%),
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(15,19,26,0.10), rgba(15,19,26,0.45) 80%),
    linear-gradient(180deg, rgba(15,19,26,0.30) 0%, rgba(15,19,26,0.60) 60%, rgba(15,19,26,0.85) 100%);
}
.bg-media--about-hero .bg-media__overlay {
  background:
    linear-gradient(90deg, rgba(15,19,26,0.70) 0%, rgba(15,19,26,0.45) 35%, rgba(15,19,26,0.10) 65%, transparent 100%),
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(15,19,26,0.10), rgba(15,19,26,0.45) 80%),
    linear-gradient(180deg, rgba(15,19,26,0.30) 0%, rgba(15,19,26,0.30) 100%);
}
:root[data-theme="light"] .bg-media--hero .bg-media__overlay,
:root[data-theme="light"] .bg-media--platform-hero .bg-media__overlay,
:root[data-theme="light"] .bg-media--about-hero .bg-media__overlay,
:root[data-theme="light"] .bg-media--contact-hero .bg-media__overlay {
  background:
    linear-gradient(90deg, rgba(205,213,217,0.75) 0%, rgba(205,213,217,0.50) 35%, rgba(205,213,217,0.15) 65%, transparent 100%),
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(205,213,217,0.10), rgba(205,213,217,0.55) 80%),
    linear-gradient(180deg, rgba(205,213,217,0.35) 0%, rgba(205,213,217,0.70) 60%, rgba(205,213,217,0.92) 100%);
}
:root[data-theme="light"] .bg-media--about-hero .bg-media__overlay {
  background:
    linear-gradient(90deg, rgba(205,213,217,0.75) 0%, rgba(205,213,217,0.50) 35%, rgba(205,213,217,0.15) 65%, transparent 100%),
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(205,213,217,0.10), rgba(205,213,217,0.55) 80%),
    linear-gradient(180deg, rgba(205,213,217,0.35) 0%, rgba(205,213,217,0.35) 100%);
}

/* Single raw asset per hero. Swap to .mp4 by adding a <video> child. */
.bg-media--hero          .bg-media__poster { background-image: url('img/hero/home.jpg'); }
.bg-media--platform-hero .bg-media__poster { background-image: url('img/hero/platform.jpg'); }
.bg-media--about-hero    .bg-media__poster { background-image: url('img/hero/about.jpg'); }
.bg-media--contact-hero  .bg-media__poster { background-image: url('img/hero/about.jpg'); }

/* Drop the hero video on mobile/tablet — preserves cellular bandwidth and
   lets the still poster carry the hero. Matches the 56em breakpoint where
   the hero layout already collapses to single column.
   Also drops the video for users who request reduced motion. */
@media (max-width: 56em) {
  .bg-media__video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-media__video { display: none; }
}

/* Atmospheric (non-hero) section posters — single image, works in both themes. */
.bg-media--events .bg-media__poster { background-image: url('img/hero/home.jpg'); }

/* ============================================================
   COMPONENT: THEME SWITCHER (in footer)
   ============================================================ */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
}
.theme-switcher__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), transform var(--t-fast);
}
.theme-switcher__btn:hover { transform: translateY(-1px); }
.theme-switcher__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-switcher__btn .material-symbols-outlined { font-size: 0.95rem; }
.theme-switcher__btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--gold-900);
}
.theme-switcher__btn:not([aria-pressed="true"]):hover { color: var(--text); }
/* Active (gold) button brightens on hover to match the inactive button's
   brightening behavior, so both halves of the pill respond to the cursor. */
.theme-switcher__btn[aria-pressed="true"]:hover {
  background: var(--gold-300);
}

/* ============================================================
   COMPONENT: COOKIE CONSENT
   ============================================================ */
.consent-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: min(72rem, calc(100vw - 2rem));
  margin-inline: auto;
  z-index: 58;
  padding: 1.25rem;
  border: 1px solid rgba(226, 189, 65, 0.28);
  border-radius: 0.5rem;
  background:
    linear-gradient(135deg, rgba(226, 189, 65, 0.12), transparent 44%),
    rgba(15, 19, 26, 0.96);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
:root[data-theme="light"] .consent-banner {
  border-color: rgba(135, 115, 46, 0.22);
  background:
    linear-gradient(135deg, rgba(226, 189, 65, 0.10), transparent 48%),
    rgba(248, 247, 242, 0.97);
  box-shadow: 0 26px 60px -24px rgba(32, 35, 38, 0.22);
}
.consent-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.5rem;
  align-items: end;
}
.consent-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.consent-banner__eyebrow {
  justify-content: flex-start;
  margin: 0;
}
.consent-banner__title {
  margin: 0;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.consent-banner__text {
  margin: 0;
  color: var(--text-muted);
  max-width: 58rem;
  font-size: 0.95rem;
  line-height: 1.65;
}
.consent-banner__actions,
.consent-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.consent-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  padding: 0.775rem 1rem;
  min-height: 2.875rem;
  background: transparent;
  color: var(--text);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--t-base),
    color var(--t-base),
    border-color var(--t-base),
    transform var(--t-fast),
    box-shadow var(--t-base);
}
.consent-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(226, 189, 65, 0.44);
}
.consent-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.consent-btn--subtle {
  background: rgba(230, 233, 236, 0.02);
}
.consent-btn--subtle:hover {
  background: rgba(230, 233, 236, 0.06);
}
.consent-btn--surface {
  background: rgba(230, 233, 236, 0.05);
}
.consent-btn--surface:hover {
  background: rgba(230, 233, 236, 0.10);
}
.consent-btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--gold-900);
  box-shadow: 0 14px 30px -18px rgba(226, 189, 65, 0.6);
}
.consent-btn--accent:hover {
  background: var(--gold-300);
  border-color: var(--gold-300);
}
:root[data-theme="light"] .consent-btn--subtle {
  background: rgba(32, 35, 38, 0.02);
}
:root[data-theme="light"] .consent-btn--subtle:hover {
  background: rgba(32, 35, 38, 0.06);
}
:root[data-theme="light"] .consent-btn--surface {
  background: rgba(32, 35, 38, 0.045);
}
:root[data-theme="light"] .consent-btn--surface:hover {
  background: rgba(32, 35, 38, 0.08);
}
.consent-dialog-wrap {
  position: fixed;
  inset: 0;
  z-index: 81;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.consent-banner[hidden],
.consent-dialog-wrap[hidden] {
  display: none !important;
}
.consent-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 16, 0.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.consent-dialog {
  position: relative;
  width: min(42rem, 100%);
  max-height: min(88vh, 48rem);
  overflow: auto;
  border: 1px solid var(--border-2);
  border-radius: 0.625rem;
  background:
    linear-gradient(135deg, rgba(226, 189, 65, 0.08), transparent 52%),
    var(--surface);
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.7);
  z-index: 1;
}
:root[data-theme="light"] .consent-dialog {
  background:
    linear-gradient(135deg, rgba(226, 189, 65, 0.08), transparent 56%),
    rgba(255, 255, 252, 0.98);
  box-shadow: 0 28px 66px -26px rgba(32, 35, 38, 0.26);
}
.consent-dialog__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-base), background var(--t-base), transform var(--t-fast);
}
.consent-dialog__close:hover {
  color: var(--text);
  background: rgba(230, 233, 236, 0.05);
  transform: rotate(90deg);
}
:root[data-theme="light"] .consent-dialog__close:hover {
  background: rgba(32, 35, 38, 0.05);
}
.consent-dialog__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.consent-dialog__close .material-symbols-outlined { font-size: 1.25rem; }
.consent-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}
.consent-dialog__eyebrow {
  justify-content: flex-start;
  margin: 0;
}
.consent-dialog__title {
  margin: 0;
  font-size: clamp(1.625rem, 3vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.consent-dialog__text,
.consent-dialog__note {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.65;
}
.consent-dialog__note { font-size: 0.875rem; }
.consent-categories {
  display: grid;
  gap: 0.875rem;
}
.consent-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border-2);
  border-radius: 0.5rem;
  background:
    linear-gradient(135deg, rgba(226, 189, 65, 0.06), transparent 72%),
    var(--bg-2);
}
.consent-category--toggle { cursor: pointer; }
.consent-category__copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consent-category__copy h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}
.consent-category__copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.consent-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(226, 189, 65, 0.14);
  color: var(--accent);
  font-family: 'Roboto Mono', monospace;
  font-size: var(--fs-mono-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.consent-switch {
  position: relative;
  display: inline-flex;
  width: 3.25rem;
  height: 1.9rem;
  flex: 0 0 auto;
}
.consent-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.consent-switch__track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(124, 137, 156, 0.25);
  border: 1px solid rgba(124, 137, 156, 0.4);
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.consent-switch__track::after {
  content: '';
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--text-heading);
  transition: transform var(--t-base), background var(--t-base);
}
.consent-switch input:focus-visible + .consent-switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.consent-switch input:checked + .consent-switch__track {
  background: rgba(226, 189, 65, 0.18);
  border-color: rgba(226, 189, 65, 0.42);
}
.consent-switch input:checked + .consent-switch__track::after {
  transform: translateX(1.35rem);
  background: var(--accent);
}

/* ============================================================
   PROBLEM (revised): compact, vertical flow, no wasted space
   ============================================================ */
/* Right column stretches to match the left column, then visual cards
   distribute their height so the column doesn't feel half-empty. */
.problem__layout { align-items: stretch; }

.problem__visual {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  justify-content: space-between;
  grid-template-columns: none; /* override earlier grid */
}

.problem__card {
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  flex: 1 1 0;
  min-height: 6.5rem;
}
.problem__card-icon { width: 2.75rem; height: 2.75rem; }
.problem__card-icon .material-symbols-outlined { font-size: 1.375rem; }
.problem__card-text { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; flex: 1; }
.problem__card-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem 0.875rem;
}
.problem__card-list li {
  padding-left: 0.875rem;
  font-size: 0.9375rem;
}
.problem__card-list li::before { top: 0.6rem; }
.problem__card-copy { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; margin: 0; }

/* HAVEN256 resolution card . gold-accented closing tile */
.problem__card--solution {
  background:
    linear-gradient(135deg, rgba(226, 189, 65, 0.06), transparent 60%),
    var(--surface);
  border-color: rgba(226, 189, 65, 0.40);
  box-shadow: inset 0 1px 0 rgba(226, 189, 65, 0.20);
}
.problem__card-icon--gold {
  background: rgba(226, 189, 65, 0.14);
  border-color: rgba(226, 189, 65, 0.45);
  color: var(--accent);
}
.problem__card-title--gold { color: var(--accent); }
:root[data-theme="light"] .problem__card--solution {
  background:
    linear-gradient(135deg, rgba(142, 117, 21, 0.07), transparent 60%),
    var(--surface);
  border-color: rgba(142, 117, 21, 0.40);
  box-shadow: inset 0 1px 0 rgba(142, 117, 21, 0.18);
}
:root[data-theme="light"] .problem__card-icon--gold {
  background: rgba(142, 117, 21, 0.12);
  border-color: rgba(142, 117, 21, 0.45);
}

.problem__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  color: var(--text-faint);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-block: 0.25rem;
}
.problem__arrow::before,
.problem__arrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-2);
}
.problem__arrow--accent { color: var(--accent); }
.problem__arrow--accent::before,
.problem__arrow--accent::after {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}

/* ============================================================
   EVENTS (revised): grid of multiple events, more prominent
   ============================================================ */
.events {
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: 5rem;
}
.events__layout { display: block; grid-template-columns: none; }
.events__head {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 56rem;
  margin-bottom: clamp(2.5rem, 5cqw, 3.5rem);
}
.events__head .events__title { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.025em; }
.events__head p { color: var(--text-muted); font-size: var(--fs-body-lg); max-width: 44rem; line-height: 1.5; }

.events__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@container page (max-width: 70em) { .events__grid { grid-template-columns: repeat(2, 1fr); } }
@container page (max-width: 44em) { .events__grid { grid-template-columns: 1fr; } }

/* Single-event variant: a wide centered feature card with image left,
   content right. Reads as a featured spotlight, not 1-of-3. */
.events__grid--single {
  display: block;
  max-width: 64rem;
  margin-inline: auto;
}
.events__grid--single .event-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
}
.events__grid--single .event-card__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 22rem;
}
.events__grid--single .event-card__body {
  padding: 2.5rem;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.events__grid--single .event-card__title { font-size: 1.625rem; line-height: 1.15; }
@container page (max-width: 52em) {
  .events__grid--single .event-card { grid-template-columns: 1fr; }
  .events__grid--single .event-card__media { min-height: 16rem; aspect-ratio: 16 / 9; }
}

.event-card { display: flex; flex-direction: column; height: 100%; }
.event-card__body { padding: 1.5rem; flex: 1; }
.event-card__title { font-size: 1.25rem; }

/* ============================================================
   CONTACT section
   ============================================================ */
.contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: 5rem;
}
.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: start;
}
@container page (max-width: 60em) { .contact__layout { grid-template-columns: 1fr; gap: 2.5rem; } }

.contact__copy { display: flex; flex-direction: column; gap: 1.5rem; }
.contact__title {
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: 14ch;
}
.contact__title-em {
  font-family: 'Roboto Slab', serif;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact__lede { color: var(--text-muted); font-size: var(--fs-body-lg); line-height: 1.5; max-width: 32rem; }

.contact__points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.contact__point {
  display: flex; gap: 0.875rem; align-items: flex-start;
  padding: 0.5rem;
  margin: -0.5rem;
  border-radius: 0.375rem;
  transition: background var(--t-base);
}
.contact__point:hover { background: rgba(226, 189, 65, 0.05); }
.contact__point:hover .contact__point-icon { background: rgba(226, 189, 65, 0.18); border-color: rgba(226, 189, 65, 0.45); }
.contact__point-icon {
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  background: rgba(226, 189, 65, 0.08);
  border: 1px solid rgba(226, 189, 65, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: background var(--t-base), border-color var(--t-base);
}
.contact__point-icon .material-symbols-outlined { font-size: 1rem; }
.contact__point-text { display: flex; flex-direction: column; gap: 0.125rem; }
.contact__point-label {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact__point-value { color: var(--text); font-size: 0.9375rem; }

.contact__form {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.4);
}
.contact__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@container page (max-width: 36em) { .contact__form-row { grid-template-columns: 1fr; } }

.contact__field { display: flex; flex-direction: column; gap: 0.4rem; }
.contact__field label {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact__field input,
.contact__field select,
.contact__field textarea {
  font: inherit;
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  color: var(--text);
  outline: none;
  font-size: 0.9375rem;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.contact__field textarea { min-height: 7rem; resize: vertical; }
.contact__field input:hover,
.contact__field select:hover,
.contact__field textarea:hover {
  border-color: var(--border-strong);
}
.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(226, 189, 65, 0.15);
}
.contact__form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.contact__consent {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  background:
    linear-gradient(135deg, rgba(226, 189, 65, 0.10), transparent 68%),
    var(--bg-2);
}
.contact__consent-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
}
.contact__consent-check input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  accent-color: var(--accent);
}
.contact__consent-check input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.contact__consent-copy {
  margin: 0;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.contact__consent-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}
.contact__form-fineprint {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Footer additions */
.footer__bottom-l {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ============================================================
   PAGE: ABOUT
   ============================================================ */
/* About-specific */
.about-hero {
  position: relative;
  padding-block: clamp(4rem, 8vh, 7rem) clamp(6rem, 10vh, 8rem);
  overflow: clip;
  isolation: isolate;
}
.about-hero__glow {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 50% 40% at 50% 30%, rgba(226, 189, 65, 0.10), transparent 70%);
}

/* BG-MEDIA . poster (or video) backdrop. Drop a <video class="bg-media__video" autoplay muted loop playsinline><source src="..."></video> inside .bg-media to replace the still */
.bg-media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.bg-media__video,
.bg-media__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Cloud imagery as subtle atmospheric texture (per haven256.com pattern) */
.bg-media__poster {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
}
:root[data-theme="light"] .bg-media__poster {
  /* Lite source images are very pale; need higher opacity for the gold linework
     to show through after multiply blends with the light bg. */
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.bg-media__overlay {
  position: absolute; inset: 0;
  background: transparent;
}
/* about-hero asset + treatment defined in shared hero block above */
.about-hero__title {
  font-size: var(--fs-h1);
  letter-spacing: -0.03em;
  /* Italic Roboto Slab ascenders extend above the cap height, so a
     line-height of 1 clips the top of italic glyphs (e.g. "to") when
     the title wraps to a second line. 1.1 leaves enough leading for the
     ascender without loosening the headline visibly. */
  line-height: 1.1;
  max-width: 18ch;
  margin: 1.5rem 0;
}
.about-hero__title-em {
  font-family: 'Roboto Slab', serif;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Italic Roboto Slab glyphs lean leftward at the top and rightward at
     the bottom, overshooting their advance box. Without this padding the
     overshoot draws outside the gradient's clip area and renders blank. */
  padding-left: 0.12em;
  padding-right: 0.18em;
  margin-left: -0.12em;
}
.about-hero__lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 36rem;
  margin: 0;
  line-height: 1.5;
}

/* Story section */
.story__layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
}
@container page (max-width: 56em) { .story__layout { grid-template-columns: 1fr; gap: 2rem; } }

.story__eyebrow { position: sticky; top: 6rem; }
.story__body { display: flex; flex-direction: column; gap: 1.5rem; }
.story__body p { color: var(--text-muted); font-size: 1.125rem; line-height: 1.6; }
.story__body p strong { color: var(--text); font-weight: 700; }
.story__body p:first-of-type {
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--text);
}
.story__body p:first-of-type::first-letter {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.6rem 0 0;
  color: var(--accent);
}

/* Principles */
.principles { background: var(--bg-2); }
.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@container page (max-width: 56em) { .principles__grid { grid-template-columns: 1fr; } }

.principle {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.principle__num {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.principle__title { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.principle__copy { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }

/* Team */
.team__head { max-width: 44rem; margin: 0 0 4rem; }
.team {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.team__head .eyebrow { justify-content: flex-start; }
.team__head .eyebrow::before { display: inline-block; }

.team__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}
.team__grid > * { grid-column: span 2; }
.team__grid > *:nth-child(4) { grid-column: 2 / 4; }
.team__grid > *:nth-child(5) { grid-column: 4 / 6; }
@media (max-width: 56em) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .team__grid > *,
  .team__grid > *:nth-child(4),
  .team__grid > *:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 30em) {
  .team__grid { grid-template-columns: 1fr; }
}

.team-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 189, 65, 0.4);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
}
.team-card__portrait {
  aspect-ratio: 4/5;
  position: relative;
  background:
    radial-gradient(ellipse 60% 60% at 40% 30%, rgba(226, 189, 65, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 60% at 70% 70%, rgba(44, 63, 93, 0.4), transparent 60%),
    linear-gradient(180deg, #2C3F5D 0%, #0F131A 100%);
}
.team-card__portrait::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}
.team-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 4rem;
  color: rgba(226, 189, 65, 0.25);
  letter-spacing: -0.04em;
  z-index: 1;
}
.team-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.team-card__role {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: normal;
}
.team-card__name { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.team-card__bio { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.55; }
.team-card__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  z-index: 2;
}
a.team-card { text-decoration: none; color: inherit; }
.team-card__linkedin {
  font-size: 0.75rem;
  font-family: 'Roboto Mono', monospace;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-top: auto;
}

/* How we work . extended */
.how__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 3rem;
}
@container page (max-width: 56em) { .how__layout { grid-template-columns: 1fr; } }

.how__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.how__copy p { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.55; }

/* ============================================================
   PAGE: PLATFORM
   ============================================================ */
/* ---- Platform-page-specific ---- */
.platform-hero {
  position: relative;
  padding-block: clamp(4rem, 8vh, 7rem) clamp(3rem, 6vh, 6rem);
  overflow: clip;
  isolation: isolate;
}
.platform-hero__glow {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(226, 189, 65, 0.10), transparent 70%);
}
.platform-hero__grid {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(to right, rgba(230, 233, 236, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 233, 236, 0.05) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 0%, transparent 80%);
}

/* BG-MEDIA . poster (or video) backdrop. Drop a <video class="bg-media__video" autoplay muted loop playsinline><source src="..."></video> inside .bg-media to replace the still */
.bg-media {
  position: absolute; inset: 0; z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.bg-media__video,
.bg-media__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Cloud imagery as subtle atmospheric texture (per haven256.com pattern) */
.bg-media__poster {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
}
:root[data-theme="light"] .bg-media__poster {
  /* Lite source images are very pale; need higher opacity for the gold linework
     to show through after multiply blends with the light bg. */
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.bg-media__overlay {
  position: absolute; inset: 0;
  background: transparent;
}
/* platform-hero asset + treatment defined in shared hero block above */
.platform-hero__pill { margin-bottom: 1.5rem; }
.platform-hero__title {
  font-size: var(--fs-h1);
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 18ch;
  margin: 0 0 1.5rem;
}
.platform-hero__title-em {
  font-family: 'Roboto Slab', serif;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.platform-hero__lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 38rem;
  margin: 0 0 2.5rem;
  line-height: 1.5;
}

/* Capability deep-dive section: alternating split */
.feature {
  padding-block: clamp(4rem, 7cqw, 7rem);
  border-bottom: 1px solid var(--border);
}
.feature__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@container page (max-width: 56em) { .feature__layout { grid-template-columns: 1fr; } }

.feature--reverse .feature__layout > .feature__copy { order: 2; }
.feature--reverse .feature__layout > .feature__art { order: 1; }
@container page (max-width: 56em) {
  .feature--reverse .feature__layout > .feature__copy,
  .feature--reverse .feature__layout > .feature__art { order: 0; }
}

.feature__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.feature__title { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.05; }
.feature__lede { font-size: var(--fs-body-lg); color: var(--text-muted); line-height: 1.5; max-width: 36rem; }

.feature__bullets {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.feature__bullets li {
  padding-left: 1.75rem;
  position: relative;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}
/* Check bullet: small enough that it should always read as a vivid brand
   mark, so we lock the circle to the bright gold (--secondary-500) in both
   themes instead of letting Lite dim it to muddy olive. The check stroke
   uses the deep navy-brown for crisp contrast on the gold disc, and a soft
   halo lifts it off the surface so it reads as clean rather than flat. */
.feature__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.4rem;
  width: 1.0625rem; height: 1.0625rem;
  border-radius: 50%;
  background: var(--secondary-500);
  box-shadow: 0 0 0 3px rgba(226, 189, 65, 0.16);
  display: inline-block;
}
.feature__bullets li::after {
  content: '';
  position: absolute;
  left: 0.32rem; top: 0.72rem;
  width: 0.4rem; height: 0.2rem;
  border-left: 1.75px solid var(--secondary-900);
  border-bottom: 1.75px solid var(--secondary-900);
  border-bottom-left-radius: 1px;
  transform: rotate(-45deg);
}
:root[data-theme="light"] .feature__bullets li::before {
  /* Slightly stronger halo on white so the gold disc still pops cleanly. */
  box-shadow: 0 0 0 3px rgba(226, 189, 65, 0.22);
}

.feature__art {
  position: relative;
}

/* Specific feature artwork: case dashboard */
.feature-art-cases .ui-card__row { grid-template-columns: 0.4fr 0.5fr 1fr 0.5fr 0.4fr; }

/* Audit trail mock */
.audit-log {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem;
}
.audit-log__entry {
  display: grid;
  grid-template-columns: 0.5fr 1.4fr 1fr;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: rgba(10, 13, 18, 0.5);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  align-items: center;
  transition: border-left-width var(--t-base), background var(--t-base), transform var(--t-base);
}
.audit-log__entry:hover {
  border-left-width: 4px;
  background: rgba(226, 189, 65, 0.06);
  transform: translateX(2px);
}
:root[data-theme="light"] .audit-log__entry {
  /* Clean white card with subtle border instead of dark alpha that reads
     as muddy gray on the light page background. */
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(32, 35, 38, 0.08);
  border-left-color: var(--accent);
  box-shadow: 0 1px 0 rgba(32, 35, 38, 0.04);
}
:root[data-theme="light"] .audit-log__entry:hover {
  background: rgba(226, 189, 65, 0.10);
  border-color: rgba(142, 117, 21, 0.30);
}
.audit-log__time {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.audit-log__action { color: var(--text); }
.audit-log__action strong { color: var(--accent); font-weight: 700; }
.audit-log__user {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-align: right;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Permissions matrix */
.perm-matrix { padding: 1.5rem; }
.perm-matrix__row {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}
.perm-matrix__row--head {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-2);
}
.perm-matrix__role {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.perm-matrix__cell {
  text-align: center;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.875rem;
  color: var(--text-faint);
}
.perm-matrix__cell--yes { color: var(--accent); }
.perm-matrix__cell--dual { color: #4CAF50; font-size: 0.6875rem; letter-spacing: 0.1em; }

/* Multi-chain monitor */
.chain-monitor { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.chain-row {
  display: grid;
  grid-template-columns: 0.6fr 1fr 0.6fr 1fr;
  gap: 0.75rem;
  padding: 0.875rem;
  background: rgba(10, 13, 18, 0.5);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  align-items: center;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.chain-row:hover {
  background: rgba(226, 189, 65, 0.05);
  border-color: rgba(226, 189, 65, 0.35);
  transform: translateX(2px);
}
:root[data-theme="light"] .chain-row {
  /* White card on light page; the dark-alpha glass turns muddy on white. */
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(32, 35, 38, 0.08);
  box-shadow: 0 1px 0 rgba(32, 35, 38, 0.04);
}
:root[data-theme="light"] .chain-row:hover {
  background: rgba(226, 189, 65, 0.10);
  border-color: rgba(142, 117, 21, 0.35);
}
.chain-row__symbol {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.chain-row__symbol-em {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-top: 0.125rem;
}
.chain-row__bar {
  height: 4px;
  background: rgba(230, 233, 236, 0.08);
  border-radius: 0.375rem;
  position: relative;
  overflow: hidden;
}
:root[data-theme="light"] .chain-row__bar { background: rgba(32, 35, 38, 0.10); }
.chain-row__bar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--secondary-500);   /* lock to bright brand gold in both
                                          themes so it reads cleanly, never olive */
  border-radius: 0.375rem;
  width: var(--bar-w, 50%);
}
.chain-row__balance {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 500;
  text-align: right;
}
.chain-row__status {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  justify-content: flex-end;
}
.chain-row__status::before {
  content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: #4CAF50;
  box-shadow: 0 0 4px #4CAF50;
}

/* Security compliance band */
.security {
  background: var(--surface);
  padding-block: clamp(4rem, 7cqw, 7rem);
  border-block: 1px solid var(--border);
}
.security__head { margin-bottom: 3rem; }
.security__title { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.05; max-width: 18ch; margin: 0.875rem 0 0; }
.security__title-em {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Roboto Slab', serif;
  font-style: italic;
  font-weight: 600;
}

.security__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@container page (max-width: 56em) {
  .security__grid { grid-template-columns: 1fr 1fr; }
}

.security__cell {
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: flex-start;
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.security__cell:hover {
  transform: translateY(-3px);
  border-color: rgba(226, 189, 65, 0.4);
}
.security__cell:hover .security__cell-icon {
  background: rgba(226, 189, 65, 0.18);
}
.security__cell-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.375rem;
  background: rgba(226, 189, 65, 0.1);
  border: 1px solid rgba(226, 189, 65, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: background var(--t-base);
}
.security__cell-icon .material-symbols-outlined { font-size: 1.125rem; }
.security__cell-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.security__cell-copy { color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; }

/* ============================================================
   THE DIFFERENCE . slide 6 . risk -> consequence -> solution matrix
   ============================================================ */
.difference {
  background: var(--bg-2);
  padding-block: clamp(4rem, 7cqw, 7rem);
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.difference::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: url('img/hero/platform.jpg') center / cover no-repeat;
  opacity: 0.18;
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  pointer-events: none;
}
.difference::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(15, 19, 26, 0.70) 0%,
      rgba(15, 19, 26, 0.45) 45%,
      rgba(15, 19, 26, 0.10) 80%,
      transparent 100%);
  pointer-events: none;
}
:root[data-theme="light"] .difference::after {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(230, 233, 236, 0.78) 0%,
      rgba(230, 233, 236, 0.50) 45%,
      rgba(230, 233, 236, 0.12) 80%,
      transparent 100%);
}
.difference__head { max-width: 56rem; margin-bottom: clamp(2.5rem, 4cqw, 3.5rem); }
.difference__title { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.05; margin-top: 0.875rem; }
.difference__title-em {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Roboto Slab', serif;
  font-style: italic;
  font-weight: 600;
}

.difference__matrix {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-2);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  overflow: hidden;
}
.difference__head-row,
.difference__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-2);
}

.difference__cell-head,
.difference__cell {
  background: var(--surface);
  padding: 1.25rem 1.5rem;
}
.difference__cell-head {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-2);
}
:root[data-theme="light"] .difference__cell-head {
  background: #E2E6EA;
  color: var(--neutral-800);
}
.difference__cell-head--accent { color: var(--accent); }
:root[data-theme="light"] .difference__cell-head--accent { color: var(--gold-700, #A88A1F); }
.difference__cell {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.5;
  position: relative;
  transition:
    background var(--t-base),
    color var(--t-base),
    box-shadow var(--t-base);
}
.difference__cell::before { content: attr(data-label); display: none; }
.difference__cell:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent);
}
.difference__cell--accent {
  color: var(--text-heading);
  background:
    linear-gradient(90deg,
      rgba(226, 189, 65, 0.06) 0%,
      rgba(226, 189, 65, 0.035) 14%,
      rgba(226, 189, 65, 0.012) 28%,
      rgba(226, 189, 65, 0) 46%),
    radial-gradient(circle at 14% 50%,
      rgba(245, 215, 122, 0.06) 0%,
      rgba(245, 215, 122, 0.025) 20%,
      rgba(245, 215, 122, 0) 44%),
    linear-gradient(180deg,
      rgba(83, 100, 124, 0.08) 0%,
      rgba(83, 100, 124, 0.02) 52%,
      rgba(83, 100, 124, 0) 100%),
    color-mix(in srgb, var(--surface-2) 84%, var(--bg) 16%);
  box-shadow:
    inset 3px 0 0 rgba(226, 189, 65, 0.92),
    inset 0 1px 0 rgba(230, 233, 236, 0.05);
}
:root[data-theme="light"] .difference__cell--accent {
  background:
    linear-gradient(90deg,
      rgba(226, 189, 65, 0.10) 0%,
      rgba(226, 189, 65, 0.055) 18%,
      rgba(226, 189, 65, 0.018) 34%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 18% 32%, rgba(245, 215, 122, 0.08) 0%, rgba(245, 215, 122, 0) 42%),
    #F8F7F1;
  box-shadow: inset 3px 0 0 rgba(168, 138, 31, 0.92);
}
.difference__cell--accent:hover {
  color: var(--text-heading);
  background:
    linear-gradient(90deg,
      rgba(226, 189, 65, 0.08) 0%,
      rgba(226, 189, 65, 0.045) 16%,
      rgba(226, 189, 65, 0.016) 30%,
      rgba(226, 189, 65, 0) 48%),
    radial-gradient(circle at 14% 50%,
      rgba(245, 215, 122, 0.08) 0%,
      rgba(245, 215, 122, 0.03) 22%,
      rgba(245, 215, 122, 0) 46%),
    linear-gradient(180deg,
      rgba(83, 100, 124, 0.10) 0%,
      rgba(83, 100, 124, 0.03) 54%,
      rgba(83, 100, 124, 0) 100%),
    color-mix(in srgb, var(--surface-2) 90%, var(--bg) 10%);
  box-shadow:
    inset 3px 0 0 rgba(226, 189, 65, 0.92),
    inset 0 1px 0 rgba(230, 233, 236, 0.08);
}
:root[data-theme="light"] .difference__cell--accent:hover {
  color: var(--neutral-900);
  background:
    linear-gradient(90deg,
      rgba(226, 189, 65, 0.18) 0%,
      rgba(226, 189, 65, 0.10) 18%,
      rgba(226, 189, 65, 0.035) 36%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 18% 32%, rgba(245, 215, 122, 0.14) 0%, rgba(245, 215, 122, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 100%),
    #F5F0DF;
  box-shadow:
    inset 3px 0 0 rgba(168, 138, 31, 0.92),
    inset 0 0 0 1px rgba(168, 138, 31, 0.14);
}
.difference__cell--accent strong { color: var(--accent); font-weight: 700; }
@container page (max-width: 56em) {
  .difference__matrix {
    gap: 1rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .difference__head-row { display: none; }
  .difference__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--border-2);
    border: 1px solid var(--border-2);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.3);
  }
  :root[data-theme="light"] .difference__row {
    box-shadow: 0 18px 30px -24px rgba(32, 35, 38, 0.16);
  }
  .difference__row .difference__cell {
    padding: 1rem 1.125rem 1.125rem;
    background: var(--surface);
  }
  .difference__row .difference__cell::before {
    display: block;
    margin-bottom: 0.625rem;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .difference__row .difference__cell--accent::before {
    color: var(--accent);
  }
  :root[data-theme="light"] .difference__row .difference__cell--accent::before {
    color: var(--gold-700, #A88A1F);
  }
}

/* ============================================================
   BENEFITS . slide 7 . premium services standard
   ============================================================ */
.benefits {
  padding-block: clamp(4rem, 7cqw, 7rem);
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.benefits::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: url('img/hero/platform.jpg') center / cover no-repeat;
  opacity: 0.18;
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  pointer-events: none;
}
.benefits::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(15, 19, 26, 0.70) 0%,
      rgba(15, 19, 26, 0.45) 45%,
      rgba(15, 19, 26, 0.10) 80%,
      transparent 100%);
  pointer-events: none;
}
:root[data-theme="light"] .benefits::after {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(230, 233, 236, 0.78) 0%,
      rgba(230, 233, 236, 0.50) 45%,
      rgba(230, 233, 236, 0.12) 80%,
      transparent 100%);
}
.benefits__head { max-width: 56rem; margin-bottom: clamp(2.5rem, 4cqw, 3.5rem); }
.benefits__title { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.05; margin-top: 0.875rem; }
.benefits__title-em {
  color: var(--accent);
  font-family: 'Roboto Slab', serif;
  font-style: italic;
  font-weight: 600;
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@container page (max-width: 56em) { .benefits__grid { grid-template-columns: 1fr 1fr; } }
@container page (max-width: 36em) { .benefits__grid { grid-template-columns: 1fr; } }

.benefit {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 0.375rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition:
    transform var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base);
}
.benefit:hover {
  transform: translateY(-3px);
  border-color: rgba(226, 189, 65, 0.4);
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.4);
}
.benefit__icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.375rem;
  background: rgba(226, 189, 65, 0.08);
  border: 1px solid rgba(226, 189, 65, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.benefit:hover .benefit__icon {
  background: rgba(226, 189, 65, 0.16);
  border-color: rgba(226, 189, 65, 0.45);
  transform: scale(1.08);
}
.benefit__icon .material-symbols-outlined { font-size: 1.125rem; }
.benefit__title { font-size: 1.0625rem; font-weight: 700; color: var(--text); }
.benefit__copy { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }

.final__mark {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.final__mark-svg {
  width: clamp(6rem, 8cqw, 8rem);
  height: auto;
  display: block;
}
.final__mark-svg--lite { display: none; }
:root[data-theme="light"] .final__mark-svg--nite { display: none; }
:root[data-theme="light"] .final__mark-svg--lite { display: block; }

/* Tagline below final CTA */
.final__tagline {
  display: block;
  margin-top: 2rem;
  font-family: 'Roboto Slab', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  letter-spacing: -0.005em;
}

/* ============================================================
   COMPONENT: SECTION BOOKEND
   Thin gradient stroke at top + bottom of a section that fades at the
   left/right edges. Use to mark intentional bg-color seams as a deliberate
   "framed interlude" rather than a harsh rectangular slice.
   ------------------------------------------------------------
   Usage:
     <section class="bookend">                    -- gold, both ends
     <section class="bookend bookend--neutral">   -- muted, both ends
     <section class="bookend bookend--top">       -- top edge only
     <section class="bookend bookend--bottom">    -- bottom edge only
   Modifier classes can combine: bookend--neutral + bookend--top
   ============================================================ */
.bookend { position: relative; }
.bookend::before,
.bookend::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg,
    transparent,
    var(--bookend-color, var(--accent)) 18%,
    var(--bookend-color, var(--accent)) 82%,
    transparent);
  opacity: var(--bookend-opacity, 0.85);
}
.bookend::before { top: 0; }
.bookend::after  { bottom: 0; }

/* Variants */
.bookend--neutral {
  --bookend-color: var(--text-faint);
  --bookend-opacity: 0.55;
}

/* Side modifiers . hide the unused edge */
.bookend--top::after    { display: none; }
.bookend--bottom::before { display: none; }

/* ============================================================
   RESPONSIVE DEFENSIVES . prevent horizontal overflow + tighten
   typography/layout for phone viewports. Container queries handle
   the major layout collapses; these viewport queries catch anything
   that slips through (especially on iOS Safari at <=480px).
   ============================================================ */

/* Min-width: 0 on grid items so they can shrink below their intrinsic
   content size when the parent grid is narrower than the children. */
.hero__layout > *,
.problem__layout > *,
.product__grid > *,
.events__grid > *,
.events__grid--single > *,
.about__layout > *,
.contact__layout > *,
.contact__form-row > *,
.feature__layout > *,
.difference__matrix > *,
.benefits__grid > *,
.security__grid > *,
.team__grid > *,
.footer__top > *,
.principles__grid > *,
.phases > * { min-width: 0; }

/* Long mono content (wallet hashes, IDs) can wrap as a last resort. */
.ui-card__cell--mono,
.contact__form input,
.contact__form textarea { overflow-wrap: anywhere; }

/* Tablet + small viewport (<=820px) ----------------------------- */
@media (max-width: 52em) {
  .footer__top { grid-template-columns: 1fr 1fr !important; }
}

/* Small mobile (<=560px) ---------------------------------------- */
@media (max-width: 35em) {
  /* Tighten container padding so content has room to breathe */
  .container { padding-inline: 1.25rem; }

  /* Hero typography . prevent display headlines from blowing the column */
  .hero__title { font-size: clamp(2.25rem, 11vw, 3.25rem); max-width: none; }
  .hero__lede  { font-size: 1rem; }
  .hero__cta   { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__metrics { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero__metric-value { font-size: 1.375rem; }

  /* Section headlines */
  .t-h1, .problem__copy h2, .product__title, .events__title,
  .about__title, .contact__title, .final__title,
  .difference__title, .benefits__title, .about-hero__title,
  .platform-hero__title { font-size: clamp(1.75rem, 8vw, 2.5rem); }

  /* Stat values shrink */
  .stat__value, .about__visual-stat-value { font-size: clamp(2rem, 9vw, 2.75rem); }

  /* Footer collapses to one column at phone width */
  .footer__top { grid-template-columns: 1fr !important; gap: 2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer__bottom-l { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  /* Topbar CTA can hide its label on cramped phones (icon stays) */
  .topbar__cta .btn { padding-inline: 0.875rem; }

  /* Contact form padding */
  .contact__form { padding: 1.5rem; }

  /* Theme switcher: keep on its own line */
  .footer__bottom .theme-switcher { align-self: flex-start; }

  /* Problem section visual: compact card padding */
  .problem__card { padding: 1.125rem 1.25rem; }
  .problem__card-icon { width: 2.25rem; height: 2.25rem; }

  /* About visual: tighten preview padding on phones */
  .about__visual { padding: 1rem; }

  /* Events single-card: image-on-top stacks already; trim title */
  .events__grid--single .event-card__title { font-size: 1.25rem; }
  .events__grid--single .event-card__body { padding: 1.5rem; }

  /* Difference matrix behavior is handled above with labeled mobile row-cards. */
}

/* Very narrow (<=380px) iPhone SE, mini, etc. -------------------- */
@media (max-width: 24em) {
  .container { padding-inline: 1rem; }
  .hero__title { font-size: clamp(2rem, 10vw, 2.5rem); }
  .topbar__cta .btn span:not(.material-symbols-outlined) { display: none; }
}

/* ============================================================
   MOBILE NAV . hamburger button + slide-down drawer panel
   Hidden above 56em (where the desktop topbar nav is visible).
   ============================================================ */
.topbar__menu-btn {
  display: none;
  background: transparent;
  color: var(--neutral-100);
  padding: 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: color var(--t-base), background var(--t-base), transform var(--t-fast);
}
.topbar__menu-btn:hover { color: var(--accent); background: rgba(230, 233, 236, 0.06); transform: scale(1.05); }
.topbar__menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar__menu-btn .material-symbols-outlined { font-size: 1.625rem; }

/* Two-icon swap based on aria-expanded */
.topbar__menu-btn .icon-close { display: none; }
.topbar__menu-btn[aria-expanded="true"] .icon-menu { display: none; }
.topbar__menu-btn[aria-expanded="true"] .icon-close { display: inline-flex; }

@media (max-width: 56em) {
  .topbar__menu-btn { display: inline-flex; }
}

/* Slide-in drawer rolls out from the right edge over a dim backdrop */
.mobile-nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.3s;
}
.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}

.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(22rem, 88vw);
  background: var(--primary-900);
  color: var(--neutral-100);
  border-left: 1px solid rgba(226, 189, 65, 0.20);
  box-shadow: -30px 0 60px -10px rgba(0, 0, 0, 0.6);
  z-index: 61;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open { transform: translateX(0); }

@media (min-width: 56.01em) {
  .mobile-nav,
  .mobile-nav-backdrop { display: none; }
}

/* Lock body scroll when drawers / dialogs are open */
body.is-menu-open,
body.is-consent-open { overflow: hidden; }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(230, 233, 236, 0.10);
}
.mobile-nav__brand { display: inline-flex; align-items: center; }
.mobile-nav__brand-svg { display: block; height: 1.75rem; width: auto; }

.mobile-nav__close {
  background: transparent;
  color: var(--neutral-100);
  padding: 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-base), background var(--t-base), transform var(--t-fast);
}
.mobile-nav__close:hover { color: var(--accent); background: rgba(230, 233, 236, 0.06); transform: rotate(90deg); }
.mobile-nav__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-nav__close .material-symbols-outlined { font-size: 1.5rem; }

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
.mobile-nav__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-200);
  border-bottom: 1px solid rgba(230, 233, 236, 0.06);
  transition: color var(--t-base), background var(--t-base), padding-left var(--t-base);
}
.mobile-nav__links a::after {
  content: 'arrow_forward';
  font-family: 'Material Symbols Outlined';
  font-size: 1rem;
  color: var(--text-faint);
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity var(--t-base), transform var(--t-base), color var(--t-base);
}
.mobile-nav__links a:hover {
  color: var(--accent);
  background: rgba(226, 189, 65, 0.04);
  padding-left: 1.875rem;
}
.mobile-nav__links a:hover::after {
  color: var(--accent);
  opacity: 1;
  transform: translateX(0);
}
.mobile-nav__links a.is-active {
  color: var(--neutral-100);
  border-left: 2px solid var(--accent);
  padding-left: calc(1.5rem - 2px);
}

.mobile-nav__cta {
  padding: 1.5rem;
  border-top: 1px solid rgba(230, 233, 236, 0.10);
  margin-top: auto;
}
.mobile-nav__cta .btn { width: 100%; justify-content: center; }

@media (max-width: 48em) {
  .consent-banner {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    padding: 1rem;
  }
  .consent-banner__inner { grid-template-columns: 1fr; }
  .consent-banner__actions,
  .consent-dialog__actions {
    justify-content: stretch;
  }
  .consent-banner__actions .consent-btn,
  .consent-dialog__actions .consent-btn {
    width: 100%;
    justify-content: center;
  }
  .consent-dialog__body { padding: 1.25rem; }
  .consent-category { grid-template-columns: 1fr; }
  .consent-switch,
  .consent-pill { justify-self: flex-start; }
}

/* Lock body scroll while drawer is open */
body.is-menu-open,
body.is-consent-open { overflow: hidden; }