/* ==========================================================================
   OBEX — Design Tokens
   ========================================================================== */
:root {
  /* Palette — charred deep brown, warm gold, soot & sage accents.
     Sourced from the Belle Mémoire brand system, adapted for OBEX fire-safety hardware. */
  --color-deep:        #1A1410;
  --color-surface:      #211811;
  --color-surface-2:    #2B1F16;
  --color-surface-3:    #3D2B1F;
  --color-line:         rgba(201, 169, 110, 0.16);
  --color-text:          #FAF7F2;
  --color-text-dim:      rgba(250, 247, 242, 0.62);
  --color-text-faint:    rgba(250, 247, 242, 0.4);
  --color-gold:          #C9A96E;
  --color-gold-light:  #E8D5A3;
  --color-gold-dark:     #8B6914;
  --color-rose:         #D4A0A0;
  --color-sage:           #8B9E8E;

  /* Device status-ring language — the product's own green/amber/red LED states */
  --state-safe:    #7FC08A;
  --state-caution: #E5A84B;
  --state-alarm:   #E14B3B;

  /* Typography — technical pairing kept (Space Grotesk + Inter) rather than
     the reference's romantic serif: OBEX is fire-safety hardware, not jewelry. */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --text-xs:    clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
  --text-sm:    clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --text-base:  clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --text-lg:    clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
  --text-xl:    clamp(1.6rem, 1.4rem + 0.9vw, 2.25rem);
  --text-2xl:   clamp(2.2rem, 1.8rem + 1.8vw, 3.5rem);
  --text-hero:  clamp(2.8rem, 1.4rem + 6vw, 7rem);
  --text-mega:  clamp(3.5rem, 1rem + 10vw, 11rem);

  /* Spacing rhythm */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  --space-lg: clamp(2.5rem, 1.8rem + 3vw, 5rem);
  --space-section: clamp(5rem, 3.5rem + 6vw, 11rem);
  --space-gutter: clamp(1.25rem, 0.8rem + 2vw, 4rem);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 400ms;
  --duration-slow: 800ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --max-width: 1400px;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--color-deep);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

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

/* Anchored sections stop hiding under the fixed nav */
[id] { scroll-margin-top: 5.5rem; }

/* Nicer multi-line headline wrapping (safe no-op where unsupported) */
.section-title, .hero-title, .waitlist-title, .invest-title, .product-cta__title { text-wrap: balance; }

::selection { background: var(--color-gold); color: var(--color-deep); }

/* film grain / atmosphere overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-gutter);
  backdrop-filter: blur(0px);
  background: linear-gradient(to bottom, rgba(15, 10, 7, 0.85), transparent);
  transition: background var(--duration-normal) var(--ease-out-expo), backdrop-filter var(--duration-normal);
}
.nav.is-scrolled {
  background: rgba(15, 10, 7, 0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-line);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.nav__logo-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--color-gold-light), var(--color-rose) 70%);
  box-shadow: 0 0 18px 2px rgba(201, 169, 110, 0.55);
  flex: none;
}
.nav__logo-img {
  width: 30px; height: 30px;
  flex: none;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(201, 169, 110, 0.35));
}
.site-footer__logo .nav__logo-img { width: 38px; height: 38px; }

/* New OBEX Hub logo lockup.
   Colour follows the nav's own chrome logic: gold over the always-dark hero and
   in dark theme; dark ink only once scrolled onto the light frosted bar / footer. */
.nav__logo-lockup {
  height: 38px;
  width: auto;
  display: block;
  flex: none;
}
.nav__logo-lockup--onDark { filter: drop-shadow(0 0 12px rgba(201, 169, 110, 0.22)); }
.nav__logo-lockup--onLight { display: none; }

/* Nav: light theme, scrolled onto the frosted-white bar -> dark-ink logo */
:root[data-theme="light"] .nav.is-scrolled .nav__logo-lockup--onDark { display: none; }
:root[data-theme="light"] .nav.is-scrolled .nav__logo-lockup--onLight { display: block; }

/* Footer: the light-theme footer is a light surface -> dark-ink logo */
:root[data-theme="light"] .site-footer .nav__logo-lockup--onDark { display: none; }
:root[data-theme="light"] .site-footer .nav__logo-lockup--onLight { display: block; }

.site-footer__logo .nav__logo-lockup { height: 48px; }
@media (max-width: 560px) {
  .nav__logo-lockup { height: 32px; }
  .site-footer__logo .nav__logo-lockup { height: 40px; }
}

.nav__links {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}
.nav__links a {
  position: relative;
  padding-bottom: 0.3rem;
  transition: color var(--duration-fast);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--color-gold-light); }
  .nav__links a:hover::after { transform: scaleX(1); }
}
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: var(--color-deep);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: 0 4px 22px rgba(201,169,110,0.32);
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast);
}
.nav__cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .nav__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201,169,110,0.48); }
}
/* Current-page indicator */
.nav__links a[aria-current="page"] {
  color: var(--color-gold-light);
}
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* Hamburger — hidden on desktop, shown under 900px */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: rgba(26, 20, 16, 0.55);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 1.6px;
  width: 100%;
  border-radius: 2px;
  background: var(--color-gold-light);
  transition: transform var(--duration-normal) var(--ease-out-expo), opacity var(--duration-fast);
}
.nav.menu-open .nav__toggle span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ==========================================================================
   Scroll Hero — pinned video scrub, staged editorial text reveal
   Pattern adapted from the Belle Mémoire hero: bottom-left staged captions,
   thin gold rule + eyebrow + per-line title reveal, stage counter, vertical
   brand label, full-width progress bar. Six stages instead of three.
   ========================================================================== */
.hero-scroll {
  position: relative;
  height: 1200vh; /* ~50vh of scroll per second of the 24s hero video */
  background: var(--color-deep);
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--color-deep);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  background: var(--color-deep);
}
/* Canvas scrubber — mirrors the video, painted frame-accurately on seek */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05);
  background: var(--color-deep);
}
/* When the canvas scrubber is active the source video decodes invisibly behind it */
.hero-stage.canvas-scrub .hero-video { opacity: 0; }

/* Layered overlays for legibility, weighted toward the bottom where text sits */
.hero-overlay-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(15,10,7,0.6) 0%, rgba(15,10,7,0.15) 70%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-overlay-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 74%;
  background: linear-gradient(to top,
    rgba(15,10,7,0.97) 0%,
    rgba(15,10,7,0.82) 20%,
    rgba(15,10,7,0.45) 46%,
    rgba(15,10,7,0.1) 70%,
    transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-overlay-sides {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 32%, rgba(15,10,7,0.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-overlay-glow {
  position: absolute;
  bottom: 6%; left: 8%;
  width: 700px; height: 420px;
  background: radial-gradient(ellipse, rgba(201,169,110,0.14) 0%, transparent 68%);
  z-index: 1;
  pointer-events: none;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 18vw 2vw rgba(10,7,5,0.6);
  z-index: 1;
  pointer-events: none;
}

/* ── Text stages — bottom-left editorial layout ───────────────────── */
.hero-text-stage {
  position: absolute;
  bottom: clamp(4.5rem, 9vw, 7rem);
  left: var(--space-gutter);
  width: min(90%, 640px);
  z-index: 3;
  text-align: left;
  opacity: 0;
  pointer-events: none;
}
.hero-text-stage.is-active { pointer-events: auto; }

.hero-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(to right, var(--color-gold), rgba(201,169,110,0.15));
  margin-bottom: 1.4rem;
  transform: scaleX(0);
  transform-origin: left;
}
.hero-text-stage.words-revealed .hero-rule {
  animation: ruleExpand 0.7s var(--ease-out-expo) both;
}
@keyframes ruleExpand { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.9rem;
  opacity: 0;
}
.hero-text-stage.words-revealed .hero-label {
  animation: fadeUp 0.5s var(--ease-out-expo) 0.05s both;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 1.1rem;
}
.hero-title em {
  font-style: normal;
  color: var(--color-gold-light);
}
.hero-title .tline {
  display: block;
  overflow: hidden;
  line-height: 1.1;
}
.hero-title .tline-inner {
  display: block;
  transform: translateY(105%);
  opacity: 0;
}
.hero-text-stage.words-revealed .hero-title .tline-inner {
  animation: lineUp 0.65s var(--ease-out-expo) both;
}
@keyframes lineUp {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.hero-subtitle {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-dim);
  line-height: 1.65;
  max-width: 42ch;
  margin-bottom: 1.6rem;
  opacity: 0;
}
.hero-text-stage.words-revealed .hero-subtitle {
  animation: fadeUp 0.55s var(--ease-out-expo) 0.32s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  opacity: 0;
}
.hero-text-stage.words-revealed .hero-ctas {
  animation: fadeUp 0.5s var(--ease-out-expo) 0.5s both;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: var(--color-deep);
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 28px rgba(201,169,110,0.35);
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast);
}
.btn-primary:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(201,169,110,0.5); }
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  color: var(--color-gold-light);
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  border: 1px solid rgba(201,169,110,0.4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);
}
.btn-ghost:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { background: rgba(201,169,110,0.08); border-color: var(--color-gold); }
}

/* ── Stage counter — top-right editorial numbering ───────────────── */
#hero-stage-counter {
  position: absolute;
  right: var(--space-gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
#hero-stage-counter .cnt-current {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-gold-light);
  line-height: 1;
  transition: opacity 0.15s;
}
#hero-stage-counter .cnt-sep {
  width: 1px;
  height: 22px;
  background: rgba(201,169,110,0.3);
}
#hero-stage-counter .cnt-total {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: rgba(201,169,110,0.4);
}

/* ── Vertical brand label — left edge ─────────────────────────────── */
#hero-left-label {
  position: absolute;
  left: 1.4rem;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(201,169,110,0.4);
  white-space: nowrap;
  display: flex;
  gap: 1.8rem;
  align-items: center;
}
#hero-left-label::before {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  background: rgba(201,169,110,0.4);
}

/* ── Progress bar — full-width, bottom edge ───────────────────────── */
#hero-progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(to right, var(--color-gold-dark), var(--color-gold), var(--color-gold-light));
  z-index: 5;
  box-shadow: 0 0 12px rgba(201,169,110,0.55), 0 0 4px rgba(232,213,163,0.7);
}

/* ── Scroll hint — bottom-right ───────────────────────────────────── */
#hero-scroll-hint {
  position: absolute;
  right: var(--space-gutter);
  bottom: clamp(2.5rem, 4vw, 3.5rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: opacity var(--duration-normal);
}
#hero-scroll-hint span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  opacity: 0.6;
}
.scroll-line {
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, var(--color-gold-light), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── Loading veil ──────────────────────────────────────────────────── */
#hero-loader {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--color-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  transition: opacity 0.6s;
}
#hero-loader.is-hidden { opacity: 0; pointer-events: none; }
.loader-logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-gold-light);
  letter-spacing: 0.06em;
}
.loader-bar-track {
  width: 120px; height: 1px;
  background: rgba(201,169,110,0.15);
  position: relative;
  overflow: hidden;
}
.loader-bar-fill {
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(to right, transparent, var(--color-gold), transparent);
  animation: loaderPulse 1.4s ease-in-out infinite;
}
@keyframes loaderPulse { 0% { left: -100%; } 100% { left: 100%; } }

/* ==========================================================================
   Section shell
   ========================================================================== */
.section {
  position: relative;
  padding-block: var(--space-section);
}
.section--tight { padding-block: clamp(3rem, 3vw, 6rem); }
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-sm);
}
.section-eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--color-gold-light);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 20ch;
}
.section-lede {
  font-size: var(--text-lg);
  color: var(--color-text-dim);
  max-width: 48ch;
  margin-top: var(--space-sm);
  font-weight: 400;
}
.reveal {
  opacity: 0;
  transform: translateY(36px);
}

/* ==========================================================================
   Stat / Problem section
   ========================================================================== */
.stat-section {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background:
    radial-gradient(ellipse 60% 80% at 15% 0%, rgba(201, 169, 110, 0.14), transparent 60%),
    var(--color-deep);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.stat-card { border-left: 1px solid var(--color-line); padding-left: var(--space-md); }
.stat-card__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-mega);
  line-height: 0.9;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--color-text) 0%, var(--color-text-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-card__num .unit { font-size: 0.35em; color: var(--color-gold-light); -webkit-text-fill-color: var(--color-gold-light); }
.stat-card__label { margin-top: var(--space-xs); color: var(--color-text-dim); font-size: var(--text-sm); max-width: 26ch; }

/* ==========================================================================
   How it works — sensor bento
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.bento-card {
  position: relative;
  grid-column: span 3;
  min-height: 300px;
  display: flex;
  background: linear-gradient(160deg, var(--color-surface), var(--color-surface-2));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal);
}
@media (hover: hover) and (pointer: fine) {
  .bento-card:hover { transform: translateY(-6px); border-color: rgba(201, 169, 110, 0.45); }
}
.bento-card--wide { grid-column: span 6; }
.bento-card--narrow { grid-column: span 2; }
.bento-card--feature {
  grid-column: span 6;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--space-lg);
  padding: 0;
  min-height: 0;
}

/* Mouse-reveal sensor imagery — a dim/blurred base image sharpens in a
   spotlight that follows the cursor, echoing "what OBEX's sensors see." */
.bento-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.bento-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bento-card__img--base {
  filter: blur(5px) brightness(0.78) saturate(1);
  transform: scale(1.06);
}
.bento-card__img--sharp {
  filter: brightness(1.05) saturate(1.15);
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 40%), black 0%, transparent 100%);
  mask-image: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 40%), black 0%, transparent 100%);
  transition: opacity 280ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .bento-card:hover .bento-card__img--sharp { opacity: 1; }
}
@media (hover: none) {
  .bento-card__img--sharp {
    opacity: 0.75;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.bento-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(190deg, rgba(26,20,16,0.18) 0%, rgba(26,20,16,0.6) 58%, rgba(26,20,16,0.92) 100%);
  pointer-events: none;
}
.bento-card__glow {
  position: absolute;
  top: -30%; right: -20%;
  width: 60%; height: 60%;
  z-index: 1;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.20), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.bento-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bento-card__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
}
.bento-card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 169, 110, 0.16);
  backdrop-filter: blur(6px);
  color: var(--color-gold-light);
  margin-top: var(--space-sm);
}
.bento-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-top: var(--space-sm);
  letter-spacing: -0.01em;
}
.bento-card__body {
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  max-width: 32ch;
  margin-top: auto;
  padding-top: 0.6rem;
}

.bento-card--feature .bento-feature__media {
  position: relative;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.bento-card--feature .bento-feature__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.bento-card--feature .bento-feature__copy { padding: var(--space-md) var(--space-lg) var(--space-md) 0; }
.bento-card--feature .bento-feature__list { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 0.6rem; }
.bento-card--feature .bento-feature__list li {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: var(--text-sm); color: var(--color-text-dim);
  border-top: 1px solid var(--color-line);
  padding-top: 0.6rem;
}
.bento-card--feature .bento-feature__list li strong { color: var(--color-text); font-weight: 600; }

/* ── Real-kitchens lifestyle gallery ───────────────────────────────── */
.kitchen-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.kitchen-gallery__item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--color-line);
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal);
}
.kitchen-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,20,16,0.55) 0%, transparent 45%);
  pointer-events: none;
}
.kitchen-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .kitchen-gallery__item:hover { transform: translateY(-4px); border-color: rgba(201, 169, 110, 0.4); }
  .kitchen-gallery__item:hover img { transform: scale(1.06); }
}

/* ── Device showcase video ─────────────────────────────────────────── */
.showcase-section { background: var(--color-deep); }
.showcase-frame {
  position: relative;
  margin-top: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  max-width: 780px;
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
}
.showcase-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showcase-frame__glow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px 10px rgba(201,169,110,0.12);
  pointer-events: none;
}

/* ==========================================================================
   Scrub film — portrait video scrubbed by scroll, feathered into the page
   on every edge so it reads as atmosphere, not an embedded rectangle.
   ========================================================================== */
.scrub-section {
  position: relative;
  height: 350vh; /* ~50vh of scroll per second of the 5s film */
  background: var(--color-deep);
}
.scrub-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.scrub-halo {
  position: absolute;
  width: min(78vh, 86vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.13), transparent 66%);
  pointer-events: none;
}
.scrub-video {
  position: relative;
  height: 90vh;
  width: auto;
  max-width: 94vw;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, black 52%, transparent 98%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, black 52%, transparent 98%);
}
.scrub-caption {
  position: absolute;
  bottom: clamp(2rem, 4vw, 3.2rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .scrub-stage { height: 82vh; }
  .scrub-video { height: 74vh; }
}

/* ── Device anatomy — full-bleed hero render with overlaid infographic ──── */
.anatomy-section .container { position: relative; z-index: 2; }
.anatomy2 {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--space-md);
  isolation: isolate;
}
.anatomy2__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* melt the render's top/bottom edges into the adjacent sections */
.anatomy2::before, .anatomy2::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 16%;
  z-index: 3;
  pointer-events: none;
}
.anatomy2::before { top: 0; background: linear-gradient(to bottom, var(--color-deep), transparent); }
.anatomy2::after { bottom: 0; background: linear-gradient(to top, var(--color-deep), transparent); }

.anatomy2__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.anatomy2__lines .a2-line line {
  stroke: rgba(201, 169, 110, 0.7);
  stroke-width: 0.12;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.anatomy2__lines .a2-line circle { fill: var(--state-alarm); }
.reveal.is-drawn .anatomy2__lines .a2-line line,
.anatomy2.is-drawn .a2-line line { animation: a2Draw 0.7s var(--ease-out-expo) forwards; }
.a2-line:nth-child(2) line { animation-delay: 0.08s; }
.a2-line:nth-child(3) line { animation-delay: 0.16s; }
.a2-line:nth-child(4) line { animation-delay: 0.24s; }
.a2-line:nth-child(5) line { animation-delay: 0.32s; }
.a2-line:nth-child(6) line { animation-delay: 0.40s; }
@keyframes a2Draw { to { stroke-dashoffset: 0; } }

.anatomy2__labels { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.a2 {
  position: absolute;
  width: min(22%, 20rem);
  opacity: 0;
  transform: translateY(10px);
}
.anatomy2.is-drawn .a2 { animation: a2Fade 0.6s var(--ease-out-expo) forwards; }
.a2--cam  { animation-delay: 0.14s; }
.a2--noz  { animation-delay: 0.22s; }
.a2--act  { animation-delay: 0.30s; }
.a2--ring { animation-delay: 0.38s; }
.a2--spk  { animation-delay: 0.46s; }
@keyframes a2Fade { to { opacity: 1; transform: translateY(0); } }
.a2 h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-gold-light);
  letter-spacing: 0.01em;
  margin-bottom: 0.3rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}
.a2 p {
  font-size: var(--text-sm);
  color: rgba(250, 247, 242, 0.82);
  line-height: 1.5;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9);
}
/* radial layout matching the reference: top, bottom, two per side */
.a2--mic  { left: 50%; top: 3%;  transform: translateX(-50%); text-align: center; }
.a2--mic  { }
.a2--cam  { left: 4%;  top: 26%; text-align: right; }
.a2--noz  { left: 4%;  top: 60%; text-align: right; }
.a2--act  { right: 4%; top: 26%; left: auto; text-align: left; }
.a2--ring { right: 4%; top: 60%; left: auto; text-align: left; }
.a2--spk  { left: 50%; bottom: 4%; top: auto; transform: translateX(-50%); text-align: center; }
.anatomy2.is-drawn .a2--mic,
.anatomy2.is-drawn .a2--spk { animation-name: a2FadeCentered; }
@keyframes a2FadeCentered { to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.anatomy2__legend { display: none; }

@media (max-width: 900px) {
  .anatomy2__lines, .anatomy2__labels { display: none; }
  .anatomy2::before, .anatomy2::after { height: 22%; }
  .anatomy2__legend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    max-width: var(--max-width);
    margin: var(--space-md) auto 0;
    padding-inline: var(--space-gutter);
  }
  .anatomy2__legend li {
    font-size: var(--text-sm);
    color: var(--color-text-dim);
    line-height: 1.55;
    padding-left: 1.1rem;
    position: relative;
  }
  .anatomy2__legend li::before {
    content: ""; position: absolute; left: 0; top: 0.55em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold);
  }
  .anatomy2__legend strong { color: var(--color-text); font-weight: 600; }
}

/* ── Device 3D — interactive procedural model (three.js) ───────────────── */
.device3d { margin-top: var(--space-lg); }
.device3d__canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 78vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  background:
    radial-gradient(ellipse 60% 50% at 78% 22%, rgba(136, 90, 41, 0.28), transparent 70%),
    radial-gradient(circle at 50% 55%, #241a12, var(--color-deep) 70%);
}
#device3dCanvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
#device3dCanvas:active { cursor: grabbing; }
.device3d__hint {
  position: absolute;
  left: 50%; bottom: 1.2rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  pointer-events: none;
  transition: opacity var(--duration-normal);
}
.device3d__hint.is-hidden { opacity: 0; }
.device3d__dl {
  position: absolute;
  right: 1rem; top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-gold-light);
  background: rgba(15, 10, 7, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast), background var(--duration-fast);
}
.device3d__dl:hover { border-color: var(--color-gold); background: rgba(15,10,7,0.8); }
.device3d__dl:active { transform: scale(0.97); }
.device3d__dl:disabled { opacity: 0.7; cursor: default; }
.device3d__fallback { position: absolute; inset: 0; }
.device3d__fallback img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .anatomy2 .a2, .anatomy2 .a2-line line { animation: none !important; opacity: 1; stroke-dashoffset: 0; transform: none; }
  .anatomy2.is-drawn .a2--mic, .anatomy2.is-drawn .a2--spk { transform: translateX(-50%); }
}

/* ==========================================================================
   Complete system — light editorial panel (the product render is on white,
   so the panel is white: intentional contrast, not a pasted picture)
   ========================================================================== */
.system-panel {
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: var(--space-lg);
  align-items: center;
  background: linear-gradient(170deg, #FFFFFF, #F4EEE3);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: #2B2018;
}
.system-panel__media { margin: 0; }
.system-panel__media img { width: 100%; height: auto; }
.system-panel__eyebrow { color: var(--color-gold-dark); }
.system-panel__eyebrow::before { background: var(--color-gold-dark); }
.system-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #1A1410;
}
.system-panel__lede {
  margin-top: var(--space-sm);
  font-size: var(--text-base);
  color: rgba(26, 20, 16, 0.72);
  max-width: 52ch;
}
.system-panel__lede strong { color: #1A1410; }
.system-panel__list {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.system-panel__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--text-sm);
  color: rgba(26, 20, 16, 0.72);
  line-height: 1.6;
}
.system-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-gold-dark);
}
.system-panel__list li strong { color: #1A1410; }

/* ==========================================================================
   Installation — numbered steps beside the install photo
   ========================================================================== */
.install-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.install-steps {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  counter-reset: step;
}
.install-steps li {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-line);
}
.install-steps__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-gold);
  line-height: 1;
  flex: none;
  width: 2.4ch;
}
.install-steps h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: 0.3rem;
}
.install-steps p {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  max-width: 46ch;
  line-height: 1.65;
}
.install-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.install-media img { width: 100%; height: auto; display: block; }
.install-media figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 0.9rem var(--space-sm);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}

/* ==========================================================================
   Comparison table — OBEX column carries the gold
   ========================================================================== */
.compare-wrap {
  margin-top: var(--space-lg);
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.compare-table th, .compare-table td {
  padding: 0.95rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}
.compare-table thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
}
.compare-table tbody th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-sm);
  max-width: 20ch;
}
.compare-table td { color: var(--color-text-dim); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .compare-obex {
  background: rgba(201, 169, 110, 0.08);
  color: var(--color-text);
  border-left: 1px solid rgba(201, 169, 110, 0.3);
  border-right: 1px solid rgba(201, 169, 110, 0.3);
}
.compare-table thead .compare-obex {
  color: var(--color-gold-light);
  font-weight: 700;
}
.compare-table .yes { color: var(--state-safe); font-weight: 700; margin-right: 0.3rem; }
.compare-table .no { color: var(--state-alarm); font-weight: 700; margin-right: 0.3rem; opacity: 0.8; }
.compare-table .mid { color: var(--state-caution); font-weight: 700; margin-right: 0.3rem; }

@media (max-width: 900px) {
  .system-panel { grid-template-columns: 1fr; padding: var(--space-md); }
  .system-panel__media { max-width: 340px; margin-inline: auto; }
  .install-grid { grid-template-columns: 1fr; }
}

/* Wide bento card: let the copy breathe across the full row */
.bento-card--wide .bento-card__body { max-width: 58ch; }

/* ==========================================================================
   Voice — two-way conversation showcase
   ========================================================================== */
.voice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.voice-card {
  background: linear-gradient(160deg, var(--color-surface), var(--color-surface-2));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.voice-card--alarm { border-color: rgba(225, 75, 59, 0.3); }
.voice-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-line);
}
.voice-card__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
}
.voice-card__dot--safe { background: var(--state-safe); box-shadow: 0 0 10px var(--state-safe); }
.voice-card__dot--alarm { background: var(--state-alarm); box-shadow: 0 0 10px var(--state-alarm); animation: dotBlink 1.4s ease-in-out infinite; }
@keyframes dotBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.voice-line {
  position: relative;
  padding-left: 3.8rem;
}
.voice-line__who {
  position: absolute;
  left: 0;
  top: 0.2em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.voice-line--obex .voice-line__who { color: var(--color-gold-light); }
.voice-line p { color: var(--color-text-dim); font-size: var(--text-sm); line-height: 1.7; }
.voice-line--obex p { color: var(--color-text); }
.voice-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 13px;
  margin-bottom: 0.4rem;
}
.voice-wave i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--color-gold);
  transform-origin: bottom;
  animation: voiceWave 1.1s ease-in-out infinite;
}
.voice-wave--alarm i { background: var(--state-alarm); }
.voice-wave i:nth-child(1) { animation-delay: 0s; }
.voice-wave i:nth-child(2) { animation-delay: 0.15s; }
.voice-wave i:nth-child(3) { animation-delay: 0.3s; }
.voice-wave i:nth-child(4) { animation-delay: 0.45s; }
.voice-wave i:nth-child(5) { animation-delay: 0.6s; }
@keyframes voiceWave {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

/* ==========================================================================
   Timeline — detection to suppression, driven by the live status ring
   ========================================================================== */
@property --ring-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #7FC08A;
}
.timeline-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-lg);
}
.timeline-ring-panel {
  position: sticky;
  top: 22vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.status-ring {
  position: relative;
  width: 200px;
  height: 200px;
  --ring-color: var(--state-safe);
  transition: --ring-color 500ms ease;
}
.status-ring__led {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--ring-color) 0deg 3.6deg, transparent 3.6deg 7.2deg);
  -webkit-mask-image: radial-gradient(circle, transparent 57%, black 59%, black 78%, transparent 80%);
  mask-image: radial-gradient(circle, transparent 57%, black 59%, black 78%, transparent 80%);
  filter: drop-shadow(0 0 12px var(--ring-color));
}
.status-ring__core {
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2B2018, #171009 72%);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-ring__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ring-color);
  text-align: center;
  transition: color 400ms ease;
}
.status-ring__caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.status-ring[data-state="caution"] { --ring-color: var(--state-caution); }
.status-ring[data-state="alarm"],
.status-ring[data-state="suppress"] { --ring-color: var(--state-alarm); }
.status-ring[data-state="alarm"] .status-ring__led {
  animation: ringPulse 1.2s ease-in-out infinite;
}
.status-ring[data-state="suppress"] .status-ring__led {
  animation: ringSpin 5s linear infinite, ringPulse 1.2s ease-in-out infinite;
}
@keyframes ringPulse {
  0%, 100% { filter: drop-shadow(0 0 10px var(--ring-color)); }
  50% { filter: drop-shadow(0 0 26px var(--ring-color)); }
}
@keyframes ringSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Active row: the time marker adopts the ring's state color */
.timeline-row__time { transition: color 400ms ease; }
.timeline-row.is-active[data-ring="caution"] .timeline-row__time { color: var(--state-caution); }
.timeline-row.is-active[data-ring="alarm"] .timeline-row__time,
.timeline-row.is-active[data-ring="suppress"] .timeline-row__time { color: var(--state-alarm); }
.timeline-row.is-active[data-ring="safe"] .timeline-row__time { color: var(--state-safe); }

.timeline {
  position: relative;
  border-top: 1px solid var(--color-line);
  padding-left: 1.6rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(201, 169, 110, 0.14);
}
.timeline-progress {
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-gold), var(--color-gold-light));
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.5);
  transform: scaleY(0);
  transform-origin: top;
}
.timeline-row {
  display: grid;
  grid-template-columns: 6rem 1fr 2fr;
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-line);
}
.timeline-row__time {
  font-family: var(--font-mono);
  color: var(--color-gold-light);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
}
.timeline-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
}
.timeline-row__body { color: var(--color-text-dim); font-size: var(--text-sm); max-width: 50ch; }

/* ==========================================================================
   Pricing / Pre-order
   ========================================================================== */
.pricing-section {
  background:
    radial-gradient(ellipse 70% 60% at 85% 10%, rgba(201, 169, 110, 0.12), transparent 60%),
    var(--color-deep);
  border-top: 1px solid var(--color-line);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.price-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal);
}
@media (hover: hover) and (pointer: fine) {
  .price-card:hover { transform: translateY(-6px); }
}
.price-card--highlight {
  background: linear-gradient(165deg, #241a13, var(--color-surface));
  border-color: rgba(201, 169, 110, 0.5);
  position: relative;
}
.price-card--highlight::before {
  content: "Most Reserved";
  position: absolute;
  top: -13px; left: var(--space-md);
  background: var(--color-gold-light);
  color: var(--color-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.price-card__tier { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.price-card__amount { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); margin-top: 0.5rem; letter-spacing: -0.02em; }
.price-card__amount .was { font-size: 0.4em; color: var(--color-text-faint); text-decoration: line-through; font-weight: 500; margin-right: 0.4em; }
.price-card__desc { color: var(--color-text-dim); font-size: var(--text-sm); margin-top: 0.5rem; }
.price-card__list { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.price-card__list li { font-size: var(--text-sm); color: var(--color-text-dim); display: flex; gap: 0.55rem; }
.price-card__list li::before { content: "—"; color: var(--color-gold-light); flex: none; }
.price-card__cta {
  margin-top: var(--space-md);
  text-align: center;
  padding: 0.85rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-sm);
  background: var(--color-text);
  color: var(--color-deep);
  transition: transform var(--duration-fast) var(--ease-out-expo), background var(--duration-fast);
}
.price-card--highlight .price-card__cta { background: var(--color-gold-light); }
.price-card__cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .price-card__cta:hover { transform: translateY(-2px); background: var(--color-gold-light); }
}

.units-bar {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.05em;
}
.units-bar__track {
  flex: 1;
  height: 4px;
  background: var(--color-surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.units-bar__fill {
  height: 100%;
  width: 64%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  border-radius: 4px;
}

/* ==========================================================================
   Stakes — emotional full-bleed section with hard numbers
   ========================================================================== */
.stakes-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
}
.stakes-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.stakes-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.stakes-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(20, 13, 9, 0.96) 0%, rgba(20, 13, 9, 0.82) 46%, rgba(20, 13, 9, 0.55) 100%),
    linear-gradient(to bottom, rgba(20, 13, 9, 0.9) 0%, rgba(20, 13, 9, 0.25) 30%, rgba(20, 13, 9, 0.92) 100%);
}
.stakes-content { position: relative; z-index: 1; }
.stakes-eyebrow { color: var(--state-alarm); }
.stakes-eyebrow::before { background: var(--state-alarm); }
.stakes-title { max-width: 14ch; }
.stakes-lede { max-width: 52ch; }

.stakes-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-block: var(--space-md);
  border-top: 1px solid rgba(250, 247, 242, 0.12);
  border-bottom: 1px solid rgba(250, 247, 242, 0.12);
}
.stakes-stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stakes-stat__num small {
  font-size: 0.4em;
  font-weight: 600;
  margin-left: 0.15em;
  letter-spacing: 0;
}
.stakes-stat__num--danger { color: var(--state-alarm); text-shadow: 0 0 30px rgba(225, 75, 59, 0.35); }
.stakes-stat__num--safe { color: var(--state-safe); text-shadow: 0 0 30px rgba(127, 192, 138, 0.35); }
.stakes-stat p {
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  max-width: 24ch;
}

.stakes-closer {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin-top: var(--space-lg);
}
.stakes-closer__media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(250, 247, 242, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.stakes-closer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stakes-closer__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--color-text);
  max-width: 34ch;
}
.stakes-closer__sub {
  margin-top: 0.9rem;
  color: var(--color-text-dim);
  font-size: var(--text-base);
  margin-bottom: 1.6rem;
}

@media (max-width: 900px) {
  .stakes-stats { grid-template-columns: 1fr 1fr; }
  .stakes-closer { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { margin-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
}
.faq-item__icon {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 200ms var(--ease-out-expo), background 200ms;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--color-text-dim);
  transition: transform 200ms var(--ease-out-expo), opacity 200ms;
}
.faq-item__icon::before { width: 10px; height: 1.5px; }
.faq-item__icon::after { width: 1.5px; height: 10px; }
.faq-item.is-open .faq-item__icon { background: var(--color-gold-light); border-color: var(--color-gold-light); }
.faq-item.is-open .faq-item__icon::before, .faq-item.is-open .faq-item__icon::after { background: var(--color-deep); }
.faq-item.is-open .faq-item__icon::after { transform: scaleY(0); }
.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-out-expo);
}
.faq-item__a p { padding-bottom: var(--space-md); color: var(--color-text-dim); max-width: 60ch; font-size: var(--text-base); }

/* ==========================================================================
   Waitlist / Footer
   ========================================================================== */
.waitlist-section {
  border-top: 1px solid var(--color-line);
  text-align: center;
  padding-block: var(--space-section);
}
.waitlist-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  max-width: 18ch;
  margin-inline: auto;
  letter-spacing: -0.015em;
}
.waitlist-form {
  margin: var(--space-lg) auto 0;
  max-width: 480px;
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
}
.waitlist-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  padding: 0.7rem 1rem;
  font-size: var(--text-sm);
  font-family: var(--font-body);
}
.waitlist-form input::placeholder { color: var(--color-text-faint); }
.waitlist-form button {
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--color-gold-light);
  color: var(--color-deep);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: transform var(--duration-fast) var(--ease-out-expo);
  flex: none;
}
.waitlist-form button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .waitlist-form button:hover { transform: translateY(-2px); }
}
.waitlist-note { margin-top: var(--space-sm); color: var(--color-text-faint); font-size: var(--text-xs); }
.form-success { display: none; margin-top: var(--space-lg); color: var(--color-sage); font-family: var(--font-mono); font-size: var(--text-sm); }

.footer {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}
.footer__links { display: flex; gap: var(--space-md); }
.footer__links a:hover { color: var(--color-text-dim); }

/* ==========================================================================
   Site footer — premium multi-tier: newsletter, sitemap, product series
   lockups, contact. Shared across every page.
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-lg);
  background:
    radial-gradient(ellipse 50% 70% at 85% 0%, rgba(201, 169, 110, 0.12), transparent 60%),
    radial-gradient(ellipse 55% 60% at 5% 100%, rgba(139, 105, 20, 0.14), transparent 62%),
    linear-gradient(to bottom, #17100b, #0f0a06);
}
/* Bold gold ribbon — unmistakable start-of-footer */
.site-footer::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold) 30%, var(--color-gold-light) 50%, var(--color-gold) 70%, var(--color-gold-dark));
  box-shadow: 0 0 26px rgba(201, 169, 110, 0.55), 0 2px 14px rgba(201, 169, 110, 0.35);
}
.site-footer .container { position: relative; z-index: 1; }

/* Faint oversized wordmark drifting behind the footer */
.site-footer__watermark {
  position: absolute;
  right: -2%;
  bottom: -6%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(8rem, 22vw, 20rem);
  letter-spacing: -0.03em;
  line-height: 0.8;
  color: rgba(201, 169, 110, 0.045);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── Tier 1: newsletter band + sitemap columns ─────────────────────────── */
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
}
.site-footer__news { max-width: 40ch; }
.site-footer__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.site-footer__kicker::before { content: ""; width: 26px; height: 1px; background: var(--color-gold); }
.site-footer__news-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-top: 0.7rem;
  background: linear-gradient(100deg, var(--color-text) 20%, var(--color-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-footer__news p {
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin-top: 0.7rem;
}
.site-footer__form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding: 0.35rem;
  background: rgba(43, 31, 22, 0.55);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  max-width: 420px;
  backdrop-filter: blur(6px);
  transition: border-color var(--duration-normal);
}
.site-footer__form:focus-within { border-color: rgba(201, 169, 110, 0.5); }
.site-footer__form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  padding: 0.65rem 1rem;
  font-size: var(--text-sm);
  font-family: var(--font-body);
}
.site-footer__form input::placeholder { color: var(--color-text-faint); }
.site-footer__form button {
  flex: none;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold), var(--color-gold-dark));
  color: var(--color-deep);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3);
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast);
}
.site-footer__form button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .site-footer__form button:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201, 169, 110, 0.5); }
}
.site-footer__note { margin-top: 1rem; color: var(--color-sage); font-family: var(--font-mono); font-size: var(--text-xs); }

.site-footer__social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.site-footer__social a {
  width: 40px; height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-dim);
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__social a:hover { color: var(--color-deep); background: var(--color-gold-light); border-color: var(--color-gold-light); transform: translateY(-3px); }
}

.site-footer__col { display: flex; flex-direction: column; gap: 0.9rem; }
.site-footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.4rem;
}
.site-footer__col a {
  position: relative;
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  transition: color var(--duration-fast), padding-left var(--duration-fast) var(--ease-out-expo);
  width: fit-content;
}
.site-footer__col a::before {
  content: "";
  position: absolute;
  left: -0.9rem; top: 50%;
  width: 0; height: 1px;
  background: var(--color-gold);
  transform: translateY(-50%);
  transition: width var(--duration-fast) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__col a:hover { color: var(--color-text); padding-left: 0.4rem; }
  .site-footer__col a:hover::before { width: 0.7rem; }
}

/* ── Tier 2: product-series lockups ────────────────────────────────────── */
.site-footer__rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-line) 12%, var(--color-line) 88%, transparent);
}
.site-footer__series {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
}
.series-lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, rgba(43,31,22,0.5), rgba(33,24,17,0.3));
  transition: border-color var(--duration-normal), transform var(--duration-normal) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .series-lockup:hover { border-color: rgba(201,169,110,0.45); transform: translateY(-3px); }
}
.series-lockup__mark {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  position: relative;
}
.series-lockup__mark--senso {
  border: 2px solid var(--state-caution);
  box-shadow: 0 0 12px rgba(229, 168, 75, 0.4);
}
.series-lockup__mark--agent {
  background: radial-gradient(circle at 35% 30%, var(--color-gold-light), var(--color-gold) 60%, var(--color-gold-dark));
  box-shadow: 0 0 14px rgba(201, 169, 110, 0.5);
}
.series-lockup__text { display: flex; flex-direction: column; gap: 0.15rem; }
.series-lockup__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--color-text-dim); }
.series-lockup__name strong { color: var(--color-text); font-weight: 700; }
.series-lockup:hover .series-lockup__name { color: var(--color-text); }
.series-lockup__sub {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ── Tier 3: brand + contact + bottom bar ──────────────────────────────── */
.site-footer__brandrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.site-footer__logo .nav__logo-mark { width: 30px; height: 30px; }
.site-footer__tagline {
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  margin-top: 0.7rem;
  max-width: 32ch;
}
.site-footer__contact {
  font-style: normal;
  text-align: right;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  line-height: 1.8;
}
.site-footer__contact strong { display: block; color: var(--color-text-dim); font-weight: 600; }
.site-footer__contact a { color: var(--color-gold-light); }
.site-footer__contact a:hover { text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-line);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}
.site-footer__legal { display: flex; gap: var(--space-md); }
.site-footer__legal a:hover { color: var(--color-text-dim); }

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__news { grid-column: span 2; max-width: none; }
  .site-footer__series { grid-template-columns: 1fr; }
  .site-footer__brandrow { flex-direction: column; align-items: flex-start; }
  .site-footer__contact { text-align: left; }
  .site-footer__bottom { flex-direction: column; text-align: center; }
  .site-footer__watermark { font-size: 34vw; }
}
@media (max-width: 560px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__news { grid-column: span 1; }
  .site-footer__form { max-width: none; flex-wrap: wrap; }
  .site-footer__form button { width: 100%; }
}

/* ==========================================================================
   Focus states
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(78vw, 320px);
    flex-direction: column;
    gap: 0;
    padding: 5.5rem var(--space-md) var(--space-md);
    background: rgba(20, 14, 10, 0.96);
    backdrop-filter: blur(18px);
    border-left: 1px solid var(--color-line);
    font-size: var(--text-lg);
    color: var(--color-text);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--duration-normal) var(--ease-out-expo), visibility 0s var(--duration-normal);
    z-index: 1;
  }
  .nav__logo, .nav__toggle { position: relative; z-index: 2; }
  .nav.menu-open .nav__links {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }
  .nav__links a {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-display);
    font-weight: 600;
  }
  .nav__links a::after { display: none; }
  .nav__links a[aria-current="page"] { color: var(--color-gold-light); padding-left: 0.6rem; border-left: 2px solid var(--color-gold); }
  .stat-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .bento { grid-template-columns: 1fr; }
  .bento-card, .bento-card--wide, .bento-card--narrow, .bento-card--feature { grid-column: span 1; }
  .bento-card--feature { grid-template-columns: 1fr; }
  .bento-card--feature .bento-feature__media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; min-height: 220px; }
  .bento-card--feature .bento-feature__copy { padding: var(--space-md); }
  .pricing-grid { grid-template-columns: 1fr; }
  .timeline-row { grid-template-columns: 4.5rem 1fr; }
  .timeline-row__body { grid-column: span 2; }
  .footer { flex-direction: column; text-align: center; }
  #hero-left-label, #hero-stage-counter { display: none; }
  .hero-text-stage { width: min(92%, 480px); }
  .voice-grid { grid-template-columns: 1fr; }
  .timeline-wrap { grid-template-columns: 1fr; gap: var(--space-md); }
  .timeline-ring-panel { position: static; }
  .status-ring { width: 150px; height: 150px; }
}

@media (max-width: 560px) {
  .hero-title { font-size: clamp(2rem, 9vw, 3rem); }
  .waitlist-form { flex-direction: column; border-radius: 20px; }
  .waitlist-form button { width: 100%; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .scroll-line { animation: none; }
  .voice-wave i, .voice-card__dot--alarm,
  .status-ring[data-state] .status-ring__led { animation: none; }
  .hero-text-stage.words-revealed .hero-rule,
  .hero-text-stage.words-revealed .hero-label,
  .hero-text-stage.words-revealed .hero-title .tline-inner,
  .hero-text-stage.words-revealed .hero-subtitle,
  .hero-text-stage.words-revealed .hero-ctas {
    animation: none;
    opacity: 1;
    transform: none;
  }
}








/* ==========================================================================
   SEO / a11y helpers (added with index.html SEO pass — no visual change)
   ========================================================================== */
/* Visually hidden: present for SEO + screen readers, invisible on screen */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Statistics source citation line */
.stat-source {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-faint);
}
.stat-source--onfire {
  position: relative;
  z-index: 1;
  color: rgba(250, 247, 242, 0.6);
}

/* ==========================================================================
   THEME TOGGLE BUTTON (shared by both themes)
   Lives in the nav; inherits the nav's token context so it adapts to the
   dark hero, the frosted-white scrolled bar, and either theme automatically.
   ========================================================================== */
.nav__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-gold-light);
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast),
              background var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);
}
.nav__theme svg { display: block; }
.nav__theme:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .nav__theme:hover { border-color: var(--color-gold); background: rgba(201, 169, 110, 0.10); }
}
/* Show the icon of the theme you'll switch TO: sun in dark mode, moon in light. */
.nav__theme-ico { display: none; }
.nav__theme-ico--sun { display: block; }
[data-theme="light"] .nav__theme-ico--sun { display: none; }
[data-theme="light"] .nav__theme-ico--moon { display: block; }

/* ==========================================================================
   THEME SYSTEM — LIGHT MODE LAYER
   The charred-dark palette at the top of this file is the base (default)
   theme. Adding `data-theme="light"` to <html> re-declares the palette tokens
   and layers a small set of component overrides. Because virtually every
   component reads from the custom properties, flipping the attribute re-skins
   the whole site instantly — one codebase, no duplicated markup or components.

   Cinematic media "islands" (hero video, device anatomy, sensor tiles, the
   Stakes band, the 3D viewer) stay dark in BOTH themes: in light mode their
   tokens are re-scoped back to the warm-dark identity so text over footage
   stays legible.
   ========================================================================== */
:root[data-theme="light"] {
  --color-deep:        #FBFBFD;  /* page background — soft off-white */
  --color-surface:     #FFFFFF;
  --color-surface-2:   #F5F5F7;
  --color-surface-3:   #E8E8ED;
  --color-line:        rgba(0, 0, 0, 0.09);
  --color-text:        #1D1D1F;  /* primary ink — near-black */
  --color-text-dim:    #48484D;  /* secondary (~8:1 on white) */
  --color-text-faint:  #86868B;  /* tertiary (~4.6:1 on white) */
  --color-gold:        #8C5E1C;  /* accent — bronze, AA on white */
  --color-gold-light:  #6F4A15;  /* emphasis / hover — deeper bronze */
  --color-gold-dark:   #573A12;
  --color-rose:        #A65D5D;
  --color-sage:        #4F7A57;
  /* Soft ambient shadows for the light surface */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.06), 0 14px 34px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.07), 0 28px 64px rgba(0,0,0,0.08);
  --shadow-hover: 0 14px 44px rgba(0,0,0,0.10), 0 34px 78px rgba(0,0,0,0.10);
}

/* — Dark media islands keep the warm-dark palette in light mode — */
[data-theme="light"] .hero-scroll,
[data-theme="light"] .stakes-section,
[data-theme="light"] .bento-card,
[data-theme="light"] .showcase-frame,
[data-theme="light"] .scrub-stage,
[data-theme="light"] .device3d__canvas-wrap {
  --color-deep:        #1A1410;
  --color-surface:     #211811;
  --color-surface-2:   #2B1F16;
  --color-surface-3:   #3D2B1F;
  --color-line:        rgba(201, 169, 110, 0.16);
  --color-text:        #FAF7F2;
  --color-text-dim:    rgba(250, 247, 242, 0.62);
  --color-text-faint:  rgba(250, 247, 242, 0.4);
  --color-gold:        #C9A96E;
  --color-gold-light:  #E8D5A3;
  --color-gold-dark:   #8B6914;
  /* bind `color` so descendants that inherit (e.g. card titles) pick up cream */
  color: var(--color-text);
}

/* film grain: very restrained on the light surface */
[data-theme="light"] body::before { opacity: 0.018; mix-blend-mode: multiply; }

/* — Nav — over the always-dark hero keep light chrome; on scroll into the
   light page switch to the frosted-white Apple bar. — */
[data-theme="light"] .nav {
  background: linear-gradient(to bottom, rgba(15, 10, 7, 0.55), transparent);
  --color-text:        #FAF7F2;
  --color-text-dim:    rgba(250, 247, 242, 0.78);
  --color-line:        rgba(255, 255, 255, 0.16);
  --color-gold:        #C9A96E;
  --color-gold-light:  #E8D5A3;
  --color-gold-dark:   #8B6914;
  --color-deep:        #1A1410;
  color: var(--color-text);
}
[data-theme="light"] .nav.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  --color-text:        #1D1D1F;
  --color-text-dim:    #48484D;
  --color-line:        rgba(0, 0, 0, 0.09);
  --color-gold:        #8C5E1C;
  --color-gold-light:  #6F4A15;
  --color-gold-dark:   #573A12;
  --color-deep:        #FBFBFD;
}
[data-theme="light"] .nav__toggle { background: rgba(150, 150, 158, 0.14); }
[data-theme="light"] .nav.is-scrolled .nav__toggle { background: rgba(120, 120, 128, 0.10); }

/* — Footer — light gradient, light form and series lockups — */
[data-theme="light"] .site-footer {
  background:
    radial-gradient(ellipse 50% 70% at 85% 0%, rgba(201, 169, 110, 0.10), transparent 60%),
    radial-gradient(ellipse 55% 60% at 5% 100%, rgba(139, 105, 20, 0.06), transparent 62%),
    linear-gradient(to bottom, #F5F5F7, #ECECEF);
}
[data-theme="light"] .site-footer__watermark { color: rgba(140, 94, 28, 0.05); }
[data-theme="light"] .site-footer__form {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .site-footer__form:focus-within {
  border-color: rgba(140, 94, 28, 0.55);
  box-shadow: 0 0 0 4px rgba(140, 94, 28, 0.10);
}
[data-theme="light"] .series-lockup {
  background: linear-gradient(150deg, #FFFFFF, #F7F7F9);
  box-shadow: var(--shadow-sm);
}

/* — Light-surface cards: soft ambient elevation replaces dark glows — */
[data-theme="light"] .voice-card,
[data-theme="light"] .price-card,
[data-theme="light"] .compare-wrap,
[data-theme="light"] .series-card,
[data-theme="light"] .power-card,
[data-theme="light"] .team-card { box-shadow: var(--shadow-md); }
[data-theme="light"] .config__opt { box-shadow: var(--shadow-sm); }
[data-theme="light"] .bento-card,
[data-theme="light"] .showcase-frame,
[data-theme="light"] .device3d__canvas-wrap,
[data-theme="light"] .kitchen-gallery__item { box-shadow: var(--shadow-md); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] .bento-card:hover,
  [data-theme="light"] .voice-card:hover,
  [data-theme="light"] .price-card:hover,
  [data-theme="light"] .series-card:hover,
  [data-theme="light"] .power-card:hover,
  [data-theme="light"] .team-card:hover,
  [data-theme="light"] .kitchen-gallery__item:hover,
  [data-theme="light"] .series-lockup:hover { box-shadow: var(--shadow-hover); }
  [data-theme="light"] .config__opt:hover { box-shadow: var(--shadow-md); border-color: rgba(0,0,0,0.16); }
}

/* system panel reads as a lifted card on the light page */
[data-theme="light"] .system-panel { border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-lg); }

/* highlighted pricing tier → warm-white in light mode */
[data-theme="light"] .price-card--highlight {
  background: linear-gradient(165deg, #FFFCF5, #FFFFFF);
  border-color: rgba(140, 94, 28, 0.42);
  box-shadow: var(--shadow-lg);
}

/* install photo + waitlist pill */
[data-theme="light"] .install-media { box-shadow: var(--shadow-lg); }
[data-theme="light"] .waitlist-form { box-shadow: var(--shadow-sm); }
[data-theme="light"] .waitlist-form:focus-within {
  border-color: rgba(140, 94, 28, 0.5);
  box-shadow: 0 0 0 4px rgba(140, 94, 28, 0.10);
}

/* device LED-ring core reads as a machined part on white */
[data-theme="light"] .status-ring__core {
  box-shadow: 0 6px 20px rgba(0,0,0,0.14), inset 0 1px 1px rgba(255,255,255,0.05);
}

/* anatomy render stays a self-contained dark band in light mode */
[data-theme="light"] .anatomy2::before { background: linear-gradient(to bottom, #1A1410, transparent); }
[data-theme="light"] .anatomy2::after { background: linear-gradient(to top, #1A1410, transparent); }
[data-theme="light"] .anatomy2__labels .a2 h3 { color: #E8D5A3; }

/* semantic state colours deepened where used as text/glyphs on white */
[data-theme="light"] .compare-table .yes { color: #3E8A50; }
[data-theme="light"] .compare-table .mid { color: #9A6410; }

/* light-mode mobile slide-out menu = frosted white, whatever the scroll state */
@media (max-width: 900px) {
  [data-theme="light"] .nav__links {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(22px);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.10);
    --color-text:        #1D1D1F;
    --color-text-dim:    #48484D;
    --color-line:        rgba(0, 0, 0, 0.09);
    --color-gold:        #8C5E1C;
    --color-gold-light:  #6F4A15;
    color: var(--color-text);
  }
}

/* ==========================================================================
   NAV ACTIONS — group the Reserve CTA + theme toggle + hamburger on the right
   so "Reserve Yours" sits directly beside the theme toggle.
   ========================================================================== */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* ==========================================================================
   RESERVE MODAL — shared reservation dialog (markup injected by js/reserve.js)
   Theme-aware via the design tokens; the left rail stays warm-dark/branded in
   both themes for a premium split, the form adopts the active theme.
   ========================================================================== */
.reserve-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}
.reserve-modal[hidden] { display: none; }

.reserve-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 5, 0.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out-expo);
}
.reserve-modal.is-open .reserve-modal__backdrop { opacity: 1; }

.reserve-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  max-height: calc(100dvh - 1.5rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.5);
  transform: translateY(18px) scale(0.985);
  opacity: 0;
  transition: transform var(--duration-normal) var(--ease-out-expo), opacity var(--duration-normal);
}
.reserve-modal.is-open .reserve-modal__dialog { transform: none; opacity: 1; }

.reserve-modal__close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.12);
  color: #FAF7F2;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo), background var(--duration-fast), border-color var(--duration-fast);
}
.reserve-modal__close:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255,255,255,0.4); }
.reserve-modal__close:active { transform: scale(0.92); }

.reserve-modal__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  max-height: calc(100dvh - 1.5rem);
}

/* — Left rail: always warm-dark & branded, in both themes — */
.reserve-modal__aside {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #FAF7F2;
  background:
    radial-gradient(ellipse 90% 55% at 30% 0%, rgba(201, 169, 110, 0.22), transparent 60%),
    linear-gradient(165deg, #2B1F16, #1A1410);
}
.reserve-modal__ring {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--state-safe) 0deg 3.6deg, transparent 3.6deg 7.2deg);
  -webkit-mask-image: radial-gradient(circle, transparent 54%, #000 56%, #000 78%, transparent 80%);
  mask-image: radial-gradient(circle, transparent 54%, #000 56%, #000 78%, transparent 80%);
  filter: drop-shadow(0 0 9px var(--state-safe));
  margin-bottom: 0.4rem;
}
.reserve-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #E8D5A3;
}
.reserve-modal__asidetitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.reserve-modal__points {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: auto;
}
.reserve-modal__points li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--text-sm);
  color: rgba(250, 247, 242, 0.82);
  line-height: 1.5;
}
.reserve-modal__points li::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--state-safe);
  box-shadow: 0 0 8px var(--state-safe);
}
.reserve-modal__points strong { color: #FAF7F2; font-weight: 600; }
.reserve-modal__reassure {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(250, 247, 242, 0.5);
  letter-spacing: 0.03em;
}

/* — Right: the form (adopts the active theme) — */
.reserve-modal__main {
  padding: clamp(1.5rem, 3vw, 2.6rem);
  overflow-y: auto;
}
.reserve-modal__eyebrow--main { color: var(--color-gold-light); display: block; }
.reserve-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 0.5rem;
}
.reserve-modal__lede {
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 46ch;
  margin-top: 0.6rem;
}

.reserve-form { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 1.05rem; }
.reserve-form[hidden] { display: none; }
.reserve-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.reserve-field { display: flex; flex-direction: column; gap: 0.4rem; }
.reserve-field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: flex; align-items: center; gap: 0.5rem;
}
.reserve-field__opt {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.62rem;
  color: var(--color-text-faint);
  opacity: 0.7;
}
.reserve-field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.95rem;
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.reserve-field input::placeholder { color: var(--color-text-faint); }
.reserve-field input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18);
}
.reserve-field.has-error input { border-color: var(--state-alarm); box-shadow: 0 0 0 3px rgba(225, 75, 59, 0.16); }
.reserve-field__err {
  font-size: var(--text-xs);
  color: var(--state-alarm);
  min-height: 0;
  line-height: 1.3;
}
.reserve-choice.has-error .reserve-field__err { margin-top: 0.2rem; }

/* Model radio cards */
.reserve-choice { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.reserve-choice legend {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 0;
}
.reserve-choice__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.reserve-opt { position: relative; cursor: pointer; }
.reserve-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.reserve-opt__box {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);
}
.reserve-opt input:focus-visible + .reserve-opt__box { box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.3); }
.reserve-opt input:checked + .reserve-opt__box { border-color: var(--color-gold); background: rgba(201, 169, 110, 0.08); }
.reserve-opt__mark { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.reserve-opt__mark--senso { border: 2px solid var(--state-caution); }
.reserve-opt__mark--agent { background: radial-gradient(circle at 34% 28%, var(--color-gold-light), var(--color-gold) 60%, var(--color-gold-dark)); }
.reserve-opt__text { display: flex; flex-direction: column; line-height: 1.2; }
.reserve-opt__text strong { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-text); }
.reserve-opt__text small { font-size: 0.72rem; color: var(--color-text-faint); margin-top: 0.1rem; }
.reserve-opt__mark--other { border: 2px solid var(--color-text-faint); }
.reserve-choice__opts--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .reserve-choice__opts--three { grid-template-columns: 1fr; } }

/* Power segmented control */
.reserve-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.3rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface-2);
}
.reserve-seg__opt { position: relative; }
.reserve-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.reserve-seg__opt span {
  display: block;
  text-align: center;
  padding: 0.55rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-dim);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.reserve-seg__opt input:checked + span { background: var(--color-gold-light); color: var(--color-deep); }
.reserve-seg__opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.3); }
.reserve-seg--three { grid-template-columns: repeat(3, 1fr); }

/* Textarea — shares the input treatment (used by the investor-deck form) */
.reserve-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.95rem;
  outline: none;
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.reserve-field textarea::placeholder { color: var(--color-text-faint); }
.reserve-field textarea:focus { border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18); }

/* Submit + fine print */
.reserve-form__submit {
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color: var(--color-deep);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: 0 6px 24px rgba(201, 169, 110, 0.3);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast);
}
.reserve-form__submit small { font-family: var(--font-mono); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.04em; opacity: 0.85; }
.reserve-form__submit:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .reserve-form__submit:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(201, 169, 110, 0.45); }
}
.reserve-form__fineprint { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.5; text-align: center; }

/* Success state */
.reserve-success { text-align: center; padding: var(--space-md) 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.reserve-success[hidden] { display: none; }
.reserve-success__badge {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--state-safe);
  background: rgba(127, 192, 138, 0.14);
  border: 1px solid rgba(127, 192, 138, 0.4);
  margin-bottom: 0.4rem;
}
.reserve-success__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); outline: none; }
.reserve-success__msg { color: var(--color-text-dim); font-size: var(--text-sm); line-height: 1.6; max-width: 42ch; }
.reserve-success__done { max-width: 220px; margin-top: 0.6rem; }

@media (max-width: 720px) {
  .reserve-modal__grid { grid-template-columns: 1fr; }
  .reserve-modal__aside { display: none; }
  .reserve-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reserve-modal__backdrop,
  .reserve-modal__dialog { transition: none; }
}