/* ==========================================================================

   DIGITAL STUDIO V // V-CONTINUUM ARCHITECTURE v3.0

   Color DNA extracted from the Official Sliced Labyrinth Emblem:

   Crimson-Coral (#ff3e6c) -> Electric Violet (#9d4edd) -> Quantum Cyan (#00f2fe)

   ========================================================================== */



:root {

  --bg-void: #04060b;

  --bg-deep: #070b14;

  --bg-panel: rgba(11, 17, 30, 0.78);

  --bg-panel-solid: #0b111e;

  --bg-glass: rgba(16, 24, 42, 0.62);



  --coral: #ff3e6c;

  --coral-soft: rgba(255, 62, 108, 0.16);

  --violet: #9d4edd;

  --violet-soft: rgba(157, 78, 221, 0.16);

  --cyan: #00f2fe;

  --cyan-soft: rgba(0, 242, 254, 0.14);

  --emerald: #10b981;

  --gold: #f59e0b;



  --text-white: #f8fafc;

  --text-light: #e2e8f0;

  --text-muted: #94a3b8;

  --text-dim: #64748b;



  --border-subtle: rgba(255, 255, 255, 0.08);

  --border-cyan: rgba(0, 242, 254, 0.38);

  --border-coral: rgba(255, 62, 108, 0.42);



  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-mono: 'JetBrains Mono', monospace;



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

}



*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  background-color: var(--bg-void);

  color: var(--text-light);

  font-family: var(--font-sans);

  font-size: 16px;

  -webkit-font-smoothing: antialiased;

}



body {

  min-height: 100vh;

  overflow-x: hidden;

  position: relative;

  line-height: 1.65;

  background:

    radial-gradient(circle at 15% 12%, rgba(255, 62, 108, 0.09), transparent 38%),

    radial-gradient(circle at 85% 18%, rgba(0, 242, 254, 0.10), transparent 42%),

    radial-gradient(circle at 50% 65%, rgba(157, 78, 221, 0.07), transparent 48%),

    var(--bg-void);

}



a {

  color: inherit;

  text-decoration: none;

  transition: all 0.22s var(--ease-out);

}



/* Ambient Background Layers */

#neural-canvas {

  position: fixed;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  pointer-events: none;

  opacity: 0.55;

}



.vignette-overlay {

  position: fixed;

  inset: 0;

  background: radial-gradient(circle at 50% 35%, transparent 30%, rgba(4, 6, 11, 0.85) 85%, var(--bg-void) 100%);

  pointer-events: none;

  z-index: 1;

}



.scanline-overlay {

  position: fixed;

  inset: 0;

  background: repeating-linear-gradient(

    to bottom,

    transparent 0px,

    transparent 2px,

    rgba(255, 255, 255, 0.012) 3px

  );

  pointer-events: none;

  z-index: 2;

}



/* ==========================================================================

   PERSISTENT HUD HEADER WITH LABYRINTH LOGO

   ========================================================================== */

.hud-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  height: 78px;

  padding: 0 2.25rem;

  background: rgba(4, 6, 11, 0.84);

  backdrop-filter: blur(20px);

  border-bottom: 1px solid var(--border-subtle);

  display: flex;

  align-items: center;

  justify-content: space-between;

  z-index: 1000;

}



.hud-left {

  display: flex;

  align-items: center;

  gap: 1.5rem;

}



.brand-identity {

  display: flex;

  align-items: center;

  gap: 0.85rem;

}



.logo-orb-wrap {

  position: relative;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.hud-logo-img {

  width: 44px;

  height: 44px;

  object-fit: contain;

  filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.45));

  transition: transform 0.35s var(--ease-out);

}



.brand-identity:hover .hud-logo-img {

  transform: scale(1.08) rotate(-4deg);

}



.logo-ring {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  border: 1px dashed rgba(0, 242, 254, 0.35);

  animation: spin-slow 18s linear infinite;

}



@keyframes spin-slow {

  to { transform: rotate(360deg); }

}



.brand-text {

  display: flex;

  flex-direction: column;

}



.brand-name {

  font-family: var(--font-display);

  font-size: 1.02rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  color: var(--text-white);

}



.v-accent {

  font-style: normal;

  background: linear-gradient(135deg, var(--coral), var(--cyan));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-weight: 800;

}



.brand-tagline {

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: var(--text-dim);

  letter-spacing: 0.08em;

}



.hud-telemetry-pill {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.32rem 0.75rem;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid var(--border-subtle);

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-muted);

}



.live-beacon {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow: 0 0 10px var(--cyan);

  animation: pulse-beacon 2s infinite;

}



@keyframes pulse-beacon {

  0%, 100% { opacity: 0.4; transform: scale(0.9); }

  50% { opacity: 1; transform: scale(1.25); }

}



.hud-nav {

  display: flex;

  align-items: center;

  gap: 1.65rem;

}



.hud-nav a {

  font-family: var(--font-mono);

  font-size: 0.74rem;

  letter-spacing: 0.08em;

  color: var(--text-muted);

  padding: 0.35rem 0.5rem;

  border-radius: 6px;

}



.hud-nav a:hover {

  color: var(--cyan);

  background: rgba(0, 242, 254, 0.06);

}



.hud-nav a.nav-highlight {

  color: var(--cyan);

  border: 1px solid rgba(0, 242, 254, 0.28);

  background: rgba(0, 242, 254, 0.07);

}



.hud-right {

  display: flex;

  align-items: center;

  gap: 0.85rem;

}



.hud-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid var(--border-subtle);

  color: var(--text-muted);

  font-family: var(--font-mono);

  font-size: 0.7rem;

  padding: 0.48rem 0.85rem;

  border-radius: 7px;

  cursor: pointer;

  transition: all 0.2s;

}



.hud-btn:hover, .hud-btn.audio-active {

  border-color: var(--cyan);

  color: var(--cyan);

  background: var(--cyan-soft);

}



.audio-icon {

  width: 14px;

  height: 14px;

}



.hud-cta {

  font-family: var(--font-mono);

  font-size: 0.73rem;

  font-weight: 600;

  padding: 0.52rem 1.05rem;

  border-radius: 7px;

  background: linear-gradient(135deg, var(--coral), var(--violet), var(--cyan));

  color: #04060b;

  font-weight: 700;

  box-shadow: 0 0 20px rgba(0, 242, 254, 0.28);

}



.hud-cta:hover {

  transform: translateY(-1px);

  box-shadow: 0 0 28px rgba(255, 62, 108, 0.45);

}



.mobile-menu-btn {

  display: none;

  background: none;

  border: 1px solid var(--border-subtle);

  border-radius: 6px;

  padding: 0.45rem;

  cursor: pointer;

  flex-direction: column;

  gap: 4px;

}



.mobile-menu-btn span {

  width: 20px;

  height: 2px;

  background: var(--text-white);

  display: block;

}



.mobile-drawer {

  position: fixed;

  top: 78px;

  left: 0;

  right: 0;

  background: rgba(4, 6, 11, 0.97);

  backdrop-filter: blur(20px);

  border-bottom: 1px solid var(--border-subtle);

  padding: 1.75rem 2rem;

  transform: translateY(-120%);

  transition: transform 0.35s var(--ease-out);

  z-index: 999;

}



.mobile-drawer.open {

  transform: translateY(0);

}



.mobile-nav-list {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.mobile-nav-list a {

  font-family: var(--font-display);

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--text-white);

  display: flex;

  align-items: center;

  gap: 0.75rem;

}



.m-idx {

  font-family: var(--font-mono);

  font-size: 0.75rem;

  color: var(--coral);

}



/* ==========================================================================

   MAIN CONTAINER & SECTION BASICS

   ========================================================================== */

#main-content {

  position: relative;

  z-index: 10;

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 2rem;

}



.section {

  padding: 7rem 0;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.eyebrow-tag {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 0.73rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  color: var(--cyan);

  background: rgba(0, 242, 254, 0.08);

  border: 1px solid rgba(0, 242, 254, 0.24);

  padding: 0.28rem 0.75rem;

  border-radius: 5px;

  margin-bottom: 1rem;

}



.section-title {

  font-family: var(--font-display);

  font-size: clamp(2rem, 3.6vw, 3.1rem);

  font-weight: 700;

  color: var(--text-white);

  letter-spacing: -0.02em;

  line-height: 1.12;

  margin-bottom: 1rem;

}



.section-subtitle {

  font-size: 1.06rem;

  color: var(--text-muted);

  max-width: 760px;

  line-height: 1.72;

}



.section-header {

  margin-bottom: 3.5rem;

}



.section-header-row {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 2rem;

  margin-bottom: 3rem;

  flex-wrap: wrap;

}



/* ==========================================================================

   CHAPTER 01: HERO SECTION & 3D LOGO REACTOR

   ========================================================================== */

.hero-section {

  padding: 10.5rem 0 5rem;

  min-height: 94vh;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.hero-grid {

  display: grid;

  grid-template-columns: 1.25fr 0.95fr;

  gap: 3.5rem;

  align-items: center;

  margin-bottom: 4rem;

}



.eyebrow-pill {

  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  padding: 0.38rem 0.95rem;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.1);

  font-family: var(--font-mono);

  font-size: 0.72rem;

  letter-spacing: 0.09em;

  color: var(--text-light);

  margin-bottom: 1.6rem;

}



.dot-coral {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--coral);

  box-shadow: 0 0 8px var(--coral);

}



.dot-cyan {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow: 0 0 8px var(--cyan);

}



.hero-headline {

  font-family: var(--font-display);

  font-size: clamp(2.6rem, 4.9vw, 4.55rem);

  font-weight: 800;

  line-height: 1.03;

  letter-spacing: -0.03em;

  color: var(--text-white);

  margin-bottom: 1.65rem;

}



.text-gradient-v {

  background: linear-gradient(95deg, var(--coral) 0%, #c084fc 48%, var(--cyan) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.hero-lead {

  font-size: 1.15rem;

  color: var(--text-muted);

  max-width: 680px;

  line-height: 1.75;

  margin-bottom: 1.85rem;

}



.hero-lead strong {

  color: var(--text-white);

}



.hero-coined-pills {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  margin-bottom: 2.25rem;

}



.coined-chip {

  font-family: var(--font-mono);

  font-size: 0.7rem;

  padding: 0.38rem 0.75rem;

  border-radius: 6px;

  background: rgba(16, 24, 42, 0.75);

  border: 1px solid var(--border-subtle);

  color: var(--text-light);

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

}



.coined-chip span {

  color: var(--coral);

  font-weight: 700;

}



.coined-chip:hover {

  border-color: var(--cyan);

  transform: translateY(-2px);

}



.hero-cta-group {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

}



.btn {

  display: inline-flex;

  align-items: center;

  gap: 0.7rem;

  font-family: var(--font-mono);

  font-size: 0.82rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  padding: 0.95rem 1.65rem;

  border-radius: 9px;

  cursor: pointer;

  transition: all 0.25s var(--ease-out);

}



.btn-v-primary {

  background: linear-gradient(135deg, var(--coral) 0%, var(--violet) 50%, var(--cyan) 100%);

  color: #04060b;

  border: none;

  box-shadow: 0 8px 30px rgba(0, 242, 254, 0.28);

}



.btn-v-primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 12px 38px rgba(255, 62, 108, 0.45);

}



.btn-v-glass {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.14);

  color: var(--text-white);

}



.btn-v-glass:hover {

  border-color: var(--cyan);

  background: rgba(0, 242, 254, 0.08);

  transform: translateY(-2px);

}



/* Right Hero Stage: 3D Gyroscopic Official Logo Reactor */

.hero-emblem-stage {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 460px;

  perspective: 1200px;

}



.reactor-halo {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}



.halo-outer {

  width: 430px;

  height: 430px;

  border: 1px dashed rgba(0, 242, 254, 0.22);

  animation: spin-slow 36s linear infinite;

}



.halo-mid {

  width: 350px;

  height: 350px;

  border: 1px solid rgba(255, 62, 108, 0.22);

  animation: spin-slow 24s linear infinite reverse;

}



.halo-inner {

  width: 280px;

  height: 280px;

  background: radial-gradient(circle, rgba(255, 62, 108, 0.18) 0%, rgba(0, 242, 254, 0.16) 60%, transparent 75%);

  filter: blur(20px);

}



.emblem-3d-card {

  position: relative;

  z-index: 5;

  background: rgba(11, 17, 30, 0.68);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(0, 242, 254, 0.32);

  border-radius: 24px;

  padding: 2rem 2rem 1.4rem;

  box-shadow:

    0 25px 60px rgba(0, 0, 0, 0.75),

    0 0 40px rgba(255, 62, 108, 0.15),

    0 0 40px rgba(0, 242, 254, 0.15);

  display: flex;

  flex-direction: column;

  align-items: center;

  overflow: hidden;

  transition: transform 0.2s ease-out;

}



.emblem-scan-beam {

  position: absolute;

  top: -30%;

  left: 0;

  width: 100%;

  height: 50px;

  background: linear-gradient(to bottom, transparent, rgba(0, 242, 254, 0.22), transparent);

  animation: emblem-scan 4.5s ease-in-out infinite;

  pointer-events: none;

}



@keyframes emblem-scan {

  0%, 100% { top: -15%; }

  50% { top: 95%; }

}



.hero-logo-main {

  width: 310px;

  max-width: 100%;

  height: auto;

  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.7));

  animation: float-emblem 5s ease-in-out infinite;

}



@keyframes float-emblem {

  0%, 100% { transform: translateY(0px); }

  50% { transform: translateY(-8px); }

}



.emblem-caption-hud {

  margin-top: 1.2rem;

  width: 100%;

  padding-top: 0.85rem;

  border-top: 1px solid var(--border-subtle);

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: var(--font-mono);

  font-size: 0.66rem;

  color: var(--text-muted);

}



.coral-cyan-tag {

  color: var(--cyan);

  font-weight: 700;

}



.orbital-badge {

  position: absolute;

  z-index: 8;

  background: rgba(7, 11, 20, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.14);

  padding: 0.55rem 0.9rem;

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);

}



.ob-k {

  font-family: var(--font-mono);

  font-size: 0.6rem;

  color: var(--coral);

  letter-spacing: 0.08em;

}



.ob-v {

  font-family: var(--font-display);

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--text-white);

}



.ob-1 { top: 18px; left: 10px; border-color: var(--border-coral); }

.ob-2 { bottom: 32px; left: 0px; border-color: var(--border-cyan); }

.ob-3 { top: 48px; right: 0px; border-color: rgba(157, 78, 221, 0.5); }



/* Telemetry Ribbon */

.telemetry-ribbon {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 1rem;

  background: var(--bg-panel);

  border: 1px solid var(--border-subtle);

  border-radius: 14px;

  padding: 1.25rem 1.5rem;

}



.t-cell {

  display: flex;

  flex-direction: column;

  gap: 0.25rem;

  padding-right: 0.75rem;

  border-right: 1px solid var(--border-subtle);

}



.t-cell:last-child {

  border-right: none;

}



.t-k {

  font-family: var(--font-mono);

  font-size: 0.66rem;

  color: var(--text-dim);

  letter-spacing: 0.08em;

}



.t-v {

  font-family: var(--font-display);

  font-size: 0.88rem;

  font-weight: 600;

  color: var(--text-white);

}



.highlight-cell .t-k { color: var(--coral); }

.highlight-cell .t-v { color: var(--cyan); }



/* ==========================================================================

   CHAPTER 02: INTERACTIVE 3D LIVING WORLD SIMULATION SANDBOX

   ========================================================================== */

.sim-mode-switcher {

  display: flex;

  gap: 0.65rem;

  flex-wrap: wrap;

}



.sim-mode-btn {

  background: rgba(11, 17, 30, 0.85);

  border: 1px solid var(--border-subtle);

  border-radius: 10px;

  padding: 0.7rem 1.1rem;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  transition: all 0.2s;

}



.sim-mode-btn:hover {

  border-color: rgba(0, 242, 254, 0.4);

}



.sim-mode-btn.active {

  background: linear-gradient(135deg, rgba(255, 62, 108, 0.16), rgba(0, 242, 254, 0.16));

  border-color: var(--cyan);

  box-shadow: 0 0 22px rgba(0, 242, 254, 0.22);

}



.m-code {

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: var(--coral);

  letter-spacing: 0.08em;

}



.m-name {

  font-family: var(--font-display);

  font-size: 0.86rem;

  font-weight: 700;

  color: var(--text-white);

}



.sim-cockpit {

  display: grid;

  grid-template-columns: 1fr 370px;

  gap: 1.5rem;

  background: rgba(7, 11, 20, 0.9);

  border: 1px solid var(--border-cyan);

  border-radius: 18px;

  padding: 1.25rem;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 242, 254, 0.08);

}



.sim-viewport-wrap {

  position: relative;

  border-radius: 12px;

  overflow: hidden;

  background: radial-gradient(circle at 50% 45%, #0c1629 0%, #04070d 100%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  min-height: 560px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



#sim3d-canvas {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  cursor: grab;

  display: block;

}



#sim3d-canvas:active {

  cursor: grabbing;

}



.sim-hud-top {

  position: relative;

  z-index: 4;

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  padding: 1rem;

  pointer-events: none;

}



.sim-stat-chip {

  background: rgba(4, 6, 11, 0.82);

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  padding: 0.35rem 0.75rem;

  border-radius: 6px;

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-light);

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

}



.pulse-green {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--emerald);

  box-shadow: 0 0 8px var(--emerald);

}



.human-status-chip {

  border-color: var(--cyan);

  color: var(--cyan);

}



.sim-controls-bar {

  position: relative;

  z-index: 4;

  margin-top: auto;

  padding: 0.85rem 1rem 0.4rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.55rem;

}



.sim-action-btn {

  background: rgba(11, 17, 30, 0.88);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.16);

  color: var(--text-white);

  font-family: var(--font-mono);

  font-size: 0.7rem;

  font-weight: 600;

  padding: 0.55rem 0.9rem;

  border-radius: 7px;

  cursor: pointer;

  transition: all 0.2s;

}



.sim-action-btn:hover {

  border-color: var(--cyan);

  background: rgba(0, 242, 254, 0.14);

  transform: translateY(-1px);

}



.primary-sim-btn {

  border-color: var(--cyan);

  background: rgba(0, 242, 254, 0.14);

  color: var(--cyan);

}



.danger-sim-btn {

  border-color: var(--coral);

  background: rgba(255, 62, 108, 0.14);

  color: #ff8da6;

}



.danger-sim-btn:hover {

  border-color: var(--coral);

  background: rgba(255, 62, 108, 0.26);

}



.sim-drag-hint {

  position: relative;

  z-index: 4;

  padding: 0.35rem 1rem 0.75rem;

  font-family: var(--font-mono);

  font-size: 0.64rem;

  color: var(--text-dim);

  pointer-events: none;

}



/* Right Inspector Panel */

.sim-inspector-panel {

  background: rgba(11, 17, 30, 0.95);

  border: 1px solid var(--border-subtle);

  border-radius: 12px;

  padding: 1.25rem;

  display: flex;

  flex-direction: column;

  gap: 1.1rem;

}



.inspector-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 0.65rem;

  border-bottom: 1px solid var(--border-subtle);

  font-family: var(--font-mono);

  font-size: 0.68rem;

}



.insp-badge { color: var(--cyan); font-weight: 700; }

.insp-id { color: var(--coral); }



.insp-agent-profile {

  display: flex;

  align-items: center;

  gap: 0.85rem;

}



.insp-avatar {

  width: 42px;

  height: 42px;

  border-radius: 10px;

  background: linear-gradient(135deg, var(--coral), var(--cyan));

  box-shadow: 0 0 16px rgba(0, 242, 254, 0.35);

  flex-shrink: 0;

}



.insp-agent-profile h3 {

  font-family: var(--font-display);

  font-size: 1.05rem;

  color: var(--text-white);

}



.insp-agent-profile p {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-muted);

}



.insp-meters {

  display: flex;

  flex-direction: column;

  gap: 0.65rem;

}



.meter-row {

  display: flex;

  flex-direction: column;

  gap: 0.25rem;

}



.meter-label {

  display: flex;

  justify-content: space-between;

  font-family: var(--font-mono);

  font-size: 0.65rem;

  color: var(--text-muted);

}



.meter-track {

  height: 6px;

  background: rgba(255, 255, 255, 0.07);

  border-radius: 999px;

  overflow: hidden;

}



.meter-fill {

  height: 100%;

  border-radius: 999px;

  transition: width 0.35s var(--ease-out);

}



.fill-coral { background: var(--coral); }

.fill-cyan { background: var(--cyan); }

.fill-violet { background: var(--violet); }



.insp-thought-box {

  background: rgba(255, 255, 255, 0.03);

  border-left: 3px solid var(--coral);

  padding: 0.75rem 0.85rem;

  border-radius: 0 8px 8px 0;

}



.thought-label {

  display: block;

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: var(--coral);

  margin-bottom: 0.3rem;

}



#insp-thought-text {

  font-size: 0.82rem;

  font-style: italic;

  color: var(--text-light);

  line-height: 1.5;

}



.sim-event-log-wrap {

  flex-grow: 1;

  display: flex;

  flex-direction: column;

  background: rgba(4, 6, 11, 0.7);

  border: 1px solid var(--border-subtle);

  border-radius: 8px;

  padding: 0.75rem;

}



.log-header {

  display: flex;

  justify-content: space-between;

  font-family: var(--font-mono);

  font-size: 0.64rem;

  color: var(--text-dim);

  margin-bottom: 0.5rem;

}



.blink-tag {

  color: var(--emerald);

}



.sim-event-log {

  display: flex;

  flex-direction: column;

  gap: 0.45rem;

  max-height: 155px;

  overflow-y: auto;

  font-family: var(--font-mono);

  font-size: 0.67rem;

}



.log-entry {

  padding: 0.35rem 0.5rem;

  background: rgba(255, 255, 255, 0.02);

  border-radius: 4px;

  color: var(--text-muted);

  border-left: 2px solid var(--cyan);

}



.log-entry.alert {

  border-left-color: var(--coral);

  color: #fda4af;

}



/* ==========================================================================

   CHAPTER 03: THE V-ONTOLOGY LEXICON GRID

   ========================================================================== */

.lexicon-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}



.lex-card {

  background: var(--bg-panel);

  border: 1px solid var(--border-subtle);

  border-radius: 14px;

  padding: 2rem;

  display: flex;

  flex-direction: column;

  transition: all 0.3s var(--ease-out);

}



.lex-card:hover {

  transform: translateY(-5px);

  border-color: var(--cyan);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 242, 254, 0.12);

}



.lex-card.highlight-lex {

  border-color: var(--coral);

  background: linear-gradient(160deg, rgba(255, 62, 108, 0.10), rgba(11, 17, 30, 0.9));

}



.lex-top {

  display: flex;

  justify-content: space-between;

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-dim);

  margin-bottom: 0.9rem;

}



.lex-num { color: var(--coral); font-weight: 700; }



.lex-term {

  font-family: var(--font-display);

  font-size: 1.38rem;

  font-weight: 800;

  color: var(--text-white);

  margin-bottom: 0.2rem;

}



.lex-type {

  font-family: var(--font-mono);

  font-size: 0.72rem;

  color: var(--cyan);

  margin-bottom: 1rem;

}



.lex-def {

  font-size: 0.92rem;

  color: var(--text-muted);

  line-height: 1.65;

  flex-grow: 1;

  margin-bottom: 1.35rem;

}



.lex-origin-tag {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-light);

  background: rgba(255, 255, 255, 0.04);

  padding: 0.4rem 0.7rem;

  border-radius: 6px;

  border: 1px solid var(--border-subtle);

}



/* ==========================================================================

   CHAPTER 04: THE 4 LIVE AI ENGINES (FLAGSHIP INTERACTIVE DECKS)

   ========================================================================== */

.t-cell-with-icon {

  flex-direction: row !important;

  align-items: center;

  gap: 0.75rem !important;

  transition: transform 0.2s var(--ease-out);

}



.t-cell-with-icon:hover {

  transform: translateY(-2px);

}



.t-mini-icon {

  width: 38px;

  height: 38px;

  object-fit: contain;

  flex-shrink: 0;

  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.25));

}



.t-mini-icon.rounded-icon {

  border-radius: 9px;

}



/* 4-App Quick-Jump Official Icon Dock */

.app-icon-dock {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.15rem;

  margin-bottom: 2.5rem;

}



.dock-app-pill {

  background: rgba(11, 17, 30, 0.82);

  border: 1px solid var(--border-subtle);

  border-radius: 14px;

  padding: 0.9rem 1.1rem;

  display: flex;

  align-items: center;

  gap: 0.9rem;

  transition: all 0.25s var(--ease-out);

}



.dock-app-pill:hover {

  transform: translateY(-3px);

  border-color: var(--cyan);

  background: rgba(16, 24, 42, 0.95);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 242, 254, 0.14);

}



.dock-icon-frame {

  width: 52px;

  height: 52px;

  border-radius: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 5px;

  flex-shrink: 0;

  border: 1px solid rgba(255, 255, 255, 0.14);

  overflow: hidden;

}



.dock-icon-frame img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.mafia-icon-bg {

  padding: 0;

  background: #050508;

  border-color: rgba(255, 62, 108, 0.45);

}



.director-icon-bg {

  background: radial-gradient(circle, rgba(157, 78, 221, 0.24), rgba(7, 11, 20, 0.95));

  border-color: rgba(157, 78, 221, 0.45);

}



.velvet-icon-bg {

  background: radial-gradient(circle, rgba(217, 70, 239, 0.22), rgba(7, 11, 20, 0.95));

  border-color: rgba(0, 242, 254, 0.4);

}



.motivai-icon-bg {

  background: radial-gradient(circle, rgba(0, 242, 254, 0.22), rgba(7, 11, 20, 0.95));

  border-color: rgba(16, 185, 129, 0.45);

}



.dock-meta {

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

}



.dock-badge {

  font-family: var(--font-mono);

  font-size: 0.6rem;

  color: var(--coral);

  letter-spacing: 0.06em;

}



.dock-meta strong {

  font-family: var(--font-display);

  font-size: 0.95rem;

  color: var(--text-white);

}



/* Flagship Deck Header With Official App Logo Pedestal */

.deck-header-with-logo {

  display: flex;

  align-items: center;

  gap: 1.25rem;

  margin-bottom: 1.15rem;

}



.deck-header-with-logo .deck-tagline {

  margin-bottom: 0;

}



.app-logo-pedestal {

  width: 78px;

  height: 78px;

  border-radius: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  padding: 8px;

  background: rgba(4, 6, 11, 0.9);

  border: 1px solid rgba(255, 255, 255, 0.16);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);

  overflow: hidden;

}



.pedestal-mafia {

  padding: 0;

  border-color: var(--coral);

  box-shadow: 0 0 25px rgba(255, 62, 108, 0.28);

}



.pedestal-director {

  border-color: var(--violet);

  background: radial-gradient(circle, rgba(157, 78, 221, 0.22), rgba(4, 6, 11, 0.95));

  box-shadow: 0 0 25px rgba(157, 78, 221, 0.28);

}



.pedestal-velvet {

  border-color: var(--cyan);

  background: radial-gradient(circle, rgba(217, 70, 239, 0.2), rgba(4, 6, 11, 0.95));

  box-shadow: 0 0 25px rgba(0, 242, 254, 0.25);

}



.pedestal-motivai {

  border-color: var(--emerald);

  background: radial-gradient(circle, rgba(0, 242, 254, 0.22), rgba(4, 6, 11, 0.95));

  box-shadow: 0 0 25px rgba(16, 185, 129, 0.25);

}



.app-logo-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



@media (max-width: 1050px) {

  .app-icon-dock {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 640px) {

  .app-icon-dock {

    grid-template-columns: 1fr;

  }

  .deck-header-with-logo {

    flex-direction: column;

    align-items: flex-start;

  }

}



.flagship-decks {

  display: flex;

  flex-direction: column;

  gap: 3rem;

}



.engine-deck {

  background: var(--bg-panel);

  border: 1px solid var(--border-subtle);

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6);

  transition: border-color 0.3s;

}



.deck-mafia { border-top: 3px solid var(--coral); }

.deck-director { border-top: 3px solid var(--violet); }

.deck-velvet { border-top: 3px solid var(--cyan); }

.deck-motivai { border-top: 3px solid var(--emerald); }



.deck-ribbon {

  background: rgba(4, 6, 11, 0.75);

  border-bottom: 1px solid var(--border-subtle);

  padding: 0.85rem 2.25rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 1rem;

  font-family: var(--font-mono);

  font-size: 0.72rem;

}



.deck-num { color: var(--coral); font-weight: 700; }

.deck-domain { color: var(--cyan); }

.deck-pkg { color: var(--text-dim); }



.deck-body {

  display: grid;

  grid-template-columns: 1.35fr 0.65fr;

  gap: 2.5rem;

  padding: 2.5rem 2.25rem;

  align-items: center;

}



.status-pill-live {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 0.66rem;

  font-weight: 700;

  color: var(--emerald);

  background: rgba(16, 185, 129, 0.1);

  border: 1px solid rgba(16, 185, 129, 0.3);

  padding: 0.2rem 0.65rem;

  border-radius: 999px;

  margin-bottom: 0.65rem;

}



.deck-title-group h3 {

  font-family: var(--font-display);

  font-size: 2.15rem;

  font-weight: 800;

  color: var(--text-white);

  margin-bottom: 0.3rem;

}



.deck-tagline {

  font-size: 1.05rem;

  font-weight: 600;

  color: var(--cyan);

  margin-bottom: 1.15rem;

}



.deck-description {

  font-size: 0.98rem;

  color: var(--text-muted);

  line-height: 1.72;

  margin-bottom: 1.65rem;

}



.inline-neon-link {

  color: var(--cyan);

  text-decoration: underline;

  text-underline-offset: 3px;

}



/* Interactive Mini-Consoles Inside Each App Card */

.mini-console {

  background: rgba(4, 6, 11, 0.85);

  border: 1px solid rgba(255, 255, 255, 0.11);

  border-radius: 14px;

  padding: 1.25rem;

  margin-bottom: 1.75rem;

}



.console-bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.5rem;

  padding-bottom: 0.85rem;

  margin-bottom: 1rem;

  border-bottom: 1px solid var(--border-subtle);

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-light);

}



.console-status {

  color: var(--coral);

  font-weight: 700;

}



/* Mafia Suspects Mini-Widget */

.suspects-row {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 0.5rem;

  margin-bottom: 1rem;

}



.suspect-chip {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid var(--border-subtle);

  border-radius: 8px;

  padding: 0.55rem 0.4rem;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.2rem;

  transition: all 0.2s;

}



.suspect-chip:hover, .suspect-chip.active {

  border-color: var(--coral);

  background: rgba(255, 62, 108, 0.14);

}



.s-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--cyan);

}



.suspect-chip.active .s-dot {

  background: var(--coral);

  box-shadow: 0 0 8px var(--coral);

}



.s-name {

  font-family: var(--font-display);

  font-size: 0.72rem;

  font-weight: 700;

  color: var(--text-white);

}



.s-stress {

  font-family: var(--font-mono);

  font-size: 0.58rem;

  color: var(--text-dim);

}



.suspect-readout {

  background: rgba(255, 255, 255, 0.02);

  border-radius: 10px;

  padding: 0.9rem 1rem;

  border: 1px solid var(--border-subtle);

}



.readout-meta {

  font-family: var(--font-mono);

  font-size: 0.66rem;

  color: var(--coral);

  margin-bottom: 0.4rem;

}



.readout-quote {

  font-size: 0.9rem;

  font-style: italic;

  color: var(--text-white);

  margin-bottom: 0.85rem;

}



.readout-actions, .motivai-actions {

  display: flex;

  gap: 0.65rem;

  flex-wrap: wrap;

}



.mini-action-btn {

  background: rgba(0, 242, 254, 0.12);

  border: 1px solid rgba(0, 242, 254, 0.35);

  color: var(--cyan);

  font-family: var(--font-mono);

  font-size: 0.68rem;

  font-weight: 700;

  padding: 0.45rem 0.85rem;

  border-radius: 6px;

  cursor: pointer;

}



.mini-action-btn.danger {

  background: rgba(255, 62, 108, 0.14);

  border-color: rgba(255, 62, 108, 0.4);

  color: #ff8da6;

}



/* Director Sliders Mini-Widget */

.dials-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-bottom: 1rem;

}



.dial-control {

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}



.dial-top {

  display: flex;

  justify-content: space-between;

  font-family: var(--font-mono);

  font-size: 0.65rem;

  color: var(--text-muted);

}



.dial-top strong { color: var(--cyan); }



.v-slider {

  width: 100%;

  accent-color: var(--cyan);

  cursor: pointer;

}



.director-live-output {

  background: rgba(157, 78, 221, 0.08);

  border: 1px solid rgba(157, 78, 221, 0.3);

  border-radius: 10px;

  padding: 0.85rem 1rem;

}



.waveform-bars {

  display: flex;

  align-items: center;

  gap: 4px;

  height: 18px;

  margin-bottom: 0.5rem;

}



.waveform-bars span {

  display: block;

  width: 3px;

  height: 100%;

  background: var(--cyan);

  border-radius: 2px;

  animation: wave-pulse 1.1s ease-in-out infinite alternate;

}



.waveform-bars span:nth-child(odd) { animation-duration: 0.7s; background: var(--coral); }

.waveform-bars span:nth-child(3n) { animation-duration: 1.3s; }



@keyframes wave-pulse {

  0% { transform: scaleY(0.25); }

  100% { transform: scaleY(1); }

}



/* Velvet Archetype Switcher */

.archetype-tabs {

  display: flex;

  gap: 0.55rem;

  margin-bottom: 0.85rem;

  flex-wrap: wrap;

}



.arch-btn {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid var(--border-subtle);

  color: var(--text-muted);

  font-family: var(--font-mono);

  font-size: 0.68rem;

  padding: 0.45rem 0.85rem;

  border-radius: 6px;

  cursor: pointer;

}



.arch-btn.active {

  border-color: var(--cyan);

  color: var(--cyan);

  background: var(--cyan-soft);

}



.arch-dialogue-box {

  background: rgba(0, 242, 254, 0.05);

  border: 1px solid rgba(0, 242, 254, 0.22);

  border-radius: 8px;

  padding: 0.85rem 1rem;

}



.arch-speaker {

  display: block;

  font-family: var(--font-mono);

  font-size: 0.65rem;

  color: var(--cyan);

  margin-bottom: 0.3rem;

}



#motivai-challenge-text {

  margin-bottom: 0.85rem;

  font-size: 0.92rem;

}



.deck-cta-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 1.25rem;

}



.sim-contribution {

  display: flex;

  flex-direction: column;

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-dim);

}



.sim-contribution strong {

  color: var(--text-light);

}



/* Right Column: Interactive 360° 3D Rotatable Phone Case Stage */

.three-col-dock {

  grid-template-columns: repeat(3, 1fr);

}



.horizon-orb-icon {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background: radial-gradient(circle at 30% 30%, #ffffff, var(--cyan) 45%, var(--coral) 90%);

  box-shadow: 0 0 14px var(--cyan);

  flex-shrink: 0;

}



.pill-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-bottom: 0.55rem;

}



.pill-row .status-pill-live {

  margin-bottom: 0;

}



.revenue-pill {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 0.65rem;

  font-weight: 700;

  color: var(--cyan);

  background: rgba(0, 242, 254, 0.1);

  border: 1px solid rgba(0, 242, 254, 0.35);

  padding: 0.2rem 0.65rem;

  border-radius: 999px;

}



.separate-project-banner {

  background: linear-gradient(135deg, rgba(255, 62, 108, 0.12), rgba(0, 242, 254, 0.1));

  border: 1px solid var(--border-coral);

  border-radius: 14px;

  padding: 1.25rem 1.65rem;

  margin-bottom: 2.5rem;

  display: flex;

  flex-direction: column;

  gap: 0.45rem;

}



.sp-badge {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  font-weight: 700;

  color: var(--coral);

  letter-spacing: 0.1em;

}



.separate-project-banner p {

  font-size: 0.94rem;

  color: var(--text-light);

  line-height: 1.6;

}



.deck-visual-stage {

  display: flex;

  justify-content: center;

  align-items: center;

}



.phone-360-stage {

  position: relative;

  width: 310px;

  display: flex;

  flex-direction: column;

  align-items: center;

  perspective: 1400px;

  user-select: none;

}



.phone-glow {

  position: absolute;

  top: 40px;

  width: 250px;

  height: 460px;

  border-radius: 50%;

  filter: blur(46px);

  opacity: 0.42;

  pointer-events: none;

}



.glow-coral { background: var(--coral); }

.glow-violet { background: var(--violet); }

.glow-cyan { background: var(--cyan); }



.drag-3d-badge {

  position: relative;

  z-index: 5;

  font-family: var(--font-mono);

  font-size: 0.62rem;

  color: var(--cyan);

  background: rgba(4, 6, 11, 0.85);

  border: 1px solid rgba(0, 242, 254, 0.3);

  padding: 0.28rem 0.7rem;

  border-radius: 999px;

  margin-bottom: 0.9rem;

}



.phone-3d-object {

  position: relative;

  width: 248px;

  height: 506px;

  transform-style: preserve-3d;

  transform: rotateY(-18deg) rotateX(5deg);

  transition: transform 0.08s linear;

  cursor: grab;

}



.phone-3d-object.smooth-transition {

  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);

}



.phone-3d-object:active {

  cursor: grabbing;

}



.phone-face {

  position: absolute;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}



/* Front Screen Face */

.phone-front {

  inset: 0;

  border-radius: 36px;

  transform: translateZ(11px);

  background: #06080f;

  border: 2px solid rgba(255, 255, 255, 0.22);

  box-shadow: inset 0 0 12px rgba(0, 242, 254, 0.25);

  overflow: hidden;

}



.phone-ui-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  pointer-events: none;

}



.glass-sheen {

  position: absolute;

  inset: 0;

  background: linear-gradient(125deg, rgba(255, 255, 255, 0.16) 0%, transparent 38%, transparent 100%);

  pointer-events: none;

}



/* Back Case Face (When rotated 180 deg) */

.phone-back {

  inset: 0;

  border-radius: 36px;

  transform: rotateY(180deg) translateZ(11px);

  background: linear-gradient(155deg, #131b2e 0%, #060911 55%, #0d1322 100%);

  border: 2px solid rgba(0, 242, 254, 0.4);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.85);

}



.back-mafia { border-color: rgba(255, 62, 108, 0.55); }

.back-director { border-color: rgba(157, 78, 221, 0.55); }



.camera-island {

  position: absolute;

  top: 22px;

  left: 22px;

  width: 68px;

  height: 72px;

  border-radius: 18px;

  background: rgba(4, 6, 11, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.18);

  padding: 8px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 6px;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);

}



.cam-lens {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: radial-gradient(circle at 35% 35%, #38bdf8, #0f172a 60%, #000 100%);

  border: 2px solid #334155;

}



.cam-sensor {

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background: radial-gradient(circle, #fbbf24, #78350f);

  align-self: center;

  justify-self: center;

}



.back-emblem-wrap {

  margin-top: 2rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 0.55rem;

}



.back-logo-img {

  width: 92px;

  height: 92px;

  object-fit: contain;

  filter: drop-shadow(0 0 18px rgba(0, 242, 254, 0.45));

}



.back-logo-img.rounded-icon {

  border-radius: 20px;

}



.back-brand-title {

  font-family: var(--font-display);

  font-size: 0.92rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  color: var(--text-white);

}



.back-brand-sub {

  font-family: var(--font-mono);

  font-size: 0.56rem;

  color: var(--cyan);

  letter-spacing: 0.1em;

}



/* 3D Metallic Side Spine Faces */

.phone-side-right,

.phone-side-left {

  top: 24px;

  width: 22px;

  height: 458px;

  background: linear-gradient(to bottom, #1e293b, #475569 30%, #0f172a 70%, #334155);

  border-top: 1px solid rgba(0, 242, 254, 0.4);

  border-bottom: 1px solid rgba(255, 62, 108, 0.4);

  backface-visibility: visible;

}



.phone-side-right {

  right: -11px;

  transform: rotateY(90deg);

}



.phone-side-left {

  left: -11px;

  transform: rotateY(-90deg);

}



.phone-side-top,

.phone-side-bottom {

  left: 24px;

  width: 200px;

  height: 22px;

  background: linear-gradient(to right, #1e293b, #475569 50%, #1e293b);

  backface-visibility: visible;

}



.phone-side-top {

  top: -11px;

  transform: rotateX(90deg);

}



.phone-side-bottom {

  bottom: -11px;

  transform: rotateX(-90deg);

}



.phone-3d-controls {

  margin-top: 1.15rem;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 0.4rem;

  z-index: 5;

}



.p3d-btn {

  background: rgba(11, 17, 30, 0.9);

  border: 1px solid var(--border-subtle);

  color: var(--text-muted);

  font-family: var(--font-mono);

  font-size: 0.62rem;

  font-weight: 600;

  padding: 0.35rem 0.62rem;

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.2s;

}



.p3d-btn:hover,

.p3d-btn.active {

  border-color: var(--cyan);

  color: var(--cyan);

  background: rgba(0, 242, 254, 0.12);

}



/* ==========================================================================

   CHAPTER 05: ORIGINS & OFFICIAL LOGO ARTWORK

   ========================================================================== */

.origins-showcase {

  display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  gap: 3.5rem;

  align-items: center;

}



.original-logo-frame {

  background: var(--bg-panel);

  border: 1px solid var(--border-subtle);

  border-radius: 20px;

  padding: 1.5rem;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);

}



.original-logo-img {

  width: 100%;

  height: auto;

  border-radius: 14px;

  display: block;

}



.logo-frame-caption {

  margin-top: 1rem;

  display: flex;

  justify-content: space-between;

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-muted);

}



.origins-lead {

  font-size: 1.18rem;

  color: var(--text-white);

  margin-bottom: 1.15rem;

  line-height: 1.65;

}



.origins-body {

  font-size: 0.98rem;

  color: var(--text-muted);

  margin-bottom: 1.15rem;

  line-height: 1.75;

}



.origins-milestones {

  margin-top: 2rem;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1rem;

}



.ms-box {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid var(--border-subtle);

  border-radius: 10px;

  padding: 1rem 1.15rem;

  display: flex;

  flex-direction: column;

  gap: 0.25rem;

}



.ms-box strong {

  font-family: var(--font-display);

  font-size: 1.1rem;

  color: var(--cyan);

}



.ms-box span {

  font-size: 0.84rem;

  color: var(--text-muted);

}



.ms-box.highlight-ms {

  border-color: var(--coral);

  background: rgba(255, 62, 108, 0.08);

}



.ms-box.highlight-ms strong { color: var(--coral); }



/* ==========================================================================

   CHAPTER 06: INVESTOR THESIS

   ========================================================================== */

.investor-dossier {

  background: linear-gradient(165deg, rgba(16, 24, 42, 0.85), rgba(7, 11, 20, 0.95));

  border: 1px solid var(--border-subtle);

  border-radius: 22px;

  padding: 3.5rem;

}



.elon-matrix-quote {

  margin: 2.5rem 0 3rem;

  padding: 2rem 2.25rem;

  background: rgba(4, 6, 11, 0.65);

  border-left: 4px solid var(--cyan);

  border-radius: 0 14px 14px 0;

  font-family: var(--font-display);

  font-size: clamp(1.25rem, 2.2vw, 1.65rem);

  color: var(--text-white);

  line-height: 1.45;

}



.elon-matrix-quote strong {

  color: var(--cyan);

}



.elon-matrix-quote footer {

  margin-top: 1rem;

  font-family: var(--font-mono);

  font-size: 0.78rem;

  color: var(--coral);

}



.investor-pillars {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



.inv-pillar {

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid var(--border-subtle);

  border-radius: 14px;

  padding: 1.75rem;

}



.p-index {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--coral);

  margin-bottom: 0.65rem;

  font-weight: 700;

}



.inv-pillar h4 {

  font-family: var(--font-display);

  font-size: 1.2rem;

  color: var(--text-white);

  margin-bottom: 0.75rem;

}



.inv-pillar p {

  font-size: 0.92rem;

  color: var(--text-muted);

  line-height: 1.68;

}



/* ==========================================================================

   CHAPTER 07: FOUNDER DOSSIER (VALERIO TRPESKI)

   ========================================================================== */

.founder-panel {

  background: var(--bg-panel);

  border: 1px solid var(--border-cyan);

  border-radius: 20px;

  padding: 3rem;

  display: grid;

  grid-template-columns: 240px 1fr;

  gap: 3rem;

  align-items: center;

}



.founder-badge-col {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.85rem;

}



.founder-insignia-box {

  width: 190px;

  height: 190px;

  border-radius: 20px;

  background: radial-gradient(circle, rgba(255, 62, 108, 0.16), rgba(0, 242, 254, 0.12));

  border: 1px solid rgba(255, 255, 255, 0.14);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem;

}



.founder-cutout-img {

  width: 100%;

  height: auto;

  object-fit: contain;

}



.founder-coords {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--cyan);

}



.founder-heading {

  font-family: var(--font-display);

  font-size: 2.4rem;

  font-weight: 800;

  color: var(--text-white);

  margin-bottom: 0.25rem;

}



.founder-role {

  font-family: var(--font-mono);

  font-size: 0.82rem;

  color: var(--coral);

  margin-bottom: 1.25rem;

}



.founder-bio-text {

  font-size: 1rem;

  color: var(--text-muted);

  line-height: 1.75;

  margin-bottom: 1.75rem;

  max-width: 780px;

}



.founder-direct-links {

  display: flex;

  flex-wrap: wrap;

  gap: 0.85rem;

}



/* ==========================================================================

   CHAPTER 08: SOCIAL & ECOSYSTEM NEXUS

   ========================================================================== */

.nexus-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}



.nexus-card {

  background: var(--bg-panel);

  border: 1px solid var(--border-subtle);

  border-radius: 14px;

  padding: 1.75rem;

  display: flex;

  flex-direction: column;

}



.nexus-card:hover {

  transform: translateY(-4px);

  border-color: var(--cyan);

  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);

}



.nx-top {

  display: flex;

  justify-content: space-between;

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-dim);

  margin-bottom: 1rem;

}



.nx-arrow {

  color: var(--cyan);

  font-size: 1.1rem;

}



.nexus-card h4 {

  font-family: var(--font-display);

  font-size: 1.18rem;

  color: var(--text-white);

  margin-bottom: 0.25rem;

}



.nx-handle {

  font-family: var(--font-mono);

  font-size: 0.78rem;

  color: var(--coral);

  margin-bottom: 0.75rem;

}



.nx-desc {

  font-size: 0.88rem;

  color: var(--text-muted);

  line-height: 1.6;

}



/* ==========================================================================

   FOOTER

   ========================================================================== */

.site-footer {

  position: relative;

  z-index: 10;

  background: rgba(4, 6, 11, 0.96);

  border-top: 1px solid var(--border-subtle);

  padding: 3.5rem 2rem 2rem;

}



.footer-inner {

  max-width: 1400px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 2rem;

  padding-bottom: 2.25rem;

  border-bottom: 1px solid var(--border-subtle);

}



.footer-logo-row {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  font-family: var(--font-display);

  font-size: 1.1rem;

  font-weight: 800;

  color: var(--text-white);

  margin-bottom: 0.45rem;

}



.footer-logo {

  width: 36px;

  height: 36px;

  object-fit: contain;

}



.footer-motto {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-dim);

}



.footer-nav-col {

  display: flex;

  flex-wrap: wrap;

  gap: 1.5rem;

  font-family: var(--font-mono);

  font-size: 0.74rem;

  color: var(--text-muted);

}



.footer-nav-col a:hover {

  color: var(--cyan);

}



.footer-bottom {

  max-width: 1400px;

  margin: 1.5rem auto 0;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 1rem;

  font-family: var(--font-mono);

  font-size: 0.68rem;

  color: var(--text-dim);

}



/* ==========================================================================

   RESPONSIVE BREAKPOINTS

   ========================================================================== */

@media (max-width: 1150px) {

  .hero-grid {

    grid-template-columns: 1fr;

  }

  .sim-cockpit {

    grid-template-columns: 1fr;

  }

  .lexicon-grid, .investor-pillars, .nexus-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .telemetry-ribbon {

    grid-template-columns: repeat(2, 1fr);

  }

  .deck-body {

    grid-template-columns: 1fr;

  }

  .origins-showcase {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 780px) {

  .hud-nav, .hud-telemetry-pill {

    display: none;

  }

  .mobile-menu-btn {

    display: flex;

  }

  .lexicon-grid, .investor-pillars, .nexus-grid, .telemetry-ribbon, .dials-grid {

    grid-template-columns: 1fr;

  }

  .suspects-row {

    grid-template-columns: repeat(3, 1fr);

  }

  .founder-panel {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .founder-direct-links {

    justify-content: center;

  }

  .investor-dossier {

    padding: 2rem 1.5rem;

  }

}





/* ==========================================================================

   v4.5 STAMPED LOGO & MINIMAL FOUNDER NOTE OVERRIDES

   ========================================================================== */



/* Make the Studio Logo look stamped directly onto the dark site without any box */

.emblem-3d-card.stamped-emblem {

  background: transparent !important;

  backdrop-filter: none !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0.5rem !important;

  overflow: visible !important;

}



.emblem-3d-card.stamped-emblem .emblem-scan-beam {

  display: none !important;

}



.emblem-3d-card.stamped-emblem .hero-logo-main {

  width: 380px;

  max-width: 100%;

  filter:

    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.92))

    drop-shadow(0 0 28px rgba(0, 242, 254, 0.28))

    drop-shadow(0 0 32px rgba(255, 62, 108, 0.22));

  transform: rotate(-2deg);

}



.emblem-3d-card.stamped-emblem .emblem-caption-hud {

  border-top: none !important;

  justify-content: center;

  gap: 1rem;

  opacity: 0.75;

}



.original-logo-frame.stamped-origin-logo {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0.5rem !important;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.original-logo-frame.stamped-origin-logo .original-logo-img {

  width: 100%;

  max-width: 390px;

  border-radius: 0 !important;

  filter:

    drop-shadow(0 10px 25px rgba(0, 0, 0, 0.92))

    drop-shadow(0 0 26px rgba(0, 242, 254, 0.25))

    drop-shadow(0 0 30px rgba(255, 62, 108, 0.2));

  transform: rotate(-2.5deg);

  transition: transform 0.35s ease;

}



.original-logo-frame.stamped-origin-logo:hover .original-logo-img {

  transform: rotate(0deg) scale(1.03);

}



.original-logo-frame.stamped-origin-logo .logo-frame-caption {

  width: 100%;

  max-width: 340px;

  opacity: 0.75;

}



/* Short, Simple 3-Step Bar Above the 3D Simulation Cockpit */

.neuronic-steps-bar {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.25rem;

  margin-bottom: 1.75rem;

}



.n-step-box {

  background: rgba(11, 17, 30, 0.72);

  border: 1px solid var(--border-subtle);

  border-radius: 12px;

  padding: 1.1rem 1.35rem;

}



.n-step-box span {

  display: block;

  font-family: var(--font-mono);

  font-size: 0.66rem;

  color: var(--cyan);

  font-weight: 700;

  letter-spacing: 0.08em;

  margin-bottom: 0.3rem;

}



.n-step-box strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.02rem;

  color: var(--text-white);

  margin-bottom: 0.25rem;

}



.n-step-box p {

  font-size: 0.86rem;

  color: var(--text-muted);

  line-height: 1.5;

}



/* Minimal Short Founder Note at the Very Bottom (No Images, No Logos) */

.founder-note-minimal {

  max-width: 860px;

  margin: 0 auto;

  padding: 1.6rem 2rem;

  background: rgba(11, 17, 30, 0.55);

  border-left: 3px solid var(--cyan);

  border-top: 1px solid var(--border-subtle);

  border-right: 1px solid var(--border-subtle);

  border-bottom: 1px solid var(--border-subtle);

  border-radius: 0 12px 12px 0;

}



.founder-note-minimal .fn-tag {

  display: block;

  font-family: var(--font-mono);

  font-size: 0.66rem;

  letter-spacing: 0.12em;

  color: var(--cyan);

  margin-bottom: 0.4rem;

}



.founder-note-minimal .fn-text {

  font-size: 0.96rem;

  color: var(--text-light);

  line-height: 1.65;

  margin-bottom: 0.9rem;

}



.founder-note-minimal .fn-links {

  display: flex;

  flex-wrap: wrap;

  gap: 1.5rem;

  font-family: var(--font-mono);

  font-size: 0.74rem;

}



.founder-note-minimal .fn-links a {

  color: var(--cyan);

}



.founder-note-minimal .fn-links a:hover {

  color: var(--coral);

}



@media (max-width: 900px) {

  .neuronic-steps-bar {

    grid-template-columns: 1fr;

  }

}



/* Neuronic concept: touch and keyboard access, character selection. */

#sim3d-canvas { touch-action: none; }

#sim3d-canvas:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }

.sim-citizen-picker { display: grid; gap: .5rem; font: 600 .68rem var(--font-mono); color: var(--cyan); }

.sim-citizen-picker select { width: 100%; min-width: 0; padding: .7rem; border: 1px solid var(--border-subtle); border-radius: 6px; background: #080e18; color: var(--text-white); font: 500 .8rem var(--font-mono); }

.sim-citizen-picker select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.sim-score-caption { margin: 0; color: var(--text-dim); font: .68rem/1.6 var(--font-mono); }

@media (max-width: 780px) {

  .hud-header { padding-inline: 16px; gap: 12px; }

  .hud-left, .brand-identity, .brand-text { min-width: 0; }

  .hud-right { gap: 10px; flex-shrink: 0; }

  .brand-name { font-size: .8rem; white-space: nowrap; }

  .brand-tagline { display: none; }

  .hud-right > a { display: none; }

  .app-icon-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

  .dock-app-pill { min-width: 0; padding: .75rem; gap: .6rem; }

  .dock-meta { min-width: 0; overflow-wrap: anywhere; }

  #hero-logo-reactor { overflow: hidden; }

  .deck-body, .sim-cockpit { min-width: 0; }

  .deck-body > *, .sim-cockpit > * { min-width: 0; }

  .deck-title, .section-title, .eyebrow-tag { overflow-wrap: anywhere; }

  .sim-hud-top { padding: .6rem; }

  .sim-stat-chip { max-width: 100%; overflow-wrap: anywhere; }

  .sim-mode-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }

  .sim-mode-btn { min-width: 0; padding: .7rem .5rem; }

  .sim-mode-btn .m-name { font-size: .64rem; }

}



/* ==========================================================================
   REAL VIDEO PLAYER FRAME & OFFICIAL SOCIAL BRAND LOGOS
   ========================================================================== */
.real-video-frame {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #03050a;
  border: 1px solid rgba(0, 242, 254, 0.32);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 242, 254, 0.08);
}

.neuronic-video-el {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 680px;
  display: block;
  object-fit: cover;
  background: #03050a;
}

.social-brand-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nexus-card:hover .social-brand-badge {
  transform: scale(1.06);
}

.brand-ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 6px 18px rgba(214, 36, 159, 0.35);
}

.brand-li {
  background: #0A66C2;
  box-shadow: 0 6px 18px rgba(10, 102, 194, 0.4);
}

.brand-tt {
  background: #0b0f19;
  border: 1px solid rgba(0, 242, 254, 0.45);
  box-shadow: -2px -2px 10px rgba(0, 242, 254, 0.28), 2px 2px 10px rgba(255, 0, 80, 0.28);
}

.brand-x {
  background: #0f141c;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* Vertically center clean app descriptions next to the 3D phones */
.deck-body {
  align-items: center;
}