/* ==========================================================================
   SOLARIS OS // GOD-MODE MASTER ECOSYSTEM STYLESHEET
   Architect: Nicolai Jaschiniok (Nico Hua / nicohua.de)
   ========================================================================== */

:root {
  --bg-space: #05020a;
  --bg-deep: #020005;
  --bg-card: rgba(14, 7, 28, 0.72);
  --bg-card-hover: rgba(22, 11, 44, 0.88);

  --neon-magenta: #ec4899;
  --neon-magenta-glow: rgba(236, 72, 153, 0.45);
  --neon-pink: #f43f5e;
  --neon-violet: #a855f7;
  --neon-purple: #7c3aed;
  --neon-cyan: #00f0ff;
  --neon-cyan-glow: rgba(0, 240, 255, 0.45);
  --neon-amber: #fb923c;
  --neon-green: #10b981;
  
  --text-pure: #ffffff;
  --text-body: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --font-logo: 'Michroma', 'Orbitron', sans-serif;
  --font-headline: 'Orbitron', sans-serif;
  --font-sub: 'Rajdhani', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --font-mono: 'Fira Code', monospace;

  --pad-x: clamp(1.5rem, 4vw, 5rem);
  --pad-y: clamp(1.5rem, 2.8vw, 3.5rem);
  --title-size: clamp(2.7rem, 1.4rem + 5vw, 6rem);
  --subtitle-size: clamp(1.28rem, 0.75rem + 2vw, 2.35rem);
  --desc-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.35rem);

  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   AWWWARDS-TIER SLIM CYBERPUNK SCROLLBAR ENGINE
   ========================================================================== */
/* Modern Firefox Scrollbar Standard */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.45) rgba(5, 2, 10, 0.75);
}

/* WebKit & Blink Browsers (Chrome, Edge, Safari, Opera, Brave) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(5, 2, 10, 0.85);
  border-left: 1px solid rgba(0, 240, 255, 0.08);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-cyan, #00f0ff) 0%, var(--neon-magenta, #ec4899) 50%, var(--neon-amber, #fb923c) 100%);
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
  transition: all 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffffff 0%, var(--neon-cyan, #00f0ff) 40%, var(--neon-magenta, #ec4899) 100%);
  border-color: #ffffff;
  box-shadow: 0 0 16px var(--neon-cyan, #00f0ff), 0 0 24px var(--neon-magenta, #ec4899);
}

::-webkit-scrollbar-corner {
  background: rgba(5, 2, 10, 0.95);
}

/* Scrollable containers, HUD terminals, Modals & Code Panels */
.hud-terminal-feed,
.doc-body-paragraph,
.sim-step-indicators,
.voice-pills,
.dialect-pills-row,
.solaris-modal-body,
pre,
code {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.5) rgba(6, 10, 18, 0.6);
}

.hud-terminal-feed::-webkit-scrollbar,
.doc-body-paragraph::-webkit-scrollbar,
.voice-pills::-webkit-scrollbar,
.dialect-pills-row::-webkit-scrollbar,
.solaris-modal-body::-webkit-scrollbar,
pre::-webkit-scrollbar,
code::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.hud-terminal-feed::-webkit-scrollbar-track,
.doc-body-paragraph::-webkit-scrollbar-track,
.voice-pills::-webkit-scrollbar-track,
.dialect-pills-row::-webkit-scrollbar-track,
.solaris-modal-body::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track,
code::-webkit-scrollbar-track {
  background: rgba(4, 7, 14, 0.6);
  border-radius: 4px;
}

.hud-terminal-feed::-webkit-scrollbar-thumb,
.doc-body-paragraph::-webkit-scrollbar-thumb,
.voice-pills::-webkit-scrollbar-thumb,
.dialect-pills-row::-webkit-scrollbar-thumb,
.solaris-modal-body::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--neon-cyan, #00f0ff), var(--neon-magenta, #ec4899));
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, .section-title, .hero-title, .title-main, .title-sub, .outro-title, .bento-title, .hud-hero-title, .sec-title, .id-title, .vc-feature-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: balance;
}

html {
  font-size: 17.5px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-space);
  color: var(--text-body);
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

body {
  width: 100%;
  max-width: 100vw;
  font-family: var(--font-body);
  overflow-x: clip;
  background: radial-gradient(circle at 50% 15%, #180a30 0%, #06020c 60%, #020005 100%);
  position: relative;
}

/* Ambient glow */
.ambient-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}
.glow-top-left {
  top: 0;
  left: 0;
  width: 50vw;
  height: 50vw;
  transform: translate(-30%, -30%);
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, rgba(236, 72, 153, 0.06) 50%, transparent 80%);
}
.glow-bottom-right {
  bottom: 0;
  right: 0;
  width: 50vw;
  height: 50vw;
  transform: translate(25%, 25%);
  background: radial-gradient(circle, rgba(0, 240, 255, 0.14) 0%, rgba(124, 58, 237, 0.06) 50%, transparent 80%);
}

.cyber-grid-overlay {
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 2;
}

/* Master Scrollytelling Wrapper */
.scrolly-master-wrapper {
  position: relative;
  width: 100%;
}

.hero-scrolly-wrapper {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 300vh; /* Dedicated scroll track: stage stays pinned until head rotation completes */
}

.hero-sticky-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
}

.canvas-viewport-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  background-color: #030008;
  background-image: url('assets/hero-bg.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#scrollVideoCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.canvas-vignette-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(3, 0, 8, 0.65) 75%, #030008 100%);
  pointer-events: none;
  z-index: 2;
}

.hologram-scanline {
  display: none;
}

/* ==========================================================================
   HOLOGRAPHIC 7D LEKTORATS- & TOKEN-KORREKTUR MATRIX STREAM (OPTION 3)
   ========================================================================== */
.hero-matrix-stream-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.85;
  transition: opacity 0.2s ease;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.4) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.4) 100%);
}

.outro-matrix-container {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  max-width: 100vw !important;
  opacity: 0.0;
  transition: opacity 0.2s ease;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.88) 75%, rgba(0, 0, 0, 0.6) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.88) 75%, rgba(0, 0, 0, 0.6) 100%);
}

.matrix-stream-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Horizontaler Laser-Scanline-Reinigungsstrahl */
.matrix-scan-beam {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(236, 72, 153, 0.6) 30%, rgba(0, 240, 255, 0.95) 70%, #ffffff 100%);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.8), 0 0 30px rgba(236, 72, 153, 0.5);
  top: 0;
  animation: matrixScanSweep 6s ease-in-out infinite alternate;
  pointer-events: none;
  opacity: 0.75;
}

@keyframes matrixScanSweep {
  0% { top: 6%; opacity: 0.3; }
  50% { opacity: 0.85; }
  100% { top: 92%; opacity: 0.4; }
}

/* ===================================================
   COMMAND PALETTE MODAL (Ctrl + K)
   =================================================== */
.command-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 0, 8, 0.85);
  backdrop-filter: blur(25px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.command-palette-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.command-palette-modal {
  width: 100%;
  max-width: 680px;
  background: rgba(14, 7, 30, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(0, 240, 255, 0.2), inset 0 0 20px rgba(0, 240, 255, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.palette-search-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.palette-search-icon { font-size: 1.2rem; }
.palette-search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: #ffffff;
}
.palette-search-bar input::placeholder { color: var(--text-dim); }

.palette-kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.palette-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.palette-category {
  font-family: var(--font-headline);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--neon-magenta);
  padding: 0.6rem 0.8rem 0.2rem;
  font-weight: 700;
}
.palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-body);
  font-family: var(--font-sub);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.palette-item:hover {
  background: rgba(0, 240, 255, 0.15);
  color: #ffffff;
  transform: translateX(4px);
}
.item-kbd {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: var(--neon-cyan);
}

.master-prompt-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 1, 8, 0.85);
  backdrop-filter: blur(16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.master-prompt-backdrop.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.master-prompt-modal {
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  background: rgba(14, 7, 30, 0.98);
  border: 1px solid rgba(236, 72, 153, 0.4);
  border-radius: 14px;
  box-shadow: 0 0 60px rgba(236, 72, 153, 0.25), inset 0 0 25px rgba(236, 72, 153, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.prompt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(236, 72, 153, 0.05);
}
.header-tag-group { display: flex; flex-direction: column; gap: 0.2rem; }
.prompt-badge {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--neon-magenta);
  letter-spacing: 0.1em;
}
.prompt-version {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--neon-cyan);
}
.modal-close-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.modal-close-btn:hover {
  background: rgba(236, 72, 153, 0.3);
  border-color: var(--neon-magenta);
}

.prompt-preset-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.8rem;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}
.preset-label {
  font-family: var(--font-headline);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.preset-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-body);
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  font-family: var(--font-headline);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.preset-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-cyan);
  color: #ffffff;
}
.preset-btn.active {
  background: rgba(236, 72, 153, 0.2);
  border-color: var(--neon-magenta);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
}

.prompt-code-container {
  padding: 1.5rem 1.8rem;
  overflow-y: auto;
  max-height: 400px;
  background: rgba(5, 2, 12, 0.95);
}
.prompt-code-container pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.prompt-code-container code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: #a5f3fc;
}

/* ===================================================
   MATRIX TOKEN EXTRACTOR & QUANTUM CHAMBER STAGE
   =================================================== */
.matrix-token-extractor-stage {
  padding: 1.2rem 1.8rem;
  background: rgba(3, 1, 8, 0.98);
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.matrix-extractor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.extractor-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.matrix-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
  animation: pulseDot 1.2s infinite alternate;
}

.extractor-title {
  font-family: var(--font-headline);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--neon-cyan);
  letter-spacing: 0.08em;
}

.extractor-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #a5f3fc;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.btn-matrix-trigger {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(236, 72, 153, 0.25));
  border: 1px solid var(--neon-cyan);
  color: #ffffff;
  font-family: var(--font-headline);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
  transition: all 0.2s ease;
}

.btn-matrix-trigger:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.4), rgba(236, 72, 153, 0.45));
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
  transform: translateY(-1px);
}

.matrix-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .matrix-stage-grid {
    grid-template-columns: 1fr;
  }
}

.matrix-code-stream-wrap, .matrix-chamber-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.stream-label, .chamber-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.matrix-code-viewport {
  background: rgba(6, 3, 14, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 2.5vw, 0.78rem);
  line-height: 1.6;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.code-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: pre;
}

.c-ln { color: rgba(255, 255, 255, 0.25); user-select: none; }
.c-kw { color: #ec4899; font-weight: 700; }
.c-var { color: #38bdf8; }
.c-fn { color: #fbbf24; }
.c-prop { color: #c084fc; }
.c-str { color: #34d399; }
.c-val { color: #f43f5e; }
.c-num { color: #fb923c; }

.matrix-token-target {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(236, 72, 153, 0.2);
  border: 1px solid #ec4899;
  color: #f472b6;
  font-weight: 800;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.matrix-token-target.target-locked {
  background: rgba(236, 72, 153, 0.4);
  box-shadow: 0 0 20px #ec4899;
  transform: scale(1.05);
  animation: targetFlash 0.5s infinite alternate;
}

.matrix-token-target.target-extracted {
  opacity: 0.2;
  border-style: dashed;
  transform: scale(0.95);
}

.matrix-token-target.target-corrected {
  background: rgba(52, 211, 153, 0.25);
  border-color: #34d399;
  color: #6ee7b7;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
  opacity: 1;
}

@keyframes targetFlash {
  from { border-color: #ec4899; box-shadow: 0 0 10px #ec4899; }
  to { border-color: #ffffff; box-shadow: 0 0 25px #ec4899, 0 0 40px #ec4899; }
}

.matrix-chamber-box {
  position: relative;
  background: rgba(8, 4, 18, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  padding: 1rem;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: inset 0 0 25px rgba(0, 240, 255, 0.05);
  transition: all 0.3s ease;
}

.matrix-chamber-box.chamber-active {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.25), inset 0 0 35px rgba(0, 240, 255, 0.1);
}

.chamber-reticle {
  position: absolute;
  inset: 6px;
  pointer-events: none;
}

.reticle-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--neon-cyan);
}
.reticle-corner.tl { top: 0; left: 0; border-top: 2px solid var(--neon-cyan); border-left: 2px solid var(--neon-cyan); }
.reticle-corner.tr { top: 0; right: 0; border-top: 2px solid var(--neon-cyan); border-right: 2px solid var(--neon-cyan); }
.reticle-corner.bl { bottom: 0; left: 0; border-bottom: 2px solid var(--neon-cyan); border-left: 2px solid var(--neon-cyan); }
.reticle-corner.br { bottom: 0; right: 0; border-bottom: 2px solid var(--neon-cyan); border-right: 2px solid var(--neon-cyan); }

.chamber-state-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.chamber-token-display {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  color: #f472b6;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.chamber-token-display.extracted {
  transform: scale(1.1);
  text-shadow: 0 0 15px #ec4899;
}

.chamber-action-arrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #38bdf8;
  margin: 0.35rem 0;
  opacity: 0.7;
}

.chamber-result-display {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  color: #34d399;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.chamber-result-display.rectified {
  transform: scale(1.1);
  text-shadow: 0 0 20px #34d399;
}

.token-placeholder, .result-placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.72rem;
  font-weight: normal;
}

.prompt-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.2rem 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 5, 22, 0.9);
}

/* ===================================================
   AUDIO EXPERIENCE ENTRANCE MODAL (ONBOARDING)
   =================================================== */
.audio-experience-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 0, 8, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
  visibility: hidden;
}

.audio-experience-overlay.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.audio-experience-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  background: rgba(12, 6, 24, 0.96);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(0, 240, 255, 0.2), 0 0 100px rgba(236, 72, 153, 0.15), inset 0 0 30px rgba(0, 240, 255, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.audio-experience-overlay.active .audio-experience-card {
  transform: translateY(0) scale(1);
}

.audio-card-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 240px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.35) 0%, rgba(236, 72, 153, 0.2) 50%, transparent 75%);
  pointer-events: none;
  filter: blur(35px);
}

.audio-card-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.audio-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.35);
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font-headline);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--neon-cyan);
}

.audio-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
  animation: pulseDot 1.4s infinite alternate;
}

@keyframes pulseDot {
  from { transform: scale(0.85); opacity: 0.6; }
  to { transform: scale(1.3); opacity: 1; }
}

.audio-close-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.audio-close-btn:hover {
  background: rgba(236, 72, 153, 0.2);
  border-color: var(--neon-magenta);
  color: #ffffff;
}

.audio-card-body {
  position: relative;
  z-index: 2;
  padding: 1.8rem 2rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.audio-icon-orb {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-orb-core {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(236, 72, 153, 0.3));
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-cyan);
}

.audio-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--neon-cyan);
  pointer-events: none;
}

.audio-orb-ring.ring-1 {
  animation: orbPulseA 2.5s infinite linear;
}
.audio-orb-ring.ring-2 {
  animation: orbPulseB 2.5s infinite linear 1.25s;
}

@keyframes orbPulseA {
  0% { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes orbPulseB {
  0% { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.audio-card-title {
  font-family: var(--font-headline);
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--text-pure);
  margin-bottom: 0.85rem;
  line-height: 1.3;
}

.audio-card-desc {
  font-family: var(--font-sub);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: 1.8rem;
  max-width: 460px;
}

.audio-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 380px;
}

.btn-audio-activate {
  position: relative;
  background: linear-gradient(135deg, var(--neon-cyan), #00a8ff);
  color: #030008;
  font-family: var(--font-headline);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 0.95rem 1.6rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.4);
  transition: all 0.25s ease;
  overflow: hidden;
}

.btn-audio-activate:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 45px rgba(0, 240, 255, 0.8), inset 0 0 16px rgba(255, 255, 255, 0.7);
}

.btn-audio-mute {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  font-family: var(--font-headline);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  padding: 0.65rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-audio-mute:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.audio-card-footer {
  position: relative;
  z-index: 2;
  padding: 0.85rem 1.6rem;
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.audio-hint-text {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.audio-hint-text kbd {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.65rem;
}

/* Header */
.hero-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-y) var(--pad-x);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text-pure);
}
.logo-symbol {
  font-size: 1.6rem;
  color: var(--neon-magenta);
  filter: drop-shadow(0 0 10px var(--neon-magenta));
}
.logo-text {
  font-family: var(--font-logo);
  font-size: 1.25rem;
  letter-spacing: 0.15em;
  font-weight: 900;
}
.logo-sub { color: var(--neon-cyan); }

.creator-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(236, 72, 153, 0.45);
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  font-family: var(--font-headline);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}
.creator-label { color: #cbd5e1; font-weight: 600; }
.creator-name { color: var(--neon-magenta); font-weight: 800; font-size: 0.92rem; }

.header-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  font-family: var(--font-headline);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-cmd-palette {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-headline);
  font-size: 0.75rem;
}
.kbd-pill {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--neon-magenta), var(--neon-purple));
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.45);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.75);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-body);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

.btn-voice {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}
.btn-voice.speaking { animation: pulseVoice 1.2s infinite alternate; }
@keyframes pulseVoice {
  from { box-shadow: 0 0 10px var(--neon-cyan); }
  to { box-shadow: 0 0 25px var(--neon-cyan), 0 0 40px var(--neon-magenta); }
}

.btn-jarvis-jump {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(124, 58, 237, 0.3));
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 20px var(--neon-cyan-glow);
}
.btn-jarvis-jump:hover {
  background: var(--neon-cyan);
  color: #000000;
  box-shadow: 0 0 35px var(--neon-cyan);
}

.sound-control-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(10, 6, 24, 0.65);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  padding: 0.25rem 0.35rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sound-control-group:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.sound-control {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-headline);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  transition: all 0.25s ease;
}
.sound-control:hover {
  background: rgba(0, 240, 255, 0.12);
  color: var(--neon-cyan);
}
.sound-control.playing {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--neon-cyan);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.sound-track-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(236, 72, 153, 0.10);
  border: 1px solid rgba(236, 72, 153, 0.3);
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--neon-magenta);
  font-family: var(--font-headline);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  transition: all 0.25s ease;
}
.sound-track-switch:hover {
  background: rgba(236, 72, 153, 0.22);
  border-color: var(--neon-magenta);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
  transform: scale(1.03);
}
.sound-track-switch:active {
  transform: scale(0.97);
}
.track-switch-arrow {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}
.sound-track-switch:hover .track-switch-arrow {
  transform: rotate(180deg);
}

.eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.eq-bars .bar {
  width: 2px;
  height: 4px;
  background: var(--neon-cyan);
  transition: height 0.2s ease;
}
.sound-control.playing .eq-bars .bar:nth-child(1) { animation: eq1 0.6s infinite alternate; }
.sound-control.playing .eq-bars .bar:nth-child(2) { animation: eq2 0.4s infinite alternate; }
.sound-control.playing .eq-bars .bar:nth-child(3) { animation: eq3 0.7s infinite alternate; }
.sound-control.playing .eq-bars .bar:nth-child(4) { animation: eq1 0.5s infinite alternate; }
.sound-control.playing .eq-bars .bar:nth-child(5) { animation: eq2 0.8s infinite alternate; }

@keyframes eq1 { from { height: 3px; } to { height: 14px; } }
@keyframes eq2 { from { height: 7px; } to { height: 12px; } }
@keyframes eq3 { from { height: 4px; } to { height: 16px; } }

.sys-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-headline);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.status-val {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--neon-green);
  font-weight: 700;
}
.status-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
}

/* Body Content */
.hero-body {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  width: 100%;
}

.side-nav { margin-right: 4vw; }
.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.nav-item a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--text-dim);
  font-family: var(--font-headline);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  transition: all 0.2s ease;
}
.nav-marker {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(45deg);
  transition: all 0.2s ease;
}
.nav-item:hover a, .nav-item.active a { color: var(--neon-cyan); }
.nav-item:hover .nav-marker, .nav-item.active .nav-marker {
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
}

.hero-headline-block { max-width: 720px; }
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.kicker-line {
  width: 32px;
  height: 2px;
  background: var(--neon-magenta);
}
.kicker-text {
  font-family: var(--font-headline);
  font-size: 0.82rem;
  letter-spacing: 0.25em;
  color: var(--neon-magenta);
  font-weight: 700;
}

.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.2rem;
}
.title-main {
  font-family: var(--font-headline);
  font-size: var(--title-size);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 0.95;
  background: linear-gradient(135deg, #ffffff 40%, rgba(255, 255, 255, 0.7) 70%, var(--neon-magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title-sub {
  font-family: var(--font-headline);
  font-size: var(--subtitle-size);
  color: var(--neon-cyan);
  letter-spacing: 0.12em;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.hero-description {
  font-family: var(--font-sub);
  font-size: var(--desc-size);
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 1.6rem;
  font-weight: 500;
}
.highlight-solaris { color: var(--neon-magenta); font-weight: 700; }

.voice-live-subtitles {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(236, 72, 153, 0.3);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  margin-bottom: 1.8rem;
  backdrop-filter: blur(10px);
  max-width: 560px;
  overflow: hidden;
}
.audio-wave-visualizer {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  flex-shrink: 0;
}
.v-wave {
  width: 3px;
  height: 4px;
  background: var(--neon-magenta);
  border-radius: 2px;
}
.voice-live-subtitles.speaking .v-wave:nth-child(odd) { animation: waveA 0.5s infinite alternate; }
.voice-live-subtitles.speaking .v-wave:nth-child(even) { animation: waveB 0.4s infinite alternate; }

@keyframes waveA { from { height: 4px; } to { height: 16px; } }
@keyframes waveB { from { height: 8px; } to { height: 14px; } }

.subtitle-text {
  font-family: var(--font-headline);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--neon-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Footer Section 1 */
.hero-footer {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-y) var(--pad-x);
}

.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.scroll-track {
  width: 2px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.scroll-pip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  animation: pipMove 2s infinite ease-in-out;
}
@keyframes pipMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(28px); }
}

.scroll-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}
.scroll-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-headline);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
}
.scroll-status-tag { color: var(--neon-cyan); font-weight: 800; font-size: 0.92rem; }

.trailer-widget {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  cursor: pointer;
  padding: 0.5rem 0.8rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
}
.trailer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.trailer-label {
  font-family: var(--font-headline);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}
.trailer-time {
  font-family: var(--font-sub);
  font-size: 0.85rem;
  color: var(--neon-cyan);
}
.play-btn-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(236, 72, 153, 0.4);
  backdrop-filter: blur(8px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.play-icon { width: 18px; height: 18px; margin-left: 2px; fill: #f8fafc; }
.play-ripple {
  position: absolute;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px dashed rgba(236, 72, 153, 0.5);
  animation: radarSpin 12s linear infinite;
}
@keyframes radarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   SECTION 3: JARVIS IRON MAN HOLOGRAPHIC HUD INTERFACE
   ========================================================================== */
.section-jarvis-hud {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: clamp(3.5rem, 5vw, 6rem) var(--pad-x);
  background: radial-gradient(circle at 50% 50%, #0a0418 0%, #020006 85%);
  border-top: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: inset 0 20px 60px rgba(0, 240, 255, 0.08);
  overflow: hidden;
  z-index: 30;
}

.jarvis-matrix-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.95;
}

/* Holographic Vortex Compass & Rings Overlay */
.jarvis-hologram-rings-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 850px);
  height: min(92vw, 850px);
  pointer-events: none;
  z-index: 2;
  opacity: 0.35;
}

.holo-compass-dial {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.4);
  box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.1), 0 0 30px rgba(0, 240, 255, 0.08);
  animation: radarSpin 50s linear infinite;
}

.holo-ring {
  position: absolute;
  border-radius: 50%;
}

.holo-ring-1 {
  inset: 12%;
  border: 1.5px solid transparent;
  border-top-color: var(--neon-cyan, #00f0ff);
  border-bottom-color: var(--neon-magenta, #ec4899);
  animation: radarSpinReverse 35s linear infinite;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
}

.holo-ring-2 {
  inset: 26%;
  border: 1px dashed rgba(255, 107, 0, 0.5);
  animation: radarSpin 22s linear infinite;
}

.holo-ring-3 {
  inset: 40%;
  border: 1.5px solid transparent;
  border-left-color: var(--neon-cyan, #00f0ff);
  border-right-color: var(--neon-orange, #ff6b00);
  animation: radarSpinReverse 16s linear infinite;
}

.holo-scan-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(0, 240, 255, 0.15) 0deg, transparent 60deg, transparent 360deg);
  animation: radarSpin 10s linear infinite;
}

@keyframes radarSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.jarvis-reticle {
  position: fixed;
  width: 64px;
  height: 64px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.section-jarvis-hud:hover .jarvis-reticle { opacity: 1; }

.reticle-ring-outer {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--neon-cyan);
  border-radius: 50%;
  animation: radarSpin 8s linear infinite;
}
.reticle-ring-inner {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--neon-magenta);
  border-radius: 50%;
}
.reticle-crosshair {
  position: absolute;
  inset: 26px;
  background: var(--neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon-cyan);
}
.reticle-meta {
  position: absolute;
  left: 70px;
  top: 10px;
  white-space: nowrap;
  font-family: var(--font-headline);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--neon-cyan);
}
.meta-coords { display: block; color: var(--text-muted); }

.jarvis-hud-container {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hud-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.8rem;
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  backdrop-filter: blur(15px);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.1);
}
.hud-top-left { display: flex; flex-direction: column; gap: 0.2rem; }
.hud-badge {
  font-family: var(--font-headline);
  font-size: 0.7rem;
  color: var(--neon-magenta);
  letter-spacing: 0.2em;
  font-weight: 700;
}
.hud-title {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  color: #ffffff;
  letter-spacing: 0.1em;
  font-weight: 900;
}

/* ==========================================================================
   SECOND BRAIN KNOWLEDGE LOBE SELECTOR BAR
   ========================================================================== */
.secondbrain-lobe-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 15;
}

.lobe-btn {
  background: rgba(8, 14, 28, 0.82);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 10px;
  padding: 0.65rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 48px;
}

.lobe-btn .lobe-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.lobe-btn .lobe-text {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.lobe-btn .lobe-meta {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.58rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 0.05em;
}

.lobe-btn:hover {
  border-color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
  transform: translateY(-2px);
  background: rgba(0, 240, 255, 0.08);
}

.lobe-btn.active {
  background: rgba(0, 240, 255, 0.16);
  border-color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.5), inset 0 0 15px rgba(0, 240, 255, 0.15);
  transform: translateY(-2px);
}

.lobe-btn.active .lobe-text {
  color: var(--neon-cyan, #00f0ff);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

/* ==========================================================================
   AUTONOMOUS THOUGHT-STREAM FOOTER BAR
   ========================================================================== */
.hud-thought-stream-bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.85rem 1.4rem;
  background: rgba(6, 10, 22, 0.88);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 8px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.08);
  position: relative;
  z-index: 15;
}

.thought-stream-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--neon-magenta, #ec4899);
  white-space: nowrap;
}

.thought-stream-pulse {
  width: 8px;
  height: 8px;
  background: var(--neon-magenta, #ec4899);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon-magenta, #ec4899);
  animation: pulseGlow 1.4s ease-in-out infinite;
}

.thought-stream-text {
  flex: 1;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.78rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-top-center { display: flex; align-items: center; gap: 0.8rem; }
.hud-pulse-ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 15px var(--neon-cyan);
  animation: pulseLed 1s infinite alternate;
}
@keyframes pulseLed {
  from { transform: scale(0.8); opacity: 0.5; }
  to { transform: scale(1.4); opacity: 1; }
}
.hud-live-tag {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--neon-cyan);
}

.hud-top-right { display: flex; align-items: center; gap: 1.5rem; }
.hud-clock {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  color: var(--neon-cyan);
  letter-spacing: 0.1em;
}
.hud-status-chip {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-family: var(--font-headline);
  font-size: 0.7rem;
  font-weight: 700;
}

.hud-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.1fr;
  gap: 2rem;
  align-items: stretch;
}

.hud-card {
  background: var(--bg-card);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  padding: 2rem;
  backdrop-filter: blur(20px);
  position: relative;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 240, 255, 0.05);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.hud-card:hover {
  border-color: var(--neon-cyan);
  transform: translateY(-4px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.8rem;
  margin-bottom: 1.5rem;
}
.card-tag {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--neon-cyan);
  font-weight: 700;
}
.card-status-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
}

.hud-stat-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-headline);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.stat-val.cyan { color: var(--neon-cyan); font-weight: 700; }
.stat-val.amber { color: var(--neon-amber); font-weight: 700; }
.stat-val.magenta { color: var(--neon-magenta); font-weight: 700; }
.stat-val.green { color: var(--neon-green); font-weight: 700; }

.hud-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }
.bar-fill.cyan { background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan)); box-shadow: 0 0 10px var(--neon-cyan); }
.bar-fill.amber { background: linear-gradient(90deg, var(--neon-magenta), var(--neon-amber)); box-shadow: 0 0 10px var(--neon-amber); }
.bar-fill.magenta { background: linear-gradient(90deg, var(--neon-violet), var(--neon-magenta)); box-shadow: 0 0 10px var(--neon-magenta); }
.bar-fill.green { background: linear-gradient(90deg, #059669, var(--neon-green)); box-shadow: 0 0 10px var(--neon-green); }

.hex-sensor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.hex-node {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 0.6rem;
  text-align: center;
  border-radius: 6px;
  font-family: var(--font-headline);
  font-size: 0.75rem;
  color: var(--neon-cyan);
  transition: all 0.2s ease;
}
.hex-node:hover {
  background: var(--neon-cyan);
  color: #000000;
  box-shadow: 0 0 15px var(--neon-cyan);
}

.hud-card-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.reactor-wrapper {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0;
}
.reactor-ring { position: absolute; border-radius: 50%; }
.ring-1 {
  width: 260px;
  height: 260px;
  border: 2px dashed var(--neon-cyan);
  animation: radarSpin 16s linear infinite;
}
.ring-2 {
  width: 200px;
  height: 200px;
  border: 2px solid var(--neon-magenta);
  border-left-color: transparent;
  border-right-color: transparent;
  animation: radarSpin 8s linear infinite reverse;
}
.ring-3 {
  width: 140px;
  height: 140px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  animation: radarSpin 24s linear infinite;
}
.reactor-core {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neon-cyan) 0%, rgba(124, 58, 237, 0.6) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 45px var(--neon-cyan), inset 0 0 20px #ffffff;
}
.core-symbol { font-size: 1.4rem; color: #ffffff; }
.core-val { font-family: var(--font-headline); font-size: 0.8rem; font-weight: 900; color: #ffffff; }
.core-label { font-family: var(--font-headline); font-size: 0.55rem; letter-spacing: 0.1em; color: #000000; font-weight: 700; }

.reactor-caption { margin-top: 1rem; }
.caption-title {
  display: block;
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.caption-desc { font-family: var(--font-sub); font-size: 0.92rem; color: var(--text-muted); }

.hud-terminal-log {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 6px;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--neon-cyan);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 130px;
  overflow-y: auto;
}
.log-line { line-height: 1.4; opacity: 0.9; }

/* ==========================================================================
   SECTION 3: I. WAS IST SOLARIS? (IDENTITÄT & PHILOSOPHIE)
   ========================================================================== */
.section-identity {
  position: relative;
  width: 100%;
  max-width: 100vw;
  padding: 6rem var(--pad-x);
  background: radial-gradient(circle at 50% 0%, #150928 0%, #06020c 70%);
  border-top: 1px solid rgba(236, 72, 153, 0.3);
  z-index: 30;
  overflow-x: hidden;
}

.identity-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 4rem;
}

.identity-triplet-grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 900px) {
  .identity-triplet-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.identity-card {
  background: var(--bg-card);
  border: 1px solid rgba(236, 72, 153, 0.25);
  border-radius: 16px;
  padding: 2.5rem;
  backdrop-filter: blur(20px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
.identity-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--neon-magenta);
  transform: translateY(-6px);
  box-shadow: 0 0 35px var(--neon-magenta-glow);
}

.id-icon {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 12px var(--neon-magenta));
}
.id-title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
}
.id-text {
  font-family: var(--font-sub);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-body);
}
.id-text strong { color: #ffffff; }
.id-text a {
  color: var(--neon-cyan);
  text-decoration: none;
  font-weight: 700;
}
.id-text a:hover { text-decoration: underline; }

/* ==========================================================================
   SECTION 4: II. WAS KANN SOLARIS? (DIE 5 FUNKTIONSSÄULEN)
   ========================================================================== */
.section-ecosystem {
  position: relative;
  width: 100%;
  max-width: 100vw;
  padding: 6rem var(--pad-x);
  background: radial-gradient(circle at 50% 0%, #120625 0%, #04010a 70%);
  border-top: 1px solid rgba(0, 240, 255, 0.25);
  z-index: 30;
  overflow-x: hidden;
}

.ecosystem-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 4.5rem;
}
.kicker-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.section-title {
  font-family: var(--font-headline);
  font-size: var(--title-size, clamp(1.8rem, 1rem + 2.8vw, 3.5rem));
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.22;
  background: linear-gradient(135deg, #ffffff 40%, var(--neon-cyan) 80%, var(--neon-magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.section-desc {
  font-family: var(--font-sub);
  font-size: 1.15rem;
  color: var(--text-muted);
}

.pillars-bento-grid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

.bento-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2.5rem;
  backdrop-filter: blur(20px);
  position: relative;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}
.bento-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-6px);
}

.bento-card.pillar-1 {
  grid-column: span 8;
  border-color: rgba(236, 72, 153, 0.35);
}
.bento-card.pillar-1:hover { border-color: var(--neon-magenta); box-shadow: 0 0 35px var(--neon-magenta-glow); }

.bento-card.pillar-2 {
  grid-column: span 4;
  border-color: rgba(0, 240, 255, 0.35);
}
.bento-card.pillar-2:hover { border-color: var(--neon-cyan); box-shadow: 0 0 35px var(--neon-cyan-glow); }

.bento-card.pillar-3 {
  grid-column: span 4;
  border-color: rgba(168, 85, 247, 0.35);
}
.bento-card.pillar-3:hover { border-color: var(--neon-violet); }

.bento-card.pillar-4 {
  grid-column: span 4;
  border-color: rgba(251, 146, 60, 0.35);
}
.bento-card.pillar-4:hover { border-color: var(--neon-amber); }

.bento-card.pillar-5 {
  grid-column: span 4;
  border-color: rgba(16, 185, 129, 0.35);
}
.bento-card.pillar-5:hover { border-color: var(--neon-green); }

/* Bento Card Visual Mastery Frames */
.bento-visual-frame {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 0, 8, 0.85);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.bento-card.pillar-1 .bento-visual-frame {
  height: 270px;
}

.bento-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
  filter: brightness(0.92) contrast(1.06);
}

.bento-card:hover .bento-visual-img {
  transform: scale(1.04);
  filter: brightness(1.06) contrast(1.12);
}

.bento-visual-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 3, 14, 0.85) 100%);
  pointer-events: none;
}

.bento-visual-tag {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--neon-cyan);
  background: rgba(3, 0, 8, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.bento-badge {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  padding: 0.3rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: var(--text-pure);
  margin-bottom: 1.2rem;
}

.bento-title {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}
.bento-desc {
  font-family: var(--font-sub);
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 1.8rem;
  line-height: 1.5;
}

.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.feature-list li {
  font-family: var(--font-sub);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-body);
  position: relative;
  padding-left: 1.4rem;
}
.feature-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--neon-cyan);
  font-weight: bold;
}
.feature-list li strong { color: #ffffff; }

/* 10-Channel Export Grid */
.export-channels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.export-chip {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.7rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.export-chip:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: var(--neon-cyan);
}
.export-chip.highlight {
  background: rgba(236, 72, 153, 0.12);
  border-color: var(--neon-magenta);
}
.chip-icon { font-size: 1.1rem; }
.chip-name { font-family: var(--font-headline); font-size: 0.8rem; color: #ffffff; flex: 1; }
.chip-sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); }

/* ==========================================================================
   SECTION 5: III. DIE 5 UNVERRÜCKBAREN QUALITÄTSGARANTIEN
   ========================================================================== */
.section-quality {
  position: relative;
  width: 100%;
  max-width: 100vw;
  padding: 6rem var(--pad-x);
  background: radial-gradient(circle at 50% 100%, #150622 0%, #030108 70%);
  border-top: 1px solid rgba(236, 72, 153, 0.3);
  z-index: 30;
  overflow-x: hidden;
}

.quality-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 4.5rem;
}

.quality-matrix-wrapper {
  max-width: 1500px;
  margin: 0 auto;
}

.quality-table-container {
  background: var(--bg-card);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  backdrop-filter: blur(25px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(0, 240, 255, 0.05);
}

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

.quality-table th {
  background: rgba(0, 240, 255, 0.08);
  font-family: var(--font-headline);
  font-size: 0.92rem;
  letter-spacing: 0.15em;
  color: var(--neon-cyan);
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
  font-weight: 800;
}

.quality-table td {
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-sub);
  font-size: 1.05rem;
  color: var(--text-body);
  line-height: 1.55;
}

.quality-table tr:hover td {
  background: rgba(0, 240, 255, 0.04);
}

.val-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
}
.val-pill.green {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}
.val-pill.cyan {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}
.val-pill.magenta {
  background: rgba(236, 72, 153, 0.15);
  border: 1px solid var(--neon-magenta);
  color: var(--neon-magenta);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.25);
}
.val-pill.amber {
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid var(--neon-amber);
  color: var(--neon-amber);
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.25);
}

.status-tag {
  font-family: var(--font-headline);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  font-weight: 800;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
}
.status-tag.verified {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
}

/* ==========================================================================
   SECTION 6: HOTKEY MATRIX & COMMAND COCKPIT
   ========================================================================== */
.section-hotkeys {
  position: relative;
  width: 100%;
  max-width: 100vw;
  padding: 6rem var(--pad-x);
  background: radial-gradient(circle at 50% 50%, #090214 0%, #030007 80%);
  border-top: 1px solid rgba(0, 240, 255, 0.25);
  z-index: 30;
  overflow-x: hidden;
}

.hotkeys-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

.shortcuts-cockpit-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .shortcuts-cockpit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .shortcuts-cockpit-grid {
    grid-template-columns: 1fr;
  }
}

.shortcut-card {
  background: rgba(12, 6, 24, 0.7);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  padding: 1.8rem;
  backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.shortcut-card:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--neon-cyan);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px var(--neon-cyan-glow);
}

.kbd-display {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-headline);
  font-size: 0.95rem;
  color: var(--neon-cyan);
}
.kbd-display kbd {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.4);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 2px 0 rgba(0, 240, 255, 0.3);
}

.shortcut-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.shortcut-title {
  font-family: var(--font-headline);
  font-size: 1.12rem;
  font-weight: 800;
  color: #ffffff;
}
.shortcut-desc {
  font-family: var(--font-sub);
  font-size: 0.96rem;
  color: #cbd5e1;
  line-height: 1.45;
}

/* ==========================================================================
   SECTION 5: FOOTER & URHEBER-SIEGEL
   ========================================================================== */
.master-footer {
  position: relative;
  width: 100vw;
  padding: 5rem var(--pad-x);
  background: #020005;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 30;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.creator-seal-block {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.seal-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 80%);
  border: 2px dashed var(--neon-magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  animation: radarSpin 16s linear infinite;
}
.seal-text { display: flex; flex-direction: column; gap: 0.25rem; }
.seal-title {
  font-family: var(--font-headline);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--neon-magenta);
  font-weight: 800;
}
.seal-author {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
}
.seal-link {
  font-family: var(--font-sub);
  font-size: 0.9rem;
  color: var(--neon-cyan);
  text-decoration: none;
  transition: color 0.2s ease;
}
.seal-link:hover { text-decoration: underline; color: #ffffff; }

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
.sha-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}
.sha-label { color: var(--neon-cyan); font-weight: 700; }
/* ==========================================================================
   SECTION 7: OUTRO // DIE RÜCKKEHR NACH RECHTS & FINALE
   ========================================================================== */
.outro-scrolly-wrapper {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 280vh; /* Dedicated scroll track: stage stays pinned until head turns back to profile */
  background: #020005;
}

.outro-sticky-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  margin: 0;
  padding: var(--pad-y) var(--pad-x);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 10;
}

.outro-sticky-stage .canvas-viewport-container {
  background-image: url('assets/frontal.webp');
}

#outroVideoCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.outro-content-overlay {
  position: relative;
  z-index: 5;
  text-align: left;
  max-width: 680px;
  padding: 1.8rem 2.2rem;
  background: rgba(8, 3, 18, 0.78);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 240, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 2.5rem;
}

.outro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.outro-title {
  font-family: var(--font-headline);
  font-size: clamp(1.8rem, 1rem + 2.5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ffffff 40%, var(--neon-cyan) 80%, var(--neon-magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.outro-quote {
  font-family: var(--font-sub);
  font-size: 1.22rem;
  line-height: 1.65;
  color: var(--text-body);
}

.outro-meta {
  margin-top: 0.6rem;
}
.outro-angle-tag {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid var(--neon-cyan);
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

/* ===================================================
   RESPONSIVE & MOBILE POLISH (TABLET & SMARTPHONE)
   =================================================== */
@media (max-width: 1200px) {
  .pillars-bento-grid { grid-template-columns: 1fr; }
  .bento-card.pillar-1,
  .bento-card.pillar-2,
  .bento-card.pillar-3,
  .bento-card.pillar-4,
  .bento-card.pillar-5 { grid-column: span 1; }
  .shortcuts-cockpit-grid { grid-template-columns: repeat(2, 1fr); }
  .hud-grid { grid-template-columns: 1fr; }
  .side-nav { display: none; }
}

@media (max-width: 768px) {
  :root {
    --pad-x: 1.25rem;
    --pad-y: 1rem;
    --title-size: clamp(1.2rem, 0.85rem + 1.8vw, 1.85rem);
    --subtitle-size: clamp(0.88rem, 0.72rem + 0.6vw, 1.15rem);
    --desc-size: 0.92rem;
  }

  .section-title {
    font-size: clamp(1.2rem, 0.85rem + 1.8vw, 1.85rem);
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-wrap: balance;
  }

  .outro-title {
    font-size: clamp(1.2rem, 0.85rem + 1.8vw, 1.85rem);
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-wrap: balance;
  }

  .outro-content-overlay {
    max-width: 100%;
    width: 100%;
    padding: 1.4rem 1.2rem;
  }

  .outro-quote {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .outro-angle-tag {
    font-size: 0.70rem;
    padding: 0.35rem 0.6rem;
    max-width: 100%;
    white-space: normal;
    display: inline-block;
    line-height: 1.35;
    word-break: break-word;
  }

  /* Prevent any horizontal screen bleed */
  body, html {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* 1. Hero Sticky Stage on Mobile & Tablet (Pinned until 1000-frame rotation completes) */
  .hero-scrolly-wrapper {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 300vh; /* Dedicated scroll track: stage stays pinned on mobile until 1000-frame head rotation completes */
  }

  .hero-sticky-stage {
    min-height: 100svh;
    min-height: var(--vh-lock, 100vh);
    height: 100svh;
    height: var(--vh-lock, 100vh);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
  }

  /* 3D Canvas on Mobile: Centered in upper viewport, 100% unobstructed */
  .canvas-viewport-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-position: 28% 35%;
  }

  .outro-sticky-stage .canvas-viewport-container {
    background-position: 50% 35%;
  }

  #scrollVideoCanvas {
    object-fit: cover;
    object-position: 50% 35%;
    width: 100%;
    height: 100%;
  }

  #outroVideoCanvas {
    object-fit: cover;
    object-position: 50% 35%;
    width: 100%;
    height: 100%;
  }

  .canvas-vignette-overlay {
    background: radial-gradient(circle at center, transparent 35%, rgba(3, 0, 8, 0.45) 70%, #030008 95%);
  }

  .hero-matrix-stream-container, .outro-matrix-container {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
  }

  /* Header on Mobile */
  .hero-header {
    padding: 0.5rem var(--pad-x);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(180deg, rgba(3, 0, 8, 0.92) 0%, rgba(3, 0, 8, 0.4) 80%, transparent 100%);
    backdrop-filter: blur(8px);
    z-index: 30;
  }

  .header-left {
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .creator-badge {
    display: none; /* Hide on mobile header for maximum clean headroom */
  }

  .header-right {
    display: none;
  }
  .sys-status {
    padding: 0.2rem 0.5rem;
  }

  /* Hero Headline on Mobile: Title at the top, Action Cards strictly anchored at the bottom */
  .hero-body {
    padding: 0.3rem var(--pad-x) 0.4rem var(--pad-x);
    margin: 0;
    width: 100%;
    height: 100%;
    flex: 1;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }

  .hero-headline-block {
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    box-shadow: none;
  }

  .hero-kicker {
    margin-bottom: 0.1rem;
    display: flex;
    pointer-events: auto;
  }
  .kicker-text {
    font-size: 0.68rem;
    font-weight: 800;
  }

  .hero-title {
    margin-bottom: 0;
    pointer-events: auto;
  }
  .hero-title .title-main {
    font-size: clamp(1.85rem, 7.5vw, 2.4rem);
    letter-spacing: 0.08em;
    text-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 12px rgba(236, 72, 153, 0.6);
  }
  .hero-title .title-sub {
    font-size: clamp(0.76rem, 2.8vw, 0.90rem);
    letter-spacing: 0.12em;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 240, 255, 0.7);
  }

  .hero-description {
    display: none; /* Hide bulky text on mobile so the 3D rotating face is completely unobstructed */
  }

  /* Bottom Actions Zone on Mobile (Anchored below the 3D face) */
  .voice-live-subtitles {
    padding: 0.32rem 0.8rem;
    margin-top: auto;
    margin-bottom: 0.35rem;
    gap: 0.5rem;
    background: rgba(3, 0, 8, 0.88);
    border: 1px solid rgba(0, 240, 255, 0.45);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
  }
  .subtitle-text {
    font-size: 0.76rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0;
    pointer-events: auto;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.52rem 0.7rem;
    font-size: 0.76rem;
  }
  .hero-actions .btn-jarvis-jump {
    grid-column: 1 / -1;
    padding: 0.42rem 0.7rem;
    font-size: 0.74rem;
  }

  .hero-footer {
    padding: 0.32rem var(--pad-x);
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(2, 0, 5, 0.75) 0%, rgba(2, 0, 5, 0.98) 100%);
    border-top: 1px solid rgba(0, 240, 255, 0.18);
    backdrop-filter: blur(12px);
    z-index: 25;
  }

  .trailer-widget {
    display: none; /* Hide cluttered right-side widget on mobile for maximum clean space */
  }

  .scroll-indicator {
    width: 100%;
    justify-content: center;
    gap: 0.4rem;
  }

  .scroll-track {
    display: none;
  }

  .scroll-dot {
    display: none;
  }

  .scroll-meta {
    font-size: 0.68rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
  }

  .scroll-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
  }

  .scroll-text > span:first-child {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
  }

  .scroll-status-tag {
    font-size: 0.70rem;
    letter-spacing: 0.05em;
    color: var(--neon-cyan, #00f0ff);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
    line-height: 1.25;
  }

  /* 2. Section 2: JARVIS HUD Mobile */
  .section-jarvis-hud {
    padding: 3.5rem var(--pad-x);
  }
  .jarvis-reticle {
    display: none; /* Disable mouse tracking reticle on touch devices */
  }
  .hud-top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .hud-stat-badge {
    width: 100%;
    justify-content: space-between;
  }
  .hud-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .hud-card {
    padding: 1.25rem;
  }

  /* 3. Section 3: Identity & Philosophy */
  .section-identity {
    padding: 3.5rem var(--pad-x);
  }
  .identity-header {
    margin-bottom: 2.5rem;
  }
  .identity-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .id-card {
    padding: 1.5rem 1.25rem;
  }

  /* 4. Section 4: 5 Pillars */
  .section-ecosystem {
    padding: 3.5rem var(--pad-x);
  }
  .pillars-header {
    margin-bottom: 2.5rem;
  }
  .pillars-bento-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .bento-card {
    padding: 1.5rem 1.25rem;
  }
  .export-chips-matrix {
    grid-template-columns: 1fr;
  }

  /* 5. Section 5: Quality Standards Mobile Glassmorphism Cards */
  .section-quality {
    padding: 3.5rem var(--pad-x);
  }
  .quality-header {
    margin-bottom: 2rem;
  }
  .quality-matrix-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .quality-table-container {
    overflow-x: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .quality-table {
    min-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: transparent;
    border: none;
  }
  .quality-table thead {
    display: none; /* Hide multi-column desktop header on smartphone */
  }
  .quality-table tbody {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  .quality-table tr {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.25rem 1.15rem;
    background: rgba(8, 4, 18, 0.85);
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .quality-table tr:hover {
    border-color: rgba(0, 240, 255, 0.5);
    transform: translateY(-2px);
  }
  .quality-table td {
    display: block;
    padding: 0;
    border: none;
    font-size: 0.90rem;
    line-height: 1.5;
  }
  .quality-table td:nth-child(1) {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: #ffffff;
    letter-spacing: 0.02em;
    padding-right: 5rem; /* Room for verified badge */
  }
  .quality-table td:nth-child(2) {
    display: flex;
    align-items: center;
  }
  .quality-table td:nth-child(3) {
    color: var(--text-secondary, #b8c4db);
    font-size: 0.85rem;
    line-height: 1.55;
  }
  .quality-table td:nth-child(4) {
    position: absolute;
    top: 1.25rem;
    right: 1.15rem;
  }

  /* 6. Section 6: Hotkeys Matrix */
  .section-hotkeys {
    padding: 3.5rem var(--pad-x);
  }
  .hotkeys-header {
    margin-bottom: 2.5rem;
  }
  .shortcuts-cockpit-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .shortcut-card {
    padding: 1.25rem;
  }

  /* 7. Section 7: Outro Mobile Polish (Pinned until rotation back to profile completes) */
  .outro-scrolly-wrapper {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 280vh;
    background: #020005;
  }
  .outro-sticky-stage {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 100svh;
    height: var(--vh-lock, 100vh);
    min-height: 100svh;
    min-height: var(--vh-lock, 100vh);
    padding: 1.25rem var(--pad-x);
    justify-content: flex-end;
    z-index: 10;
  }
  .outro-content-overlay {
    width: 100%;
    max-width: 100%;
    padding: 1.25rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(18px);
  }
  .outro-title {
    font-size: 1.5rem;
  }
  .outro-quote {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* 8. Master Footer Mobile */
  .master-footer {
    padding: 3.5rem var(--pad-x) 2.5rem;
  }
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  .creator-seal-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .footer-meta {
    align-items: flex-start;
    width: 100%;
  }
  .sha-badge {
    word-break: break-all;
    font-size: 0.62rem;
  }

  /* 9. Modal Dialogs on Mobile */
  .command-palette-modal, .master-prompt-modal {
    width: 95vw;
    max-height: 90vh;
    padding: 1.25rem;
  }
  .master-prompt-code-container {
    max-height: 280px;
  }
  .master-prompt-presets {
    gap: 0.4rem;
  }
  .preset-btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
  }
  .modal-actions {
    flex-direction: column;
    gap: 0.6rem;
  }
  .modal-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  :root {
    --pad-x: 1rem;
    --pad-y: 0.85rem;
  }
  
  .brand-logo .logo-text {
    font-size: 1rem;
  }
  
  .title-main {
    font-size: 2.2rem;
  }
  .title-sub {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   SEKTION 2A & 2B: LIVING INTELLIGENCE OS & DETERMINISTIC PINNING MATRIX
   ========================================================================== */

/* Kinetic Dual Laser Cursor & Glow Aura */
#cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--neon-cyan, #00f0ff);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--neon-cyan, #00f0ff), 0 0 24px rgba(0, 240, 255, 0.55);
  transition: width 0.15s ease, height 0.15s ease, background-color 0.25s ease;
}

#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1px dashed rgba(0, 240, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.25s ease;
}

#cursor-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.09) 0%, rgba(255, 107, 0, 0.03) 45%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
}

@media (hover: none) and (pointer: coarse) {
  #cursor-dot, #cursor-ring, #cursor-aura {
    display: none !important;
  }
}

/* SECTION 2: LIVING INTELLIGENCE & MATRIX OPERATOR COCKPIT */
.solaris-hero-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background-color: var(--bg-deep, #030008);
  border-top: 1px solid rgba(0, 240, 255, 0.25);
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2.5rem) clamp(4rem, 8vw, 7rem);
  gap: 2.5rem;
}

.cinematic-backdrop-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cinematic-media-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: contrast(1.15) saturate(1.2) brightness(0.85);
  transition: opacity 0.5s ease;
}

.procedural-cyber-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 75% 25%, rgba(255, 107, 0, 0.24) 0%, transparent 45%),
    radial-gradient(circle at 25% 75%, rgba(0, 240, 255, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(3, 0, 8, 0.4) 0%, rgba(3, 0, 8, 0.98) 100%);
  z-index: 1;
}

.shader-scanline-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%),
              radial-gradient(ellipse at center, transparent 55%, rgba(3, 0, 8, 0.9) 100%);
  background-size: 100% 4px, 100% 100%;
  opacity: 0.7;
}

#webgl-canvas-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 1.0;
}

/* 4-QUADRANTEN CYBERNETIC HUD MATRIX */
.hud-master-overlay {
  position: relative;
  z-index: 12;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  pointer-events: auto;
}

.hud-master-overlay.dimmed {
  opacity: 0.15;
  filter: blur(8px);
  pointer-events: none !important;
}

.hud-module {
  pointer-events: auto;
  background: rgba(7, 11, 19, 0.85);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 18px;
  padding: 1.2rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), inset 0 0 25px rgba(0, 240, 255, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 130px;
  max-height: 210px;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}

.hud-module:hover {
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), inset 0 0 35px rgba(0, 240, 255, 0.12);
}

.hud-module::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--neon-cyan, #00f0ff);
  border-left: 2px solid var(--neon-cyan, #00f0ff);
  border-top-left-radius: 18px;
}

.hud-module::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid var(--neon-orange, #ff6b00);
  border-right: 2px solid var(--neon-orange, #ff6b00);
  border-bottom-right-radius: 18px;
}

.hud-top-left {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.hud-tag {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.72rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5rem;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--neon-cyan, #00f0ff);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon-cyan, #00f0ff);
  animation: pulse-glow 1.8s infinite ease-in-out;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.status-pulse-dot.anomaly-mode {
  background: var(--neon-orange, #ff6b00);
  box-shadow: 0 0 14px var(--neon-orange, #ff6b00), 0 0 25px #ff2a00;
  animation: pulse-panic 0.6s infinite ease-in-out;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

@keyframes pulse-panic {
  0%, 100% { opacity: 1; transform: scale(1.3); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.hud-stat-headline {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}

.hud-stat-headline.anomaly-alert {
  color: var(--neon-orange, #ff6b00);
  text-shadow: 0 0 15px rgba(255, 107, 0, 0.58);
}

.hud-text-container {
  overflow-y: auto;
  max-height: 75px;
  padding-right: 4px;
}

.hud-text-container::-webkit-scrollbar {
  width: 2px;
}
.hud-text-container::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 2px;
}

.hud-sub-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.48;
}

.hud-top-right {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  text-align: right;
}

.hud-top-right .hud-tag {
  justify-content: flex-end;
}

.consensus-bar-wrapper {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}

.consensus-bar-fill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--neon-cyan, #00f0ff), var(--neon-orange, #ff6b00));
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.55);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.68rem;
  color: var(--neon-cyan, #00f0ff);
}

.hud-bottom-left {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}

.frequency-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 22px;
  margin: 6px 0;
}

.freq-bar {
  width: 4px;
  background: var(--neon-cyan, #00f0ff);
  border-radius: 2px;
  height: 30%;
  animation: bounce-freq 1.1s infinite ease-in-out alternate;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.55);
}

.freq-bar:nth-child(1) { animation-delay: 0.05s; height: 45%; }
.freq-bar:nth-child(2) { animation-delay: 0.2s; height: 75%; background: var(--neon-orange, #ff6b00); box-shadow: 0 0 6px rgba(255, 107, 0, 0.58); }
.freq-bar:nth-child(3) { animation-delay: 0.35s; height: 95%; }
.freq-bar:nth-child(4) { animation-delay: 0.5s; height: 40%; }
.freq-bar:nth-child(5) { animation-delay: 0.65s; height: 85%; background: var(--neon-orange, #ff6b00); box-shadow: 0 0 6px rgba(255, 107, 0, 0.58); }
.freq-bar:nth-child(6) { animation-delay: 0.8s; height: 60%; }

@keyframes bounce-freq {
  0% { height: 15%; }
  100% { height: 100%; }
}

.hud-bottom-right {
  grid-column: 3;
  grid-row: 3;
  align-self: end;
}

.vault-tag {
  display: inline-block;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.68rem;
  color: var(--neon-orange, #ff6b00);
  background: rgba(255, 107, 0, 0.15);
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 107, 0, 0.55);
  margin-bottom: 6px;
  letter-spacing: 1px;
}

/* Center Brand for Section 2A */
.center-hud-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
  width: 90%;
  max-width: 820px;
  padding: 0 10px;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.center-hud-brand.hidden-mode {
  opacity: 0.08;
  transform: translate(-50%, -50%) scale(0.94);
}

.living-core-title {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: clamp(1.45rem, 4.2vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #ffffff;
  text-shadow: 0 0 40px rgba(0, 240, 255, 0.5), 0 0 80px rgba(0, 240, 255, 0.2);
  text-wrap: balance;
  word-break: normal;
  hyphens: auto;
  line-height: 1.12;
  width: 100%;
}

.center-hud-brand p {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: clamp(0.68rem, 0.95vw, 0.92rem);
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 3.5px;
  text-transform: uppercase;
  margin-top: 10px;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.55);
  text-wrap: balance;
}

/* TIMELINE SCRUBBER HUB */
.timeline-scrubber-hub {
  position: absolute;
  bottom: max(clamp(0.75rem, 1.6vw, 1.6rem), env(safe-area-inset-bottom, 12px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  pointer-events: auto;
  width: min(92vw, 700px);
  background: rgba(7, 11, 19, 0.85);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 18px;
  padding: 12px 18px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 240, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.scrubber-phase-badge {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.74rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scrubber-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.play-pause-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.68rem;
  padding: 6px 12px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.play-pause-btn:hover {
  border-color: var(--neon-cyan, #00f0ff);
  color: var(--neon-cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.12);
}

.nexus-pill-btn {
  background: linear-gradient(135deg, var(--neon-cyan, #00f0ff) 0%, #0284c7 100%);
  border: none;
  color: #07090e;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 6px 14px;
  min-height: 44px;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nexus-pill-btn:hover {
  transform: scale(1.05);
}

.slider-track-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 30px;
}

.evolution-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.evolution-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--neon-cyan, #00f0ff);
  border: 2px solid #ffffff;
  box-shadow: 0 0 16px var(--neon-cyan, #00f0ff), 0 0 25px rgba(0, 240, 255, 0.55);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.evolution-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  background: var(--neon-orange, #ff6b00);
}

.slider-notches {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  pointer-events: none;
  z-index: 1;
}

.notch-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, transform 0.3s ease;
}

.notch-dot.active {
  background: var(--neon-cyan, #00f0ff);
  transform: scale(1.6);
  box-shadow: 0 0 8px var(--neon-cyan, #00f0ff);
}

.notch-dot.active.anomaly {
  background: var(--neon-orange, #ff6b00);
  box-shadow: 0 0 12px var(--neon-orange, #ff6b00);
}

.slider-phase-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 2px;
}

.phase-label-item {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.6rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 4px 2px;
  transition: color 0.2s ease;
}

.phase-label-item.active {
  color: var(--neon-cyan, #00f0ff);
  font-weight: 700;
}

.phase-label-item.active.anomaly {
  color: var(--neon-orange, #ff6b00);
}

/* SYNAPTIC RADIAL WHEEL OVERLAY */
.synaptic-radial-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.synaptic-radial-container.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#synaptic-svg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.synapse-path {
  stroke: var(--neon-cyan, #00f0ff);
  stroke-width: 1.5;
  stroke-dasharray: 6, 8;
  fill: none;
  opacity: 0.6;
  filter: drop-shadow(0 0 6px var(--neon-cyan, #00f0ff));
  animation: dash-flow 25s linear infinite;
}

@keyframes dash-flow {
  to { stroke-dashoffset: -1000; }
}

.radial-nodes-stage {
  position: relative;
  width: min(80vw, 620px);
  height: min(80vw, 620px);
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.22);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.synapse-node {
  position: absolute;
  width: clamp(94px, 12vw, 122px);
  height: clamp(94px, 12vw, 122px);
  background: rgba(9, 14, 24, 0.96);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 0 18px rgba(0, 240, 255, 0.08);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  transform: translate(-50%, -50%);
}

.synapse-node:hover {
  transform: translate(-50%, -50%) scale(1.12);
  border-color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.55);
}

.synapse-node.node-orange:hover {
  border-color: var(--neon-orange, #ff6b00);
  box-shadow: 0 0 25px rgba(255, 107, 0, 0.58);
}

.synapse-icon {
  font-size: 1.2rem;
  margin-bottom: 3px;
}

.synapse-label {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
}

.synapse-sub {
  font-size: 0.55rem;
  color: var(--neon-cyan, #00f0ff);
  margin-top: 1px;
}

/* ADAPTIVE DETAIL-INSPECTOR DRAWER */
.solaris-inspector-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(92vw, 450px);
  height: 100dvh;
  background: rgba(9, 14, 24, 0.96);
  border-left: 1px solid rgba(0, 240, 255, 0.28);
  box-shadow: -35px 0 70px rgba(0, 0, 0, 0.9);
  z-index: 50;
  backdrop-filter: blur(35px) saturate(190%);
  -webkit-backdrop-filter: blur(35px) saturate(190%);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.solaris-inspector-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.8rem;
  margin-bottom: 1.2rem;
}

.drawer-tag {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.72rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 2px;
}

.drawer-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.drawer-close-btn:hover {
  border-color: var(--neon-orange, #ff6b00);
  color: var(--neon-orange, #ff6b00);
  transform: rotate(90deg);
}

.drawer-content-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  margin-bottom: 1.2rem;
}

.drawer-content-scroll::-webkit-scrollbar {
  width: 3px;
}
.drawer-content-scroll::-webkit-scrollbar-thumb {
  background: var(--neon-cyan, #00f0ff);
  border-radius: 2px;
}

.drawer-title {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: #ffffff;
  margin-bottom: 0.8rem;
}

.drawer-body-text {
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.drawer-metric-card {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 12px;
  padding: 0.8rem;
  margin-bottom: 0.8rem;
}

.drawer-metric-title {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.65rem;
  color: var(--neon-cyan, #00f0ff);
  text-transform: uppercase;
}

.drawer-metric-val {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: 1.2rem;
  color: #ffffff;
  font-weight: 800;
  margin-top: 2px;
}

.drawer-action-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--neon-cyan, #00f0ff) 0%, #0284c7 100%);
  border: none;
  color: #07090e;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px;
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 240, 255, 0.35);
  transition: transform 0.2s ease;
}

.drawer-action-btn:hover {
  transform: translateY(-2px);
}

/* SECTION 2B: DETERMINISTIC PINNING MATRIX */
.solaris-pinned-section {
  position: relative;
  width: 100vw;
  background: radial-gradient(circle at 50% 0%, #0d1527 0%, var(--bg-deep, #06080d) 85%);
  border-top: 1px solid rgba(0, 240, 255, 0.28);
  overflow: hidden;
  z-index: 10;
}

.section-header-badge {
  text-align: center;
  padding: 3rem 1.5rem 1rem 1.5rem;
}

.section-tag {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.78rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 8px;
  background: rgba(0, 240, 255, 0.12);
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 240, 255, 0.28);
}

.section-title {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: clamp(1.8rem, 3.8vw, 3.6rem);
  color: #ffffff;
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.section-sub {
  font-size: clamp(0.9rem, 1.2vw, 1.15rem);
  color: #94a3b8;
  max-width: 680px;
  margin: 0 auto;
}

.pin-track-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.pin-track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding: 0 3rem;
  width: max-content;
  will-change: transform;
}

.arch-card {
  width: clamp(340px, 42vw, 560px);
  min-height: 480px;
  background: rgba(15, 21, 34, 0.75);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(0, 240, 255, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.arch-card:hover {
  border-color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.9), inset 0 0 35px rgba(0, 240, 255, 0.12);
}

.arch-card.orange-theme:hover {
  border-color: var(--neon-orange, #ff6b00);
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.9), inset 0 0 35px rgba(255, 107, 0, 0.15);
}

.arch-card-number {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.85rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.arch-card.orange-theme .arch-card-number {
  color: var(--neon-orange, #ff6b00);
}

.arch-card-title {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  color: #ffffff;
  margin-bottom: 14px;
}

.arch-card-desc {
  font-size: 0.92rem;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.arch-live-box {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  margin-top: auto;
}

.arch-live-head {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.65rem;
  color: var(--neon-cyan, #00f0ff);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.arch-code-block {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.72rem;
  color: #38bdf8;
  line-height: 1.5;
  overflow-x: auto;
}

/* SCOPED BREAKPOINTS FOR SECTION 2 */
@media (min-width: 769px) and (max-width: 1024px) {
  .hud-master-overlay {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    padding: 14px;
  }
  .hud-top-right {
    grid-column: 2;
    grid-row: 1;
  }
  .hud-bottom-left {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 75px;
  }
  .hud-bottom-right {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 75px;
  }
  .radial-nodes-stage {
    width: min(76vw, 540px);
    height: min(76vw, 540px);
  }
  .arch-card {
    width: 460px;
  }
}

@media (max-width: 768px) {
  .hud-master-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    gap: 6px;
  }
  .hud-top-right, .hud-bottom-right {
    display: none;
  }
  .hud-module {
    width: 100%;
    max-height: 130px;
    min-height: auto;
    padding: 10px 12px;
  }
  .center-hud-brand {
    top: 38%;
    width: 94%;
    padding: 0 6px;
  }
  .living-core-title {
    font-size: clamp(1.35rem, 5.4vw, 1.85rem);
    letter-spacing: -0.2px;
    line-height: 1.18;
  }
  .timeline-scrubber-hub {
    bottom: max(8px, env(safe-area-inset-bottom, 8px));
    padding: 10px 12px;
    width: 95vw;
  }
  .phase-label-item {
    font-size: 0.48rem;
  }
  .radial-nodes-stage {
    width: 92vw;
    height: 50vh;
    border-radius: 26px;
    margin-bottom: 75px;
  }
  .synapse-node {
    width: 78px;
    height: 78px;
    padding: 4px;
  }
  .synapse-label {
    font-size: 0.52rem;
  }
  .synapse-sub {
    display: none;
  }
  .solaris-inspector-drawer {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 85dvh;
    border-left: none;
    border-top: 1px solid rgba(0, 240, 255, 0.28);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    transform: translateY(100%);
  }
  .solaris-inspector-drawer.open {
    transform: translateY(0);
  }
  .pin-track-container {
    height: auto;
    display: block;
    padding: 0 16px 2rem 16px;
  }
  .pin-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    width: 100%;
    transform: none !important;
  }
  .arch-card {
    width: 100%;
    min-height: auto;
    padding: 18px;
  }
}

/* ==========================================================================
   SEKTION 2B: MATRIX OPERATOR AUDIO & TEXT STORY COCKPIT STYLES
   ========================================================================== */
.section-matrix-narrative {
  position: relative;
  width: 100vw;
  background: radial-gradient(circle at 50% 0%, #0a1120 0%, var(--bg-deep, #06080d) 90%);
  border-top: 1px solid rgba(0, 240, 255, 0.28);
  border-bottom: 1px solid rgba(0, 240, 255, 0.28);
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
  z-index: 10;
  overflow: hidden;
}

.matrix-operator-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(1.8rem, 3.5vw, 3rem) auto;
}

.operator-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.35);
  padding: 6px 16px;
  border-radius: 9999px;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: clamp(0.65rem, 0.85vw, 0.78rem);
  margin-bottom: 14px;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
}

.pulse-led-matrix {
  width: 8px;
  height: 8px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff88, 0 0 18px #00ff88;
  animation: pulse-matrix 1.5s infinite ease-in-out;
}

@keyframes pulse-matrix {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.operator-title {
  color: var(--neon-cyan, #00f0ff);
  font-weight: 700;
  letter-spacing: 1px;
}

.operator-id {
  color: #94a3b8;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 10px;
}

.matrix-headline {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: clamp(1.6rem, 3.2vw, 3.2rem);
  color: #ffffff;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
  text-shadow: 0 0 35px rgba(0, 240, 255, 0.3);
}

.matrix-sub {
  font-size: clamp(0.88rem, 1.1vw, 1.1rem);
  color: #94a3b8;
  line-height: 1.6;
}

/* Control Cockpit */
.narrative-control-cockpit {
  background: rgba(11, 17, 30, 0.85);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 20px;
  padding: clamp(1.2rem, 2.2vw, 2rem);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), inset 0 0 30px rgba(0, 240, 255, 0.05);
  max-width: 1100px;
  margin: 0 auto 2.5rem auto;
}

.cockpit-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
}

.voice-mode-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mode-label {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.72rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 1.5px;
}

.voice-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-voice-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 6px 14px;
  min-height: 40px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-voice-pill:hover {
  border-color: var(--neon-cyan, #00f0ff);
  color: #ffffff;
  background: rgba(0, 240, 255, 0.08);
}

.btn-voice-pill.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(255, 107, 0, 0.15) 100%);
  border-color: var(--neon-cyan, #00f0ff);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
}

.narrative-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-narrative-master {
  background: linear-gradient(135deg, var(--neon-cyan, #00f0ff) 0%, #0284c7 100%);
  border: none;
  color: #07090e;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-narrative-master:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.6);
}

.btn-narrative-master.speaking {
  background: linear-gradient(135deg, var(--neon-orange, #ff6b00) 0%, #ff2a00 100%);
  color: #ffffff;
  box-shadow: 0 0 25px rgba(255, 107, 0, 0.5);
}

.btn-narrative-step {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.7rem;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-narrative-step:hover {
  border-color: var(--neon-cyan, #00f0ff);
  color: var(--neon-cyan, #00f0ff);
}

/* Teleprompter Box */
.narrative-teleprompter-box {
  background: rgba(6, 10, 18, 0.92);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 16px;
  padding: 0.9rem 1.4rem 1.2rem 1.4rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), inset 0 0 20px rgba(0, 240, 255, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Touch & Click Collapse Handle */
.teleprompter-collapse-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 12px 10px 12px;
  margin: -4px auto 8px auto;
  width: fit-content;
  user-select: none;
  touch-action: pan-y;
}

.handle-bar {
  width: 42px;
  height: 4px;
  background: rgba(0, 240, 255, 0.45);
  border-radius: 9999px;
  transition: all 0.25s ease;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.teleprompter-collapse-handle:hover .handle-bar {
  background: var(--neon-cyan, #00f0ff);
  width: 55px;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.6);
}

.handle-label {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.60rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 0.08em;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.teleprompter-collapse-handle:hover .handle-label {
  opacity: 1;
  color: #ffffff;
}

/* Collapsed State (Ultra-Slim Floating Bar) */
.narrative-teleprompter-box.collapsed {
  padding: 0.5rem 1.2rem;
  background: rgba(6, 10, 18, 0.95);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85);
}

.narrative-teleprompter-box.collapsed .teleprompter-content,
.narrative-teleprompter-box.collapsed .teleprompter-eq-bar {
  display: none !important;
}

.narrative-teleprompter-box.collapsed .teleprompter-meta {
  margin-bottom: 0;
}

.narrative-teleprompter-box.collapsed .handle-bar {
  background: var(--neon-orange, #ff6b00);
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}

.narrative-teleprompter-box.collapsed .handle-label {
  color: var(--neon-orange, #ff6b00);
}

.teleprompter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.68rem;
  color: var(--neon-cyan, #00f0ff);
}

.rec-dot {
  width: 7px;
  height: 7px;
  background: var(--neon-cyan, #00f0ff);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--neon-cyan, #00f0ff);
}

.rec-dot.active {
  background: var(--neon-orange, #ff6b00);
  box-shadow: 0 0 12px var(--neon-orange, #ff6b00);
  animation: pulse-panic 0.6s infinite ease-in-out;
}

.chapter-badge-active {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.68rem;
  color: var(--neon-orange, #ff6b00);
  background: rgba(255, 107, 0, 0.12);
  border: 1px solid rgba(255, 107, 0, 0.35);
  padding: 2px 10px;
  border-radius: 6px;
}

.teleprompter-live-text {
  font-family: var(--font-body, 'Rajdhani', sans-serif);
  font-size: clamp(1.05rem, 1.4vw, 1.45rem);
  color: #ffffff;
  line-height: 1.5;
  font-weight: 600;
  min-height: 55px;
  transition: color 0.3s ease;
}

/* YouTube-like Audio Scrubber & Timeline Bar */
.audio-scrubber-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 10px;
}

.narrative-teleprompter-box.collapsed .audio-scrubber-container {
  display: none !important;
}

.btn-skip-audio {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan, #00f0ff);
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-skip-audio:hover {
  background: var(--neon-cyan, #00f0ff);
  color: #000000;
  box-shadow: 0 0 10px var(--neon-cyan, #00f0ff);
}

.audio-timeline-wrap {
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 4px;
}

.audio-timeline-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  position: relative;
  overflow: visible;
  transition: height 0.15s ease;
}

.audio-timeline-wrap:hover .audio-timeline-track {
  height: 8px;
}

.audio-timeline-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--neon-cyan, #00f0ff), var(--neon-orange, #ff6b00));
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
  position: relative;
}

.audio-timeline-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border: 2px solid var(--neon-cyan, #00f0ff);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon-cyan, #00f0ff);
  pointer-events: none;
  opacity: 0.9;
  transition: transform 0.1s ease;
}

.audio-timeline-wrap:hover .audio-timeline-handle {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 16px var(--neon-orange, #ff6b00);
}

.audio-time-display {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
  font-weight: 600;
}

.audio-time-display #audioTimeCurrent {
  color: #ffffff;
}

.teleprompter-eq-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

.eq-track {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 16px;
}

.eq-stream-bar {
  width: 3px;
  height: 25%;
  background: var(--neon-cyan, #00f0ff);
  border-radius: 2px;
  transition: height 0.15s ease;
}

.narrative-control-cockpit.speaking .eq-stream-bar:nth-child(1) { animation: bounce-freq 0.6s infinite alternate; }
.narrative-control-cockpit.speaking .eq-stream-bar:nth-child(2) { animation: bounce-freq 0.8s infinite alternate 0.1s; background: var(--neon-orange, #ff6b00); }
.narrative-control-cockpit.speaking .eq-stream-bar:nth-child(3) { animation: bounce-freq 0.5s infinite alternate 0.2s; }
.narrative-control-cockpit.speaking .eq-stream-bar:nth-child(4) { animation: bounce-freq 0.9s infinite alternate 0.15s; }
.narrative-control-cockpit.speaking .eq-stream-bar:nth-child(5) { animation: bounce-freq 0.7s infinite alternate 0.05s; background: var(--neon-orange, #ff6b00); }
.narrative-control-cockpit.speaking .eq-stream-bar:nth-child(6) { animation: bounce-freq 0.55s infinite alternate 0.25s; }
.narrative-control-cockpit.speaking .eq-stream-bar:nth-child(7) { animation: bounce-freq 0.75s infinite alternate 0.12s; }
.narrative-control-cockpit.speaking .eq-stream-bar:nth-child(8) { animation: bounce-freq 0.65s infinite alternate 0.18s; }

.teleprompter-timing {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.62rem;
  color: #64748b;
  letter-spacing: 1px;
}

/* Chapter Navigation Pills */
.narrative-chapter-navigation {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto 2.2rem auto;
}

.chapter-nav-btn {
  background: rgba(11, 18, 32, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 12px;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 46px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.chapter-nav-btn:hover {
  border-color: var(--neon-cyan, #00f0ff);
  color: #ffffff;
  background: rgba(0, 240, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.25);
}

.chapter-nav-btn.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.22) 0%, rgba(255, 107, 0, 0.18) 100%);
  border-color: var(--neon-cyan, #00f0ff);
  color: #ffffff;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), inset 0 0 15px rgba(0, 240, 255, 0.15);
}

.chap-num {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--neon-cyan, #00f0ff);
}

.chap-name {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
}

/* Chapter Content Cards */
.narrative-cards-viewport {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  min-height: 380px;
}

.story-chapter-card {
  display: none;
  background: rgba(13, 20, 36, 0.8);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  animation: fadeInCard 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-chapter-card.active {
  display: block;
}

@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-story-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.story-tag {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.72rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.story-heading {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.story-desc {
  font-size: 0.94rem;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 1.4rem;
}

.story-highlights {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.highlight-chip {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.65rem;
  color: var(--neon-cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 4px 10px;
  border-radius: 6px;
}

/* Dialect Switcher Box & Audio Trigger */
.dialect-switcher-box {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 12px;
  padding: 0.9rem;
  margin-bottom: 1.2rem;
}

.dialect-box-label {
  display: block;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.64rem;
  color: var(--neon-cyan, #00f0ff);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  font-weight: 700;
}

.dialect-pills-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.btn-dialect-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: 0.65rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-dialect-chip:hover {
  border-color: var(--neon-cyan, #00f0ff);
  color: #ffffff;
}

.btn-dialect-chip.active {
  background: rgba(0, 240, 255, 0.18);
  border-color: var(--neon-cyan, #00f0ff);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.btn-play-dialect-voice {
  width: 100%;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(255, 107, 0, 0.2));
  border: 1px solid var(--neon-cyan, #00f0ff);
  color: #ffffff;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
}

.btn-play-dialect-voice:hover {
  background: var(--neon-cyan, #00f0ff);
  color: #000000;
  box-shadow: 0 0 25px var(--neon-cyan, #00f0ff);
}

/* ==========================================================================
   BACHELOR-THESIS 5-STAGE INTERACTIVE SIMULATOR STYLES
   ========================================================================== */
.sim-global-bar {
  background: rgba(7, 11, 20, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.sim-bar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sim-pulse-led {
  width: 8px;
  height: 8px;
  background: var(--neon-cyan, #00f0ff);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon-cyan, #00f0ff);
  animation: pulse-glow 1.5s infinite ease-in-out;
}

.sim-status-title {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.sim-thesis-tag {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.64rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.sim-bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-sim-auto {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(255, 107, 0, 0.18) 100%);
  border: 1px solid var(--neon-cyan, #00f0ff);
  color: #ffffff;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  min-height: 38px;
}

.btn-sim-auto:hover {
  background: linear-gradient(135deg, var(--neon-cyan, #00f0ff) 0%, var(--neon-orange, #ff6b00) 100%);
  color: #030008;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.btn-sim-auto.running {
  border-color: var(--neon-orange, #ff6b00);
  animation: pulse-panic 1.2s infinite ease-in-out;
}

.sim-step-indicators {
  display: flex;
  gap: 6px;
}

.step-dot {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.step-dot:hover {
  border-color: var(--neon-cyan, #00f0ff);
  color: #ffffff;
}

.step-dot.active {
  background: var(--neon-cyan, #00f0ff);
  color: #030008;
  border-color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}

/* THESIS PREVIEW STAGE */
.thesis-preview-stage {
  position: relative;
  width: 100%;
  background: rgba(4, 7, 14, 0.92);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 16px;
  padding: 1.4rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 0 30px rgba(0, 240, 255, 0.03);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.thesis-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--neon-cyan, #00f0ff) 50%, transparent 100%);
  box-shadow: 0 0 15px var(--neon-cyan, #00f0ff), 0 0 30px var(--neon-cyan, #00f0ff);
  animation: sweepScan 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 8;
}

@keyframes sweepScan {
  0% { top: -5%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

/* POPPING LEITFADEN HUD CARD */
.popping-hud-card {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(6, 12, 24, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--neon-cyan, #00f0ff);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.3);
  z-index: 10;
  max-width: 290px;
  animation: popCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.popping-hud-card.hud-pop-orange {
  border-color: var(--neon-orange, #ff6b00);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 107, 0, 0.3);
}

@keyframes popCardIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pop-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--neon-cyan, #00f0ff);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 5px;
  margin-bottom: 6px;
}

.pop-header .pop-led {
  width: 6px;
  height: 6px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ff88;
}

.pop-header .pop-led.orange {
  background: var(--neon-orange, #ff6b00);
  box-shadow: 0 0 8px var(--neon-orange, #ff6b00);
}

.pop-body {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.62rem;
  color: #cbd5e1;
  line-height: 1.45;
}

/* DOCUMENT SHEET MOCKUP */
.document-sheet {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.3rem;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 5;
}

.doc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.6rem;
}

.doc-uni {
  color: var(--neon-cyan, #00f0ff);
  font-weight: 700;
}

.doc-meta {
  color: #64748b;
}

.doc-thesis-title {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: 0.95rem;
  color: #ffffff;
  margin-bottom: 6px;
  line-height: 1.35;
}

.doc-author {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-bottom: 12px;
  font-family: var(--font-mono, 'Fira Code', monospace);
}

.skeleton-line {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  margin-bottom: 8px;
}
.w-90 { width: 90%; }
.w-75 { width: 75%; }
.w-85 { width: 85%; }

.doc-body-paragraph {
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 12px;
}

.revision-diff-block {
  margin: 10px 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-left: 3px solid var(--neon-orange, #ff6b00);
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tracked-del {
  color: #f87171;
  text-decoration: line-through;
  background: rgba(239, 68, 68, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.75rem;
}

.tracked-ins {
  color: #4ade80;
  text-decoration: none;
  background: rgba(34, 197, 94, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.doc-text-intro {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-bottom: 8px;
}

.doc-formula-highlight {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  position: relative;
}

.doc-formula-label {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.6rem;
  color: var(--neon-cyan, #00f0ff);
  margin-bottom: 6px;
}

.doc-formula-render {
  text-align: center;
  font-size: 1.15rem;
  color: #38bdf8;
}

/* APA-7 SCIENTIFIC TABLE */
.apa-table-wrapper {
  margin-bottom: 12px;
  overflow-x: auto;
}

.table-caption-apa {
  font-size: 0.72rem;
  color: #cbd5e1;
  margin-bottom: 6px;
  line-height: 1.35;
}

.solaris-apa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  color: #f1f5f9;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

.solaris-apa-table th {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  font-weight: 700;
}

.solaris-apa-table td {
  padding: 6px 10px;
  border: none;
}

.solaris-apa-table tr.highlight-row {
  background: rgba(0, 240, 255, 0.12);
  color: var(--neon-cyan, #00f0ff);
}

.table-note-apa {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-top: 6px;
}

/* FINAL SEAL & EXPORT */
.doc-seal-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(255, 107, 0, 0.12) 100%);
  border: 1px solid var(--neon-cyan, #00f0ff);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}

.seal-icon-glow {
  font-size: 1.8rem;
  animation: pulse-glow 2s infinite ease-in-out;
}

.seal-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seal-title {
  font-family: var(--font-headline, 'Orbitron', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
}

.seal-hash {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.58rem;
  color: var(--neon-cyan, #00f0ff);
  word-break: break-all;
}

.god-mode-export-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.export-chip-dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.65rem;
  color: #ffffff;
}

.badge-dl {
  font-size: 0.58rem;
  color: var(--neon-cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.doc-status-footer {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

.status-badge-scan {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.62rem;
  color: var(--neon-cyan, #00f0ff);
  border: 1px solid rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.06);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* Scoped Responsive Breakpoints for Section 2B */
@media (max-width: 900px) {
  .card-story-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .cockpit-top-row {
    flex-direction: column;
    align-items: stretch;
  }
  .narrative-actions {
    width: 100%;
    justify-content: space-between;
  }
  .btn-narrative-master {
    flex: 1;
  }
}

/* ==============================================================================
   SEKTION 1.5: SOLARIS VOICE CONTROLLER (PIXEL-PERFECT REFERENZ)
   ============================================================================== */
.voice-controller-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #030108;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.6rem, 3.2vh, 2.6rem) clamp(1.2rem, 2.5vw, 2.2rem);
  overflow: hidden;
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  border-bottom: 1px solid rgba(236, 72, 153, 0.2);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.9);
}

/* Fullscreen Cinematic Cyber Animated Background */
.vc-bg-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.vc-bg-image-layer {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  background-image: url('assets/voice_controller/vc_cinematic_bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.68) contrast(1.15) saturate(1.25);
  animation: vcBgBreathe 18s ease-in-out infinite alternate;
  will-change: transform, filter;
}

@keyframes vcBgBreathe {
  0% {
    transform: scale(1) translate(0, 0);
    filter: brightness(0.62) contrast(1.15) saturate(1.15);
  }
  50% {
    transform: scale(1.05) translate(-1%, -0.6%);
    filter: brightness(0.74) contrast(1.22) saturate(1.35);
  }
  100% {
    transform: scale(1.02) translate(0.8%, 0.8%);
    filter: brightness(0.66) contrast(1.16) saturate(1.2);
  }
}

.vc-bg-laser-filaments {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 72% 50%, rgba(0, 240, 255, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse at 25% 60%, rgba(236, 72, 153, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, rgba(3, 1, 8, 0.45) 0%, transparent 25%, transparent 75%, rgba(3, 1, 8, 0.8) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.vc-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 68% 50%, rgba(3, 2, 8, 0.1) 0%, rgba(3, 2, 8, 0.6) 55%, rgba(2, 1, 6, 0.95) 100%);
  pointer-events: none;
}

.vc-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 3.5vw, 3.8rem);
  align-items: center;
}

/* Linke Spalte: Voice Controller Cockpit */
.vc-cockpit-col {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.8vh, 1.4rem);
  max-width: 560px;
}

.vc-brand-header .vc-brand-title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.vc-brand-logo-img {
  width: min(100%, 330px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(226, 201, 124, 0.35));
  display: block;
}

.vc-brand-sub {
  font-family: var(--font-mono, 'Fira Code', 'Space Mono', monospace);
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.50em;
  color: var(--neon-cyan, #00f0ff);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  padding-left: 2px;
}

/* Dynamic Animated Audio Waveform */
.vc-waveform {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  width: 260px;
  padding: 0.1rem 0;
}

.vc-wave-bar {
  flex: 1;
  max-width: 4px;
  min-height: 3px;
  background: linear-gradient(180deg, #00f0ff 0%, #0284c7 100%);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
  animation: vcWaveIdle 1.4s ease-in-out infinite alternate;
}

.vc-waveform.speaking .vc-wave-bar {
  animation: vcWaveActive 0.35s ease-in-out infinite alternate;
  background: linear-gradient(180deg, #00f0ff 0%, #ec4899 100%);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.85);
}

.vc-wave-bar:nth-child(2n) { animation-delay: 0.15s; }
.vc-wave-bar:nth-child(3n) { animation-delay: 0.3s; }
.vc-wave-bar:nth-child(4n) { animation-delay: 0.45s; }
.vc-wave-bar:nth-child(5n) { animation-delay: 0.6s; }

@keyframes vcWaveIdle {
  0% { height: 4px; }
  50% { height: 20px; }
  100% { height: 6px; }
}

@keyframes vcWaveActive {
  0% { height: 6px; }
  50% { height: 32px; }
  100% { height: 10px; }
}

/* Greeting Block */
.vc-greeting-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.vc-greeting-main {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(1.05rem, 0.92rem + 0.6vw, 1.4rem);
  font-weight: 500;
  color: var(--neon-cyan, #00f0ff);
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
  margin: 0;
  line-height: 1.35;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.vc-greeting-sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.92rem, 0.82rem + 0.4vw, 1.2rem);
  font-weight: 400;
  color: #38bdf8;
  margin: 0;
  line-height: 1.4;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* 4 Feature Items (Exact Match with Reference Image) */
.vc-features-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.1vh, 0.75rem);
}

.vc-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: transparent;
  border-radius: 8px;
  padding: 0.15rem 0;
  transition: all 0.25s ease;
}

.vc-feature-item:hover {
  transform: translateX(4px);
}

.vc-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(5, 10, 20, 0.7);
  margin-top: 2px;
}

.vc-feature-icon.icon-cyan {
  border: 1px solid rgba(0, 240, 255, 0.7);
  color: var(--neon-cyan, #00f0ff);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.vc-feature-icon.icon-magenta {
  border: 1px solid rgba(217, 70, 239, 0.7);
  color: #d946ef;
  box-shadow: 0 0 10px rgba(217, 70, 239, 0.25);
}

.vc-feature-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vc-feature-title {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin: 0;
  text-transform: uppercase;
}

.vc-feature-title.title-cyan {
  color: var(--neon-cyan, #00f0ff);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.45);
}

.vc-feature-title.title-magenta {
  color: #d946ef;
  text-shadow: 0 0 10px rgba(217, 70, 239, 0.45);
}

.vc-feature-desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.94rem;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.45;
  font-weight: 500;
}

/* Action Button */
.vc-cta-wrapper {
  margin-top: 0.2rem;
}

.vc-activate-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 2.2rem 0.6rem 2.2rem;
  background: rgba(6, 10, 20, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.12);
  gap: 4px;
}

.vc-activate-btn .btn-text {
  font-family: var(--font-heading, 'Cinzel', 'Outfit', sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #e2c97c;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.vc-btn-mini-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 8px;
  opacity: 0.7;
}

.vc-btn-mini-wave span {
  width: 2px;
  height: 3px;
  background: #00f0ff;
  border-radius: 1px;
  animation: miniWave 1.2s infinite alternate;
}

.vc-btn-mini-wave span:nth-child(odd) { background: #e2c97c; animation-delay: 0.2s; }
.vc-btn-mini-wave span:nth-child(3n) { animation-delay: 0.4s; }

@keyframes miniWave {
  0% { height: 2px; }
  100% { height: 7px; }
}

.vc-activate-btn:hover {
  border-color: #00f0ff;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
  transform: translateY(-2px);
}

.vc-activate-btn:hover .btn-text {
  color: #ffffff;
}

/* Footer Meta (Full Width at Bottom of Grid) */
.vc-footer-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.9rem;
  margin-top: 0.9rem;
  width: 100%;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.65rem;
  color: #64748b;
}

.vc-radar-status {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.06);
  padding: 4px 10px;
  border-radius: 20px;
  color: var(--neon-cyan, #00f0ff);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.radar-ping {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  animation: radarBlink 1.5s infinite alternate;
}

@keyframes radarBlink {
  0% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.3); }
}

/* Rechte Spalte: Holographic Halo Head Stage */
.vc-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vc-halo-stage {
  position: relative;
  width: 100%;
  max-width: min(100%, min(700px, 78vh));
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vc-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 50px rgba(0, 240, 255, 0.28), 0 0 100px rgba(236, 72, 153, 0.18);
  transition: transform 0.4s ease-out;
}

.vc-hud-orbit-ring {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  pointer-events: none;
  z-index: 3;
}

.orbit-rot-cw {
  transform-origin: center;
  animation: orbitSpinCW 36s linear infinite;
}

.orbit-rot-ccw {
  transform-origin: center;
  animation: orbitSpinCCW 28s linear infinite;
}

@keyframes orbitSpinCW {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbitSpinCCW {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.vc-stage-ambient-glow {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.25) 0%, rgba(236, 72, 153, 0.18) 45%, transparent 70%);
  filter: blur(45px);
  pointer-events: none;
  z-index: 1;
  animation: haloBreath 4s ease-in-out infinite alternate;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@keyframes haloBreath {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.05); opacity: 1; }
}

.vc-angle-tag {
  position: absolute;
  bottom: -20px;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--neon-cyan, #00f0ff);
  background: rgba(5, 10, 20, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.4);
  padding: 6px 16px;
  border-radius: 6px;
  letter-spacing: 0.15em;
  z-index: 3;
  backdrop-filter: blur(8px);
}

.vc-turn-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
  width: 100%;
  max-width: 500px;
  position: relative;
  z-index: 5;
}

.vc-turn-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.8rem;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 8px;
  color: var(--neon-cyan, #00f0ff);
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.2);
}

.vc-turn-demo-btn:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: #00f0ff;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.5);
  transform: translateY(-2px);
}

.vc-scrubber-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0.5rem 1.2rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  backdrop-filter: blur(12px);
}

.vc-scrub-label {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.82rem;
  font-weight: 700;
  color: #cbd5e1;
  white-space: nowrap;
  letter-spacing: 0.1em;
}

.vc-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #00f0ff, #ec4899);
  outline: none;
  cursor: pointer;
}

.vc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00f0ff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px #00f0ff;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.vc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

/* Scoped Responsive Breakpoints for Voice Controller Section */
@media (max-width: 1024px) {
  .voice-controller-section {
    padding: clamp(3.5rem, 6vh, 5rem) var(--pad-x);
    min-height: auto;
  }

  .vc-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
  }

  .vc-cockpit-col {
    display: contents; /* Unwraps cockpit elements so they integrate seamlessly around the 3D Avatar */
  }

  .vc-brand-header {
    order: 1;
    margin-bottom: 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .vc-brand-logo-img {
    width: min(85%, 290px);
  }

  .vc-brand-sub {
    font-size: 0.78rem;
    letter-spacing: 0.35em;
  }

  .vc-waveform {
    order: 2;
    justify-content: center;
    margin: 0.2rem 0;
  }

  .vc-greeting-block {
    order: 3;
    text-align: center;
    margin-bottom: 0.5rem;
    width: 100%;
  }

  .vc-greeting-main {
    font-size: clamp(1.1rem, 3.8vw, 1.35rem);
  }

  .vc-greeting-sub {
    font-size: clamp(0.82rem, 2.5vw, 0.92rem);
  }

  /* 3D Holographic Avatar prominently in the center */
  .vc-avatar-col {
    order: 4;
    width: 100%;
    max-width: 440px;
    margin: 0.5rem auto 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .vc-halo-stage {
    width: min(85vw, 360px);
    height: min(85vw, 360px);
    max-width: 360px;
    max-height: 360px;
    margin: 0 auto;
  }

  .vc-turn-controls {
    width: 100%;
    max-width: 360px;
    margin-top: 1rem;
  }

  /* Big Golden Activation CTA right below 3D Avatar */
  .vc-cta-wrapper {
    order: 5;
    width: 100%;
    max-width: 420px;
    margin: 0.5rem auto 1.5rem;
  }

  .vc-activate-btn {
    width: 100%;
    padding: 0.95rem 1.5rem;
    font-size: 0.95rem;
  }

  /* 4 Glassmorphic Feature Cards */
  .vc-features-list {
    order: 6;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    text-align: left;
  }

  .vc-feature-item {
    padding: 0.85rem 1rem;
    border-radius: 14px;
  }

  .vc-feature-title {
    font-size: 0.84rem;
  }

  .vc-feature-desc {
    font-size: 0.76rem;
  }

  .vc-footer-meta {
    order: 7;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-top: 1rem;
  }
}

@media (max-width: 600px) {
  .voice-controller-section {
    padding: 3rem var(--pad-x) 4rem;
  }

  .vc-features-list {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .vc-feature-item {
    padding: 0.75rem 0.9rem;
  }

  .vc-halo-stage {
    width: min(82vw, 300px);
    height: min(82vw, 300px);
    max-width: 300px;
    max-height: 300px;
  }

  .vc-turn-demo-btn {
    font-size: 0.76rem;
    padding: 0.48rem 0.8rem;
  }

  .vc-angle-tag {
    font-size: 0.70rem;
    padding: 0.32rem 0.7rem;
    bottom: -12px;
  }

  .vc-scrub-label {
    font-size: 0.66rem;
  }
}