@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   CSS CUSTOM PROPERTIES & DUAL MONOCHROMATIC THEME TOKENS
   ========================================================================== */

:root {
  /* LIGHT THEME (Porcelain & Deep Ink) */
  --bg-canvas: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-dock: #F1F5F9;
  --bg-subtle: #F1F5F9;

  --border-glass: rgba(15, 23, 42, 0.08);
  --border-glass-hover: rgba(15, 23, 42, 0.16);
  --border-focus: #0F172A;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-muted: #94A3B8;

  --btn-primary-bg: #0F172A;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #1E293B;

  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-text: #0F172A;
  --btn-secondary-border: rgba(15, 23, 42, 0.1);

  --accent-stress-bg: #FEF3C7;
  --accent-stress-text: #B45309;
  --accent-stress-border: #F59E0B;

  --accent-success-bg: #ECFDF5;
  --accent-success-text: #059669;

  --accent-alert-bg: #FFF1F2;
  --accent-alert-text: #E11D48;

  --accent-blue-bg: #EFF6FF;
  --accent-blue-text: #1D4ED8;

  --accent-purple-bg: #F5F3FF;
  --accent-purple-text: #7C3AED;

  --brand-cobalt: #2563EB;
  --brand-cobalt-subtle: rgba(37, 99, 235, 0.06);

  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 30px -8px rgba(15, 23, 42, 0.06), 0 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 24px 50px -12px rgba(15, 23, 42, 0.1), 0 0 1px 1px rgba(15, 23, 42, 0.04);
  --specular: inset 0 1px 0 rgba(255, 255, 255, 1);
  --orb-opacity: 0.35;
}

[data-theme="dark"] {
  /* DARK THEME (Obsidian Carbon & Crisp White) */
  --bg-canvas: #06080D;
  --bg-surface: #0A0D15;
  --bg-surface-elevated: #111622;
  --bg-card: rgba(16, 22, 34, 0.7);
  --bg-dock: rgba(8, 11, 18, 0.9);
  --bg-subtle: rgba(255, 255, 255, 0.04);

  --border-glass: rgba(255, 255, 255, 0.09);
  --border-glass-hover: rgba(255, 255, 255, 0.2);
  --border-focus: #FFFFFF;

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --text-muted: #475569;

  --btn-primary-bg: #FFFFFF;
  --btn-primary-text: #06080D;
  --btn-primary-hover: #E2E8F0;

  --btn-secondary-bg: rgba(255, 255, 255, 0.05);
  --btn-secondary-text: #F8FAFC;
  --btn-secondary-border: rgba(255, 255, 255, 0.1);

  --accent-stress-bg: rgba(245, 158, 11, 0.18);
  --accent-stress-text: #FDE047;
  --accent-stress-border: #F59E0B;

  --accent-success-bg: rgba(16, 185, 129, 0.12);
  --accent-success-text: #34D399;

  --accent-alert-bg: rgba(244, 63, 94, 0.12);
  --accent-alert-text: #FB7185;

  --accent-blue-bg: rgba(56, 189, 248, 0.12);
  --accent-blue-text: #7DD3FC;

  --accent-purple-bg: rgba(167, 139, 250, 0.14);
  --accent-purple-text: #C4B5FD;

  --brand-cobalt: #60A5FA;
  --brand-cobalt-subtle: rgba(96, 165, 250, 0.1);

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 16px 36px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --shadow-lg: 0 30px 70px -15px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --specular: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --orb-opacity: 0.6;
}

/* ==========================================================================
   BASE RESET & TYPOGRAPHY
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  transition: background-color 0.25s ease, color 0.25s ease;
}

body {
  background-color: var(--bg-canvas);
  color: var(--text-secondary);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Ambient Radial Mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -5%, rgba(37, 99, 235, 0.06), transparent 70%),
    radial-gradient(circle 700px at 90% 40%, rgba(245, 158, 11, 0.04), transparent 60%),
    radial-gradient(circle 800px at 10% 85%, rgba(16, 185, 129, 0.03), transparent 60%);
  opacity: var(--orb-opacity);
}

.container {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.navbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1200px;
  z-index: 100;
  background: var(--bg-card);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-md);
  border-radius: 20px;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 20px;
  flex-wrap: nowrap;
  gap: 16px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
  white-space: nowrap;
}

.logo-gem {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  background-color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

.brand-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-shrink: 1;
  flex-wrap: nowrap;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  background: var(--bg-surface);
  border-color: var(--border-glass-hover);
  transform: translateY(-1px);
}

/* ==========================================================================
   BUTTONS & PILL BADGES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--shadow-sm), var(--specular);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: var(--border-glass-hover);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 15px 34px;
  font-size: 1.02rem;
  border-radius: 14px;
}

.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.pill-amber {
  color: var(--accent-stress-text);
  background: var(--accent-stress-bg);
  border-color: rgba(245, 158, 11, 0.3);
}

.pill-blue {
  color: var(--accent-blue-text);
  background: var(--accent-blue-bg);
  border-color: rgba(37, 99, 235, 0.3);
}

.pill-emerald {
  color: var(--accent-success-text);
  background: var(--accent-success-bg);
  border-color: rgba(16, 185, 129, 0.3);
}

.pill-rose {
  color: var(--accent-alert-text);
  background: var(--accent-alert-bg);
  border-color: rgba(225, 29, 72, 0.3);
}

.pill-purple {
  color: var(--accent-purple-text);
  background: var(--accent-purple-bg);
  border-color: rgba(124, 58, 237, 0.3);
}

/* ==========================================================================
   HERO STAGE & ROTATING HEADLINE (CINEMATIC VIDEO BACKGROUND)
   ========================================================================== */

.hero-stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 0 80px;
  overflow: hidden;
  background-color: #06080D;
}

.hero-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  /* Never a blank frame: a dark brand field sits under the poster and video, so
     a slow fetch shows a cinematic ground rather than nothing. The soft amber
     sheen slowly breathes while the video loads, signalling that something is
     coming, then stops once it plays. */
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(245, 158, 11, 0.10), transparent 70%),
    #06080D;
}
.hero-video-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 40% at 50% 35%, rgba(245, 158, 11, 0.14), transparent 70%);
  opacity: 0;
  animation: heroLoadingPulse 2.4s ease-in-out infinite;
}
/* Once the video is actually playing, the wrap gets .is-playing and the pulse
   stops — nothing breathing behind a moving picture. */
.hero-video-wrap.is-playing::before {
  animation: none;
  opacity: 0;
}
@keyframes heroLoadingPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-wrap::before { animation: none; }
}

.hero-video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  display: block;
}
.hero-video-wrap.is-playing .hero-video-element {
  opacity: 0.92;
}

/* Cinematic Soft Corner Alpha Vignette */
.hero-video-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 95% 85% at 50% 50%,
    transparent 35%,
    rgba(6, 8, 13, 0.35) 70%,
    rgba(6, 8, 13, 0.88) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Top fade under floating navbar */
.hero-video-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(6, 8, 13, 0.75) 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* Bottom fade smoothly merging into page canvas */
.hero-video-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(0deg, var(--bg-canvas) 0%, rgba(6, 8, 13, 0.6) 45%, transparent 100%);
  z-index: 3;
  pointer-events: none;
  transition: background 0.25s ease;
}

.hero-content-container {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 5.5-Second Cinematic Reveal Stagger Choreography */
.hero-reveal-pill,
.hero-reveal-headline,
.hero-reveal-ctas,
.hero-reveal-cue {
  opacity: 0;
  transform: translateY(26px);
  animation: heroCinematicReveal 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform, filter;
}

.hero-reveal-pill {
  animation-delay: 5.1s;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hero-reveal-headline {
  animation-delay: 5.5s;
}

.hero-reveal-ctas {
  animation-delay: 5.9s;
}

.hero-reveal-cue {
  animation-delay: 6.3s;
}

@keyframes heroCinematicReveal {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
    filter: blur(6px);
  }
  50% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.hero-headline {
  font-size: clamp(2.8rem, 5.8vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.08;
  max-width: 980px;
  margin: 20px auto;
  color: #F8FAFC;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.75);
}

.cycler {
  display: inline-block;
  color: #F8FAFC;
  background: linear-gradient(135deg, #FFFFFF 30%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 3px solid #F59E0B;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* The sentence's full stop belongs inside this inline-block. As a sibling in
   the markup it wrapped onto a line of its own on narrow screens, leaving a
   stray dot floating under the headline. */
.cycler::after {
  content: '.';
}

.hero-description {
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  color: rgba(248, 250, 252, 0.86);
  max-width: 760px;
  margin: 0 auto 38px;
  line-height: 1.65;
  font-weight: 450;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.hero-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Hero Scroll Cue Indicator */
.hero-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(248, 250, 252, 0.55);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.2s ease;
  margin-top: 10px;
}

.hero-scroll-cue:hover {
  color: #F8FAFC;
  transform: translateY(2px);
}

.scroll-mouse-pill {
  width: 20px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.scroll-wheel {
  width: 3px;
  height: 6px;
  background: #F59E0B;
  border-radius: 2px;
  animation: scrollBounce 2s infinite ease-in-out;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: 0.25; }
}

/* ==========================================================================
   GLASS DECKS & SOUNDBOARD CARDS
   ========================================================================== */

.glass-deck {
  background: var(--bg-card);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-lg), var(--specular);
  border-radius: 28px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-deck:hover {
  border-color: var(--border-glass-hover);
}

.glass-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sm);
  border-radius: 20px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: var(--border-glass-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hero-deck {
  max-width: 900px;
  margin: 0 auto;
  padding: 38px;
  text-align: left;
}

.hero-deck-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}

.glass-segmented {
  display: flex;
  background: var(--bg-dock);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
  flex-wrap: wrap;
  gap: 4px;
}

.style-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.style-tab-btn:hover {
  color: var(--text-primary);
}

.style-tab-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Styles Visualizer Main Card */
.styles-visualizer-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-md);
  border-radius: 28px;
  padding: clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.wave-display-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: clamp(90px, 15vw, 130px);
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.wave-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

.animated-wave-path {
  fill: none;
  stroke-width: 3.5px;
  stroke-linecap: round;
  transition: stroke 0.3s ease;
}

.wave-area-fill {
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.pitch-node-handle {
  cursor: ns-resize;
  transition: r 0.18s ease, fill 0.18s ease, transform 0.18s ease;
}

.pitch-node-handle:hover {
  r: 8px;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.8));
}

.pitch-node-handle.dragging {
  cursor: grabbing;
  r: 9px;
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 1));
}

.karaoke-teleprompter-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 28px);
  min-height: 100px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02);
}

.karaoke-words-wrap {
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  line-height: 1.7;
  color: var(--text-primary);
  font-weight: 500;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.karaoke-word {
  display: inline-block;
  transition: all 0.15s ease;
  padding: 2px 5px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.karaoke-word:hover {
  background: rgba(245, 158, 11, 0.12);
  color: var(--text-primary);
}

.karaoke-word.speaking-active {
  background: #0F172A;
  color: #FFFFFF;
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}

[data-theme="dark"] .karaoke-word.speaking-active {
  background: #FFFFFF;
  color: #06080D;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.4);
}

.karaoke-word.stress-word {
  color: #D97706;
  font-weight: 800;
  border-bottom: 2px solid #F59E0B;
}

.style-reaction-box {
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.seg-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.seg-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.speech-teleprompter-glass {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
  border-radius: 18px;
  padding: 34px;
  margin-bottom: 24px;
  min-height: 120px;
  display: flex;
  align-items: center;
}

.speech-prose {
  font-size: 1.55rem;
  line-height: 1.75;
  color: var(--text-primary);
  font-weight: 450;
  letter-spacing: -0.01em;
}

.stress-glow {
  background: var(--accent-stress-bg);
  color: var(--accent-stress-text);
  border-bottom: 2.5px solid var(--accent-stress-border);
  border-radius: 6px;
  padding: 0 6px;
  font-weight: 700;
}

.soundboard-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 16px 22px;
  gap: 18px;
}

.play-orb-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--bg-canvas);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.play-orb-btn:hover {
  transform: scale(1.08);
}

.spectrum-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 38px;
}

.spectrum-bar {
  flex: 1;
  background: var(--text-tertiary);
  opacity: 0.25;
  border-radius: 3px;
  transition: height 0.08s ease, opacity 0.15s ease;
}

.spectrum-bar.active {
  background: #F59E0B;
  opacity: 1;
}

/* ==========================================================================
   SECTIONS & GRIDS
   ========================================================================== */

.section {
  padding: 100px 0;
  position: relative;
  z-index: 2;
}

.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 60px;
}

.section-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 14px 0;
  color: var(--text-primary);
  line-height: 1.15;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1.08rem;
}

.glass-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

/* REVAMPED MONOTONE DIAGNOSTICS & ACOUSTIC LAB */
.monotone-diagnostics-deck {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .monotone-diagnostics-deck {
    grid-template-columns: 1fr;
  }
}

.neural-traps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.neural-trap-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
}

.neural-trap-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-glass-hover);
  box-shadow: var(--shadow-md);
}

.trap-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.neural-trap-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.neural-trap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.neural-trap-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.neural-trap-body {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.neural-trap-footer {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Spectrogram Lab Showcase Container */
.spectrogram-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-md);
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.spectrogram-box {
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.spectrogram-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spec-wave-canvas {
  width: 100%;
  height: 64px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-glass);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .spec-wave-canvas {
  background: rgba(0, 0, 0, 0.35);
}

.spec-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 4px;
}

.spec-metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-metric-label {
  font-size: 0.70rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.spec-metric-val {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}

/* Real-World Scenario Showcase Grid */
.scenario-deck {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1060px;
  margin: 0 auto;
}

.scenario-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sm);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all 0.2s ease;
}

.scenario-card:hover {
  border-color: var(--border-glass-hover);
  box-shadow: var(--shadow-md);
}

.scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.scenario-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.scenario-box {
  padding: 22px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.box-before {
  background: var(--accent-alert-bg);
  border: 1px solid rgba(225, 29, 72, 0.2);
}

.box-after {
  background: var(--accent-success-bg);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.scenario-quote {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: 500;
}

.scenario-cue {
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

/* Acoustic Comparison Matrix Table */
.matrix-card {
  overflow-x: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  margin-top: 40px;
}

/* Feedback Reality Section */
.feedback-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .feedback-showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* REDESIGNED FEEDBACK DILEMMA SECTION */
.dilemma-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 24px;
  margin-bottom: 36px;
}

.dilemma-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
  position: relative;
}

.dilemma-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glass-hover);
  box-shadow: var(--shadow-md);
}

.dilemma-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-dock);
}

.dilemma-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.dilemma-card:hover .dilemma-card-media img {
  transform: scale(1.04);
}

.dilemma-media-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dilemma-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.dilemma-quote-box {
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 0.90rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.5;
  font-style: normal;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dilemma-comparison-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 10px;
}

.dilemma-contrast-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.dilemma-contrast-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.dilemma-contrast-header {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-glass);
}

.dilemma-contrast-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.dilemma-photo-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: var(--bg-dock);
  position: relative;
}

.dilemma-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wave-bar {
  width: 3px;
  background: var(--brand-cobalt);
  border-radius: 2px;
  opacity: 0.75;
}

/* ==========================================================================
   TWO-PHASE KEYNOTE MASTERY VIDEO DECK
   ========================================================================== */

.two-phase-video-deck {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  width: 100%;
  margin: 36px auto 44px;
}

.phase-video-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-md);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.phase-video-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glass-hover);
  box-shadow: var(--shadow-lg);
}

.phase-video-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #06080D;
}

.phase-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.phase-video-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(6, 8, 13, 0.35) 80%, rgba(6, 8, 13, 0.75) 100%),
              linear-gradient(180deg, rgba(6, 8, 13, 0.4) 0%, transparent 40%, transparent 60%, rgba(6, 8, 13, 0.75) 100%);
  pointer-events: none;
}

.phase-video-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(6, 8, 13, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #F8FAFC;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
  animation: pulseDotAnim 1.8s infinite ease-in-out;
}

.pulse-dot.emerald {
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

@keyframes pulseDotAnim {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; }
}

.phase-telemetry-pill {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 12px;
  background: rgba(6, 8, 13, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(248, 250, 252, 0.95);
  font-size: 0.74rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  z-index: 2;
}

.phase-video-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface);
}

.phase-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1.35;
  margin: 0;
}

.phase-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 840px) {
  .two-phase-video-deck {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Vocal Architecture Interactive Image Slider */
.architecture-slider-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 40px;
  position: relative;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
}

.architecture-slider {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sm);
  background: var(--bg-dock);
}

.architecture-slides-track {
  display: flex;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.architecture-slide {
  min-width: 100%;
  position: relative;
  aspect-ratio: 1200 / 896;
  max-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dock);
}

.architecture-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.architecture-slide-caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.84rem;
  font-weight: 700;
  z-index: 5;
}

.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.slider-nav-btn:hover {
  background: rgba(15, 23, 42, 0.95);
  transform: translateY(-50%) scale(1.08);
}

.slider-nav-prev {
  left: 16px;
}

.slider-nav-next {
  right: 16px;
}

.slider-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  opacity: 0.35;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  padding: 0;
}

.slider-dot.active {
  width: 28px;
  border-radius: 6px;
  background: #F59E0B;
  opacity: 1;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 600px;
}

.matrix-table th {
  padding: 20px 24px;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-glass);
  background: var(--bg-dock);
}

.matrix-table td {
  padding: 20px 24px;
  font-size: 0.94rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-glass);
}

.matrix-table tr:last-child td {
  border-bottom: none;
}

/* Telemetry Deck */
.telemetry-glass {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-md);
  border-radius: 28px;
  padding: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.telemetry-cell {
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.telemetry-number {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* Testimonials / Speaker Stories */
.testimonial-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 28px;
  margin-top: 36px;
}

.testimonial-card {
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Instagram Style Stories Feed */
.insta-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.insta-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.insta-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glass-hover);
  box-shadow: var(--shadow-md);
}

.insta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}

.insta-user-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.insta-avatar-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.insta-avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-surface);
  display: block;
}

.insta-user-details {
  display: flex;
  flex-direction: column;
}

.insta-username-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.insta-username {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-primary);
}

.insta-verified {
  width: 14px;
  height: 14px;
  color: #3897f0;
  display: inline-flex;
}

.insta-location {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

.insta-media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-dock);
}

.insta-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.insta-card:hover .insta-media-frame img {
  transform: scale(1.03);
}

.insta-badge-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.insta-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 6px;
  color: var(--text-primary);
}

.insta-actions-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.insta-action-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.insta-action-btn:hover {
  transform: scale(1.15);
}

.insta-likes {
  padding: 0 14px 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

.insta-caption {
  padding: 0 14px 8px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}

.insta-caption strong {
  color: var(--text-primary);
  margin-right: 4px;
}

.insta-tags {
  color: var(--brand-cobalt);
  font-size: 0.78rem;
  margin-top: 6px;
  display: block;
}

.insta-timestamp {
  padding: 0 14px 12px;
  font-size: 0.68rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.speaker-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.speaker-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-glass);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.speaker-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.speaker-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.speaker-role {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.speaker-context {
  font-size: 0.74rem;
  color: var(--brand-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.testimonial-quote {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
  font-style: normal;
  margin: 0;
}

.testimonial-quote strong {
  color: var(--text-primary);
}

.speaker-metric-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #059669;
}

/* Pricing Grid & Billing Toggle */
.billing-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-dock);
  padding: 5px;
  border-radius: 9999px;
  border: 1px solid var(--border-glass);
  margin-top: 24px;
}

.billing-opt-btn {
  padding: 8px 18px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.billing-opt-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.pricing-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

.price-card {
  padding: 44px 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  border-radius: 28px;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
}

.price-card.highlight {
  border-color: #F59E0B;
  box-shadow: var(--shadow-lg);
  background: var(--bg-surface-elevated);
}

.price-card-badge {
  position: absolute;
  top: 22px;
  right: 22px;
}

.price-num {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  margin: 16px 0 6px;
  line-height: 1;
}

.price-num span {
  font-size: 1rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

.price-billing-note {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-bottom: 24px;
}

.price-feature-group {
  margin: 20px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.price-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.price-feature-item strong {
  color: var(--text-primary);
}

.price-feature-item.disabled {
  opacity: 0.45;
}

.price-feature-item.disabled strong {
  color: var(--text-tertiary);
}

.check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-success-bg);
  color: var(--accent-success-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

.cross-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-dock);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

/* FAQ */
.faq-wrap {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-card {
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-q {
  padding: 22px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-a {
  padding: 0 28px 24px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Spatial CTA Banner */
.spatial-cta {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: 32px;
  padding: 68px 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .spatial-cta {
  background: #0E131F;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.spatial-cta h2 {
  color: #FFFFFF;
}

.spatial-cta p {
  color: #94A3B8;
}

.cta-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 16px 36px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.cta-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25);
  background: #F8FAFC;
}

/* Global Languages Banner */
.languages-banner {
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  padding: 18px 28px;
  max-width: 860px;
  margin: 0 auto 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.languages-banner strong {
  color: var(--text-primary);
}

/* Footer */
.footer {
  border-top: 1px solid var(--border-glass);
  padding: 60px 0 30px;
  background: var(--bg-surface);
  margin-top: 80px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-link {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1024px) {
  .nav-links {
    gap: 12px;
  }
  .nav-link {
    font-size: 0.8rem;
  }
}

@media (max-width: 840px) {
  .navbar {
    width: calc(100% - 24px);
    top: 12px;
  }
  .nav-links {
    display: none;
  }
  .hero-stage {
    padding: 130px 0 60px;
  }
  .speech-prose {
    font-size: 1.2rem;
  }
  .spatial-cta {
    padding: 40px 20px;
  }
}

/* ==========================================================================
   CONTACT EMAIL MODAL DIALOG
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 8, 13, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 0, 0, 0.45);
  border-radius: 28px;
  padding: clamp(28px, 5vw, 40px);
  max-width: 500px;
  width: 100%;
  text-align: center;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.modal-backdrop.active .modal-card {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.modal-close-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  transform: scale(1.08);
}

.modal-email-box {
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.modal-email-link {
  font-size: clamp(1.2rem, 3.5vw, 1.55rem);
  font-weight: 800;
  color: var(--text-primary);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  transition: color 0.18s ease;
  word-break: break-all;
}

.modal-email-link:hover {
  color: #F59E0B;
}

/* ==========================================================================
   HERO TRUST STRIP
   ========================================================================== */

.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 26px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.72);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hero-trust-item svg {
  flex-shrink: 0;
  color: #F59E0B;
}

/* ==========================================================================
   OVERVIEW SPLIT — PRODUCT SCREENSHOT SHOWCASE
   ========================================================================== */

.overview-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}

.overview-split-media {
  position: relative;
}

.overview-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle at 65% 35%, rgba(245, 158, 11, 0.18), transparent 62%);
  z-index: 0;
  filter: blur(6px);
}

.overview-product-shot {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-glass);
  transform: rotate(-1.2deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 340px;
  margin: 0 auto;
}

.overview-product-shot:hover {
  transform: rotate(0deg) translateY(-4px);
}

.overview-product-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.overview-floating-badge {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: -12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-md);
  border-radius: 14px;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 220px;
}

@media (max-width: 900px) {
  .overview-split {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .overview-split-media {
    order: -1;
  }
  .overview-floating-badge {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   PHASE FULL-BLEED VIDEO STACK (VOCAL ARCHITECTURE)
   ========================================================================== */

.phase-fullbleed-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 40px 0 56px;
}

.phase-fullbleed-panel {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #06080D;
}

.phase-fullbleed-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.phase-fullbleed-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 13, 0.1) 0%, rgba(6, 8, 13, 0.28) 45%, rgba(6, 8, 13, 0.94) 100%);
}

.phase-fullbleed-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 52px;
}

.phase-fullbleed-inner {
  max-width: 620px;
}

.phase-fullbleed-title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 14px 0 10px;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.phase-fullbleed-desc {
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 560px;
  margin: 0;
}

@media (max-width: 720px) {
  .phase-fullbleed-panel {
    min-height: 100vh;
  }
}

/* ==========================================================================
   CONTENT LIBRARY SPLIT (SCRIPT INGESTION + BUILT-IN PERSONAS)
   ========================================================================== */

.library-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}

.library-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-glass);
  aspect-ratio: 4 / 5;
  max-width: 400px;
  margin: 0 auto;
}

.library-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.library-media-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(6, 8, 14, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.library-methods {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.library-method-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.library-method-card:hover {
  border-color: var(--border-glass-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.library-method-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dock);
}

.library-persona-row {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.persona-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--bg-dock);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 10px 16px 10px 10px;
  flex: 1;
  min-width: 200px;
}

.persona-chip-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .library-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .library-media {
    order: -1;
  }
}

/* ==========================================================================
   ENTERPRISE TRUST & SECURITY GRID
   ========================================================================== */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.trust-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.trust-card:hover {
  border-color: var(--border-glass-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.trust-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 14px;
}

.trust-card h3 {
  font-size: 1.0rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.trust-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   SPATIAL CTA — CINEMATIC BACKGROUND MEDIA
   ========================================================================== */

.spatial-cta-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.spatial-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.85;
}

.spatial-cta-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 10, 17, 0.35) 0%, rgba(8, 10, 17, 0.72) 58%, #0A0E17 100%);
}

.spatial-cta > *:not(.spatial-cta-media):not(.spatial-cta-scrim) {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   MOBILE ENHANCEMENT PASS — GLOBAL RHYTHM + NEW SECTIONS
   ========================================================================== */

/* Tighter nav on tablet widths now that a 9th link (Enterprise) is present */
@media (max-width: 1024px) {
  .nav-links {
    gap: 9px;
  }
  .nav-link {
    font-size: 0.76rem;
  }
}

@media (max-width: 900px) {
  .library-split {
    text-align: left;
  }
}

@media (max-width: 720px) {
  /* Shorten the overall scroll on phones without losing section identity */
  .section {
    padding: 68px 0;
  }
  .section-head {
    margin-bottom: 40px;
  }
  .glass-grid-3,
  .trust-grid {
    gap: 16px;
  }

  .hero-trust-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    justify-items: center;
    text-align: center;
  }
  .hero-trust-item {
    white-space: normal;
    justify-content: center;
  }

  .phase-fullbleed-panel {
    min-height: 100vh;
    align-items: flex-end;
  }
  .phase-fullbleed-content {
    padding-bottom: 36px;
  }
  .phase-fullbleed-title {
    font-size: 1.5rem;
  }
  .phase-fullbleed-desc {
    font-size: 0.9rem;
  }

  .overview-product-shot {
    max-width: 260px;
  }
  .overview-floating-badge {
    max-width: 260px;
    text-align: left;
  }

  .library-media {
    max-width: 280px;
  }

  .persona-chip {
    min-width: 100%;
  }

  .trust-card {
    padding: 22px 20px;
  }
}

@media (max-width: 420px) {
  .hero-trust-strip {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PLAN CARD HEADER
   Was three copies of an inline `display:flex; justify-content:space-between`.
   At narrow widths the tier pill and the credit line collided, so the pill's
   rounded border cut through the text next to it.
   ========================================================================== */

.plan-card-header {
  display: flex;
  align-items: center;
  gap: 8px 10px;
}

.plan-card-header > .glass-pill {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  /* Narrow enough that the tier pill and its credit line can't share a row. */
  .plan-card-header {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   MOBILE REFINEMENTS (<= 640px)
   Touch-target sizing, legible minimum type, and copy that fits one line.
   ========================================================================== */

@media (max-width: 640px) {
  /* --- Touch targets: 44px minimum, per iOS/Android guidance ------------ */
  .theme-toggle-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .btn,
  .billing-opt-btn,
  .style-tab-btn {
    min-height: 44px;
  }

  .footer-link,
  .footer-social-link {
    display: inline-block;
    padding-block: 7px;
  }

  /* The dots stay 8px visually; the tappable area grows around them. */
  .slider-dot {
    position: relative;
  }

  .slider-dot::after {
    content: '';
    position: absolute;
    inset: -18px -10px;
  }

  /* --- Minimum legible type -------------------------------------------- */
  .glass-pill,
  .spec-metric-label,
  .phase-caption-label {
    font-size: 0.75rem !important;
  }

  /* --- Hero: keep the primary CTA on one line -------------------------- */
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-headline {
    text-wrap: balance;
  }

  /* --- The overview badge was a 4-line block pinned over the product shot */
  .overview-floating-badge {
    position: static;
    transform: none;
    max-width: 100%;
    margin: 14px auto 0;
  }
}

/* ==========================================================================
   FUTURE VOICE — full-screen close
   Sits between proof and price. Everything here is quiet except one thing:
   the word YOU at display scale, pointing straight back at the reader. The
   restraint elsewhere is what lets that land.
   ========================================================================== */

.future-voice {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 24px 72px;
  background:
    radial-gradient(120% 90% at 78% 45%, rgba(245, 158, 11, 0.13), transparent 62%),
    var(--bg-canvas);
  overflow: hidden;
}

.future-voice-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 56px;
}

.future-voice-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.future-voice-headline {
  margin: 4px 0 0;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  text-wrap: balance;
}

.future-voice-headline em {
  font-style: normal;
  color: #F5B44A;
  white-space: nowrap;
}

.future-voice-body {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

.future-voice-body-strong {
  color: var(--text-primary);
  font-weight: 600;
}

.future-voice-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 8px;
}

.future-voice-note {
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

/* --- The signature -------------------------------------------------------- */

.future-voice-portrait {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.future-voice-stack {
  position: relative;
  /* Height-driven, not width-driven. Capping the height of a full-width box
     letterboxed the plate inside it, and the mask then faded the BOX rather
     than the image, leaving the plate's own edges visible as vertical bands.
     Deriving width from height keeps the frame flush to the picture. */
  height: min(76vh, 700px);
  aspect-ratio: 4 / 5;
  width: auto;
  max-width: 100%;
}

.future-voice-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
  /* Dissolve the plate into the page rather than sitting in a box on top of it.
     The source is already shot on near-black, so this only softens the edge. */
  /* The plate's own background is a shade off the page, so a gentle mask left a
     visible rectangle. Fade earlier and further so it dissolves completely. */
  -webkit-mask-image: radial-gradient(66% 70% at 50% 42%, #000 34%, transparent 92%);
  mask-image: radial-gradient(66% 70% at 50% 42%, #000 34%, transparent 92%);
}

.future-voice-frame.is-active {
  opacity: 1;
}

/* Sits behind the portrait, and carries the section alone until the image
   exists. Deliberately clipped by the container — a word this size reads as
   architecture rather than text. */
/* Sits beneath the portrait as a caption, not across it — the pointing gesture
   is the subject and letterforms over the face competed with it. */
.future-voice-you {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-indent: 0.16em; /* offsets the trailing letter-space so it reads centred */
  color: #F5B44A;
  user-select: none;
  pointer-events: none;
}

.future-voice-kicker {
  width: 100%;
  max-width: 1180px;
  margin: 64px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--border-glass);
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .future-voice {
    min-height: auto;
    padding: 72px 22px 56px;
  }

  .future-voice-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* Signature first on mobile: the pointing finger is the hook, and burying it
     under three paragraphs wastes it. */
  .future-voice-portrait {
    order: -1;
  }

  .future-voice-stack {
    /* Tall enough for the figure to read — cropped shorter, the head is cut off
       and the pointing gesture (the entire hook) disappears. */
    height: min(58vh, 430px);
  }

  .future-voice-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .future-voice-kicker {
    margin-top: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .future-voice * { transition: none !important; animation: none !important; }
}

/* The crossfade is decorative; hold a single frame when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .future-voice-frame { transition: none; }
}