/* ═══════════════════════════════════════════════════════════════
   PROGRAM 3 — INDUSTRIAL AUTOMATION & MECHATRONICS
   "PREMIUM MECHATRONICS" — High-End Technical Elegance
   Institut Wawasan | Kulim, Kedah
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS CUSTOM PROPERTIES ──────────────────────────────────── */
:root {
  /* Premium Dark Titanium Backgrounds */
  --p3-bg:          #0b0f19;
  --p3-bg-2:        #111827;
  
  /* Glass Panels for high-end feel */
  --p3-glass:       rgba(10, 15, 22, 0.6);
  --p3-glass-hover: rgba(16, 22, 32, 0.8);
  
  /* Precision Laser Accents */
  --p3-cyan:        #00e1ff;
  --p3-cyan-glow:   rgba(0, 225, 255, 0.3);
  --p3-amber:       #ffaa00;
  --p3-amber-glow:  rgba(255, 170, 0, 0.3);
  --p3-purple:      #a866ff;
  
  /* Ultra-Readable Pristine Typography */
  --p3-text:        #ffffff;
  --p3-text-2:      #cbd5e1; /* very readable light slate */
  --p3-text-dim:    #64748b;
  
  /* Elegant Thin Borders */
  --p3-border:      rgba(255, 255, 255, 0.12);
  --p3-border-soft: rgba(255, 255, 255, 0.05);
  
  /* Mechatronics Typefaces */
  --p3-font-head:   'Space Grotesk', sans-serif;
  --p3-font-mono:   'JetBrains Mono', monospace;
  
  /* Tech precise, not overblown */
  --p3-radius:      8px; /* Clean sharp rectangles, slightly softened */
  --p3-radius-sm:   4px;
}

/* ── BASE OVERRIDES ─────────────────────────────────────────── */
.p3-body {
  background: var(--p3-bg) !important;
  color: var(--p3-text-2) !important;
  font-family: var(--p3-font-head) !important; /* Authentic Mechatronic feeling */
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */
.p3-cyan   { color: var(--p3-cyan); text-shadow: 0 0 12px var(--p3-cyan-glow); }
.p3-amber  { color: var(--p3-amber); text-shadow: 0 0 12px var(--p3-amber-glow); }
.p3-purple { color: var(--p3-purple); text-shadow: 0 0 12px rgba(168,102,255,0.3); }
.p3-muted  { color: var(--p3-text-dim); }
.p3-mono   { font-family: var(--p3-font-mono); letter-spacing: 0.02em; }

.p3-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
}

/* Mechanical Blueprint Grid Overlay for Sections */
.p3-blueprint-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.1;
  background-image:
    linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Section Line */
.p3-section-line {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0.15) 80%, transparent);
}

.p3-overline {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: var(--p3-font-mono); font-size: 0.8rem;
  color: var(--p3-cyan); letter-spacing: 0.25em; text-transform: uppercase;
  margin-bottom: 1.5rem; opacity: 0.9;
}
.p3-overline::before { content: ''; display: inline-block; width: 30px; height: 1px; background: var(--p3-cyan); }
.p3-overline::after { content: ''; display: inline-block; width: 30px; height: 1px; background: var(--p3-cyan); }

/* -------------------------------------------------------------
   MECHATRONIC SECTION HEADER ("MORE MORE MORE")
------------------------------------------------------------- */
.p3-header-mecha-wrapper {
  position: relative; padding: 3rem 0; margin-bottom: 5rem; text-align: center;
  border-top: 2px solid rgba(0,225,255,0.2); border-bottom: 2px solid rgba(0,225,255,0.2);
  background: linear-gradient(90deg, transparent 0%, rgba(0,225,255,0.03) 50%, transparent 100%);
  overflow: hidden;
}
.p3-header-laser-scan {
  position: absolute; left: 0; width: 100%; height: 2px; top: 0;
  background: var(--p3-cyan); box-shadow: 0 0 20px var(--p3-cyan);
  animation: p3HeaderScan 4s linear infinite alternate; opacity: 0.7; z-index: 10;
}
@keyframes p3HeaderScan { 0% { top: 0; } 100% { top: 100%; } }

.p3-title-container { position: relative; display: inline-block; margin-bottom: 1.5rem; }
.p3-title-gear { position: absolute; top: -10%; width: 140px; height: 140px; opacity: 0.3; z-index: -1; pointer-events: none; mix-blend-mode: screen; filter: blur(1px); }
.p3-title-gear-left { left: -160px; }
.p3-title-gear-right { right: -160px; }
.p3-spin-slow-cw { animation: p3GearSpin 12s linear infinite; }
.p3-spin-slow-ccw { animation: p3GearSpin 12s linear infinite reverse; }
@keyframes p3GearSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.p3-section-title {
  font-family: var(--p3-font-head);
  font-size: clamp(2.5rem, 4vw, 3rem);
  font-weight: 700; color: var(--p3-text);
  margin: 0.5rem 0 1.5rem; line-height: 1.1;
  text-transform: uppercase; letter-spacing: -0.02em;
  position: relative; z-index: 2;
}

.p3-title-brackets { color: rgba(255,170,0,0.8); font-weight: 300; font-size: 1.5em; vertical-align: middle; padding: 0 10px; animation: p3BracketPulse 2s infinite alternate;}
@keyframes p3BracketPulse { 0% { opacity: 0.2; text-shadow: none; } 100% { opacity: 1; text-shadow: 0 0 20px var(--p3-amber); } }

/* The True Transparent Mega Glitch */
.p3-mega-glitch {
  position: relative; display: inline-block; font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 900; letter-spacing: 0.05em;
  color: #fff; text-shadow: 0 0 20px var(--p3-cyan); margin-top: 5px;
  animation: p3TextBaseJitter 4s infinite linear;
}
@keyframes p3TextBaseJitter {
  0%, 93%, 100% { transform: none; filter: none; }
  94% { transform: skewX(15deg) translate(-5px); filter: hue-rotate(90deg) contrast(200%); }
  95% { transform: skewX(-15deg) translate(5px); filter: hue-rotate(-90deg) invert(1); }
  96% { transform: none; filter: none; }
}

.p3-mega-glitch::before, .p3-mega-glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 1; z-index: 10; /* THIS WAS THE SECRET: OVER THE TEXT! */
  color: inherit;
}
.p3-mega-glitch::before {
  text-shadow: -10px 0 var(--p3-cyan);
  animation: p3MegaGlitchAnim1 3s infinite linear alternate-reverse;
}
.p3-mega-glitch::after {
  text-shadow: 10px 0 var(--p3-amber);
  animation: p3MegaGlitchAnim2 2.5s infinite linear alternate;
}
@keyframes p3MegaGlitchAnim1 {
  0%, 79%, 100% { clip-path: inset(100% 0 0 0); transform: translate(0,0); } /* Hidden */
  80% { clip-path: inset(20% 0 70% 0); transform: translate(-15px, 3px); }
  85% { clip-path: inset(60% 0 20% 0); transform: translate(15px, -3px); }
  90% { clip-path: inset(40% 0 50% 0); transform: translate(-15px, 0); }
  95% { clip-path: inset(80% 0 5% 0); transform: translate(15px, 0); }
}
@keyframes p3MegaGlitchAnim2 {
  0%, 69%, 100% { clip-path: inset(100% 0 0 0); transform: translate(0,0); } /* Hidden */
  70% { clip-path: inset(10% 0 80% 0); transform: translate(15px, -2px); }
  75% { clip-path: inset(70% 0 10% 0); transform: translate(-15px, 2px); }
  80% { clip-path: inset(30% 0 60% 0); transform: translate(15px, 0); }
  85% { clip-path: inset(50% 0 40% 0); transform: translate(-15px, 0); }
}

.p3-hud-box-text {
  color: var(--p3-text-2); font-size: 1.15rem; font-weight: 400;
  max-width: 750px; margin: 0 auto; line-height: 1.8;
  position: relative; z-index: 2; padding: 10px 20px;
  background: rgba(0,0,0,0.5); border: 1px dashed rgba(255,255,255,0.1);
  box-shadow: inset 0 0 20px rgba(0,225,255,0.05);
}

/* Elegant Technical Buttons */
.p3-btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 1rem 2.2rem;
  font-family: var(--p3-font-main); font-weight: 600; font-size: 1rem;
  border-radius: var(--p3-radius-sm); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; overflow: hidden; backdrop-filter: blur(10px);
  animation: p3BtnRandomGlitch 7s infinite; /* Continuous idle glitch */
}
.p3-btn--cyan {
  background: rgba(0, 225, 255, 0.1);
  border: 1px solid var(--p3-cyan);
  color: var(--p3-cyan);
  box-shadow: 0 0 15px rgba(0,225,255,0.1);
}
.p3-btn--cyan:hover {
  background: var(--p3-cyan); color: #000;
  box-shadow: 0 0 30px rgba(0,225,255,0.4); transform: translateY(-2px);
  animation: p3BtnGlitchEffect 0.3s forwards;
}
.p3-btn--outline {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.2);
  color: var(--p3-text);
}
.p3-btn--outline:hover {
  border-color: #fff; background: rgba(255,255,255,0.1);
  box-shadow: 0 0 20px rgba(255,255,255,0.1); transform: translateY(-2px);
  animation: p3BtnGlitchEffect 0.3s forwards;
}

/* ═══════════════════════════════════════════════════════════════
   §1  HERO — CYBER FORGE
   ═══════════════════════════════════════════════════════════════ */
.p3-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
  padding: 12rem 0 6rem;
  animation: p3ScreenGlitch 15s infinite; /* Occasional full-screen monitor glitch */
}

/* Background Systems */
.p3-circuit-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.6; mix-blend-mode: screen; }
#p3CircuitCanvas { width: 100%; height: 100%; display: block; }
.p3-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,225,255,0.015) 2px, rgba(0,225,255,0.015) 4px);
  pointer-events: none; z-index: 1;
}

/* Mechatronic Decorative Corners */
.p3-hero::before { content: ''; position: absolute; top: 40px; left: 40px; width: 40px; height: 40px; border-top: 2px solid rgba(255,255,255,0.2); border-left: 2px solid rgba(255,255,255,0.2); z-index: 2; pointer-events: none; }
.p3-hero::after { content: ''; position: absolute; bottom: 40px; right: 40px; width: 40px; height: 40px; border-bottom: 2px solid rgba(255,255,255,0.2); border-right: 2px solid rgba(255,255,255,0.2); z-index: 2; pointer-events: none; }

/* The SVG Robot Arm */
.p3-robot-arm-wrap {
  position: absolute; right: 5%; top: 50%; transform: translateY(-45%);
  width: 420px; height: 580px; z-index: 2; opacity: 0.9;
}
.p3-robot-arm {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 15px rgba(0,225,255,0.2)) drop-shadow(0 0 40px rgba(0,225,255,0.05));
}
.p3-arm-upper { transform-origin: 150px 342px; animation: p3ArmUpper 10s ease-in-out infinite; }
.p3-arm-lower { transform-origin: 150px 242px; animation: p3ArmLower 10s ease-in-out infinite; }
.p3-arm-hand  { transform-origin: 150px 150px; animation: p3ArmHand 10s ease-in-out infinite; }
.p3-finger-l  { transform-origin: 131px 109px; animation: p3FingerGrip 10s ease-in-out infinite; }
.p3-finger-r  { transform-origin: 169px 109px; animation: p3FingerGrip 10s ease-in-out infinite reverse; }
.p3-laser { animation: p3LaserPulse 3s ease-in-out infinite; }
.p3-data-flow { stroke-dasharray: 8 6; animation: p3DataFlow 3s linear infinite; }

/* Hero Text Content */
.p3-hero-content {
  position: relative; z-index: 3;
  padding-left: max(2.5rem, calc((100vw - 1200px) / 2)); padding-right: 2rem;
  max-width: 1000px; /* Expanded for a much more horizontal layout */
}

/* System Badge */
.p3-hero-badge {
  display: inline-flex; align-items: center; gap: 1rem;
  background: rgba(0, 225, 255, 0.05); border: 1px solid rgba(0, 225, 255, 0.2);
  border-radius: var(--p3-radius-sm); padding: 0.5rem 1.2rem;
  font-family: var(--p3-font-mono); font-size: 0.75rem; color: var(--p3-text);
  margin-bottom: 2rem; letter-spacing: 0.1em;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5); backdrop-filter: blur(10px);
}
.p3-badge-dot { width: 8px; height: 8px; background: var(--p3-cyan); box-shadow: 0 0 10px var(--p3-cyan); animation: p3DotBlink 2s infinite; border-radius: 50%; }
.p3-badge-sep { color: rgba(255,255,255,0.3); }

/* The Authentic, Readable Glitch Title */
.p3-hero-title {
  font-family: var(--p3-font-head); font-size: clamp(3rem, 6.5vw, 5.5rem);
  font-weight: 700; line-height: 1.05; margin: 0 0 1rem; color: #fff;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.p3-glitch { position: relative; display: inline-block; animation: p3TextFlicker 7s infinite; }
.p3-glitch--amber { color: var(--p3-amber); }

/* The Electric Mechatronic BZZZZZ effect (Continuous CSS Glitch) */
.p3-glitch::before, .p3-glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: transparent; pointer-events: none; z-index: 2; opacity: 0;
}
.p3-glitch::before {
  left: 4px; text-shadow: -2px 0 var(--p3-cyan);
  animation: p3ElectricBzz1 3s infinite alternate-reverse;
}
.p3-glitch::after {
  left: -4px; text-shadow: 2px 0 var(--p3-amber);
  animation: p3ElectricBzz2 4s infinite alternate;
}

.p3-hero-sub {
  font-size: 1.25rem; font-weight: 400; color: var(--p3-text-2);
  margin-bottom: 3.5rem; display: flex; align-items: center; gap: 8px;
}
.p3-cursor { font-family: var(--p3-font-mono); color: var(--p3-cyan); animation: p3CursorBlink 1s step-end infinite; }

/* The Stats Panel - Fixed Widths! */
.p3-hero-stats {
  display: flex; gap: 1px;
  background: var(--p3-border-soft); /* acts as the 1px divider */
  border: 1px solid var(--p3-border);
  border-radius: var(--p3-radius);
  overflow: hidden; /* Contains the stats inside the border */
  margin-bottom: 3.5rem;
  width: max-content; /* Ensure the box can stretch incredibly long horizontally */
  min-width: 100%;
  max-width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  backdrop-filter: blur(15px);
  flex-wrap: nowrap; /* Forces one horizontal line to prevent vertical stacking */
  animation: p3BoxGlitch 9s infinite; /* The new structural glitch */
}
.p3-stat {
  background: rgba(10, 14, 20, 0.85); /* Deep glass */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.2rem 1.8rem; /* Reduced height to make it sleek and horizontal */
  flex: 1 1 0%; /* Equal stretch across all columns horizontally */
  min-width: min-content; /* Stops text from squishing */
}
.p3-stat-num {
  font-family: var(--p3-font-mono); font-size: 2.2rem; font-weight: 700;
  color: #fff; line-height: 1; margin-bottom: 0.3rem; white-space: nowrap;
  animation: p3TextFlicker 6s infinite reverse; /* Intermittent Mechatronic text flicker */
}
.p3-stat-unit { font-size: 0.85rem; color: var(--p3-cyan); font-family: var(--p3-font-mono); opacity: 0.9; }
.p3-stat-label {
  font-family: var(--p3-font-head); font-size: 0.85rem; font-weight: 700;
  color: var(--p3-text-dim); text-transform: uppercase; letter-spacing: 0.1em;
  margin-top: 0.5rem; text-align: center;
}
.p3-stat-divider { display: none; }

.p3-hero-actions { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.p3-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1rem; z-index: 3; }
.p3-scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--p3-cyan), transparent); animation: p3ScrollPulse 2s ease-in-out infinite; }
.p3-scroll-hint .p3-mono { font-size: 0.7rem; letter-spacing: 0.3em; color: var(--p3-text-dim); }

/* ═══════════════════════════════════════════════════════════════
   §2  THREE PILLARS
   ═══════════════════════════════════════════════════════════════ */
.p3-pillars { 
  background: var(--p3-bg-2); 
  padding: 8rem 0; 
  position: relative; 
  overflow: hidden; /* Strict clip for the massive grid */
}
/* 3D ACCELERATION TUNNEL (EXTREME V3) */
.p3-accel-tunnel {
  position: absolute; inset: 0; overflow: hidden;
  perspective: 800px; background: #0b0f19; z-index: 0;
  border-top: 2px solid var(--p3-cyan); border-bottom: 2px solid var(--p3-cyan);
}
.p3-tunnel-frame {
  position: absolute; inset: 0; transform-style: preserve-3d;
  will-change: transform, opacity; /* Force GPU Acceleration */
}
.p3-tunnel-frame:nth-child(1) { animation: p3TunnelFly 10s linear infinite; animation-delay: 0s; }
.p3-tunnel-frame:nth-child(2) { animation: p3TunnelFly 10s linear infinite; animation-delay: -1.66s; }
.p3-tunnel-frame:nth-child(3) { animation: p3TunnelFly 10s linear infinite; animation-delay: -3.33s; }
.p3-tunnel-frame:nth-child(4) { animation: p3TunnelFly 10s linear infinite; animation-delay: -5s; }
.p3-tunnel-frame:nth-child(5) { animation: p3TunnelFly 10s linear infinite; animation-delay: -6.66s; }
.p3-tunnel-frame:nth-child(6) { animation: p3TunnelFly 10s linear infinite; animation-delay: -8.33s; }

@keyframes p3TunnelFly {
  0% { transform: translateZ(-3500px); opacity: 0; }
  15% { opacity: 0.8; }
  80% { opacity: 1; }
  100% { transform: translateZ(1500px); opacity: 0; }
}

.p3-tunnel-ring {
  position: absolute; top: 10%; bottom: 10%; left: 5%; right: 5%;
  border: 15px solid var(--p3-cyan);
  box-shadow: 
    0 0 50px var(--p3-cyan), inset 0 0 50px var(--p3-cyan),
    0 0 100px rgba(0, 225, 255, 0.4), inset 0 0 100px rgba(0, 225, 255, 0.4);
  background: rgba(0, 225, 255, 0.02);
  border-radius: 40px;
}
.p3-tunnel-ring::before {
  content: ''; position: absolute; top: -15px; bottom: -15px; left: 15%; right: 15%;
  border-top: 15px solid #fff; border-bottom: 15px solid #fff; opacity: 0.7; box-shadow: 0 0 20px #fff;
}
.p3-tunnel-ring::after {
  content: ''; position: absolute; left: -15px; right: -15px; top: 25%; bottom: 25%;
  border-left: 15px solid #fff; border-right: 15px solid #fff; opacity: 0.7; box-shadow: 0 0 20px #fff;
}

.p3-tunnel-amber {
  border-color: var(--p3-amber);
  box-shadow: 0 0 50px var(--p3-amber), inset 0 0 50px var(--p3-amber), 0 0 100px rgba(255, 170, 0, 0.4), inset 0 0 100px rgba(255, 170, 0, 0.4);
  background: rgba(255, 170, 0, 0.02);
}
.p3-tunnel-purple {
  border-color: var(--p3-purple);
  box-shadow: 0 0 50px var(--p3-purple), inset 0 0 50px var(--p3-purple), 0 0 100px rgba(168, 102, 255, 0.4), inset 0 0 100px rgba(168, 102, 255, 0.4);
  background: rgba(168, 102, 255, 0.02);
}

.p3-tunnel-text {
  position: absolute; top: -100px; left: 50px; 
  font-size: 100px; font-family: var(--p3-font-head); color: #fff; 
  opacity: 0.5; font-weight: 900; letter-spacing: 0.1em;
  text-shadow: 0 0 30px currentColor;
}

.p3-tunnel-core-beam {
  position: absolute; top: 0; width: 60px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: p3BeamPulse 0.1s infinite alternate; mix-blend-mode: overlay;
}
.p3-beam-center { left: 50%; margin-left: -30px; box-shadow: 0 0 50px var(--p3-cyan); }
.p3-beam-left { left: 20%; margin-left: -30px; box-shadow: 0 0 50px var(--p3-amber); }
.p3-beam-right { left: 80%; margin-left: -30px; box-shadow: 0 0 50px var(--p3-purple); }

@keyframes p3BeamPulse { 0% { opacity: 0.2; filter: blur(5px); } 100% { opacity: 1; filter: blur(20px); } }

.p3-optical-overlay {
  position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.3) 0px, transparent 2px); pointer-events: none; z-index: 5;
}
.p3-pillars::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, rgba(0, 225, 255, 0.15) 0%, rgba(10,14,20,0.95) 75%);
  z-index: 1; /* Dark vignette over the grid edges */
}

/* 3D SYNTHWAVE MOVING MECHA GRID FLOOR */
.p3-pillars::after {
  content: ''; position: absolute; bottom: -50%; left: -50%; width: 200%; height: 150%;
  background-image: 
    linear-gradient(rgba(0, 225, 255, 0.3) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 225, 255, 0.3) 2px, transparent 2px);
  background-size: 80px 80px;
  transform: perspective(1000px) rotateX(70deg) translateY(0);
  transform-origin: center center;
  animation: p3GridFloor 3s linear infinite; /* Very fast scan forward */
  mask-image: radial-gradient(ellipse at center, white 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at center, white 0%, transparent 60%);
  z-index: 0; pointer-events: none;
}
@keyframes p3GridFloor {
  0% { transform: perspective(1000px) rotateX(70deg) translateY(0); }
  100% { transform: perspective(1000px) rotateX(70deg) translateY(80px); }
}

.p3-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; position: relative; z-index: 2; }

.p3-pillar-card {
  background: 
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px),
    rgba(10, 14, 20, 0.85);
  background-size: 15px 15px, 15px 15px, 100% 100%;
  border: 2px solid rgba(0, 225, 255, 0.15); border-top: 2px solid rgba(0, 225, 255, 0.4);
  border-radius: 0; backdrop-filter: blur(20px);
  padding: 3.5rem 2.5rem;
  position: relative; overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0; transform: translateY(40px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); /* Beveled Mecha Corner */
  box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,225,255,0.05);
}
.p3-pillar-card.p3-revealed { opacity: 1; transform: translateY(0); }

/* Extreme HUD System: Permanent Scanner Line */
.p3-pillar-card::before {
  content: ''; position: absolute; left: 0; width: 100%; height: 3px; z-index: 0; pointer-events: none;
  background: rgba(0, 225, 255, 0.5); box-shadow: 0 0 30px 2px rgba(0, 225, 255, 0.5);
  animation: p3CardScanLoop 4s linear infinite;
}
@keyframes p3CardScanLoop { 0% { top: -10px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 105%; opacity: 0; } }

/* Literal HUD Text Strings in Corners */
.p3-pillar-card::after {
  white-space: pre; font-family: var(--p3-font-mono); font-size: 0.65rem;
  position: absolute; right: 20px; top: 20px; text-align: right; line-height: 1.5; opacity: 0.7; pointer-events: none; z-index: 1;
}

/* --------------------------------------------------------
   INTERIOR MECHATRONIC HUD ELEMENTS
-------------------------------------------------------- */
.p3-card-crosshair {
  position: absolute; width: 15px; height: 15px; pointer-events: none; z-index: 10;
  border: 1.5px solid rgba(255,255,255,0.4);
}
.p3-card-crosshair-tl { top: 15px; left: 15px; border-right: none; border-bottom: none; }
.p3-card-crosshair-tr { top: 15px; right: 25px; border-left: none; border-bottom: none; }
.p3-card-crosshair-bl { bottom: 15px; left: 15px; border-right: none; border-top: none; }
.p3-card-crosshair-br { bottom: 15px; right: 35px; border-left: none; border-top: none; } /* Offset to clear bevel */

.p3-card-side-ruler {
  position: absolute; top: 25%; left: 8px; height: 50%; width: 4px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 1px, transparent 1px, transparent 10px);
  pointer-events: none; z-index: 10; opacity: 0.5;
}

.p3-hud-bars { margin-top: -1rem; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.8rem; position: relative; z-index: 2; }
.p3-hud-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.p3-hud-bar-row span { font-size: 0.6rem; color: var(--p3-text-dim); letter-spacing: 0.05em; width: 70px; opacity: 0.8; }
.p3-hud-bar-track { flex: 1; height: 2px; background: rgba(255,255,255,0.1); overflow: hidden; position: relative; }
.p3-hud-bar-fill { height: 100%; box-shadow: 0 0 10px currentColor; animation: p3HudBarPulse 2s ease-in-out infinite alternate; }

@keyframes p3HudBarPulse { 0% { opacity: 0.6; filter: brightness(1); } 100% { opacity: 1; filter: brightness(2); } }

/* Element specific coloring applied via overrides below */

/* Card-Specific LED Theming & Hardcore Overrides */
.p3-pillar-card--mech::before { background: var(--p3-cyan); box-shadow: 0 0 30px 3px var(--p3-cyan); animation-delay: 0s; }
.p3-pillar-card--mech::after { content: 'DRIVE.SYS [ACTV] \A TRQ: 890Nm \A ST: ON'; color: var(--p3-cyan); }
.p3-pillar-card--mech .p3-hud-bar-fill { background: var(--p3-cyan); color: var(--p3-cyan); }
.p3-pillar-card--mech .p3-card-crosshair { border-color: rgba(0,225,255,0.4); }
.p3-pillar-card--mech .p3-card-side-ruler { background: repeating-linear-gradient(180deg, rgba(0,225,255,0.5), rgba(0,225,255,0.5) 1px, transparent 1px, transparent 10px); }
.p3-pillar-card--mech:hover { border-color: var(--p3-cyan); transform: translateY(-10px) scale(1.02); box-shadow: 0 0 40px rgba(0,225,255,0.4), inset 0 0 80px rgba(0,225,255,0.15); }

.p3-pillar-card--amber::before { border-top-color: var(--p3-amber); background: var(--p3-amber); box-shadow: 0 0 30px 3px var(--p3-amber); animation-delay: -1.3s; }
.p3-pillar-card--amber { border: 2px solid rgba(255,170,0,0.15); border-top: 2px solid rgba(255,170,0,0.4); }
.p3-pillar-card--amber::after { content: 'PWR.GRID [SYNC] \A VLT: 480V \A FRQ: 50Hz'; color: var(--p3-amber); }
.p3-pillar-card--amber .p3-hud-bar-fill { background: var(--p3-amber); color: var(--p3-amber); }
.p3-pillar-card--amber .p3-card-crosshair { border-color: rgba(255,170,0,0.4); }
.p3-pillar-card--amber .p3-card-side-ruler { background: repeating-linear-gradient(180deg, rgba(255,170,0,0.5), rgba(255,170,0,0.5) 1px, transparent 1px, transparent 10px); }
.p3-pillar-card--amber:hover { border-color: var(--p3-amber); transform: translateY(-10px) scale(1.02); box-shadow: 0 0 40px rgba(255,170,0,0.4), inset 0 0 80px rgba(255,170,0,0.15); }

.p3-pillar-card--purple::before { border-top-color: var(--p3-purple); background: var(--p3-purple); box-shadow: 0 0 30px 3px var(--p3-purple); animation-delay: -2.6s; }
.p3-pillar-card--purple { border: 2px solid rgba(168,102,255,0.15); border-top: 2px solid rgba(168,102,255,0.4); }
.p3-pillar-card--purple::after { content: 'LOGIC.CORE [ON] \A LAT: 4ms \A THR: 128T'; color: var(--p3-purple); }
.p3-pillar-card--purple .p3-hud-bar-fill { background: var(--p3-purple); color: var(--p3-purple); }
.p3-pillar-card--purple .p3-card-crosshair { border-color: rgba(168,102,255,0.4); }
.p3-pillar-card--purple .p3-card-side-ruler { background: repeating-linear-gradient(180deg, rgba(168,102,255,0.5), rgba(168,102,255,0.5) 1px, transparent 1px, transparent 10px); }
.p3-pillar-card--purple:hover { border-color: var(--p3-purple); transform: translateY(-10px) scale(1.02); box-shadow: 0 0 40px rgba(168,102,255,0.4), inset 0 0 80px rgba(168,102,255,0.15); }

/* Typography & Inner HUD Elements */
.p3-pillar-icon { width: 60px; height: 60px; margin-bottom: 2.5rem; opacity: 1; position: relative; z-index: 1; }
.p3-pillar-icon svg { width: 100%; height: 100%; animation: p3IconPulse 3s ease-in-out infinite alternate; position: relative; z-index: 2;}

/* Radar Rings Around Icons */
.p3-pillar-icon::before, .p3-pillar-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); border: 1.5px dashed currentColor; opacity: 0.3;
}
.p3-pillar-icon::before { width: 160%; height: 160%; animation: p3RadarSpin 5s linear infinite; }
.p3-pillar-icon::after { width: 220%; height: 220%; border-style: dotted; opacity: 0.15; animation: p3RadarSpin 8s linear infinite reverse; }
@keyframes p3RadarSpin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.p3-pillar-card--mech .p3-pillar-icon { color: var(--p3-cyan); }
.p3-pillar-card--amber .p3-pillar-icon { color: var(--p3-amber); }
.p3-pillar-card--purple .p3-pillar-icon { color: var(--p3-purple); }

@keyframes p3IconPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px currentColor); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 30px currentColor) brightness(1.7); }
}

.p3-pillar-num { font-family: var(--p3-font-mono); font-size: 1rem; color: #fff; margin-bottom: 1rem; display: block; opacity: 0.9; letter-spacing: 0.15em; font-weight: bold; position: relative; z-index: 2;}
.p3-pillar-title { font-family: var(--p3-font-head); font-size: 1.8rem; font-weight: 700; color: #fff; margin: 0 0 1.2rem; text-transform: uppercase; position: relative; z-index: 2;}

/* Massive Ambient Watermark Numbers */
.p3-pillar-title::after {
  position: absolute; bottom: -80px; right: -20px; font-size: 16rem; font-family: var(--p3-font-mono); font-weight: 900;
  line-height: 0.8; opacity: 0.03; pointer-events: none; z-index: -1;
}
.p3-pillar-card--mech .p3-pillar-title::after { content: '01'; color: var(--p3-cyan); }
.p3-pillar-card--amber .p3-pillar-title::after { content: '02'; color: var(--p3-amber); }
.p3-pillar-card--purple .p3-pillar-title::after { content: '03'; color: var(--p3-purple); }
.p3-pillar-desc { color: var(--p3-text-2); font-size: 1.05rem; line-height: 1.8; margin-bottom: 2.5rem; position: relative; z-index: 2;}

/* Neon Glowing Titles */
.p3-pillar-card--mech .p3-pillar-title { text-shadow: 0 0 10px var(--p3-cyan), 0 0 20px rgba(0,225,255,0.5); }
.p3-pillar-card--amber .p3-pillar-title { text-shadow: 0 0 10px var(--p3-amber), 0 0 20px rgba(255,170,0,0.5); }
.p3-pillar-card--purple .p3-pillar-title { text-shadow: 0 0 10px var(--p3-purple), 0 0 20px rgba(168,102,255,0.5); }

/* Interactive LED Tags - Hardcore Mode */
.p3-pillar-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; position: relative; z-index: 2;}
.p3-pillar-tags li {
  background: rgba(0,0,0,0.8); border: 2px solid rgba(255,255,255,0.1);
  border-radius: 0; padding: 0.5rem 1.2rem;
  font-family: var(--p3-font-mono); font-size: 0.85rem; font-weight: bold; letter-spacing: 0.5px;
  transition: all 0.2s;
}

/* Permanent Pulse per Tag Category */
.p3-pillar-card--mech .p3-pillar-tags li { border-color: rgba(0,225,255,0.4); color: var(--p3-cyan); animation: p3TagPulse 3s infinite alternate; }
.p3-pillar-card--mech:hover .p3-pillar-tags li { border-color: var(--p3-cyan); background: rgba(0,225,255,0.15); box-shadow: 0 0 20px rgba(0,225,255,0.6) inset, 0 0 10px var(--p3-cyan); color: #fff; text-shadow: 0 0 5px #fff; }

.p3-pillar-card--amber .p3-pillar-tags li { border-color: rgba(255,170,0,0.4); color: var(--p3-amber); animation: p3TagPulse 3s infinite alternate-reverse; }
.p3-pillar-card--amber:hover .p3-pillar-tags li { border-color: var(--p3-amber); background: rgba(255,170,0,0.15); box-shadow: 0 0 20px rgba(255,170,0,0.6) inset, 0 0 10px var(--p3-amber); color: #fff; text-shadow: 0 0 5px #fff; }

.p3-pillar-card--purple .p3-pillar-tags li { border-color: rgba(168,102,255,0.4); color: var(--p3-purple); animation: p3TagPulse 3s infinite alternate 1.5s; }
.p3-pillar-card--purple:hover .p3-pillar-tags li { border-color: var(--p3-purple); background: rgba(168,102,255,0.15); box-shadow: 0 0 20px rgba(168,102,255,0.6) inset, 0 0 10px var(--p3-purple); color: #fff; text-shadow: 0 0 5px #fff; }

@keyframes p3TagPulse { 0% { box-shadow: inset 0 0 5px currentColor; } 100% { box-shadow: inset 0 0 20px currentColor; } }

/* ═══════════════════════════════════════════════════════════════
   §3  BENEFITS — FLIP DATACARDS (SEAMLESS MECHA-GLASS V4)
   ═══════════════════════════════════════════════════════════════ */
.p3-benefits { background: var(--p3-bg); padding: 10rem 0; position: relative; overflow: hidden; }

/* Custom AAA Typography for the Section Header */
.p3-benefits .p3-section-header { position: relative; z-index: 4; margin-bottom: 4rem; text-align: center; }
.p3-benefits .p3-overline { 
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  font-size: 1rem; color: var(--p3-cyan); font-weight: 700; 
  letter-spacing: 0.3em; margin-bottom: 2rem; text-shadow: 0 0 15px rgba(0,225,255,0.8);
}
.p3-benefits .p3-overline::before, .p3-benefits .p3-overline::after {
  content: ''; display: block; width: 40px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p3-cyan), transparent);
  box-shadow: 0 0 10px var(--p3-cyan); opacity: 0.8;
  animation: laserCaliper 4s infinite ease-in-out;
}
.p3-benefits .p3-overline::after { animation-delay: -2s; }
@keyframes laserCaliper { 0%, 100% { width: 10px; opacity: 0.2; } 50% { width: 100px; opacity: 1; } }

.p3-benefits .p3-section-title { 
  font-family: var(--p3-font-head), sans-serif; font-size: 4rem; letter-spacing: -2px; 
  text-transform: uppercase; font-weight: 900; line-height: 1.1; margin-bottom: 2rem;
  /* Frost-Cyan Metallic Base Gradient */
  background: linear-gradient(90deg, #ffffff 0%, #5fe1ff 50%, #ffffff 100%);
  background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)) drop-shadow(0 0 30px rgba(0,225,255,0.3));
  animation: metallicShine 6s linear infinite;
}
.p3-benefits .p3-section-title .p3-amber {
  background: linear-gradient(90deg, #ffffff 0%, #ffaa00 30%, #ff3d00 70%, #ffffff 100%);
  background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 40px rgba(255,170,0,0.4));
  animation: metallicShine 5s linear infinite reverse;
}
@keyframes metallicShine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* High-Intensity Inverted Data Pill */
.p3-benefits .p3-section-sub {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  padding: 0.8rem 2.5rem; border-radius: 4px;
  background: var(--p3-cyan); 
  color: #000; font-family: var(--p3-font-mono); font-weight: 800; font-size: 0.95rem; 
  letter-spacing: 0.25em; text-transform: uppercase;
  box-shadow: 0 0 30px rgba(0,225,255,0.5), inset 0 0 10px rgba(255,255,255,0.8);
  animation: dataPillPulse 2s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
/* Cybernetic Glitch Cuts on the Pill */
.p3-benefits .p3-section-sub::before {
  content: ''; position: absolute; top: 0; right: -10px; width: 20px; height: 100%;
  background: var(--p3-bg); transform: skewX(-20deg);
}
.p3-benefits .p3-section-sub::after {
  content: ''; position: absolute; bottom: 0; left: -10px; width: 20px; height: 100%;
  background: var(--p3-bg); transform: skewX(-20deg);
}

@keyframes dataPillPulse { 0% { filter: brightness(1); box-shadow: 0 0 15px rgba(0,225,255,0.3); transform: scale(1); } 100% { filter: brightness(1.2); box-shadow: 0 0 40px rgba(0,225,255,0.8); transform: scale(1.02); } }

/* AAA Interactive Default State */
.p3-benefits { --px: 0; --py: 0; transition: --px 0.2s, --py 0.2s; }

/* ═══════════════════════════════════════════════════════════════
   UNIQUE BACKGROUND: THE CYBERNETIC ECLIPSE (ABSOLUTE MAXIMUM)
   ═══════════════════════════════════════════════════════════════ */
.p3-benefits-bg { position: absolute; inset: 0; overflow: hidden; background: #070b14; perspective: 1200px; }

/* 1. The Eclipse Core (Massive glowing Black Hole with Cyan/Amber rim light) */
.p3-eclipse-core {
  position: absolute; left: 50%; top: 50%; 
  /* Extreme Parallax Opposing Shift */
  transform: translate(calc(-50% + var(--px) * -300px), calc(-50% + var(--py) * -300px));
  transition: transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
  width: 900px; height: 900px;
  display: flex; justify-content: center; align-items: center;
  z-index: 1; pointer-events: none;
}
.p3-eclipse-sphere {
  position: absolute; width: 100%; height: 100%; border-radius: 50%;
  background: #000;
  box-shadow: 
    inset -50px -50px 100px rgba(0, 225, 255, 0.4), 
    inset 50px 50px 100px rgba(255, 170, 0, 0.3),
    0 0 150px rgba(0, 225, 255, 0.7),
    0 0 400px rgba(255, 170, 0, 0.4),
    0 0 800px rgba(0, 225, 255, 0.2);
  animation: eclipseBreathe 6s ease-in-out infinite alternate;
  will-change: transform, filter;
}
@keyframes eclipseBreathe { 0% { transform: scale(1); filter: brightness(1); } 100% { transform: scale(1.05); filter: brightness(1.3); } }

/* The Corona Fire Ring */
.p3-eclipse-corona {
  position: absolute; width: 140%; height: 140%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(0, 225, 255, 1), transparent, rgba(255, 170, 0, 0.8), transparent, rgba(0, 225, 255, 1), transparent);
  animation: coronaSpin 10s linear infinite;
  filter: blur(20px); mask-image: radial-gradient(circle at center, transparent 35%, black 60%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 35%, black 60%);
  mix-blend-mode: color-dodge;
  will-change: transform;
}
@keyframes coronaSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 2. Topographic Laser Gradients (Hyper-Bright Infinite Floor/Ceiling) */
.p3-topo-laser-floor, .p3-topo-laser-roof {
  position: absolute; left: -50%; width: 200%; height: 150%;
  /* Tron Laser Grid */
  background-image: 
    linear-gradient(90deg, rgba(0,225,255,0.4) 1px, transparent 2px),
    linear-gradient(0deg, rgba(0,225,255,0.4) 1px, transparent 2px);
  background-size: 100px 100px;
  filter: drop-shadow(0 0 10px rgba(0,225,255,0.8));
  will-change: transform;
}
.p3-topo-laser-floor {
  bottom: -50%; transform-origin: top center; transform: rotateX(80deg);
  mask-image: linear-gradient(to top, transparent, black 100%);
  -webkit-mask-image: linear-gradient(to top, transparent, black 100%);
  animation: topoSpinFloor 60s linear infinite;
}
.p3-topo-laser-roof {
  top: -50%; transform-origin: bottom center; transform: rotateX(-80deg);
  mask-image: linear-gradient(to bottom, transparent, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 100%);
  opacity: 0.15; /* Dimmer ceiling */
  animation: topoSpinRoof 60s linear infinite;
}
@keyframes topoSpinFloor { 0% { transform: rotateX(80deg) rotateZ(0deg) scale(2.5); } 100% { transform: rotateX(80deg) rotateZ(360deg) scale(2.5); } }
@keyframes topoSpinRoof { 0% { transform: rotateX(-80deg) rotateZ(0deg) scale(2.5); } 100% { transform: rotateX(-80deg) rotateZ(360deg) scale(2.5); } }

/* 3. Lens Flare Slash */
.p3-lens-flare {
  position: absolute; top: 40%; left: 0%; width: 200%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0, 225, 255, 1), #fff, rgba(255, 170, 0, 1), transparent);
  /* Laser Tracking the Mouse */
  transform: rotate(-15deg) translateY(-50%) translate(calc(var(--px) * 200px), calc(var(--py) * 200px));
  transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: blur(3px) drop-shadow(0 0 20px rgba(0,225,255,1));
  animation: flarePulse 5s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
  mix-blend-mode: screen; z-index: 2; will-change: transform, opacity, width;
}
@keyframes flarePulse { 0% { opacity: 0.2; width: 100%; transform: rotate(-15deg) scaleX(1); } 100% { opacity: 1; width: 200%; transform: rotate(-15deg) scaleX(1.5); } }

/* 4. Falling Ember Storm */
.p3-ember-storm {
  position: absolute; inset: -20%; pointer-events: none;
  background-image: 
    radial-gradient(circle at center, rgba(255, 170, 0, 0.9) 0%, transparent 2px),
    radial-gradient(circle at center, rgba(0, 225, 255, 0.8) 0%, transparent 2px),
    radial-gradient(circle at center, rgba(255, 170, 0, 0.8) 0%, transparent 3px),
    radial-gradient(circle at center, rgba(0, 225, 255, 0.5) 0%, transparent 4px);
  background-size: 200px 300px, 300px 200px, 400px 400px, 150px 250px;
  background-position: 0 0, 50px 50px, 100px 100px, 150px 150px;
  animation: emberRise 20s linear infinite;
  mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
  z-index: 3; will-change: transform;
}
@keyframes emberRise { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-100vh) rotate(10deg); opacity: 0; } }

/* Ensure data cards float cleanly over the complex grid */
.p3-benefits .p3-container { position: relative; z-index: 5; }

/* Motherboard traces moving softly down */
.p3-flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem; position: relative; z-index: 3;}

/* SEAMLESS GLITCH CARDS (Replaced Flip Mechanic) */
.p3-flip-card {
  height: 340px; perspective: 2000px; cursor: pointer;
  opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.p3-flip-card.p3-revealed { opacity: 1; transform: translateY(0); }
.p3-flip-inner {
  width: 100%; height: 100%; position: relative;
  /* LIVE MOUSE PARALLAX TILT ENGINE */
  transform: rotateY(calc(var(--px) * 30deg)) rotateX(calc(var(--py) * -30deg));
  transform-style: preserve-3d; transition: transform 0.2s cubic-bezier(0.1, 0.8, 0.1, 1), box-shadow 0.8s ease; 
}
/* The Enhanced Cinematic Hover & Glitch Unlock */
.p3-flip-card:hover, .p3-flip-card.is-glitch-locked { z-index: 10; }
.p3-flip-card:hover .p3-flip-inner, .p3-flip-card.is-glitch-locked .p3-flip-inner { 
  /* Tilt without changing physical size */
  transform: rotateY(calc(var(--px) * 15deg)) rotateX(calc(var(--py) * -15deg));
}
.p3-flip-card:hover .p3-flip-front, .p3-flip-card.is-glitch-locked .p3-flip-front { 
  opacity: 0; pointer-events: none; /* Hide front */
  filter: blur(20px); transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.p3-flip-card:hover .p3-flip-back, .p3-flip-card.is-glitch-locked .p3-flip-back { 
  box-shadow: inset 0 0 0 2px rgba(255,170,0,0.6), inset 0 0 80px rgba(255,170,0,0.15), 0 60px 100px rgba(0,0,0,1); 
  opacity: 1; pointer-events: auto;
  animation: techSmoothReveal 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* ════════ THE ABSOLUTE MAXIMUM AAA GLASS PANELS ════════ */
.p3-flip-front, .p3-flip-back {
  position: absolute; inset: 0; backface-visibility: hidden; transform-style: preserve-3d;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  backdrop-filter: blur(40px) saturate(2); -webkit-backdrop-filter: blur(40px) saturate(2);
  border-radius: 12px; overflow: hidden; /* For sheen mask */
  padding: 2.5rem; border: none; /* We use precise inset shadows instead of borders */
  transition: opacity 0.4s ease, filter 0.4s ease, background-color 0.8s ease, box-shadow 0.8s ease, backdrop-filter 0.8s ease, -webkit-backdrop-filter 0.8s ease;
}
/* Volumetric Plasma Core Glow */
.p3-flip-front::before, .p3-flip-back::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 30%, rgba(0, 225, 255, 0.25) 0%, transparent 60%);
  pointer-events: none;
}
.p3-flip-back::before { background: radial-gradient(circle at 50% 50%, rgba(255,170,0,0.2) 0%, transparent 70%); }

/* Diagonal Glass Sheen (Apple Vision Pro Style Shimmer) */
.p3-flip-front::after, .p3-flip-back::after {
  content: ''; position: absolute; inset: -50%; z-index: 15;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.06) 55%, transparent 65%);
  transform: translateX(-100%); transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none; mix-blend-mode: overlay;
}
.p3-flip-card:hover .p3-flip-front::after { transform: translateX(100%); }

.p3-flip-front { 
  background-color: rgb(2,10,20);
  background-image: linear-gradient(160deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.5) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), inset 0 0 0 1px rgba(0,225,255,0.2), inset 0 -20px 40px rgba(0,225,255,0.02), 0 30px 60px rgba(0,0,0,0.9); 
  backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1);
  opacity: 1; pointer-events: auto; filter: contrast(100%) blur(0px);
}
.p3-flip-back {
  background-color: rgb(12,5,0);
  background-image: linear-gradient(160deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.5) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), inset 0 0 0 1px rgba(255,170,0,0.3), inset 0 -20px 40px rgba(255,170,0,0.05), 0 30px 60px rgba(0,0,0,0.9); 
  backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1);
  opacity: 0; pointer-events: none; 
}

@keyframes techSmoothReveal {
  0% { opacity: 0; transform: scale(0.95) translateZ(-20px); filter: blur(20px); }
  100% { opacity: 1; transform: scale(1) translateZ(0); filter: blur(0px); }
}

/* 3D Floating Typography & Hierarchy - AAA BEAUTIFUL */
.p3-flip-front h4, .p3-flip-back h4 { 
  transform: translateZ(50px); font-family: var(--p3-font-mono); font-size: 0.9rem; 
  margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 800; 
  opacity: 0.9; text-shadow: 0 5px 15px rgba(0,0,0,0.8);
  transition: color 0.8s ease, text-shadow 0.8s ease;
}
.p3-flip-front h4 { color: #8be4f7; } 
.p3-flip-back h4 { color: #ffdf99; }

/* Premium Gradient Value Typography */
.p3-flip-value { 
  transform: translateZ(70px); font-family: var(--p3-font-head); font-size: 3rem; font-weight: 900; 
  margin-bottom: 1.2rem; line-height: 1; letter-spacing: -2px;
  /* Massive Metallic Glow Gradient */
  background: linear-gradient(180deg, #ffffff 0%, #aaeaff 40%, #00bfff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(0, 225, 255, 0.4));
  transition: background 0.8s ease, filter 0.8s ease;
}
.p3-flip-card--amber .p3-flip-value {
  background: linear-gradient(180deg, #ffffff 0%, #ffebaa 40%, #ff8c00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 170, 0, 0.4));
  transition: background 0.8s ease, filter 0.8s ease;
}
.p3-flip-value span { 
  font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.7); 
  font-family: var(--p3-font-mono); text-transform: uppercase; letter-spacing: 0.1em; margin-left: 8px;
  -webkit-text-fill-color: rgba(255,255,255,0.7); /* Reset for span inside clipped text */
  transition: color 0.8s ease, -webkit-text-fill-color 0.8s ease;
}

/* Exquisite Premium Pill Badges for Subtext */
.p3-flip-front p { 
  transform: translateZ(40px); font-size: 0.85rem; color: #fff; margin: 0; font-family: var(--p3-font-mono); 
  font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
  /* Glowing Volumetric Badge */
  background: linear-gradient(90deg, rgba(0,225,255,0.1), rgba(0,225,255,0.02) 50%, rgba(0,225,255,0.1)); 
  border: 1px solid rgba(0,225,255,0.3);
  padding: 0.8rem 1.6rem; border-radius: 4px; /* Hard tech edges */
  box-shadow: 0 10px 20px rgba(0,0,0,0.8), inset 0 0 15px rgba(0,225,255,0.2);
  backdrop-filter: blur(10px);
  transition: background 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease, color 0.8s ease, text-shadow 0.8s ease;
}
.p3-flip-back p { 
  transform: translateZ(30px); font-size: 1.1rem; color: rgba(255,255,255,0.9); line-height: 1.7; 
  font-family: var(--p3-font-body), sans-serif; font-weight: 400; padding: 0 1.5rem; text-shadow: 0 2px 5px rgba(0,0,0,1);
  transition: color 0.8s ease, text-shadow 0.8s ease;
}

/* ════════ CSS Mechatronic Data Nodes (Replacement for Emojis) ════════ */
.p3-flip-icon { position: relative; width: 80px; height: 80px; margin-bottom: 2.5rem; transform: translateZ(80px); /* MASSIVE 3D POP */ display: flex; align-items: center; justify-content: center; }

.p3-mech-node { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* The Outer Scanner Ring */
.node-spinner { 
  position: absolute; inset: -10px; border-radius: 50%;
  border: 4px dashed rgba(0,225,255,0.8); opacity: 0.8;
  animation: p3RadarSpin 8s linear infinite; box-shadow: 0 0 25px rgba(0,225,255,0.4), inset 0 0 25px rgba(0,225,255,0.4);
  transition: border-color 0.8s ease, box-shadow 0.8s ease;
}
.node-square-type .node-spinner { border-radius: 15px; animation: p3RadarSpin 12s linear infinite reverse; }
.node-pulse-type .node-spinner { border: 4px dotted rgba(0,225,255,0.8); animation: p3RadarSpin 4s ease-in-out infinite alternate; }

/* Holographic Emoji Core - Maximized Glow Matrix */
.p3-holo-emoji {
  position: absolute; font-size: 3rem;
  /* Pure AAA Hologram Filter Array */
  filter: grayscale(100%) sepia(100%) hue-rotate(150deg) saturate(500%) brightness(1.2) drop-shadow(0 0 20px rgba(0,225,255,0.8)) drop-shadow(0 0 40px rgba(0,225,255,0.4)); 
  animation: p3IconPulse 1.5s infinite alternate ease-in-out;
  z-index: 2;
  transition: filter 0.8s ease;
}

/* Back & Amber Card Styling */
.p3-flip-back .node-spinner, .p3-flip-card--amber .node-spinner { border-color: rgba(255,170,0,0.9); box-shadow: 0 0 25px rgba(255,170,0,0.5), inset 0 0 25px rgba(255,170,0,0.5); }
.p3-flip-back .p3-holo-emoji, .p3-flip-card--amber .p3-holo-emoji { filter: grayscale(100%) sepia(100%) hue-rotate(5deg) saturate(600%) brightness(1.2) drop-shadow(0 0 20px rgba(255,170,0,0.8)) drop-shadow(0 0 40px rgba(255,170,0,0.4)); }

/* Mini requirements nodes */
.node-mini { width: 30px; height: 30px; }
.node-mini .node-spinner { border-width: 2px; box-shadow: 0 0 10px var(--p3-amber); border-color: var(--p3-amber);}
.node-mini .p3-holo-emoji { font-size: 1.2rem; filter: grayscale(100%) sepia(100%) hue-rotate(5deg) saturate(400%) drop-shadow(0 0 10px var(--p3-amber)); animation: none; }

/* Mini requirements nodes */
.node-mini { width: 30px; height: 30px; }
.node-mini .node-core { background: var(--p3-amber); box-shadow: 0 0 20px var(--p3-amber); width: 15px; height: 15px; border-radius: 2px; }

@keyframes coreGlow { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } }

.p3-flip-back h4 { font-family: var(--p3-font-mono); font-size: 1.2rem; color: var(--p3-amber); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.15em; text-shadow: 0 0 10px rgba(255,170,0,0.5); }
.p3-flip-back p { font-size: 1.05rem; color: #fff; margin: 0; line-height: 1.6; opacity: 0.9; }

/* Interactive Hover Glitch */
.p3-flip-card:hover .p3-flip-inner {
  animation: p3BtnGlitchEffect 0.2s forwards;
}

/* Hardcore Requirement Hazard Bars */
.p3-req-row { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; margin-top: 4rem;}
.p3-req-item {
  display: flex; align-items: center; gap: 1.5rem;
  background: rgba(10, 14, 20, 0.9); border: 2px solid rgba(255,170,0,0.2);
  border-left: 6px solid var(--p3-amber); border-radius: 0;
  padding: 1rem 2rem; font-size: 0.95rem; color: #fff; font-family: var(--p3-font-mono); font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase;
  backdrop-filter: blur(10px); transition: all 0.8s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,170,0,0.05);
}
.p3-req-item:hover { 
  border-color: rgba(255,170,0,0.8); background: rgba(255,170,0,0.1); transform: translateY(-5px); 
  box-shadow: 0 15px 40px rgba(0,0,0,0.9), inset 0 0 40px rgba(255,170,0,0.2); 
}
.p3-req-icon { font-size: 1.5rem; filter: grayscale(100%) sepia(100%) hue-rotate(5deg) saturate(500%) drop-shadow(0 0 10px var(--p3-amber)); animation: p3IconPulse 2s infinite alternate; transition: filter 0.8s ease; }

/* ═══════════════════════════════════════════════════════════════
   §4  COURSE JOURNEY - NEO-GLASS TIMELINE
   ═══════════════════════════════════════════════════════════════ */
.p3-journey {
  background: var(--p3-bg-2);
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Atmospheric Grid & Glow */
.p3-journey::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: -2;
}
.p3-journey-ambient {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0,212,255,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ── AAA HUD HEADER ENHANCEMENTS ── */
.p3-hud-header-cont {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 1rem;
  z-index: 10;
}

.p3-hud-top-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 2rem;
  letter-spacing: 0.25em;
}
.p3-hud-top-bar .p3-blink { color: #ff3333; text-shadow: 0 0 10px #ff3333; }
.p3-hud-line {
  height: 1px;
  flex-grow: 1;
  background: linear-gradient(90deg, #333, transparent);
  margin: 0 10px;
}

.p3-hud-tag {
  color: var(--p3-cyan);
  text-shadow: 0 0 10px rgba(0,212,255,0.4);
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
  display: block;
}

.p3-hud-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
  border-bottom: 1px dashed rgba(255,255,255,0.15);
  padding-bottom: 2rem;
}
.p3-hud-title {
  margin-bottom: 0;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.p3-hud-title span { color: var(--p3-cyan); }

.p3-hud-stats {
  display: flex;
  gap: 2.5rem;
}
.p3-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.p3-stat-lbl {
  font-family: var(--p3-font-mono);
  font-size: 0.75rem;
  color: #888;
  letter-spacing: 0.2em;
  margin-bottom: 0.3rem;
}
.p3-stat-val {
  font-family: var(--p3-font-mono);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 15px currentColor;
}

.p3-hud-desc-box {
  position: relative;
  background: rgba(10, 14, 20, 0.7);
  border-left: 3px solid var(--p3-cyan);
  padding: 2.5rem;
  max-width: 850px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.p3-hud-desc-decorate {
  position: absolute;
  width: 25px; height: 25px;
  border: 2px solid var(--p3-cyan);
  opacity: 0.5;
}
.p3-dec-tl { top: -2px; left: -3px; border-right: none; border-bottom: none; }
.p3-dec-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.p3-hud-desc-main {
  font-size: 1.2rem;
  color: #ddd;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.p3-hud-add-text {
  font-size: 0.9rem;
  color: #777;
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.p3-hud-scroll-indicator {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.p3-hud-scroll-indicator .p3-guide-text {
  color: var(--p3-amber);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-shadow: 0 0 10px rgba(255,159,0,0.5);
  white-space: nowrap;
}
.p3-hud-scroll-bar {
  flex-grow: 1;
  height: 2px;
  background: rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.p3-hud-scroll-thumb {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 60px;
  background: var(--p3-amber);
  box-shadow: 0 0 15px var(--p3-amber);
  animation: p3ThumbScroll 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes p3ThumbScroll {
  0% { left: -60px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (max-width: 900px) {
  .p3-hud-title-wrap { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .p3-hud-stats { width: 100%; justify-content: flex-start; gap: 2rem; }
  .p3-stat-item { align-items: flex-start; }
  .p3-hud-scroll-indicator { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .p3-hud-scroll-bar { width: 100%; }
}

/* ── HUD EXTREME ANIMATIONS ── */
.p3-hud-line {
  position: relative;
  overflow: hidden;
}
.p3-hud-line-blip {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 40px;
  background: linear-gradient(90deg, transparent, var(--p3-cyan), transparent);
  animation: p3LineBlip 3s infinite;
}
@keyframes p3LineBlip {
  0% { left: -50px; opacity: 0; transform: scaleX(1); }
  10% { opacity: 1; transform: scaleX(2); }
  50% { left: 100%; opacity: 0; transform: scaleX(1); }
  100% { left: 100%; opacity: 0; }
}

.p3-sys-init { animation: p3FadePulse 4s infinite alternate; }
@keyframes p3FadePulse { 0% { opacity: 0.5; } 100% { opacity: 1; text-shadow: 0 0 10px currentColor; } }

.p3-blink-fast { animation: p3BlinkFast 1s infinite steps(2); }
@keyframes p3BlinkFast { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.p3-shine-text {
  background: linear-gradient(90deg, var(--p3-cyan) 0%, #fff 50%, var(--p3-cyan) 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: p3Shine 4s linear infinite;
}
@keyframes p3Shine { to { background-position: 200% center; } }

.p3-stat-item { position: relative; }
.p3-stat-ring {
  position: absolute;
  top: 50%; right: -20px;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 50%;
  animation: p3SpinRing 15s linear infinite;
  z-index: -1;
}
.p3-stat-item:hover .p3-stat-ring { border-color: var(--p3-cyan); box-shadow: 0 0 15px var(--p3-cyan); animation-duration: 3s; }
.p3-delay-1 { animation-delay: -3s; animation-direction: reverse; }
.p3-delay-2 { animation-delay: -7s; }
@keyframes p3SpinRing { 100% { transform: translateY(-50%) rotate(360deg); } }

.p3-glitch-1 { animation: p3NumberGlitch 5s infinite; }
.p3-glitch-2 { animation: p3NumberGlitch 7s infinite 2s; }
.p3-glitch-3 { animation: p3NumberGlitch 4s infinite 1s; }
@keyframes p3NumberGlitch {
  0%, 95%, 100% { transform: translate(0); text-shadow: 0 0 15px currentColor; }
  96% { transform: translate(-2px, 1px); text-shadow: -2px 0 #ff00c1, 2px 0 #00fff9; }
  98% { transform: translate(2px, -1px); text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9; }
}

.p3-scan-bg {
  position: relative;
  overflow: hidden;
}
.p3-scan-bg::before {
  content: '';
  position: absolute;
  top: -100%; left: 0; right: 0; height: 200%;
  background: linear-gradient(to bottom, transparent, rgba(0,212,255,0.05) 50%, transparent);
  animation: p3ScanBg 6s infinite linear;
  pointer-events: none;
  z-index: -1;
}
@keyframes p3ScanBg { to { transform: translateY(100%); } }

.p3-hud-console {
  margin-bottom: 2.5rem;
  background: rgba(0,0,0,0.4);
  padding: 1rem 1.5rem;
  border-left: 2px solid rgba(255,255,255,0.1);
}
.p3-cmd-line {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.8;
  white-space: nowrap;
  overflow: hidden;
}
.p3-loading-dots {
  display: inline-block;
  clip-path: inset(0 3ch 0 0);
  animation: p3Dots 1.5s steps(4) infinite;
}
@keyframes p3Dots { to { clip-path: inset(0 -1ch 0 0); } }

.p3-cmd-success { animation: p3CmdFlash 3s infinite; }
@keyframes p3CmdFlash {
  0%, 90% { opacity: 1; }
  92%, 96% { opacity: 0.3; }
  94%, 98% { opacity: 1; }
}

/* ── ADDITIONAL MAX-OVERDRIVE ANIMATIONS ── */
/* Rotating Wireframe */
.p3-hud-bg-wireframe {
  position: absolute;
  top: 50%; right: 10%;
  transform: translateY(-50%);
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px dashed rgba(0,212,255,0.08);
  background: 
    conic-gradient(from 0deg, transparent 0deg, rgba(0,212,255,0.03) 5deg, transparent 10deg),
    repeating-radial-gradient(transparent, transparent 50px, rgba(0,212,255,0.04) 51px);
  animation: p3SpinWireframe 60s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes p3SpinWireframe { to { transform: translateY(-50%) rotate(360deg); } }

/* Vertical Scanning Ruler */
.p3-hud-ruler {
  position: absolute;
  top: 0; left: -25px;
  height: 100%; width: 4px;
  border-left: 2px dotted rgba(255,255,255,0.1);
  z-index: 5;
}
.p3-ruler-scanner {
  position: absolute;
  top: 0; left: -6px;
  width: 14px; height: 40px;
  border: 2px solid var(--p3-cyan);
  border-right: none;
  background: rgba(0,212,255,0.25);
  animation: p3ScanVert 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes p3ScanVert { 0% { top: 0%; transform: scaleY(1); } 50% { transform: scaleY(1.3); } 100% { top: calc(100% - 40px); transform: scaleY(1); } }

/* Hex Matrix Stream */
.p3-hud-matrix {
  position: absolute;
  top: 10px; right: -50px;
  font-size: 0.70rem;
  color: var(--p3-amber);
  opacity: 0.35;
  line-height: 1.8;
  text-align: right;
  z-index: 5;
  clip-path: inset(0 0 50% 0);
  animation: p3MatrixScroll 3s steps(8) infinite alternate;
}
@keyframes p3MatrixScroll {
  0% { clip-path: inset(0 0 70% 0); transform: translateY(-10px); }
  100% { clip-path: inset(30% 0 0% 0); transform: translateY(10px); }
}

/* Tracking Crosshairs */
.p3-hud-crosshair {
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid var(--p3-cyan);
  animation: p3PulseCrosshair 1.5s infinite alternate;
  z-index: 10;
}
.p3-ch-tl { top: -8px; left: -8px; border-right: none; border-bottom: none; }
.p3-ch-tr { top: -8px; right: -8px; border-left: none; border-bottom: none; }
.p3-ch-bl { bottom: -8px; left: -8px; border-right: none; border-top: none; }
.p3-ch-br { bottom: -8px; right: -8px; border-left: none; border-top: none; }
@keyframes p3PulseCrosshair {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 12px var(--p3-cyan); }
}

/* Chevron Warning Strip */
.p3-hud-chevron-bar {
  margin-top: 2rem;
  width: 100%;
  height: 6px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,159,0,0.4),
    rgba(255,159,0,0.4) 10px,
    transparent 10px,
    transparent 20px
  );
  background-size: 28px 100%;
  animation: p3SlideChevron 0.8s linear infinite;
}
@keyframes p3SlideChevron { to { background-position: -28px 0; } }

/* ── GREEDY OVERDRIVE LAYER ── */
.p3-particles-container {
   position: absolute;
   inset: -100px;
   pointer-events: none;
   z-index: 100;
   overflow: hidden;
}
.p3-p-dot {
   position: absolute;
   width: 2px; height: 2px;
   background: var(--p3-cyan);
   border-radius: 50%;
   box-shadow: 0 0 8px var(--p3-cyan);
   animation: p3Float linear infinite;
   opacity: 0.8;
}
.p1 { top: 10%; left: 10%; animation: p3Float1 12s linear infinite; }
.p2 { top: 30%; left: 80%; animation: p3Float2 8s linear infinite; }
.p3 { top: 80%; left: 20%; animation: p3Float1 15s linear infinite reverse; }
.p4 { top: 60%; left: 50%; animation: p3Float2 10s linear infinite; }
.p5 { top: 15%; left: 60%; animation: p3Float1 9s linear infinite; }
.p6 { top: 75%; left: 85%; animation: p3Float2 11s linear infinite reverse; }
.p7 { top: 90%; left: 10%; animation: p3Float1 14s linear infinite; }
.p8 { top: 45%; left: 15%; animation: p3Float2 16s linear infinite; }

@keyframes p3Float1 { 100% { transform: translate(150px, -150px) scale(0); opacity: 0; } }
@keyframes p3Float2 { 100% { transform: translate(-150px, -200px) scale(2); opacity: 0; } }

.p3-hud-radar {
    position: absolute;
    bottom: -40px; right: -20px;
    width: 100px; height: 100px;
    border: 1px dotted rgba(255,159,0,0.5);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}
.p3-radar-sweep {
    position: absolute;
    top: 0; left: 50%; height: 50%; width: 50%;
    background: conic-gradient(from 0deg at 0 100%, rgba(255,159,0,0.5) 0deg, transparent 45deg);
    transform-origin: 0 100%;
    animation: p3RadarSpin 2s linear infinite;
}
@keyframes p3RadarSpin { to { transform: rotate(360deg); } }

.p3-hud-glitch-layer {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 2px, transparent 2px, transparent 4px);
    opacity: 0.1;
    z-index: 99;
    pointer-events: none;
    animation: p3FullGlitch 10s infinite;
}
@keyframes p3FullGlitch {
    0%, 96%, 100% { transform: translateY(0); opacity: 0.1; }
    97% { transform: translateY(5px); opacity: 0.5; filter: hue-rotate(90deg); }
    98% { transform: translateY(-5px); opacity: 0.1; filter: invert(1); }
    99% { transform: translateY(0px); opacity: 0.3; }
}

.p3-side-bracket {
   position: absolute;
   top: 15%; height: 70%; width: 15px;
   border: 3px solid rgba(0,212,255,0.1);
   pointer-events: none;
   z-index: 1;
   animation: p3BracketPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
.left-b { left: -50px; border-right: none; }
.right-b { right: -50px; border-left: none; }
@keyframes p3BracketPulse {
    to { height: 80%; top: 10%; transform: scaleX(1.5); border-color: rgba(0,212,255,0.4); box-shadow: inset 0 0 15px rgba(0,212,255,0.2); }
}

.p3-timeline-wrap {
  width: 100%;
  padding-bottom: 2rem;
}

.p3-timeline-track {
  display: flex;
  gap: 2rem;
  padding: 4rem max(2.5rem, calc((100vw - 1200px) / 2)) 4rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  align-items: stretch; /* Cards and milestones stretch to same height */
  cursor: grab;
}
.p3-timeline-track::-webkit-scrollbar { display: none; }
.p3-timeline-track:active { cursor: grabbing; }

/* ── INTERMEDIARY MILESTONES ── */
.p3-timeline-milestone {
  flex: 0 0 140px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.p3-timeline-milestone.p3-revealed {
  opacity: 1;
  transform: scale(1);
}

.p3-ml-line-top, .p3-ml-line-bottom {
  width: 2px;
  flex-grow: 1;
  background: linear-gradient(to bottom, transparent, currentColor, transparent);
  opacity: 0.3;
}
.p3-ml-node {
  width: 50px;
  height: 50px;
  margin: 1.5rem 0;
  border: 2px solid currentColor;
  background: rgba(10,14,20,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px currentColor, inset 0 0 10px currentColor;
  transition: all 0.3s;
  position: relative;
  /* Make it a hexagon layout mask for high tech feel */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.p3-node-inner {
  width: 24px;
  height: 24px;
  border: 2px dashed currentColor;
  border-radius: 50%;
  animation: p3Spin 6s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p3-node-inner::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: p3PulseNode 1s infinite alternate;
}
@keyframes p3Spin { 100% { transform: rotate(360deg); } }
@keyframes p3PulseNode { 0% { transform: scale(0.6); opacity: 0.4; } 100% { transform: scale(1.4); opacity: 1; } }

.p3-ml-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(75px) rotate(-90deg);
  white-space: nowrap;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  color: currentColor;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.p3-timeline-milestone:hover .p3-ml-node { transform: scale(1.15); box-shadow: 0 0 40px currentColor, inset 0 0 20px currentColor; }
.p3-timeline-milestone:hover .p3-ml-text { opacity: 1; transform: translateY(-50%) translateX(95px) rotate(-90deg); text-shadow: 0 0 15px currentColor; }

.p3-ml-cyan { color: var(--p3-cyan); }
.p3-ml-amber { color: var(--p3-amber); }
.p3-ml-purple { color: var(--p3-purple); }

/* ── NEO-GLASS PHASE CARDS ── */
.p3-timeline-card {
  flex: 0 0 680px;
  scroll-snap-align: center;
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(8, 12, 18, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 4.5rem 4rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  /* Removed opacity/translateY reveal to fix horizontal scroll-snap glitching */
}

/* CYBER-UI DECORATIONS */
.p3-tc-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}
.p3-tc-scanline {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: p3Scanline 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes p3Scanline { 0% { background-position: 0 -200%; } 100% { background-position: 0 200%; } }

/* BRAND NEW CARD OVERDRIVE DECORATIONS */
.p3-tc-mesh {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,212,255,0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: p3MeshPan 20s linear infinite;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}
@keyframes p3MeshPan { to { background-position: 40px 40px; } }

.p3-tc-tracker {
  position: absolute;
  top: 15%; bottom: 15%; left: 1rem;
  width: 2px;
  background: rgba(255,255,255,0.05);
  z-index: 5;
}
.p3-tc-tracker-blip {
  position: absolute;
  top: 0; left: -2px; width: 6px; height: 30px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: p3TrackerDrop 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes p3TrackerDrop {
   0% { top: 0; opacity: 1; height: 30px; }
   80% { top: 100%; opacity: 0; height: 30px; }
   100% { top: 100%; opacity: 0; height: 0; }
}

.p3-timeline-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  opacity: 0;
  pointer-events: none;
  animation: p3BorderFlash 6s infinite;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
  z-index: 10;
}
@keyframes p3BorderFlash {
  0%, 90% { opacity: 0; transform: scale(1.01); }
  92% { opacity: 0.4; transform: scale(1); box-shadow: inset 0 0 20px currentColor; }
  100% { opacity: 0; transform: scale(1.01); }
}

.p3-tc-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255,255,255,0.4);
  pointer-events: none;
  z-index: 5;
  transition: border-color 0.4s;
}
.p3-tc-tl { top: 15px; left: 15px; border-right: none; border-bottom: none; }
.p3-tc-tr { top: 15px; right: 15px; border-left: none; border-bottom: none; }
.p3-tc-bl { bottom: 15px; left: 15px; border-right: none; border-top: none; }
.p3-tc-br { bottom: 15px; right: 15px; border-left: none; border-top: none; width: 0; height: 0; border: none; } /* Disabled due to clip angle */

.p3-tc-barcode {
  position: absolute;
  right: 25px;
  bottom: 60px;
  width: 4px;
  height: 80px;
  background: repeating-linear-gradient(to bottom, currentColor 0, currentColor 2px, transparent 2px, transparent 6px, currentColor 6px, currentColor 10px, transparent 10px, transparent 12px);
  opacity: 0.15;
}

/* Card Glow Overlays */
.p3-tc-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 0%, currentColor, transparent 50%);
  opacity: 0.05;
  pointer-events: none;
  transition: opacity 0.5s;
  z-index: 0;
}
.p3-timeline-card:hover .p3-tc-glow { opacity: 0.15; }
.p3-timeline-card:hover .p3-tc-corner { border-color: currentColor; }

.p3-tc-cyan { color: var(--p3-cyan); border-top: 3px solid var(--p3-cyan); }
.p3-tc-amber { color: var(--p3-amber); border-top: 3px solid var(--p3-amber); }
.p3-tc-purple { color: var(--p3-purple); border-top: 3px solid var(--p3-purple); }

.p3-timeline-card:hover {
  transform: translateY(-10px);
  border-color: currentColor;
  box-shadow: 0 40px 80px rgba(0,0,0,0.9), inset 0 0 50px currentColor;
}

/* Header & Typography */
.p3-tc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed rgba(255,255,255,0.15);
  position: relative;
  z-index: 5;
}
.p3-tc-head-group { display: flex; align-items: center; gap: 1rem; }
.p3-tc-num {
  font-size: 1rem;
  font-family: var(--p3-font-mono);
  color: currentColor;
  letter-spacing: 0.25em;
  font-weight: 800;
  text-shadow: 0 0 15px currentColor;
}
.p3-tc-badge {
  font-family: var(--p3-font-mono);
  font-size: 0.75rem;
  padding: 0.4rem 1.2rem;
  border-radius: 4px; /* Techy sharp edges */
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.p3-tc-status {
  font-size: 0.75rem;
  color: #666;
  letter-spacing: 0.1em;
}
.p3-blink { animation: p3BlinkText 2s infinite; color: currentColor; }
@keyframes p3BlinkText { 0%, 48%, 100% { opacity: 1; text-shadow: 0 0 8px currentColor; } 50%, 98% { opacity: 0.2; text-shadow: none; } }

.p3-tc-code {
  font-family: var(--p3-font-mono);
  font-size: 0.95rem;
  color: #777;
  margin-bottom: 1rem;
  position: relative;
  z-index: 5;
  letter-spacing: 0.05em;
}
.p3-tc-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1.5rem;
  font-family: var(--p3-font-sans);
}
.p3-tc-title span {
  font-weight: 300;
  color: currentColor;
  background: linear-gradient(90deg, currentColor 0%, #fff 50%, currentColor 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: p3CardShine 5s linear infinite;
}
@keyframes p3CardShine { to { background-position: 200% center; } }

.p3-tc-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--p3-font-mono);
  font-size: 0.85rem;
  color: #ccc;
  margin-bottom: 1.5rem;
  background: rgba(0,0,0,0.3);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}
.p3-meta-dot {
  width: 14px; height: 14px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  position: relative;
  animation: p3Spin 4s linear infinite;
}
.p3-meta-dot::after {
  content: '';
  position: absolute; inset: 3px;
  background: currentColor;
  border-radius: 50%;
}

.p3-tc-desc {
  font-size: 1.1rem;
  color: #aaa;
  line-height: 1.7;
  margin-bottom: 3rem;
  flex-grow: 1; /* Pushes modules to bottom if descriptions vary in length */
}

/* Module Grid - NO SCROLLING, purely beautiful layout */
.p3-tc-modules-title {
  font-family: var(--p3-font-mono);
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
}
.p3-tc-modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1.2rem;
  column-gap: 2rem;
}
.p3-tc-mod-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.4;
  transition: transform 0.3s ease, color 0.3s ease;
  position: relative;
}
.p3-tc-mod-item::before {
  content: '>';
  position: absolute;
  left: -15px; top: 0;
  color: currentColor;
  opacity: 0;
  transition: all 0.3s ease;
}
.p3-tc-mod-item:hover { transform: translateX(12px); color: #fff; text-shadow: 0 0 10px currentColor; }
.p3-tc-mod-item:hover::before { opacity: 1; left: -12px; }

.p3-tc-mod-num {
  font-family: var(--p3-font-mono);
  font-size: 0.75rem;
  color: currentColor;
  opacity: 0.8;
  margin-top: 0.15rem;
  animation: p3ModBlink 6s random infinite alternate;
}
@keyframes p3ModBlink {
  0%, 98% { opacity: 0.8; text-shadow: none; }
  99% { opacity: 0.1; }
  100% { opacity: 1; text-shadow: 0 0 10px currentColor; }
}

/* ── PHASE 1 EXCLUSIVE OVERDRIVE ── */
.p3-phase1-overdrive {
  position: relative;
}
.p3-p1-core-engine {
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 1px dashed rgba(0,212,255,0.1);
  background: radial-gradient(circle, transparent 40%, rgba(0,212,255,0.03) 60%, transparent 80%);
  pointer-events: none;
  z-index: 0;
  animation: p3P1Core 20s linear infinite;
}
.p3-p1-ring-1, .p3-p1-ring-2 {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 2px dotted rgba(0,212,255,0.25);
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: p3P1Core 10s linear infinite reverse;
}
.p3-p1-ring-2 {
  inset: 40px;
  border: 1px solid rgba(0,212,255,0.15);
  animation-duration: 5s;
  animation-direction: normal;
}
@keyframes p3P1Core { to { transform: rotate(360deg); } }

.p3-p1-radar-sweep {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0,212,255,0.4) 0deg, transparent 60deg, transparent 360deg);
  animation: p3P1Radar 2s linear infinite;
}
@keyframes p3P1Radar { to { transform: rotate(360deg); } }

.p3-p1-data-stream {
  position: absolute;
  left: 20px; top: 35%;
  font-size: 0.55rem;
  color: var(--p3-cyan);
  opacity: 0.4;
  line-height: 2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  animation: p3P1DataStream 4s steps(3) infinite alternate;
  z-index: 2;
  pointer-events: none;
}
@keyframes p3P1DataStream {
   0% { opacity: 0.1; letter-spacing: 2px; }
   100% { opacity: 0.7; letter-spacing: 5px; text-shadow: 0 0 5px var(--p3-cyan); }
}

.p3-p1-progress-bar {
  position: absolute;
  bottom: 0px; left: 80px; right: 80px;
  height: 3px;
  background: rgba(255,255,255,0.05);
  z-index: 10;
}
.p3-p1-progress-fill {
  height: 100%;
  background: var(--p3-cyan);
  box-shadow: 0 0 10px var(--p3-cyan);
  animation: p3P1ProgressLoad 10s ease-in-out infinite;
}
@keyframes p3P1ProgressLoad {
  0% { width: 0%; opacity: 1; }
  50% { width: 100%; opacity: 1; }
  51% { width: 100%; opacity: 0; }
  100% { width: 0%; opacity: 0; }
}

.p3-p1-hor-laser {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--p3-cyan);
  box-shadow: 0 0 15px var(--p3-cyan), 0 0 5px #fff;
  z-index: 20;
  pointer-events: none;
  animation: p3P1Laserscan 6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes p3P1Laserscan {
   0% { top: 0; opacity: 0; }
   10% { opacity: 0.8; }
   90% { opacity: 0.8; }
   100% { top: 100%; opacity: 0; }
}

.p3-p1-grid-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 250px;
  background-image: 
    linear-gradient(rgba(0,212,255,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.2) 1px, transparent 1px);
  background-size: 30px 40px;
  transform: perspective(400px) rotateX(70deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent);
  z-index: 0;
  animation: p3GridMove 5s linear infinite;
  pointer-events: none;
}
@keyframes p3GridMove { to { background-position: 0 40px; } }

.p3-p1-hex-particles span {
  position: absolute;
  bottom: -20px;
  width: 25px; height: 28px;
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.4);
  box-shadow: inset 0 0 10px rgba(0,212,255,0.2);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: p3HexFloat 8s linear infinite;
  z-index: 2;
}
.hx1 { left: 15%; animation-duration: 9s; animation-delay: 0s; }
.hx2 { left: 50%; animation-duration: 12s; animation-delay: 3s; transform: scale(1.5); }
.hx3 { left: 80%; animation-duration: 10s; animation-delay: 1s; transform: scale(0.8); }

@keyframes p3HexFloat {
   0% { transform: translateY(0) rotate(0deg); opacity: 0; }
   20% { opacity: 1; }
   80% { opacity: 1; }
   100% { transform: translateY(-400px) rotate(360deg); opacity: 0; }
}

/* ── PHASE 1 CINEMATIC LAYER ── */

/* Sonar Ping — expanding rings from the core engine */
.p3-p1-sonar-ping {
  position: absolute;
  top: 50px; right: 50px;
  width: 10px; height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
.p3-p1-sonar-ping::before,
.p3-p1-sonar-ping::after {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1px solid var(--p3-cyan);
  opacity: 0;
  animation: p3P1Sonar 3s ease-out infinite;
}
.p3-p1-sonar-ping::after {
  animation-delay: 1.5s;
}
@keyframes p3P1Sonar {
  0% { transform: scale(0.3); opacity: 0.8; }
  100% { transform: scale(4); opacity: 0; }
}

/* Energy Pulse Ring — horizontally across the card */
.p3-p1-energy-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(0,212,255,0.3);
  border-right-color: rgba(0,212,255,0.12);
  pointer-events: none;
  z-index: 0;
  animation: p3P1EnergyPulse 8s linear infinite;
  opacity: 0.5;
}
@keyframes p3P1EnergyPulse {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.6); opacity: 0; }
  30% { opacity: 0.5; }
  70% { opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); opacity: 0; }
}

/* SVG Circuit-Board Traces — self-drawing paths */
.p3-p1-circuit-traces {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
}
.p3-p1-circuit-traces svg {
  width: 100%; height: 100%;
}
.p3-p1-trace {
  fill: none;
  stroke: var(--p3-cyan);
  stroke-width: 1;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: p3P1TraceDraw 6s ease-in-out infinite alternate;
}
.t2 { animation-delay: 2s; stroke: rgba(0,212,255,0.6); }
.t3 { animation-delay: 4s; stroke: rgba(0,212,255,0.4); }
@keyframes p3P1TraceDraw {
  0% { stroke-dashoffset: 800; }
  100% { stroke-dashoffset: 0; }
}
.p3-p1-trace-node {
  fill: transparent;
  stroke: var(--p3-cyan);
  stroke-width: 1.5;
  animation: p3P1NodePulse 2s ease-in-out infinite alternate;
}
.tn2 { animation-delay: 0.5s; }
.tn3 { animation-delay: 1s; }
@keyframes p3P1NodePulse {
  0% { r: 2; fill: transparent; opacity: 0.3; }
  100% { r: 6; fill: rgba(0,212,255,0.3); opacity: 1; filter: drop-shadow(0 0 6px var(--p3-cyan)); }
}

/* Diagonal Wipe — periodic cinematic light sweep */
.p3-p1-diag-wipe {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -45deg,
    transparent 0%, transparent 40%,
    rgba(0,212,255,0.08) 48%,
    rgba(255,255,255,0.12) 50%,
    rgba(0,212,255,0.08) 52%,
    transparent 60%, transparent 100%
  );
  background-size: 400% 400%;
  animation: p3P1DiagWipe 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 15;
}
@keyframes p3P1DiagWipe {
  0%, 70% { background-position: 150% 150%; }
  100% { background-position: -50% -50%; }
}

/* Data Waterfall — cascading hex values down the right edge */
.p3-p1-data-waterfall {
  position: absolute;
  top: 0; right: 40px; bottom: 0;
  width: 50px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.p3-p1-data-waterfall span {
  display: block;
  font-size: 0.55rem;
  color: var(--p3-cyan);
  opacity: 0.15;
  line-height: 2.8;
  text-align: right;
  animation: p3P1WaterfallDrop 6s linear infinite;
}
.p3-p1-data-waterfall span:nth-child(2n) { animation-delay: -0.6s; opacity: 0.25; }
.p3-p1-data-waterfall span:nth-child(3n) { animation-delay: -1.2s; opacity: 0.1; }
.p3-p1-data-waterfall span:nth-child(5n) { animation-delay: -2s; color: var(--p3-amber); opacity: 0.2; }
@keyframes p3P1WaterfallDrop {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* Holographic Protocol Badge */
.p3-p1-holo-badge {
  position: absolute;
  bottom: 60px; right: 30px;
  font-size: 0.6rem;
  color: var(--p3-cyan);
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 1.6;
  padding: 0.8rem 1.2rem;
  border: 1px solid rgba(0,212,255,0.2);
  background: rgba(0,212,255,0.03);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
  pointer-events: none;
  animation: p3P1HoloBadge 4s ease-in-out infinite alternate;
}
@keyframes p3P1HoloBadge {
  0% { opacity: 0.3; border-color: rgba(0,212,255,0.1); transform: translateY(3px); }
  50% { opacity: 0.8; border-color: rgba(0,212,255,0.5); box-shadow: 0 0 20px rgba(0,212,255,0.15), inset 0 0 15px rgba(0,212,255,0.05); }
  100% { opacity: 0.4; border-color: rgba(0,212,255,0.15); transform: translateY(-3px); }
}

/* ── PHASE 1 ULTRA LAYER ── */

/* Scrolling Data Ticker */
.p3-p1-ticker {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 20px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
}
.p3-p1-ticker-inner {
  white-space: nowrap;
  font-size: 0.6rem;
  color: var(--p3-cyan);
  letter-spacing: 0.15em;
  line-height: 20px;
  animation: p3P1Ticker 20s linear infinite;
}
@keyframes p3P1Ticker { to { transform: translateX(-50%); } }

/* EKG Heartbeat Monitor */
.p3-p1-ekg {
  position: absolute;
  bottom: 25px; left: 30px;
  width: 200px; height: 30px;
  pointer-events: none;
  z-index: 6;
  opacity: 0.4;
}
.p3-p1-ekg svg { width: 100%; height: 100%; overflow: visible; }
.p3-p1-ekg-line {
  fill: none;
  stroke: var(--p3-cyan);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: p3P1EkgDraw 3s linear infinite;
  filter: drop-shadow(0 0 3px var(--p3-cyan));
}
@keyframes p3P1EkgDraw {
  0% { stroke-dashoffset: 800; }
  100% { stroke-dashoffset: 0; }
}

/* Hex Reticle around Phase Number */
.p3-p1-hex-reticle {
  position: absolute;
  top: 52px; left: 70px;
  width: 60px; height: 60px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px solid rgba(0,212,255,0.3);
  animation: p3P1Reticle 6s linear infinite;
  pointer-events: none;
  z-index: 6;
}
.p3-p1-hex-reticle::before {
  content: '';
  position: absolute;
  inset: 6px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1px dashed rgba(0,212,255,0.5);
  animation: p3P1Reticle 4s linear infinite reverse;
}
@keyframes p3P1Reticle { to { transform: rotate(360deg); } }

/* Periodic Glitch Flash */
.p3-p1-glitch-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,212,255,0.03) 20%,
    transparent 21%,
    rgba(0,212,255,0.05) 40%,
    transparent 41%,
    rgba(255,255,255,0.08) 60%,
    transparent 61%
  );
  animation: p3P1GlitchFlash 12s infinite;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}
@keyframes p3P1GlitchFlash {
  0%, 88%, 100% { opacity: 0; transform: translateX(0); }
  89% { opacity: 1; transform: translateX(-3px) skewX(-0.5deg); }
  90% { opacity: 1; transform: translateX(5px) skewX(1deg); }
  91% { opacity: 0.5; transform: translateX(-2px); }
  92% { opacity: 0; transform: translateX(0); }
}

/* Rotating Corner Lock Brackets */
.p3-p1-corner-lock {
  position: absolute;
  width: 45px; height: 45px;
  border: 2px solid rgba(0,212,255,0.2);
  pointer-events: none;
  z-index: 6;
  animation: p3P1CornerSpin 10s linear infinite;
}
.p3-cl-1 {
  top: 40px; left: 40px;
  border-right: none; border-bottom: none;
  animation-direction: normal;
}
.p3-cl-2 {
  bottom: 55px; right: 55px;
  border-left: none; border-top: none;
  animation-direction: reverse;
}
@keyframes p3P1CornerSpin {
  0% { transform: rotate(0deg) scale(1); opacity: 0.3; }
  25% { transform: rotate(90deg) scale(1.1); opacity: 0.7; border-color: rgba(0,212,255,0.6); }
  50% { transform: rotate(180deg) scale(1); opacity: 0.3; }
  75% { transform: rotate(270deg) scale(1.1); opacity: 0.7; border-color: rgba(0,212,255,0.6); }
  100% { transform: rotate(360deg) scale(1); opacity: 0.3; }
}

/* Signal Strength Bars */
.p3-p1-signal-bars {
  position: absolute;
  top: 65px; right: 55px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  pointer-events: none;
  z-index: 6;
}
.p3-p1-signal-bars span {
  display: block;
  width: 3px;
  background: var(--p3-cyan);
  animation: p3P1SignalPulse 2s ease-in-out infinite alternate;
}
.p3-p1-signal-bars span:nth-child(1) { height: 4px; animation-delay: 0s; }
.p3-p1-signal-bars span:nth-child(2) { height: 7px; animation-delay: 0.15s; }
.p3-p1-signal-bars span:nth-child(3) { height: 10px; animation-delay: 0.3s; }
.p3-p1-signal-bars span:nth-child(4) { height: 14px; animation-delay: 0.45s; }
.p3-p1-signal-bars span:nth-child(5) { height: 18px; animation-delay: 0.6s; }
@keyframes p3P1SignalPulse {
  0% { opacity: 0.3; box-shadow: none; }
  100% { opacity: 1; box-shadow: 0 0 6px var(--p3-cyan); }
}

/* ══════════════════════════════════════════════════
   PHASE 2 EXCLUSIVE OVERDRIVE — INDUSTRIAL MECHANICAL
   ══════════════════════════════════════════════════ */
.p3-phase2-overdrive { position: relative; }

/* Interlocking Gear System — top-left corner */
.p3-p2-gear-system {
  position: absolute;
  top: -30px; left: -30px;
  width: 180px; height: 180px;
  pointer-events: none;
  z-index: 0;
}
.p3-p2-gear {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(255,159,0,0.2);
  animation: p3P2GearSpin 12s linear infinite;
}
.g1 {
  width: 120px; height: 120px;
  top: 0; left: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 30deg,
    rgba(255,159,0,0.06) 30deg 60deg,
    transparent 60deg 90deg,
    rgba(255,159,0,0.06) 90deg 120deg,
    transparent 120deg 150deg,
    rgba(255,159,0,0.06) 150deg 180deg,
    transparent 180deg 210deg,
    rgba(255,159,0,0.06) 210deg 240deg,
    transparent 240deg 270deg,
    rgba(255,159,0,0.06) 270deg 300deg,
    transparent 300deg 330deg,
    rgba(255,159,0,0.06) 330deg 360deg
  );
}
.g2 {
  width: 80px; height: 80px;
  bottom: 10px; right: 10px;
  animation-direction: reverse;
  animation-duration: 8s;
  background: conic-gradient(
    from 15deg,
    transparent 0deg 45deg,
    rgba(255,159,0,0.08) 45deg 90deg,
    transparent 90deg 135deg,
    rgba(255,159,0,0.08) 135deg 180deg,
    transparent 180deg 225deg,
    rgba(255,159,0,0.08) 225deg 270deg,
    transparent 270deg 315deg,
    rgba(255,159,0,0.08) 315deg 360deg
  );
}
@keyframes p3P2GearSpin { to { transform: rotate(360deg); } }

/* Scrolling Blueprint Grid */
.p3-p2-blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,159,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,159,0,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: p3P2BlueprintPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
@keyframes p3P2BlueprintPan { to { background-position: 40px 40px; } }

/* Oscilloscope Waveform — bottom area */
.p3-p2-oscilloscope {
  position: absolute;
  bottom: 15px; left: 30px;
  width: 220px; height: 35px;
  pointer-events: none;
  z-index: 6;
  opacity: 0.35;
  overflow: hidden;
}
.p3-p2-oscilloscope svg { width: 200%; height: 100%; }
.p3-p2-wave {
  fill: none;
  stroke: var(--p3-amber);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--p3-amber));
  animation: p3P2WaveScroll 2s linear infinite;
}
@keyframes p3P2WaveScroll { to { transform: translateX(-50%); } }

/* Vertical Thermal Gauge — right side */
.p3-p2-thermal-gauge {
  position: absolute;
  top: 120px; right: 18px;
  width: 8px; height: 160px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,159,0,0.15);
  border-radius: 4px;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}
.p3-p2-gauge-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, var(--p3-amber), rgba(255,60,0,0.8));
  border-radius: 0 0 3px 3px;
  animation: p3P2GaugePulse 5s ease-in-out infinite alternate;
}
@keyframes p3P2GaugePulse {
  0% { height: 30%; box-shadow: 0 0 5px var(--p3-amber); }
  50% { height: 75%; box-shadow: 0 0 12px rgba(255,60,0,0.6); }
  100% { height: 55%; box-shadow: 0 0 8px var(--p3-amber); }
}
.p3-p2-gauge-markers {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}
.p3-p2-gauge-markers span {
  display: block;
  height: 1px;
  background: rgba(255,255,255,0.15);
}

/* Warning Beacon — pulses from center */
.p3-p2-beacon {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.p3-p2-beacon::before,
.p3-p2-beacon::after {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px solid var(--p3-amber);
  animation: p3P2Beacon 4s ease-out infinite;
  opacity: 0;
}
.p3-p2-beacon::after { animation-delay: 2s; }
@keyframes p3P2Beacon {
  0% { transform: scale(0.2); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

/* Mechanical Compass — bottom-right */
.p3-p2-compass {
  position: absolute;
  bottom: 50px; right: 50px;
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(255,159,0,0.25);
  pointer-events: none;
  z-index: 5;
}
.p3-p2-compass::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255,159,0,0.15);
}
.p3-p2-compass-needle {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 28px;
  margin-left: -1px; margin-top: -14px;
  background: linear-gradient(to bottom, var(--p3-amber) 0%, var(--p3-amber) 50%, rgba(255,255,255,0.3) 50%);
  transform-origin: center center;
  animation: p3P2CompassSway 6s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255,159,0,0.3);
}
@keyframes p3P2CompassSway {
  0% { transform: rotate(-15deg); }
  25% { transform: rotate(25deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(20deg); }
  100% { transform: rotate(-15deg); }
}

/* Data Uplink Ticker */
.p3-p2-uplink-ticker {
  position: absolute;
  top: 60%; left: 0; right: 0;
  height: 18px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0.1;
}
.p3-p2-ticker-scroll {
  white-space: nowrap;
  font-size: 0.55rem;
  color: var(--p3-amber);
  letter-spacing: 0.12em;
  line-height: 18px;
  animation: p3P2TickerScroll 25s linear infinite;
}
@keyframes p3P2TickerScroll { to { transform: translateX(-50%); } }

/* Industrial Classification Stamp */
.p3-p2-stamp {
  position: absolute;
  bottom: 75px; left: 30px;
  font-size: 0.55rem;
  color: var(--p3-amber);
  text-align: center;
  letter-spacing: 0.15em;
  line-height: 1.5;
  padding: 0.6rem 1rem;
  border: 2px solid rgba(255,159,0,0.15);
  background: rgba(255,159,0,0.02);
  pointer-events: none;
  z-index: 5;
  animation: p3P2StampBreathe 5s ease-in-out infinite alternate;
  transform: rotate(-3deg);
}
@keyframes p3P2StampBreathe {
  0% { opacity: 0.2; border-color: rgba(255,159,0,0.1); }
  100% { opacity: 0.7; border-color: rgba(255,159,0,0.5); box-shadow: 0 0 15px rgba(255,159,0,0.1); }
}

/* Horizontal Orange Sweep */
.p3-p2-hor-sweep {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--p3-amber);
  box-shadow: 0 0 12px var(--p3-amber), 0 0 4px #fff;
  pointer-events: none;
  z-index: 20;
  animation: p3P2HorSweep 8s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes p3P2HorSweep {
  0% { top: 0%; opacity: 0; }
  8% { opacity: 0.6; }
  92% { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* Diagonal Industrial Hatching — faint background texture */
.p3-p2-diag-hatching {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 18px,
    rgba(255,159,0,0.02) 18px,
    rgba(255,159,0,0.02) 19px
  );
  pointer-events: none;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}

/* ══════════════════════════════════════════════════
   PHASE 3 EXCLUSIVE OVERDRIVE — QUANTUM NEURAL
   ══════════════════════════════════════════════════ */
.p3-phase3-overdrive { position: relative; }

/* Atomic Orbital System — top-right */
.p3-p3-atomic-orbitals {
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  pointer-events: none;
  z-index: 0;
}
.p3-p3-orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 50%;
  animation: p3P3Orbit 8s linear infinite;
}
.o1 { transform: rotateX(60deg); animation-duration: 8s; }
.o2 { transform: rotateX(60deg) rotateZ(60deg); animation-duration: 10s; animation-direction: reverse; border-style: dashed; }
.o3 { transform: rotateX(60deg) rotateZ(120deg); animation-duration: 12s; border-color: rgba(167,139,250,0.1); }
@keyframes p3P3Orbit { to { transform: rotateX(60deg) rotateZ(calc(var(--base, 0deg) + 360deg)); } }
.o1 { --base: 0deg; }
.o2 { --base: 60deg; }
.o3 { --base: 120deg; }
.p3-p3-nucleus {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  margin: -6px;
  border-radius: 50%;
  background: var(--p3-purple);
  box-shadow: 0 0 20px var(--p3-purple), 0 0 40px rgba(167,139,250,0.3);
  animation: p3P3NucleusPulse 2s ease-in-out infinite alternate;
}
@keyframes p3P3NucleusPulse {
  0% { transform: scale(0.8); box-shadow: 0 0 15px var(--p3-purple); }
  100% { transform: scale(1.3); box-shadow: 0 0 30px var(--p3-purple), 0 0 60px rgba(167,139,250,0.4); }
}

/* DNA Double Helix — left side */
.p3-p3-dna-helix {
  position: absolute;
  top: 0; left: 15px;
  width: 25px; height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.3;
}
.p3-p3-dna-helix svg { width: 100%; height: 100%; }
.p3-p3-strand {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: p3P3DnaDraw 8s linear infinite;
}
.s1 { stroke: var(--p3-purple); }
.s2 { stroke: rgba(167,139,250,0.4); animation-delay: 0.5s; }
@keyframes p3P3DnaDraw {
  0% { stroke-dashoffset: 1200; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1200; }
}

/* Plasma Nebula — background glow */
.p3-p3-plasma-nebula {
  position: absolute;
  top: 30%; left: 30%;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.06) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: p3P3PlasmaDrift 10s ease-in-out infinite alternate;
}
@keyframes p3P3PlasmaDrift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(30px, -20px) scale(1.2); opacity: 0.8; }
  100% { transform: translate(-20px, 15px) scale(0.9); opacity: 0.4; }
}

/* Neural Synapse Constellation */
.p3-p3-neural-net span {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--p3-purple);
  pointer-events: none;
  z-index: 3;
  animation: p3P3Synapse 3s ease-in-out infinite alternate;
}
.nn1 { top: 20%; left: 25%; animation-delay: 0s; }
.nn2 { top: 35%; left: 65%; animation-delay: 0.5s; }
.nn3 { top: 55%; left: 40%; animation-delay: 1s; }
.nn4 { top: 70%; left: 75%; animation-delay: 1.5s; }
.nn5 { top: 85%; left: 30%; animation-delay: 2s; }
.nn6 { top: 45%; left: 85%; animation-delay: 0.8s; }
@keyframes p3P3Synapse {
  0% { transform: scale(1); box-shadow: 0 0 5px var(--p3-purple); opacity: 0.3; }
  100% { transform: scale(1.8); box-shadow: 0 0 20px var(--p3-purple), 0 0 40px rgba(167,139,250,0.3); opacity: 1; }
}

/* Greek Symbol Matrix Rain */
.p3-p3-matrix-rain span {
  position: absolute;
  top: -20px;
  font-size: 0.8rem;
  color: var(--p3-purple);
  pointer-events: none;
  z-index: 2;
  animation: p3P3SymbolFall linear infinite;
}
.mr1 { left: 8%; animation-duration: 7s; animation-delay: 0s; }
.mr2 { left: 22%; animation-duration: 9s; animation-delay: 1s; }
.mr3 { left: 38%; animation-duration: 6s; animation-delay: 2s; }
.mr4 { left: 52%; animation-duration: 11s; animation-delay: 0.5s; }
.mr5 { left: 65%; animation-duration: 8s; animation-delay: 3s; }
.mr6 { left: 78%; animation-duration: 10s; animation-delay: 1.5s; }
.mr7 { left: 88%; animation-duration: 7.5s; animation-delay: 2.5s; }
.mr8 { left: 45%; animation-duration: 12s; animation-delay: 4s; }
@keyframes p3P3SymbolFall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translateY(900px); opacity: 0; }
}

/* Holographic Crown Badge */
.p3-p3-crown-badge {
  position: absolute;
  bottom: 60px; right: 30px;
  font-size: 0.55rem;
  color: var(--p3-purple);
  text-align: center;
  letter-spacing: 0.18em;
  line-height: 1.6;
  padding: 0.7rem 1.2rem;
  border: 1px solid rgba(167,139,250,0.2);
  background: rgba(167,139,250,0.03);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 5;
  animation: p3P3CrownGlow 3s ease-in-out infinite alternate;
}
@keyframes p3P3CrownGlow {
  0% { opacity: 0.3; border-color: rgba(167,139,250,0.1); transform: translateY(2px); }
  50% { opacity: 0.9; border-color: rgba(167,139,250,0.6); box-shadow: 0 0 25px rgba(167,139,250,0.2), inset 0 0 15px rgba(167,139,250,0.05); }
  100% { opacity: 0.4; border-color: rgba(167,139,250,0.15); transform: translateY(-2px); }
}

/* Gravitational Lens Warp — center of card */
.p3-p3-grav-lens {
  position: absolute;
  top: 50%; left: 50%;
  width: 350px; height: 350px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(167,139,250,0.02) 50%, transparent 55%, rgba(167,139,250,0.015) 65%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: p3P3GravLens 12s ease-in-out infinite;
}
@keyframes p3P3GravLens {
  0% { transform: translate(-50%, -50%) scale(0.8) rotate(0deg); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.3) rotate(180deg); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(0.8) rotate(360deg); opacity: 0.3; }
}

/* Vertical Laser — purple sweep */
.p3-p3-vert-laser {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: var(--p3-purple);
  box-shadow: 0 0 12px var(--p3-purple), 0 0 4px #fff;
  pointer-events: none;
  z-index: 20;
  animation: p3P3VertLaser 7s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes p3P3VertLaser {
  0% { left: 0%; opacity: 0; }
  8% { opacity: 0.5; }
  92% { opacity: 0.5; }
  100% { left: 100%; opacity: 0; }
}

/* Quantum Data Ticker */
.p3-p3-quantum-ticker {
  position: absolute;
  top: 55%; left: 0; right: 0;
  height: 18px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0.1;
}
.p3-p3-ticker-inner {
  white-space: nowrap;
  font-size: 0.55rem;
  color: var(--p3-purple);
  letter-spacing: 0.12em;
  line-height: 18px;
  animation: p3P3TickerScroll 22s linear infinite;
}
@keyframes p3P3TickerScroll { to { transform: translateX(-50%); } }

/* Ascension End Panel */
.p3-timeline-end {
  flex: 0 0 400px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s ease;
}
.p3-timeline-end.p3-revealed {
  opacity: 1;
  transform: translateX(0);
}
.p3-end-trophy {
  font-size: 4.5rem;
  margin-bottom: 2rem;
  filter: drop-shadow(0 0 20px rgba(255,170,0,0.6));
  animation: p3Float 4s ease-in-out infinite;
}
@keyframes p3Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.p3-end-title {
  font-size: 1.8rem;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px rgba(255,255,255,0.4);
}
.p3-end-sub {
  font-size: 1.1rem;
  color: #aaa;
  line-height: 1.6;
}

/* ── DIPLOMA ACHIEVED CELEBRATION ── */
.p3-end-overdrive { overflow: hidden; }

/* Radiant Starburst */
.p3-end-starburst {
  position: absolute;
  top: 15%; left: 50%;
  width: 300px; height: 300px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,170,0,0.06) 10deg,
    transparent 20deg, rgba(255,170,0,0.04) 30deg,
    transparent 40deg, rgba(255,170,0,0.06) 50deg,
    transparent 60deg, rgba(255,170,0,0.04) 70deg,
    transparent 80deg, rgba(255,170,0,0.06) 90deg,
    transparent 100deg
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: p3EndStarSpin 30s linear infinite;
}
@keyframes p3EndStarSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Expanding Golden Rings */
.p3-end-ring {
  position: absolute;
  top: 15%; left: 50%;
  width: 80px; height: 80px;
  margin-left: -40px; margin-top: -40px;
  border-radius: 50%;
  border: 1px solid rgba(255,170,0,0.5);
  pointer-events: none;
  z-index: 1;
  animation: p3EndRingExpand 4s ease-out infinite;
}
.r2 { animation-delay: 1.3s; }
.r3 { animation-delay: 2.6s; }
@keyframes p3EndRingExpand {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(4); opacity: 0; }
}

/* Floating Confetti */
.p3-end-confetti span {
  position: absolute;
  top: -10px;
  width: 4px; height: 12px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  animation: p3EndConfettiFall linear infinite;
}
.cf1 { left: 10%; background: #FFD700; animation-duration: 5s; animation-delay: 0s; transform: rotate(15deg); }
.cf2 { left: 25%; background: #FF9F00; animation-duration: 6s; animation-delay: 0.8s; transform: rotate(-25deg); }
.cf3 { left: 40%; background: #fff; animation-duration: 4.5s; animation-delay: 1.5s; width: 3px; height: 8px; }
.cf4 { left: 55%; background: #FFD700; animation-duration: 7s; animation-delay: 0.3s; transform: rotate(40deg); }
.cf5 { left: 70%; background: #a78bfa; animation-duration: 5.5s; animation-delay: 2s; transform: rotate(-15deg); }
.cf6 { left: 85%; background: #FF9F00; animation-duration: 6.5s; animation-delay: 1s; width: 3px; }
.cf7 { left: 15%; background: #00D4FF; animation-duration: 8s; animation-delay: 3s; width: 3px; height: 10px; transform: rotate(60deg); }
.cf8 { left: 60%; background: #fff; animation-duration: 5s; animation-delay: 2.5s; width: 5px; height: 5px; border-radius: 50%; }
.cf9 { left: 45%; background: #FFD700; animation-duration: 7s; animation-delay: 4s; transform: rotate(-35deg); }
@keyframes p3EndConfettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(600px) rotate(720deg); opacity: 0; }
}

/* Glowing Border Frame */
.p3-end-frame {
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255,170,0,0.1);
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
  animation: p3EndFrameGlow 4s ease-in-out infinite alternate;
}
@keyframes p3EndFrameGlow {
  0% { border-color: rgba(255,170,0,0.05); box-shadow: inset 0 0 20px rgba(255,170,0,0); }
  100% { border-color: rgba(255,170,0,0.3); box-shadow: inset 0 0 40px rgba(255,170,0,0.05); }
}

/* Shimmer on ACHIEVED text */
.p3-end-shimmer {
  background: linear-gradient(90deg, #FFD700 0%, #fff 40%, #FFD700 60%, #FF9F00 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: p3EndShimmer 3s linear infinite;
}
@keyframes p3EndShimmer { to { background-position: 200% center; } }

/* Certified Seal */
.p3-end-seal {
  margin-top: 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: #FFD700;
  padding: 0.6rem 1.8rem;
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 20px;
  position: relative;
  z-index: 5;
  animation: p3EndSealPulse 3s ease-in-out infinite alternate;
}
@keyframes p3EndSealPulse {
  0% { opacity: 0.5; border-color: rgba(255,215,0,0.15); box-shadow: 0 0 0 rgba(255,215,0,0); }
  100% { opacity: 1; border-color: rgba(255,215,0,0.5); box-shadow: 0 0 20px rgba(255,215,0,0.15); }
}

/* ── ASCENSION (END) APEX OVERDRIVE ── */
.p3-apex-overdrive {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255,215,0,0.15);
  box-shadow: 0 0 50px rgba(255,170,0,0.05), inset 0 0 30px rgba(255,170,0,0.05);
}

/* Base Glassmorphic Backdrop */
.p3-apex-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,170,0,0.05), rgba(0,0,0,0.8));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

/* Volumetric God Rays */
.p3-apex-godrays {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg, rgba(255,215,0,0.08) 15deg, transparent 30deg,
    transparent 45deg, rgba(255,170,0,0.05) 60deg, transparent 75deg,
    transparent 90deg, rgba(255,215,0,0.08) 105deg, transparent 120deg,
    transparent 135deg, rgba(255,170,0,0.05) 150deg, transparent 165deg,
    transparent 180deg, rgba(255,215,0,0.08) 195deg, transparent 210deg,
    transparent 225deg, rgba(255,170,0,0.05) 240deg, transparent 255deg,
    transparent 270deg, rgba(255,215,0,0.08) 285deg, transparent 300deg,
    transparent 315deg, rgba(255,170,0,0.05) 330deg, transparent 345deg,
    transparent 360deg
  );
  transform-origin: center center;
  animation: p3ApexGodRays 40s linear infinite;
  z-index: 1;
  pointer-events: none;
  mask-image: radial-gradient(circle at center, white 10%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle at center, white 10%, transparent 60%);
}
@keyframes p3ApexGodRays { to { transform: rotate(360deg); } }

/* Intense Shockwaves */
.p3-apex-shockwaves {
  position: absolute;
  top: 35%; left: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.p3-sw {
  position: absolute;
  inset: -100px;
  border-radius: 50%;
  border: 2px solid rgba(255,215,0,0.8);
  box-shadow: 0 0 30px rgba(255,215,0,0.4), inset 0 0 20px rgba(255,215,0,0.2);
  animation: p3ApexShockwave 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
  opacity: 0;
}
.sw2 { animation-delay: 1.2s; border-color: rgba(255,170,0,0.6); }
.sw3 { animation-delay: 2.5s; border-color: rgba(255,255,255,0.5); }
@keyframes p3ApexShockwave {
  0% { transform: scale(0.1); opacity: 1; border-width: 6px; }
  100% { transform: scale(5); opacity: 0; border-width: 0px; }
}

/* 3D Floating Prisms */
.p3-apex-prisms {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  perspective: 600px;
}
.p3-prism {
  position: absolute;
  width: 30px; height: 30px;
  background: linear-gradient(135deg, rgba(255,215,0,0.4), rgba(255,170,0,0.1));
  border: 1px solid rgba(255,215,0,0.6);
  box-shadow: 0 0 15px rgba(255,215,0,0.3);
  animation: p3ApexPrismFloat linear infinite;
}
.pr1 { left: 15%; top: 80%; animation-duration: 12s; }
.pr2 { left: 85%; top: 90%; animation-duration: 15s; width: 20px; height: 20px; animation-delay: -5s; }
.pr3 { left: 25%; top: 110%; animation-duration: 18s; width: 40px; height: 40px; animation-delay: -2s; }
.pr4 { left: 75%; top: 100%; animation-duration: 14s; width: 25px; height: 25px; animation-delay: -8s; }
@keyframes p3ApexPrismFloat {
  0% { transform: translateY(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.5); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-700px) rotateX(720deg) rotateY(360deg) rotateZ(180deg) scale(1.5); opacity: 0; }
}

/* Dense Stardust Particle Field */
.p3-apex-particles span {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  animation: p3ApexStardust linear infinite;
}
.ap1, .ap2, .ap3, .ap4, .ap5 { background: #FFD700; box-shadow: 0 0 6px #FFD700; width: 3px; height: 3px; }
.ap6, .ap7, .ap8, .ap9, .ap10 { background: #fff; box-shadow: 0 0 8px #fff; width: 2px; height: 2px; }
.ap11, .ap12, .ap13, .ap14, .ap15 { background: #FF9F00; box-shadow: 0 0 5px #FF9F00; width: 4px; height: 4px; }

.ap1 { left: 10%; animation-duration: 4s; animation-delay: 0s; }
.ap2 { left: 20%; animation-duration: 6s; animation-delay: 1.2s; }
.ap3 { left: 30%; animation-duration: 5s; animation-delay: 0.5s; }
.ap4 { left: 40%; animation-duration: 7s; animation-delay: 2.1s; }
.ap5 { left: 50%; animation-duration: 4.5s; animation-delay: 0.8s; }
.ap6 { left: 60%; animation-duration: 6.5s; animation-delay: 1.7s; }
.ap7 { left: 70%; animation-duration: 5.5s; animation-delay: 0.3s; }
.ap8 { left: 80%; animation-duration: 8s; animation-delay: 2.5s; }
.ap9 { left: 90%; animation-duration: 4.8s; animation-delay: 1.1s; }

/* Rotating Laurel Wreath */
.p3-end-laurel {
  position: absolute;
  top: 5%; left: 50%;
  width: 180px; height: 180px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
.p3-end-laurel-svg {
  width: 100%; height: 100%;
  animation: p3EndLaurelSpin 25s linear infinite;
}
@keyframes p3EndLaurelSpin { to { transform: rotate(360deg); } }

/* Cinematic Diagonal Wipe */
.p3-end-diag-wipe {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -45deg,
    transparent 0%, transparent 40%,
    rgba(255,215,0,0.06) 48%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,215,0,0.06) 52%,
    transparent 60%, transparent 100%
  );
  background-size: 400% 400%;
  animation: p3EndDiagWipe 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 15;
}
@keyframes p3EndDiagWipe {
  0%, 75% { background-position: 150% 150%; }
  100% { background-position: -50% -50%; }
}

/* ACHIEVEMENT UNLOCKED Notification */
.p3-end-notification {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  color: #FFD700;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 5;
  animation: p3EndNotifPulse 3s ease-in-out infinite;
}
@keyframes p3EndNotifPulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); text-shadow: 0 0 15px rgba(255,215,0,0.4); }
}

/* Ornamental Divider */
.p3-end-ornament {
  font-size: 0.85rem;
  color: rgba(255,215,0,0.4);
  letter-spacing: 0.5em;
  margin: 0.8rem 0 1.5rem;
  position: relative;
  z-index: 5;
  animation: p3EndOrnGlow 4s ease-in-out infinite alternate;
}
@keyframes p3EndOrnGlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.8; color: rgba(255,215,0,0.7); text-shadow: 0 0 10px rgba(255,215,0,0.3); }
}

/* Establishment Year */
.p3-end-year {
  margin-top: 1.2rem;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.25);
  position: relative;
  z-index: 5;
  animation: p3EndYearFade 5s ease-in-out infinite alternate;
}
@keyframes p3EndYearFade {
  0% { opacity: 0.15; }
  100% { opacity: 0.5; letter-spacing: 0.4em; }
}

.ap10 { left: 15%; animation-duration: 7.2s; animation-delay: 2.8s; }
.ap11 { left: 25%; animation-duration: 5.2s; animation-delay: 0.9s; }
.ap12 { left: 45%; animation-duration: 6.8s; animation-delay: 1.9s; }
.ap13 { left: 65%; animation-duration: 5.8s; animation-delay: 0.4s; }
.ap14 { left: 85%; animation-duration: 7.5s; animation-delay: 2.3s; }
.ap15 { left: 35%; animation-duration: 6.2s; animation-delay: 1.5s; }

@keyframes p3ApexStardust {
  0% { transform: translateY(100px) scale(0); opacity: 0; }
  10% { opacity: 1; transform: translateY(0) scale(1); }
  90% { opacity: 1; }
  100% { transform: translateY(-700px) scale(0); opacity: 0; }
}

/* Holographic Laser Scanline */
.p3-apex-scanline {
  position: absolute;
  left: 0; right: 0; height: 2px;
  background: rgba(255,215,0,0.8);
  box-shadow: 0 0 15px rgba(255,215,0,0.8), 0 0 30px #fff;
  z-index: 10;
  pointer-events: none;
  animation: p3ApexScanlineSweep 6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes p3ApexScanlineSweep {
  0% { top: 0%; opacity: 0; transform: scaleX(0.8); }
  10% { opacity: 0.7; transform: scaleX(1); }
  90% { opacity: 0.7; transform: scaleX(1); }
  100% { top: 100%; opacity: 0; transform: scaleX(0.8); }
}

/* Content Container Payload */
.p3-apex-content {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Trophy Aura */
.p3-apex-trophy-wrapper { position: relative; margin-bottom: 2rem; }
.p3-apex-trophy-aura {
  position: absolute;
  top: 50%; left: 50%;
  width: 100px; height: 100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
  filter: blur(10px);
  animation: p3ApexAuraPulse 2s ease-in-out infinite alternate;
  z-index: -1;
}
@keyframes p3ApexAuraPulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
}

/* Floating Seal */
.p3-apex-seal-wrapper {
  position: relative;
  margin-top: 2rem;
  animation: p3ApexSealFloat 4s ease-in-out infinite;
}
@keyframes p3ApexSealFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}


.p3-skills-header-grid {
  display: flex; flex-direction: column; gap: 0.5rem;
  border: 1px solid var(--p3-border);
  border-left: 3px solid var(--p3-amber);
  background: rgba(0,0,0,0.2);
  padding: 1.5rem 2rem;
  border-radius: 0 var(--p3-radius-sm) var(--p3-radius-sm) 0;
  margin-top: 1.5rem;
  font-family: var(--p3-font-mono); font-size: 0.85rem;
  letter-spacing: 0.1em;
  max-width: fit-content;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 calc(100% - 10px), 0 100%, 0 100%);
  animation: mechBootUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
@keyframes mechBootUp {
  0% { clip-path: polygon(0 0, 0 0, 0 calc(100% - 10px), 0 100%, 0 100%); opacity: 0; }
  100% { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); opacity: 1; }
}

body.light-mode .p3-skills-header-grid { 
  background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4)); 
  border-color: rgba(2, 132, 199, 0.2); 
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

/* Scanning line inside the grid box */
.p3-skills-header-grid::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
  animation: gridScan 4s linear infinite;
  pointer-events: none;
}
@keyframes gridScan { 100% { left: 200%; } }

/* Laser Grid Scanners */
.grid-laser-x { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: rgba(245,158,11,0.5); box-shadow: 0 0 8px rgba(245,158,11,0.8); animation: scanX 3.5s ease-in-out infinite alternate; z-index: -1; pointer-events: none; }
.grid-laser-y { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: rgba(245,158,11,0.5); box-shadow: 0 0 8px rgba(245,158,11,0.8); animation: scanY 4.5s ease-in-out infinite alternate; z-index: -1; pointer-events: none; }
@keyframes scanX { 0% { top: 0; } 100% { top: calc(100% - 1px); } }
@keyframes scanY { 0% { left: 0; } 100% { left: calc(100% - 1px); } }

/* Blinking dot for ACTIVE_SCAN */
.status-pulse {
  display: inline-block; width: 8px; height: 8px; background: var(--p3-amber);
  border-radius: 50%; margin-right: 8px; box-shadow: 0 0 8px var(--p3-amber);
  animation: pulseAmber 1.5s infinite;
}
@keyframes pulseAmber { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; box-shadow: none; } }

.p3-sh-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.p3-sh-label { color: var(--p3-amber); font-weight: 700; display: flex; align-items: center; }

.p3-sh-value { color: var(--p3-text); font-weight: 500; display: inline-block; opacity: 0; animation: dataScramble 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes dataScramble {
  0% { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

body.light-mode .p3-sh-value { font-weight: 600; }
.p3-sh-divider { color: var(--p3-amber); opacity: 0.3; }

/* ═══════════════════════════════════════════════════════════════
   §6  INDUSTRY APPLICATIONS
   ═══════════════════════════════════════════════════════════════ */
.p3-industries { background: var(--p3-bg-2); padding: 8rem 0; position: relative; }
.p3-industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; position: relative; z-index: 1; }
.p3-industry-card { perspective: 1000px; opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.p3-industry-card.p3-revealed { opacity: 1; transform: translateY(0); }

.p3-ind-tilt-inner {
  background: var(--p3-glass); border: 1px solid var(--p3-border);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  backdrop-filter: blur(15px);
  padding: 3.5rem 2.5rem; height: 100%; position: relative;
  transition: all 0.3s ease; display: flex; flex-direction: column;
}
body.light-mode .p3-ind-tilt-inner {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(2, 132, 199, 0.2);
}

.p3-card-corner { position: absolute; width: 15px; height: 15px; border: 2px solid var(--p3-text-dim); opacity: 0.5; transition: all 0.3s; pointer-events: none; }
.p3-card-corner.top-left { top: 15px; left: 15px; border-right: none; border-bottom: none; }
.p3-card-corner.bottom-right { bottom: 15px; right: 15px; border-left: none; border-top: none; }

.p3-card-status { position: absolute; top: 15px; right: 20px; font-size: 0.6rem; color: var(--p3-text-dim); opacity: 0.7; transition: color 0.3s; pointer-events: none; }

.p3-ind-icon { margin-bottom: 2rem; width: 60px; height: 60px; color: var(--p3-text-2); transition: all 0.3s ease; }
.tech-icon-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 5px rgba(0,0,0,0.1)); overflow: visible; }

.p3-ind-title { font-family: var(--p3-font-head); font-size: 1.3rem; font-weight: 700; color: var(--p3-text); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.3s; }
.p3-ind-desc { font-size: 0.95rem; color: var(--p3-text-2); line-height: 1.7; margin-bottom: 2.5rem; flex-grow: 1; }

.p3-ind-tag { font-family: var(--p3-font-mono); font-size: 0.75rem; color: var(--p3-text-dim); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.5rem 1rem; border: 1px solid var(--p3-border); background: rgba(0,0,0,0.2); display: inline-block; transition: all 0.3s; align-self: flex-start; }
body.light-mode .p3-ind-tag { background: rgba(2, 132, 199, 0.05); border-color: rgba(2, 132, 199, 0.2); color: var(--p3-text); }
.loc-label { color: var(--p3-cyan); opacity: 0.8; margin-right: 0.5rem; }

/* HUD Hover State */
.p3-industry-card:hover .p3-ind-tilt-inner {
  background: var(--p3-glass-hover); border-color: rgba(255,255,255,0.2);
  box-shadow: -4px 0 0 var(--p3-cyan), 0 15px 40px rgba(0,0,0,0.4); 
  transform: translateY(-5px);
}
body.light-mode .p3-industry-card:hover .p3-ind-tilt-inner {
  background: #fff; box-shadow: -4px 0 0 var(--p3-cyan), 0 15px 40px rgba(2,132,199,0.1); 
}

.p3-industry-card:hover .p3-card-corner { border-color: var(--p3-cyan); opacity: 1; }
.p3-industry-card:hover .p3-card-corner.top-left { transform: translate(-3px, -3px); }
.p3-industry-card:hover .p3-card-corner.bottom-right { transform: translate(3px, 3px); }

.p3-industry-card:hover .p3-card-status { color: var(--p3-cyan); font-weight: 700; text-shadow: 0 0 8px var(--p3-cyan); }
.p3-industry-card:hover .p3-ind-icon { color: var(--p3-cyan); filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.4)); transform: scale(1.1); }
.p3-industry-card:hover .p3-ind-title { color: #fff; }
body.light-mode .p3-industry-card:hover .p3-ind-title { color: var(--p3-cyan); }

.p3-industry-card:hover .tech-icon-svg path,
.p3-industry-card:hover .tech-icon-svg rect,
.p3-industry-card:hover .tech-icon-svg circle {
  animation: svgNeonPulse 1.5s ease-in-out infinite alternate;
}

@keyframes svgNeonPulse {
  0% { filter: drop-shadow(0 0 2px currentColor); }
  100% { filter: drop-shadow(0 0 8px currentColor); }
}

/* ═══════════════════════════════════════════════════════════════
   §7  CAREER PATH
   ═══════════════════════════════════════════════════════════════ */
.p3-career { background: var(--p3-bg); padding: 8rem 0; position: relative; overflow: hidden; }
.p3-career-layout { display: grid; grid-template-columns: 1fr 380px; gap: 4rem; align-items: start; }

/* ════════════════════════════════════════════════════════════════
   §7-BG-DARK  CAREER — DARK PERFORMANCE MODE BACKGROUND
   "Neon Cyberpunk Factory" — Only visible in Dark Performance Mode
   ════════════════════════════════════════════════════════════════ */
.p3-career-bg-dark { display: none; }
body:not(.light-mode) .p3-career-bg-dark {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
body:not(.light-mode) .p3-career > .p3-container { position: relative; z-index: 1; }

/* Neon Grid Floor */
body:not(.light-mode) .dbg-neon-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(0,212,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.12) 1px, transparent 1px),
    linear-gradient(rgba(0,212,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.05) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
}

/* Holographic Rotating Hexagon */
body:not(.light-mode) .dbg-holo-hex { position: absolute; top: 8%; right: 5%; width: 200px; height: 200px; }
body:not(.light-mode) .dbg-hex-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(0,212,255,0.35);
}
body:not(.light-mode) .dbg-hr-1 { animation: cbgGearSpin 20s linear infinite; border-style: dashed; box-shadow: 0 0 15px rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-hr-2 { inset: 20px; border-color: rgba(168,85,247,0.3); animation: cbgGearSpin 30s linear infinite reverse; box-shadow: 0 0 12px rgba(168,85,247,0.08); }
body:not(.light-mode) .dbg-hr-3 { inset: 40px; border-color: rgba(0,212,255,0.25); border-style: dotted; animation: cbgGearSpin 15s linear infinite; }
body:not(.light-mode) .dbg-hex-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.6), transparent);
  box-shadow: 0 0 30px rgba(0,212,255,0.4), 0 0 60px rgba(0,212,255,0.2);
  animation: dbgCorePulse 3s ease-in-out infinite alternate;
}
@keyframes dbgCorePulse { 0% { box-shadow: 0 0 25px rgba(0,212,255,0.4); } 100% { box-shadow: 0 0 50px rgba(0,212,255,0.7), 0 0 80px rgba(168,85,247,0.3); } }

/* Neon Circuit Traces */
body:not(.light-mode) .dbg-circuit { position: absolute; height: 2px; background: rgba(0,212,255,0.18); box-shadow: 0 0 4px rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-circuit::after {
  content: ''; position: absolute; top: -2px; left: -40px; width: 40px; height: 6px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.9), transparent);
  box-shadow: 0 0 15px rgba(0,212,255,0.6), 0 0 30px rgba(0,212,255,0.3); animation: dbgTracePulse 4s linear infinite;
}
body:not(.light-mode) .dbg-cir-1 { top: 20%; left: 5%; width: 25%; }
body:not(.light-mode) .dbg-cir-2 { top: 20%; left: 5%; width: 2px; height: 80px !important; }
body:not(.light-mode) .dbg-cir-3 { top: 65%; right: 10%; width: 20%; transform: rotate(-15deg); }
body:not(.light-mode) .dbg-cir-3::after { animation-delay: 1.5s; }
body:not(.light-mode) .dbg-cir-4 { bottom: 25%; left: 30%; width: 15%; transform: rotate(10deg); }
body:not(.light-mode) .dbg-cir-4::after { animation-delay: 2.5s; }
body:not(.light-mode) .dbg-cir-5 { top: 45%; right: 5%; width: 2px; height: 100px !important; }
body:not(.light-mode) .dbg-cir-5::after { animation-delay: 3.5s; }
body:not(.light-mode) .dbg-circuit-node {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(0,212,255,0.5); background: rgba(0,212,255,0.2);
  box-shadow: 0 0 12px rgba(0,212,255,0.4); animation: dbgNodeGlow 3s ease-in-out infinite;
}
body:not(.light-mode) .dbg-cn-1 { top: 19.5%; left: 5%; }
body:not(.light-mode) .dbg-cn-2 { top: 19.5%; left: 30%; animation-delay: 0.5s; }
body:not(.light-mode) .dbg-cn-3 { top: calc(20% + 80px); left: 5%; animation-delay: 1s; }
body:not(.light-mode) .dbg-cn-4 { top: 64%; right: 10%; animation-delay: 1.5s; }
body:not(.light-mode) .dbg-cn-5 { bottom: 24%; left: 30%; animation-delay: 2s; }
body:not(.light-mode) .dbg-cn-6 { top: 44%; right: 5%; animation-delay: 2.5s; }
@keyframes dbgTracePulse { 0% { left: -40px; } 100% { left: calc(100% + 40px); } }
@keyframes dbgNodeGlow { 0%,100% { box-shadow: 0 0 8px rgba(0,212,255,0.3); } 50% { box-shadow: 0 0 20px rgba(0,212,255,0.7), 0 0 40px rgba(0,212,255,0.3); } }

/* Plasma Energy Rings */
body:not(.light-mode) .dbg-plasma {
  position: absolute; border-radius: 50%;
  border: 3px solid rgba(168,85,247,0.4);
  animation: dbgPlasmaExpand 5s ease-out infinite;
}
body:not(.light-mode) .dbg-plasma-1 { bottom: 30%; left: 8%; animation-delay: 0s; }
body:not(.light-mode) .dbg-plasma-2 { bottom: 30%; left: 8%; animation-delay: 1.7s; }
body:not(.light-mode) .dbg-plasma-3 { bottom: 30%; left: 8%; animation-delay: 3.3s; }
@keyframes dbgPlasmaExpand { 0% { width: 10px; height: 10px; opacity: 1; box-shadow: 0 0 15px rgba(168,85,247,0.4); } 100% { width: 150px; height: 150px; opacity: 0; margin-left: -70px; margin-bottom: -70px; } }

/* Cyber Data Rain */
body:not(.light-mode) .dbg-datarain {
  position: absolute; top: -20px; width: 3px;
  background: linear-gradient(to bottom, rgba(0,212,255,0.8), transparent);
  box-shadow: 0 0 6px rgba(0,212,255,0.3);
  animation: dbgDataFall linear infinite;
}
body:not(.light-mode) .dbg-dr-1 { left: 8%; height: 30px; animation-duration: 3s; }
body:not(.light-mode) .dbg-dr-2 { left: 15%; height: 20px; animation-duration: 4s; animation-delay: 0.5s; }
body:not(.light-mode) .dbg-dr-3 { left: 35%; height: 25px; animation-duration: 3.5s; animation-delay: 1s; }
body:not(.light-mode) .dbg-dr-4 { left: 52%; height: 35px; animation-duration: 2.8s; animation-delay: 0.3s; }
body:not(.light-mode) .dbg-dr-5 { right: 30%; height: 22px; animation-duration: 4.2s; animation-delay: 1.5s; }
body:not(.light-mode) .dbg-dr-6 { right: 18%; height: 28px; animation-duration: 3.2s; animation-delay: 2s; }
body:not(.light-mode) .dbg-dr-7 { right: 8%; height: 18px; animation-duration: 3.8s; animation-delay: 0.8s; }
body:not(.light-mode) .dbg-dr-8 { left: 70%; height: 32px; animation-duration: 2.5s; animation-delay: 1.2s; background: linear-gradient(to bottom, rgba(168,85,247,0.3), transparent); }
@keyframes dbgDataFall { 0% { top: -40px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 110%; opacity: 0; } }

/* HUD Targeting Brackets */
body:not(.light-mode) .dbg-hud-bracket {
  position: absolute; width: 50px; height: 50px;
  animation: dbgBracketPulse 4s ease-in-out infinite alternate;
}
body:not(.light-mode) .dbg-hb-tl { top: 30px; left: 30px; border-top: 3px solid rgba(0,212,255,0.5); border-left: 3px solid rgba(0,212,255,0.5); }
body:not(.light-mode) .dbg-hb-tr { top: 30px; right: 30px; border-top: 3px solid rgba(0,212,255,0.5); border-right: 3px solid rgba(0,212,255,0.5); animation-delay: 1s; }
body:not(.light-mode) .dbg-hb-bl { bottom: 30px; left: 30px; border-bottom: 3px solid rgba(168,85,247,0.5); border-left: 3px solid rgba(168,85,247,0.5); animation-delay: 2s; }
body:not(.light-mode) .dbg-hb-br { bottom: 30px; right: 30px; border-bottom: 3px solid rgba(168,85,247,0.5); border-right: 3px solid rgba(168,85,247,0.5); animation-delay: 3s; }
@keyframes dbgBracketPulse { 0% { opacity: 0.4; box-shadow: 0 0 8px rgba(0,212,255,0.1); } 100% { opacity: 1; box-shadow: 0 0 20px rgba(0,212,255,0.4), 0 0 40px rgba(0,212,255,0.15); } }

/* Neon Gears */
body:not(.light-mode) .dbg-neon-gear {
  position: absolute; border-radius: 50%;
  border: 3px dashed rgba(0,212,255,0.3);
  box-shadow: 0 0 15px rgba(0,212,255,0.1), inset 0 0 15px rgba(0,212,255,0.05);
}
body:not(.light-mode) .dbg-ng-1 { top: 50%; left: 3%; width: 200px; height: 200px; transform: translateY(-50%); animation: cbgGearSpin 18s linear infinite; }
body:not(.light-mode) .dbg-ng-2 { top: 50%; left: calc(3% + 168px); width: 110px; height: 110px; transform: translateY(-30%); animation: cbgGearSpin 10s linear infinite reverse; border-color: rgba(168,85,247,0.25); box-shadow: 0 0 12px rgba(168,85,247,0.08); }
body:not(.light-mode) .dbg-ng-3 { bottom: 15%; right: 12%; width: 80px; height: 80px; animation: cbgGearSpin 8s linear infinite; border-color: rgba(255,170,0,0.2); box-shadow: 0 0 10px rgba(255,170,0,0.06); }

/* Energy Conduit Pipes */
body:not(.light-mode) .dbg-conduit {
  position: absolute; height: 8px; border-radius: 4px;
  background: rgba(0,212,255,0.08); border: 1.5px solid rgba(0,212,255,0.2); overflow: hidden; box-shadow: 0 0 6px rgba(0,212,255,0.06);
}
body:not(.light-mode) .dbg-conduit-flow {
  position: absolute; top: 0; bottom: 0; left: -40px; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.6), transparent); box-shadow: 0 0 8px rgba(0,212,255,0.3);
  animation: dbgConduitFlow 3s linear infinite;
}
body:not(.light-mode) .dbg-con-1 { top: 82%; left: 5%; width: 250px; }
body:not(.light-mode) .dbg-con-2 { top: 85%; left: 5%; width: 180px; border-color: rgba(168,85,247,0.06); }
body:not(.light-mode) .dbg-con-2 .dbg-conduit-flow { animation-delay: 1s; background: linear-gradient(90deg, transparent, rgba(168,85,247,0.25), transparent); }
body:not(.light-mode) .dbg-con-3 { top: 82%; left: calc(5% + 250px); width: 6px; height: 40px; border-radius: 3px; }
body:not(.light-mode) .dbg-con-3 .dbg-conduit-flow { width: 100%; height: 20px; top: -20px; animation: dbgConduitFlowV 2s linear infinite 1.5s; }
@keyframes dbgConduitFlow { 0% { left: -40px; } 100% { left: calc(100% + 10px); } }
@keyframes dbgConduitFlowV { 0% { top: -20px; } 100% { top: calc(100% + 10px); } }

/* Neon Pulse Lines */
body:not(.light-mode) .dbg-pulse-line {
  position: absolute; width: 100%; height: 1px; left: 0;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.15) 20%, rgba(0,212,255,0.15) 80%, transparent);
}
body:not(.light-mode) .dbg-pulse-line::after {
  content: ''; position: absolute; top: -3px; left: -10%; width: 10%; height: 7px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.8), transparent);
  box-shadow: 0 0 20px rgba(0,212,255,0.6), 0 0 40px rgba(0,212,255,0.2); border-radius: 3px;
  animation: dbgPulseShoot 6s linear infinite;
}
body:not(.light-mode) .dbg-pl-1 { top: 30%; }
body:not(.light-mode) .dbg-pl-2 { top: 55%; }
body:not(.light-mode) .dbg-pl-2::after { animation-delay: 2s; background: linear-gradient(90deg, transparent, rgba(168,85,247,0.35), transparent); box-shadow: 0 0 10px rgba(168,85,247,0.2); }
body:not(.light-mode) .dbg-pl-3 { top: 75%; }
body:not(.light-mode) .dbg-pl-3::after { animation-delay: 4s; }
@keyframes dbgPulseShoot { 0% { left: -10%; } 100% { left: 110%; } }

/* Holographic Scanner */
body:not(.light-mode) .dbg-scanner {
  position: absolute; top: 0; left: 0; width: 100%; height: 5px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.35) 30%, rgba(168,85,247,0.25) 70%, transparent);
  box-shadow: 0 0 30px rgba(0,212,255,0.2), 0 6px 40px rgba(0,212,255,0.1);
  animation: dbgScannerSweep 8s ease-in-out infinite;
}
@keyframes dbgScannerSweep { 0% { top: -4px; opacity: 0; } 5% { opacity: 0.8; } 95% { opacity: 0.8; } 100% { top: 100%; opacity: 0; } }

/* Floating Neon Particles */
body:not(.light-mode) .dbg-neon-dot {
  position: absolute; border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
  animation: dbgNeonFloat 12s ease-in-out infinite alternate;
}
body:not(.light-mode) .dbg-nd-1 { top: 10%; left: 20%; width: 4px; height: 4px; background: rgba(0,212,255,0.5); color: rgba(0,212,255,0.3); }
body:not(.light-mode) .dbg-nd-2 { top: 25%; left: 60%; width: 3px; height: 3px; background: rgba(168,85,247,0.4); color: rgba(168,85,247,0.3); animation-delay: 2s; }
body:not(.light-mode) .dbg-nd-3 { top: 40%; right: 15%; width: 5px; height: 5px; background: rgba(0,212,255,0.4); color: rgba(0,212,255,0.2); animation-delay: 4s; }
body:not(.light-mode) .dbg-nd-4 { top: 55%; left: 12%; width: 3px; height: 3px; background: rgba(255,170,0,0.4); color: rgba(255,170,0,0.2); animation-delay: 1s; }
body:not(.light-mode) .dbg-nd-5 { top: 70%; left: 45%; width: 4px; height: 4px; background: rgba(0,212,255,0.5); color: rgba(0,212,255,0.3); animation-delay: 3s; }
body:not(.light-mode) .dbg-nd-6 { bottom: 20%; right: 35%; width: 3px; height: 3px; background: rgba(168,85,247,0.5); color: rgba(168,85,247,0.3); animation-delay: 5s; }
body:not(.light-mode) .dbg-nd-7 { top: 15%; right: 30%; width: 4px; height: 4px; background: rgba(0,212,255,0.3); color: rgba(0,212,255,0.2); animation-delay: 6s; }
body:not(.light-mode) .dbg-nd-8 { bottom: 35%; left: 55%; width: 5px; height: 5px; background: rgba(168,85,247,0.3); color: rgba(168,85,247,0.2); animation-delay: 7s; }
body:not(.light-mode) .dbg-nd-9 { top: 35%; left: 35%; width: 3px; height: 3px; background: rgba(255,170,0,0.3); color: rgba(255,170,0,0.2); animation-delay: 3.5s; }
body:not(.light-mode) .dbg-nd-10 { bottom: 10%; left: 70%; width: 4px; height: 4px; background: rgba(0,212,255,0.4); color: rgba(0,212,255,0.2); animation-delay: 8s; }
@keyframes dbgNeonFloat { 0% { transform: translate(0,0); opacity: 0.4; } 50% { opacity: 0.8; } 100% { transform: translate(15px,-20px); opacity: 0.3; } }

/* Glowing Crosshairs */
body:not(.light-mode) .dbg-crosshair { position: absolute; width: 35px; height: 35px; }
body:not(.light-mode) .dbg-crosshair::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: rgba(0,212,255,0.15); box-shadow: 0 0 4px rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-crosshair::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(0,212,255,0.15); box-shadow: 0 0 4px rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-xh-1 { top: 15%; left: 40%; animation: dbgXhPulse 5s ease-in-out infinite; }
body:not(.light-mode) .dbg-xh-2 { bottom: 20%; right: 25%; animation: dbgXhPulse 5s ease-in-out infinite 2.5s; }
@keyframes dbgXhPulse { 0%,100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.3); } }

/* Neon Warning Stripes */
body:not(.light-mode) .dbg-neon-stripe {
  position: absolute; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(-45deg, rgba(255,170,0,0.25), rgba(255,170,0,0.25) 8px, transparent 8px, transparent 16px);
  box-shadow: 0 0 8px rgba(255,170,0,0.08);
}
body:not(.light-mode) .dbg-ns-top { top: 0; }
body:not(.light-mode) .dbg-ns-bot { bottom: 0; }

/* Radar */
body:not(.light-mode) .dbg-radar { position: absolute; bottom: 10%; right: 5%; width: 120px; height: 120px; }
body:not(.light-mode) .dbg-radar-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(0,212,255,0.2); top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 8px rgba(0,212,255,0.05); }
body:not(.light-mode) .dbg-rr-1 { width: 40px; height: 40px; }
body:not(.light-mode) .dbg-rr-2 { width: 80px; height: 80px; }
body:not(.light-mode) .dbg-rr-3 { width: 115px; height: 115px; }
body:not(.light-mode) .dbg-radar-arm {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 3px; transform-origin: left center;
  background: linear-gradient(90deg, rgba(0,212,255,0.7), transparent);
  box-shadow: 0 0 10px rgba(0,212,255,0.3);
  animation: cbgRadarSweep 4s linear infinite;
}
body:not(.light-mode) .dbg-radar-blip { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(0,212,255,0.5); box-shadow: 0 0 8px rgba(0,212,255,0.3); animation: cbgRadarBlip 4s ease-out infinite; }
body:not(.light-mode) .dbg-rb-1 { top: 30%; left: 65%; animation-delay: 0.5s; }
body:not(.light-mode) .dbg-rb-2 { top: 60%; left: 30%; animation-delay: 2.5s; }

/* Magenta Electric Arcs */
body:not(.light-mode) .dbg-arc {
  position: absolute; top: 25%; right: 3%; height: 3px;
  background: linear-gradient(90deg, rgba(168,85,247,0.6), rgba(0,212,255,0.4), rgba(168,85,247,0.6));
  border-radius: 2px; filter: blur(1px);
  box-shadow: 0 0 10px rgba(168,85,247,0.3);
  animation: dbgArcZap 3s ease-in-out infinite;
}
body:not(.light-mode) .dbg-arc-1 { width: 40px; animation-delay: 0s; }
body:not(.light-mode) .dbg-arc-2 { width: 35px; top: 27%; animation-delay: 1s; transform: rotate(-5deg); }
body:not(.light-mode) .dbg-arc-3 { width: 45px; top: 23%; animation-delay: 2s; transform: rotate(3deg); }
@keyframes dbgArcZap { 0%,100% { opacity: 0; } 3% { opacity: 1; } 6% { opacity: 0.1; } 8% { opacity: 0.9; } 12% { opacity: 0; } }

/* ═══ DARK BG WAVE 2: NEON OVERDRIVE ═══ */

/* Neon Robotic Arm */
body:not(.light-mode) .dbg-robo { position: absolute; top: 12%; left: 25%; width: 80px; height: 110px; }
body:not(.light-mode) .dbg-robo-base { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 8px; background: rgba(0,212,255,0.15); border: 2px solid rgba(0,212,255,0.4); border-radius: 2px; box-shadow: 0 0 8px rgba(0,212,255,0.15); }
body:not(.light-mode) .dbg-robo-arm1 { position: absolute; bottom: 8px; left: 50%; width: 4px; height: 45px; background: linear-gradient(to top, rgba(0,212,255,0.4), rgba(0,212,255,0.15)); transform-origin: bottom center; animation: dbgRoboSwing1 6s ease-in-out infinite; box-shadow: 0 0 12px rgba(0,212,255,0.3); }
body:not(.light-mode) .dbg-robo-arm2 { position: absolute; bottom: 50px; left: calc(50% + 15px); width: 4px; height: 35px; background: linear-gradient(to top, rgba(168,85,247,0.4), rgba(168,85,247,0.12)); transform-origin: bottom center; animation: dbgRoboSwing2 6s ease-in-out infinite; box-shadow: 0 0 12px rgba(168,85,247,0.3); }
body:not(.light-mode) .dbg-robo-claw { position: absolute; top: 8px; left: calc(50% + 20px); width: 12px; height: 8px; border: 2px solid rgba(0,212,255,0.5); border-top: none; border-radius: 0 0 4px 4px; animation: dbgClawGrab 3s ease-in-out infinite; box-shadow: 0 0 6px rgba(0,212,255,0.2); }
@keyframes dbgRoboSwing1 { 0%,100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }
@keyframes dbgRoboSwing2 { 0%,100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes dbgClawGrab { 0%,100% { width: 12px; } 40%,60% { width: 6px; } }

/* Holographic Turbine */
body:not(.light-mode) .dbg-turbine { position: absolute; bottom: 40%; right: 8%; width: 200px; height: 200px; animation: cbgGearSpin 10s linear infinite; }
body:not(.light-mode) .dbg-turb-rim { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(0,212,255,0.25); box-shadow: 0 0 25px rgba(0,212,255,0.1), inset 0 0 25px rgba(0,212,255,0.06); }
body:not(.light-mode) .dbg-turb-blade { position: absolute; top: 50%; left: 50%; width: 4px; height: 85px; margin-top: -85px; background: linear-gradient(to top, rgba(0,212,255,0.35), rgba(0,212,255,0.06)); transform-origin: bottom center; box-shadow: 0 0 12px rgba(0,212,255,0.15); }
body:not(.light-mode) .dbg-tbl-1 { transform: rotate(0deg); }
body:not(.light-mode) .dbg-tbl-2 { transform: rotate(60deg); }
body:not(.light-mode) .dbg-tbl-3 { transform: rotate(120deg); }
body:not(.light-mode) .dbg-tbl-4 { transform: rotate(180deg); }
body:not(.light-mode) .dbg-tbl-5 { transform: rotate(240deg); }
body:not(.light-mode) .dbg-tbl-6 { transform: rotate(300deg); }
body:not(.light-mode) .dbg-turb-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(0,212,255,0.6), transparent); box-shadow: 0 0 30px rgba(0,212,255,0.4), 0 0 60px rgba(0,212,255,0.15); animation: dbgCorePulse 3s ease-in-out infinite alternate; }

/* Neon Conveyor */
body:not(.light-mode) .dbg-conveyor { position: absolute; bottom: 5%; left: 25%; right: 10%; height: 40px; }
body:not(.light-mode) .dbg-conv-belt { position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: rgba(0,212,255,0.1); border: 1.5px solid rgba(0,212,255,0.25); border-radius: 2px; box-shadow: 0 0 10px rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-conv-roller { position: absolute; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(0,212,255,0.3); animation: cbgGearSpin 2s linear infinite; box-shadow: 0 0 6px rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-cvr-1 { left: 2%; }
body:not(.light-mode) .dbg-cvr-2 { left: 33%; }
body:not(.light-mode) .dbg-cvr-3 { left: 66%; }
body:not(.light-mode) .dbg-cvr-4 { right: 2%; }
body:not(.light-mode) .dbg-conv-box { position: absolute; bottom: 10px; width: 24px; height: 24px; border: 2px solid rgba(0,212,255,0.35); border-radius: 3px; background: rgba(0,212,255,0.08); box-shadow: 0 0 15px rgba(0,212,255,0.15); animation: dbgConvSlide 10s linear infinite; }
body:not(.light-mode) .dbg-cvb-1 { animation-delay: 0s; }
body:not(.light-mode) .dbg-cvb-2 { animation-delay: 3.3s; border-color: rgba(168,85,247,0.15); box-shadow: 0 0 8px rgba(168,85,247,0.08); }
body:not(.light-mode) .dbg-cvb-3 { animation-delay: 6.6s; border-color: rgba(255,170,0,0.12); box-shadow: 0 0 8px rgba(255,170,0,0.06); }
@keyframes dbgConvSlide { 0% { left: -25px; opacity: 0; } 5% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { left: calc(100% + 10px); opacity: 0; } }

/* Cyber Hydraulics */
body:not(.light-mode) .dbg-hydro { position: absolute; }
body:not(.light-mode) .dbg-hydro-1 { top: 15%; right: 18%; }
body:not(.light-mode) .dbg-hydro-2 { top: 15%; right: 22%; }
body:not(.light-mode) .dbg-hydro-cylinder { width: 12px; height: 50px; border: 1.5px solid rgba(0,212,255,0.12); border-radius: 3px; background: rgba(0,212,255,0.02); }
body:not(.light-mode) .dbg-hydro-rod { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 4px; height: 18px; background: rgba(0,212,255,0.2); border-radius: 2px; box-shadow: 0 0 6px rgba(0,212,255,0.1); animation: dbgHydroExtend 3s ease-in-out infinite; }
body:not(.light-mode) .dbg-hydro-2 .dbg-hydro-rod { animation-delay: 1.5s; }
@keyframes dbgHydroExtend { 0%,100% { height: 18px; top: -5px; } 50% { height: 30px; top: -17px; } }

/* Glowing PCB */
body:not(.light-mode) .dbg-pcb { position: absolute; top: 35%; left: 5%; width: 150px; height: 100px; }
body:not(.light-mode) .dbg-pcb-trace { position: absolute; background: rgba(0,212,255,0.06); box-shadow: 0 0 3px rgba(0,212,255,0.05); }
body:not(.light-mode) .dbg-pt-1 { top: 20%; left: 0; width: 60%; height: 2px; }
body:not(.light-mode) .dbg-pt-2 { top: 20%; left: 60%; width: 2px; height: 50%; }
body:not(.light-mode) .dbg-pt-3 { top: 70%; left: 30%; width: 30%; height: 2px; }
body:not(.light-mode) .dbg-pt-4 { top: 50%; left: 80%; width: 20%; height: 2px; }
body:not(.light-mode) .dbg-pcb-via { position: absolute; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(0,212,255,0.2); background: rgba(0,212,255,0.06); animation: dbgNodeGlow 3s ease-in-out infinite; }
body:not(.light-mode) .dbg-pv-1 { top: 17%; left: 0; }
body:not(.light-mode) .dbg-pv-2 { top: 17%; left: 57%; animation-delay: 0.8s; }
body:not(.light-mode) .dbg-pv-3 { top: 67%; left: 57%; animation-delay: 1.5s; }
body:not(.light-mode) .dbg-pv-4 { top: 47%; left: 97%; animation-delay: 2.2s; }
body:not(.light-mode) .dbg-pcb-ic { position: absolute; top: 35%; left: 25%; width: 30px; height: 20px; border: 1.5px solid rgba(168,85,247,0.15); border-radius: 2px; background: rgba(168,85,247,0.04); box-shadow: 0 0 8px rgba(168,85,247,0.06); }

/* Neon Oscilloscope */
body:not(.light-mode) .dbg-oscillo { position: absolute; top: 40%; right: 30%; width: 90px; height: 55px; }
body:not(.light-mode) .dbg-osc-frame { position: absolute; inset: 0; border: 2px solid rgba(0,212,255,0.12); border-radius: 4px; background: rgba(0,20,40,0.3); }
body:not(.light-mode) .dbg-osc-grid { position: absolute; inset: 4px; background: linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px); background-size: 10px 10px; }
body:not(.light-mode) .dbg-osc-wave { position: absolute; top: 50%; left: 4px; right: 4px; height: 2px; background: linear-gradient(90deg, rgba(0,212,255,0.4), rgba(168,85,247,0.3), rgba(0,212,255,0.4)); border-radius: 1px; box-shadow: 0 0 6px rgba(0,212,255,0.3); animation: dbgOscWave 2s ease-in-out infinite; }
@keyframes dbgOscWave { 0%,100% { transform: translateY(0) scaleY(1); } 25% { transform: translateY(-8px) scaleY(1.5); } 50% { transform: translateY(0) scaleY(1); } 75% { transform: translateY(6px) scaleY(0.8); } }

/* Holographic Hex Grid */
body:not(.light-mode) .dbg-hexgrid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,212,255,0.04) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.6; animation: cbgHexDrift 25s linear infinite; }

/* Cyber Welding Sparks */
body:not(.light-mode) .dbg-weld-sparks { position: absolute; top: 18%; left: 32%; }
body:not(.light-mode) .dbg-wspark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,170,0,0.7); box-shadow: 0 0 6px rgba(255,170,0,0.4); animation: dbgSparkFly 1.5s ease-out infinite; }
body:not(.light-mode) .dbg-ws-1 { animation-delay: 0s; }
body:not(.light-mode) .dbg-ws-2 { animation-delay: 0.2s; }
body:not(.light-mode) .dbg-ws-3 { animation-delay: 0.4s; }
body:not(.light-mode) .dbg-ws-4 { animation-delay: 0.6s; }
body:not(.light-mode) .dbg-ws-5 { animation-delay: 0.8s; }
body:not(.light-mode) .dbg-ws-6 { animation-delay: 1s; }
body:not(.light-mode) .dbg-ws-7 { animation-delay: 1.2s; }
body:not(.light-mode) .dbg-ws-8 { animation-delay: 0.3s; background: rgba(0,212,255,0.6); box-shadow: 0 0 6px rgba(0,212,255,0.3); }
@keyframes dbgSparkFly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(calc(-20px + 40px * var(--r, 0.5)), calc(-30px + 20px * var(--r, 0.5))) scale(0); opacity: 0; }
}
body:not(.light-mode) .dbg-ws-1 { --r: 0.2; }
body:not(.light-mode) .dbg-ws-2 { --r: 0.8; }
body:not(.light-mode) .dbg-ws-3 { --r: 0.4; }
body:not(.light-mode) .dbg-ws-4 { --r: 0.9; }
body:not(.light-mode) .dbg-ws-5 { --r: 0.1; }
body:not(.light-mode) .dbg-ws-6 { --r: 0.6; }
body:not(.light-mode) .dbg-ws-7 { --r: 0.3; }
body:not(.light-mode) .dbg-ws-8 { --r: 0.7; }

/* Neon Flywheel */
body:not(.light-mode) .dbg-flywheel { position: absolute; bottom: 20%; left: 8%; width: 150px; height: 150px; animation: cbgGearSpin 14s linear infinite; }
body:not(.light-mode) .dbg-fw-rim { position: absolute; inset: 0; border-radius: 50%; border: 4px solid rgba(168,85,247,0.25); box-shadow: 0 0 25px rgba(168,85,247,0.12), inset 0 0 15px rgba(168,85,247,0.06); }
body:not(.light-mode) .dbg-fw-spoke { position: absolute; top: 50%; left: 50%; width: 3px; height: 65px; margin-top: -65px; background: linear-gradient(to top, rgba(168,85,247,0.3), transparent); transform-origin: bottom center; box-shadow: 0 0 8px rgba(168,85,247,0.1); }
body:not(.light-mode) .dbg-fsp-1 { transform: rotate(0deg); }
body:not(.light-mode) .dbg-fsp-2 { transform: rotate(120deg); }
body:not(.light-mode) .dbg-fsp-3 { transform: rotate(240deg); }
body:not(.light-mode) .dbg-fw-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(168,85,247,0.4); background: radial-gradient(circle, rgba(168,85,247,0.3), transparent); box-shadow: 0 0 20px rgba(168,85,247,0.2); }

/* Neon Voltage Meter */
body:not(.light-mode) .dbg-vmeter { position: absolute; top: 55%; right: 15%; width: 70px; height: 40px; }
body:not(.light-mode) .dbg-vm-arc { position: absolute; inset: 0; border: 2px solid rgba(0,212,255,0.1); border-radius: 35px 35px 4px 4px; background: rgba(0,20,40,0.2); }
body:not(.light-mode) .dbg-vm-needle { position: absolute; bottom: 2px; left: 50%; width: 2px; height: 28px; background: linear-gradient(to top, rgba(255,70,70,0.4), rgba(255,70,70,0.1)); transform-origin: bottom center; animation: cbgNeedleSwing 5s ease-in-out infinite alternate; box-shadow: 0 0 4px rgba(255,70,70,0.2); }
body:not(.light-mode) .dbg-vm-center { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: rgba(0,212,255,0.2); border: 1px solid rgba(0,212,255,0.15); }

/* Extra Spark Particles */
body:not(.light-mode) .dbg-spark-particle { position: absolute; border-radius: 50%; animation: dbgSparkRise 8s ease-out infinite; }
body:not(.light-mode) .dbg-sp-1 { bottom: 10%; left: 18%; width: 4px; height: 4px; background: rgba(0,212,255,0.5); box-shadow: 0 0 8px rgba(0,212,255,0.3); }
body:not(.light-mode) .dbg-sp-2 { bottom: 15%; left: 45%; width: 3px; height: 3px; background: rgba(168,85,247,0.5); box-shadow: 0 0 8px rgba(168,85,247,0.3); animation-delay: 1.5s; }
body:not(.light-mode) .dbg-sp-3 { bottom: 8%; right: 30%; width: 4px; height: 4px; background: rgba(255,170,0,0.5); box-shadow: 0 0 8px rgba(255,170,0,0.3); animation-delay: 3s; }
body:not(.light-mode) .dbg-sp-4 { bottom: 20%; left: 65%; width: 3px; height: 3px; background: rgba(0,212,255,0.4); box-shadow: 0 0 6px rgba(0,212,255,0.2); animation-delay: 4.5s; }
body:not(.light-mode) .dbg-sp-5 { bottom: 12%; right: 15%; width: 5px; height: 5px; background: rgba(168,85,247,0.4); box-shadow: 0 0 10px rgba(168,85,247,0.25); animation-delay: 6s; }
body:not(.light-mode) .dbg-sp-6 { bottom: 5%; left: 30%; width: 3px; height: 3px; background: rgba(0,212,255,0.5); box-shadow: 0 0 6px rgba(0,212,255,0.3); animation-delay: 2s; }
@keyframes dbgSparkRise { 0% { transform: translateY(0); opacity: 0.6; } 50% { opacity: 0.9; } 100% { transform: translateY(-80px); opacity: 0; } }

@keyframes dbgNodePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); box-shadow: 0 0 10px rgba(0,212,255,0.3); } }

/* ═══ DARK BG WAVE 3: NEON MAXIMUM ═══ */

/* PLC Controller */
body:not(.light-mode) .dbg-plc { position: absolute; top: 5%; left: 5%; width: 100px; height: 70px; }
body:not(.light-mode) .dbg-plc-body { position: absolute; inset: 0; border: 2px solid rgba(0,212,255,0.3); border-radius: 6px; background: rgba(0,20,40,0.4); box-shadow: 0 0 20px rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-plc-screen { position: absolute; top: 6px; left: 6px; width: 45px; height: 20px; border: 1.5px solid rgba(0,212,255,0.25); border-radius: 2px; background: rgba(0,212,255,0.05); animation: dbgDisplayBlink 3s step-end infinite; box-shadow: 0 0 8px rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-plc-led { position: absolute; right: 8px; width: 7px; height: 7px; border-radius: 50%; animation: dbgLedBlink 3s ease-in-out infinite; }
body:not(.light-mode) .dbg-pled-1 { top: 8px; background: rgba(34,197,94,0.7); box-shadow: 0 0 8px rgba(34,197,94,0.4); }
body:not(.light-mode) .dbg-pled-2 { top: 18px; background: rgba(34,197,94,0.7); box-shadow: 0 0 8px rgba(34,197,94,0.4); animation-delay: 0.5s; }
body:not(.light-mode) .dbg-pled-3 { top: 28px; background: rgba(255,170,0,0.7); box-shadow: 0 0 8px rgba(255,170,0,0.4); animation-delay: 1s; }
body:not(.light-mode) .dbg-pled-4 { top: 38px; background: rgba(220,38,38,0.6); box-shadow: 0 0 8px rgba(220,38,38,0.3); animation-delay: 1.5s; }
body:not(.light-mode) .dbg-plc-wire { position: absolute; bottom: -20px; width: 2px; height: 20px; background: rgba(0,212,255,0.2); box-shadow: 0 0 4px rgba(0,212,255,0.15); }
body:not(.light-mode) .dbg-pw-1 { left: 15px; }
body:not(.light-mode) .dbg-pw-2 { left: 35px; height: 28px; bottom: -28px; }
body:not(.light-mode) .dbg-pw-3 { left: 55px; height: 15px; bottom: -15px; }
@keyframes dbgLedBlink { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes dbgDisplayBlink { 0%,100% { background: rgba(0,212,255,0.05); } 50% { background: rgba(0,212,255,0.15); } }

/* Neon Chain Drive */
body:not(.light-mode) .dbg-chain { position: absolute; bottom: 35%; left: 22%; width: 120px; height: 60px; }
body:not(.light-mode) .dbg-chain-sprocket { position: absolute; border-radius: 50%; border: 3px solid rgba(0,212,255,0.3); box-shadow: 0 0 12px rgba(0,212,255,0.15); }
body:not(.light-mode) .dbg-csp-1 { left: 0; top: 50%; transform: translateY(-50%); width: 35px; height: 35px; animation: cbgGearSpin 4s linear infinite; }
body:not(.light-mode) .dbg-csp-2 { right: 0; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; animation: cbgGearSpin 3s linear infinite reverse; }
body:not(.light-mode) .dbg-chain-link { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(0,212,255,0.5); box-shadow: 0 0 8px rgba(0,212,255,0.3); animation: dbgChainOrbit 6s linear infinite; }
body:not(.light-mode) .dbg-cl-1 { animation-delay: 0s; }
body:not(.light-mode) .dbg-cl-2 { animation-delay: 1s; }
body:not(.light-mode) .dbg-cl-3 { animation-delay: 2s; }
body:not(.light-mode) .dbg-cl-4 { animation-delay: 3s; }
body:not(.light-mode) .dbg-cl-5 { animation-delay: 4s; }
body:not(.light-mode) .dbg-cl-6 { animation-delay: 5s; }
@keyframes dbgChainOrbit { 0% { top: 15px; left: 17px; } 25% { top: -5px; left: 60px; } 50% { top: 15px; left: 100px; } 75% { top: 40px; left: 60px; } 100% { top: 15px; left: 17px; } }

/* Giant Pressure Gauge */
body:not(.light-mode) .dbg-gauge { position: absolute; top: 35%; right: 3%; width: 130px; height: 130px; }
body:not(.light-mode) .dbg-gauge-rim { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(0,212,255,0.3); box-shadow: 0 0 20px rgba(0,212,255,0.1), inset 0 0 20px rgba(0,212,255,0.05); }
body:not(.light-mode) .dbg-gauge-face { position: absolute; inset: 8px; border-radius: 50%; background: rgba(0,20,40,0.3); border: 1px solid rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-gauge-tick { position: absolute; top: 50%; left: 50%; width: 2px; height: 12px; margin-top: -52px; background: rgba(0,212,255,0.4); transform-origin: center 52px; }
body:not(.light-mode) .dbg-gt-1 { transform: rotate(-60deg); }
body:not(.light-mode) .dbg-gt-2 { transform: rotate(-30deg); }
body:not(.light-mode) .dbg-gt-3 { transform: rotate(0deg); background: rgba(255,170,0,0.5); }
body:not(.light-mode) .dbg-gt-4 { transform: rotate(30deg); background: rgba(220,38,38,0.4); }
body:not(.light-mode) .dbg-gt-5 { transform: rotate(60deg); background: rgba(220,38,38,0.5); }
body:not(.light-mode) .dbg-gauge-needle { position: absolute; bottom: 50%; left: 50%; width: 3px; height: 48px; background: linear-gradient(to top, rgba(220,38,38,0.6), rgba(220,38,38,0.2)); transform-origin: bottom center; animation: dbgGaugeSwing 4s ease-in-out infinite alternate; box-shadow: 0 0 8px rgba(220,38,38,0.3); border-radius: 1px; }
body:not(.light-mode) .dbg-gauge-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(0,212,255,0.4); background: rgba(0,212,255,0.15); box-shadow: 0 0 10px rgba(0,212,255,0.2); }
@keyframes dbgGaugeSwing { 0% { transform: rotate(-50deg); } 100% { transform: rotate(50deg); } }

/* Holographic Motor Schematic */
body:not(.light-mode) .dbg-motor-schem { position: absolute; top: 60%; left: 40%; width: 100px; height: 100px; }
body:not(.light-mode) .dbg-ms-stator { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(168,85,247,0.25); box-shadow: 0 0 15px rgba(168,85,247,0.08); }
body:not(.light-mode) .dbg-ms-rotor { position: absolute; inset: 20px; border-radius: 50%; border: 2px solid rgba(0,212,255,0.3); animation: cbgGearSpin 5s linear infinite; box-shadow: 0 0 12px rgba(0,212,255,0.1); }
body:not(.light-mode) .dbg-ms-coil { position: absolute; width: 14px; height: 8px; border: 1.5px solid rgba(168,85,247,0.35); border-radius: 3px; animation: dbgCoilPulse 2s ease-in-out infinite; }
body:not(.light-mode) .dbg-mc-1 { top: -4px; left: 50%; transform: translateX(-50%); }
body:not(.light-mode) .dbg-mc-2 { bottom: -4px; left: 10px; transform: rotate(120deg); animation-delay: 0.7s; }
body:not(.light-mode) .dbg-mc-3 { bottom: -4px; right: 10px; transform: rotate(240deg); animation-delay: 1.4s; }
body:not(.light-mode) .dbg-ms-shaft { position: absolute; top: 50%; right: -25px; transform: translateY(-50%); width: 25px; height: 4px; background: rgba(0,212,255,0.25); box-shadow: 0 0 6px rgba(0,212,255,0.15); border-radius: 2px; }
@keyframes dbgCoilPulse { 0%,100% { box-shadow: 0 0 4px rgba(168,85,247,0.1); } 50% { box-shadow: 0 0 15px rgba(168,85,247,0.4), 0 0 30px rgba(168,85,247,0.15); background: rgba(168,85,247,0.1); } }

/* Laser Cutter */
body:not(.light-mode) .dbg-laser { position: absolute; top: 10%; left: 50%; }
body:not(.light-mode) .dbg-laser-head { width: 20px; height: 12px; border: 2px solid rgba(220,38,38,0.4); border-radius: 3px; background: rgba(220,38,38,0.08); animation: dbgLaserMove 5s ease-in-out infinite; }
body:not(.light-mode) .dbg-laser-beam { position: absolute; top: 12px; left: 9px; width: 3px; height: 60px; background: linear-gradient(to bottom, rgba(220,38,38,0.7), rgba(220,38,38,0.2)); box-shadow: 0 0 15px rgba(220,38,38,0.4), 0 0 30px rgba(220,38,38,0.15); animation: dbgLaserMove 5s ease-in-out infinite; border-radius: 1px; }
body:not(.light-mode) .dbg-laser-impact { position: absolute; top: 70px; left: 5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(220,38,38,0.5), transparent); box-shadow: 0 0 20px rgba(220,38,38,0.4), 0 0 40px rgba(255,170,0,0.2); animation: dbgLaserMove 5s ease-in-out infinite, dbgLaserFlicker 0.3s ease-in-out infinite; }
@keyframes dbgLaserMove { 0%,100% { transform: translateX(0); } 50% { transform: translateX(60px); } }
@keyframes dbgLaserFlicker { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }

/* Energy Bursts */
body:not(.light-mode) .dbg-burst { position: absolute; border-radius: 50%; border: 2px solid rgba(0,212,255,0.4); animation: dbgBurstExpand 6s ease-out infinite; }
body:not(.light-mode) .dbg-burst-1 { top: 50%; left: 55%; animation-delay: 0s; }
body:not(.light-mode) .dbg-burst-2 { top: 50%; left: 55%; animation-delay: 2s; border-color: rgba(168,85,247,0.35); }
body:not(.light-mode) .dbg-burst-3 { top: 50%; left: 55%; animation-delay: 4s; }
@keyframes dbgBurstExpand { 0% { width: 5px; height: 5px; opacity: 0.8; box-shadow: 0 0 10px rgba(0,212,255,0.3); } 100% { width: 100px; height: 100px; opacity: 0; margin: -47px 0 0 -47px; } }

/* Ambient Fog */
body:not(.light-mode) .dbg-fog { position: absolute; border-radius: 50%; filter: blur(40px); }
body:not(.light-mode) .dbg-fog-1 { top: 20%; left: -5%; width: 300px; height: 200px; background: radial-gradient(ellipse, rgba(0,212,255,0.06), transparent 70%); animation: dbgFogDrift 20s ease-in-out infinite alternate; }
body:not(.light-mode) .dbg-fog-2 { bottom: 10%; right: -5%; width: 350px; height: 250px; background: radial-gradient(ellipse, rgba(168,85,247,0.05), transparent 70%); animation: dbgFogDrift 25s ease-in-out infinite alternate-reverse; }
@keyframes dbgFogDrift { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, -20px); } }

/* ═══ DARK ECO MODE OVERRIDES (30% Power / GPU Friendly) ═══ */
body.eco-mode:not(.light-mode) .p3-career-bg-dark {
  opacity: 0.3; /* Global 30% intensity dial-back */
}
/* Remove expensive filters and glows */
body.eco-mode:not(.light-mode) .p3-career-bg-dark * {
  box-shadow: none !important;
  filter: none !important;
}
/* Slow down all remaining animations significantly to save CPU/GPU cycles */
body.eco-mode:not(.light-mode) .p3-career-bg-dark * {
  animation-duration: 20s !important;
}
/* Hide highly complex/particle elements entirely in Eco Mode */
body.eco-mode:not(.light-mode) .dbg-datarain,
body.eco-mode:not(.light-mode) .dbg-wspark,
body.eco-mode:not(.light-mode) .dbg-spark-particle,
body.eco-mode:not(.light-mode) .dbg-plasma,
body.eco-mode:not(.light-mode) .dbg-arc,
body.eco-mode:not(.light-mode) .dbg-burst,
body.eco-mode:not(.light-mode) .dbg-fog,
body.eco-mode:not(.light-mode) .dbg-laser,
body.eco-mode:not(.light-mode) .dbg-circuit::after,
body.eco-mode:not(.light-mode) .dbg-pulse-line::after,
body.eco-mode:not(.light-mode) .dbg-conduit-flow {
  display: none !important;
  animation: none !important;
}
/* Simplify borders for rendering efficiency */
body.eco-mode:not(.light-mode) .dbg-hex-ring,
body.eco-mode:not(.light-mode) .dbg-neon-gear {
  border-style: solid !important;
}

/* ════════════════════════════════════════════════════════════════
   §7-BG  CAREER PATH — LIGHT PERFORMANCE MODE BACKGROUND
   "Industrial Pathfinder" — A unique blueprint-compass-conveyor theme
   Only visible in Light Performance Mode
   ════════════════════════════════════════════════════════════════ */

/* Hide by default — only show in light performance mode */
.p3-career-bg-light { display: none; }

body.light-mode .p3-career-bg-light {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
body.light-mode .p3-career > .p3-container { position: relative; z-index: 1; }

/* ─── Blueprint Compass Rose ─── */
body.light-mode .cbg-compass {
  position: absolute; top: 10%; right: 6%;
  width: 260px; height: 260px;
}
body.light-mode .cbg-compass-ring {
  position: absolute; inset: 0;
  border: 3px dashed rgba(8, 145, 178, 0.2);
  border-radius: 50%;
  animation: cbgCompassSpin 30s linear infinite;
}
body.light-mode .cbg-ring-outer {
  inset: -25px;
  border: 2px solid rgba(8, 145, 178, 0.12);
  border-style: solid;
  animation-direction: reverse;
  animation-duration: 45s;
}
body.light-mode .cbg-compass-needle {
  position: absolute; top: 50%; left: 50%;
  width: 3px; height: 100px;
  background: linear-gradient(to bottom, rgba(8,145,178,0.4), transparent);
  transform-origin: top center;
  transform: translate(-50%, 0);
  animation: cbgNeedleSway 8s ease-in-out infinite alternate;
}
body.light-mode .cbg-compass-needle::before {
  content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(8, 145, 178, 0.25);
  box-shadow: 0 0 10px rgba(8, 145, 178, 0.2);
}
@keyframes cbgCompassSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes cbgNeedleSway { 0% { transform: translate(-50%, 0) rotate(-15deg); } 100% { transform: translate(-50%, 0) rotate(15deg); } }

/* ─── Branching Pathway Traces ─── */
body.light-mode .cbg-pathway {
  position: absolute; width: 3px;
  background: repeating-linear-gradient(to bottom, rgba(8,145,178,0.2) 0px, rgba(8,145,178,0.2) 8px, transparent 8px, transparent 14px);
  animation: cbgPathGrow 4s ease-out forwards;
}
body.light-mode .cbg-path-left {
  left: 18%; top: 35%; height: 45%;
  transform: rotate(-8deg);
  animation-delay: 0.5s;
}
body.light-mode .cbg-path-center {
  left: 50%; top: 30%; height: 55%;
  animation-delay: 0s;
}
body.light-mode .cbg-path-right {
  right: 18%; top: 32%; height: 50%;
  transform: rotate(8deg);
  animation-delay: 1s;
}
body.light-mode .cbg-pathway::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(8, 145, 178, 0.15);
  animation: cbgEndpointPulse 3s ease-in-out infinite;
}
@keyframes cbgPathGrow { 0% { height: 0; } 100% { } }
@keyframes cbgEndpointPulse { 
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; } 
  50% { transform: translateX(-50%) scale(1.5); opacity: 1; } 
}

/* ─── Signal Tower / Antenna ─── */
body.light-mode .cbg-tower {
  position: absolute; bottom: 10%; left: 6%;
}
body.light-mode .cbg-tower-mast {
  width: 4px; height: 100px;
  background: linear-gradient(to top, rgba(8,145,178,0.3), rgba(8,145,178,0.08));
  margin: 0 auto;
}
body.light-mode .cbg-tower-mast::before {
  content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(14,165,233,0.3);
  box-shadow: 0 0 8px rgba(14,165,233,0.2);
  animation: cbgTowerBlink 2s ease-in-out infinite;
}
body.light-mode .cbg-tower-signal {
  position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  border: 1.5px solid rgba(14, 165, 233, 0.15);
  border-radius: 50%;
  animation: cbgSignalExpand 4s ease-out infinite;
}
body.light-mode .cbg-sig-1 { animation-delay: 0s; }
body.light-mode .cbg-sig-2 { animation-delay: 1.3s; }
body.light-mode .cbg-sig-3 { animation-delay: 2.6s; }
@keyframes cbgSignalExpand {
  0% { width: 6px; height: 6px; opacity: 0.8; }
  100% { width: 80px; height: 80px; opacity: 0; }
}
@keyframes cbgTowerBlink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ─── Floating Career Icons ─── */
body.light-mode .cbg-icon {
  position: absolute;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(8, 145, 178, 0.1);
  border-radius: 8px;
  animation: cbgIconFloat 8s ease-in-out infinite alternate;
  opacity: 0.4;
}
body.light-mode .cbg-icon::before {
  font-size: 18px; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
body.light-mode .cbg-icon-gear {
  top: 20%; left: 5%;
  border-radius: 50%; animation-delay: 0s;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(8,145,178,0.1) 30deg, transparent 60deg, rgba(8,145,178,0.1) 90deg, transparent 120deg, rgba(8,145,178,0.1) 150deg, transparent 180deg, rgba(8,145,178,0.1) 210deg, transparent 240deg, rgba(8,145,178,0.1) 270deg, transparent 300deg, rgba(8,145,178,0.1) 330deg, transparent 360deg);
  animation: cbgGearSpin 20s linear infinite;
  width: 65px; height: 65px;
}
body.light-mode .cbg-icon-cap {
  bottom: 25%; right: 15%; animation-delay: 2s;
  background: linear-gradient(135deg, rgba(8,145,178,0.05), rgba(14,165,233,0.08));
}
body.light-mode .cbg-icon-cap::after {
  content: ''; position: absolute; top: -6px; left: 20%; right: 20%;
  height: 4px; background: rgba(8,145,178,0.12); border-radius: 2px 2px 0 0;
}
body.light-mode .cbg-icon-wrench {
  top: 55%; left: 12%; animation-delay: 4s;
  transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(8,145,178,0.04), transparent);
}
body.light-mode .cbg-icon-wrench::after {
  content: ''; position: absolute; top: 4px; left: 4px;
  width: 12px; height: 32px;
  border: 1.5px solid rgba(8,145,178,0.1);
  border-radius: 6px 6px 2px 2px;
}
@keyframes cbgIconFloat {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-15px) rotate(5deg); }
}
@keyframes cbgGearSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ─── Conveyor Data Packets ─── */
body.light-mode .cbg-conveyor {
  position: absolute; bottom: 5%; left: 25%; right: 10%;
  height: 30px;
}
body.light-mode .cbg-conveyor-track {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(8,145,178,0.1) 0px, rgba(8,145,178,0.1) 15px, transparent 15px, transparent 20px);
  animation: cbgTrackMove 3s linear infinite;
}
body.light-mode .cbg-packet {
  position: absolute; bottom: 6px;
  width: 20px; height: 14px;
  background: rgba(8, 145, 178, 0.06);
  border: 1px solid rgba(8, 145, 178, 0.1);
  border-radius: 3px;
  animation: cbgPacketSlide 8s linear infinite;
}
body.light-mode .cbg-pk-1 { animation-delay: 0s; }
body.light-mode .cbg-pk-2 { animation-delay: 2s; }
body.light-mode .cbg-pk-3 { animation-delay: 4s; }
body.light-mode .cbg-pk-4 { animation-delay: 6s; }
body.light-mode .cbg-packet::before {
  content: ''; position: absolute; top: 3px; left: 3px; right: 3px; height: 2px;
  background: rgba(8,145,178,0.15); border-radius: 1px;
}
body.light-mode .cbg-packet::after {
  content: ''; position: absolute; bottom: 3px; left: 3px; width: 8px; height: 2px;
  background: rgba(14,165,233,0.12); border-radius: 1px;
}
@keyframes cbgPacketSlide { 0% { left: -30px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes cbgTrackMove { 0% { background-position: 0 0; } 100% { background-position: -20px 0; } }

/* ─── Crosshair Measurement Markers ─── */
body.light-mode .cbg-crosshair {
  position: absolute;
  width: 30px; height: 30px;
}
body.light-mode .cbg-crosshair::before {
  content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px;
  background: rgba(8, 145, 178, 0.1);
}
body.light-mode .cbg-crosshair::after {
  content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%;
  background: rgba(8, 145, 178, 0.1);
}
body.light-mode .cbg-ch-1 { top: 15%; left: 30%; animation: cbgCrosshairPulse 5s ease-in-out infinite; }
body.light-mode .cbg-ch-2 { bottom: 20%; right: 30%; animation: cbgCrosshairPulse 5s ease-in-out infinite 2.5s; }
@keyframes cbgCrosshairPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* ─── Rising Data Columns (Bar Chart) ─── */
body.light-mode .cbg-databar {
  position: absolute; bottom: 12%;
  width: 12px; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, rgba(8,145,178,0.08), rgba(14,165,233,0.03));
  border: 1px solid rgba(8,145,178,0.06);
  border-bottom: none;
  animation: cbgBarRise 6s ease-in-out infinite alternate;
}
body.light-mode .cbg-db-1 { right: 6%; height: 60px; animation-delay: 0s; }
body.light-mode .cbg-db-2 { right: 9%; height: 90px; animation-delay: 1s; }
body.light-mode .cbg-db-3 { right: 12%; height: 45px; animation-delay: 2s; }
body.light-mode .cbg-databar::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(14, 165, 233, 0.15);
  border-radius: 4px 4px 0 0;
  animation: cbgBarCapGlow 2s ease-in-out infinite alternate;
}
@keyframes cbgBarRise {
  0% { transform: scaleY(0.6); opacity: 0.3; }
  100% { transform: scaleY(1); opacity: 0.6; }
}
@keyframes cbgBarCapGlow {
  0% { background: rgba(14,165,233,0.1); }
  100% { background: rgba(14,165,233,0.25); }
}

/* ═══════════════════════════════════════════════════════════════
   §7-BG WAVE 2: ALL-OUT MECHATRONIC ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Robotic Arm ─── */
body.light-mode .cbg-robo-arm {
  position: absolute; bottom: 15%; right: 4%; width: 120px; height: 160px;
}
body.light-mode .cbg-robo-base {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 12px; background: rgba(8,145,178,0.12);
  border-radius: 3px 3px 0 0; border: 1px solid rgba(8,145,178,0.1);
}
body.light-mode .cbg-robo-joint1 {
  position: absolute; bottom: 12px; left: 50%; transform-origin: bottom center;
  width: 3px; height: 60px; background: rgba(8,145,178,0.15);
  transform: translateX(-50%) rotate(0deg);
  animation: cbgRoboSwing1 6s ease-in-out infinite alternate;
}
body.light-mode .cbg-robo-joint1::before {
  content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(8,145,178,0.15); background: rgba(8,145,178,0.05);
}
body.light-mode .cbg-robo-joint2 {
  position: absolute; top: 0; left: 50%; transform-origin: top center;
  width: 2px; height: 45px; background: rgba(8,145,178,0.12);
  transform: translateX(-50%) rotate(0deg);
  animation: cbgRoboSwing2 6s ease-in-out infinite alternate-reverse;
}
body.light-mode .cbg-robo-claw {
  position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 8px;
  border-bottom: 2px solid rgba(8,145,178,0.2);
  border-left: 2px solid rgba(8,145,178,0.2);
  border-right: 2px solid rgba(8,145,178,0.2);
  border-radius: 0 0 4px 4px;
  animation: cbgClawGrab 3s ease-in-out infinite;
}
@keyframes cbgRoboSwing1 { 0% { transform: translateX(-50%) rotate(-20deg); } 100% { transform: translateX(-50%) rotate(15deg); } }
@keyframes cbgRoboSwing2 { 0% { transform: translateX(-50%) rotate(-25deg); } 100% { transform: translateX(-50%) rotate(20deg); } }
@keyframes cbgClawGrab { 0%,100% { width: 14px; } 50% { width: 8px; } }

/* ─── PCB Circuit Board Traces ─── */
body.light-mode .cbg-pcb-trace {
  position: absolute; height: 1.5px;
  background: rgba(8,145,178,0.08);
}
body.light-mode .cbg-pcb-trace::after {
  content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 30px;
  background: linear-gradient(90deg, rgba(14,165,233,0.3), transparent);
  animation: cbgPcbPulse 4s linear infinite;
}
body.light-mode .cbg-pcb-1 { top: 22%; left: 35%; width: 180px; }
body.light-mode .cbg-pcb-2 { top: 22%; left: 35%; width: 1.5px; height: 60px !important; }
body.light-mode .cbg-pcb-3 { top: 65%; right: 25%; width: 150px; transform: rotate(-30deg); }
body.light-mode .cbg-pcb-3::after { animation-delay: 1.5s; }
body.light-mode .cbg-pcb-4 { bottom: 30%; left: 40%; width: 120px; transform: rotate(15deg); }
body.light-mode .cbg-pcb-4::after { animation-delay: 3s; }
body.light-mode .cbg-pcb-node {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid rgba(8,145,178,0.12);
  background: rgba(14,165,233,0.06);
  animation: cbgNodePulse 3s ease-in-out infinite;
}
body.light-mode .cbg-pcbn-1 { top: 21.5%; left: 35%; }
body.light-mode .cbg-pcbn-2 { top: 21.5%; left: calc(35% + 180px); animation-delay: 0.5s; }
body.light-mode .cbg-pcbn-3 { top: calc(22% + 60px); left: 35%; animation-delay: 1s; }
body.light-mode .cbg-pcbn-4 { top: 64%; right: 25%; animation-delay: 1.5s; }
body.light-mode .cbg-pcbn-5 { bottom: 29%; left: 40%; animation-delay: 2s; }
@keyframes cbgPcbPulse { 0% { left: -30px; } 100% { left: calc(100% + 30px); } }
@keyframes cbgNodePulse { 0%,100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }

/* ─── Rotating Meshing Gears ─── */
body.light-mode .cbg-gear-pair {
  position: absolute; bottom: 35%; left: 3%;
}
body.light-mode .cbg-gear {
  position: absolute; border-radius: 50%;
  border: 2px dashed rgba(8,145,178,0.1);
}
body.light-mode .cbg-gear::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1.5px solid rgba(8,145,178,0.08);
}
body.light-mode .cbg-gear-lg {
  width: 70px; height: 70px; animation: cbgGearSpin 15s linear infinite;
  background: conic-gradient(from 0deg, transparent, rgba(8,145,178,0.04) 15deg, transparent 30deg) repeat;
}
body.light-mode .cbg-gear-lg::before { width: 25px; height: 25px; }
body.light-mode .cbg-gear-sm {
  width: 45px; height: 45px; top: 55px; left: 58px;
  animation: cbgGearSpin 9.6s linear infinite reverse;
  background: conic-gradient(from 0deg, transparent, rgba(8,145,178,0.04) 20deg, transparent 40deg) repeat;
}
body.light-mode .cbg-gear-sm::before { width: 16px; height: 16px; }

/* ─── Hydraulic Pistons ─── */
body.light-mode .cbg-piston {
  position: absolute;
}
body.light-mode .cbg-piston-shaft {
  width: 4px; height: 50px; background: rgba(8,145,178,0.1);
  border-radius: 2px; margin: 0 auto;
}
body.light-mode .cbg-piston-head {
  width: 20px; height: 8px; background: rgba(8,145,178,0.12);
  border: 1px solid rgba(8,145,178,0.1); border-radius: 2px;
  margin: 0 auto; animation: cbgPistonPump 2.5s ease-in-out infinite;
}
body.light-mode .cbg-piston-1 { top: 40%; right: 2%; }
body.light-mode .cbg-piston-2 { top: 40%; right: 5%; animation-delay: 1.2s; }
body.light-mode .cbg-piston-2 .cbg-piston-head { animation-delay: 1.2s; }
@keyframes cbgPistonPump { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* ─── PLC Ladder Logic ─── */
body.light-mode .cbg-ladder {
  position: absolute; top: 8%; left: 38%; width: 100px; height: 140px;
}
body.light-mode .cbg-ladder-rail {
  position: absolute; top: 0; width: 2px; height: 100%;
  background: rgba(8,145,178,0.1);
}
body.light-mode .cbg-rail-l { left: 0; }
body.light-mode .cbg-rail-r { right: 0; }
body.light-mode .cbg-ladder-rung {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: rgba(8,145,178,0.07);
}
body.light-mode .cbg-rung-1 { top: 20%; }
body.light-mode .cbg-rung-2 { top: 40%; }
body.light-mode .cbg-rung-3 { top: 60%; }
body.light-mode .cbg-rung-4 { top: 80%; }
body.light-mode .cbg-ladder-contact {
  position: absolute; width: 8px; height: 8px;
  border: 1.5px solid rgba(8,145,178,0.12); border-radius: 50%;
  animation: cbgContactFlash 3s ease-in-out infinite;
}
body.light-mode .cbg-lc-1 { top: 18%; left: 40%; animation-delay: 0s; }
body.light-mode .cbg-lc-2 { top: 38%; left: 55%; animation-delay: 1s; }
body.light-mode .cbg-lc-3 { top: 58%; left: 35%; animation-delay: 2s; }
@keyframes cbgContactFlash {
  0%,100% { background: transparent; border-color: rgba(8,145,178,0.1); }
  50% { background: rgba(14,165,233,0.2); border-color: rgba(14,165,233,0.3); box-shadow: 0 0 6px rgba(14,165,233,0.15); }
}

/* ─── Welding Sparks ─── */
body.light-mode .cbg-spark {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 4px rgba(245,158,11,0.3);
}
body.light-mode .cbg-spk-1 { bottom: 18%; right: 5%; animation: cbgSparkFly1 2s ease-out infinite; }
body.light-mode .cbg-spk-2 { bottom: 18%; right: 5%; animation: cbgSparkFly2 2.3s ease-out infinite 0.3s; }
body.light-mode .cbg-spk-3 { bottom: 18%; right: 5%; animation: cbgSparkFly3 1.8s ease-out infinite 0.6s; }
body.light-mode .cbg-spk-4 { bottom: 18%; right: 5%; animation: cbgSparkFly4 2.5s ease-out infinite 0.1s; }
body.light-mode .cbg-spk-5 { bottom: 18%; right: 5%; animation: cbgSparkFly5 2.1s ease-out infinite 0.8s; }
body.light-mode .cbg-spk-6 { bottom: 18%; right: 5%; animation: cbgSparkFly6 1.9s ease-out infinite 0.4s; }
@keyframes cbgSparkFly1 { 0% { transform: translate(0,0); opacity:0.8; } 100% { transform: translate(-25px,-40px); opacity:0; } }
@keyframes cbgSparkFly2 { 0% { transform: translate(0,0); opacity:0.7; } 100% { transform: translate(15px,-35px); opacity:0; } }
@keyframes cbgSparkFly3 { 0% { transform: translate(0,0); opacity:0.9; } 100% { transform: translate(-10px,-50px); opacity:0; } }
@keyframes cbgSparkFly4 { 0% { transform: translate(0,0); opacity:0.6; } 100% { transform: translate(20px,-30px); opacity:0; } }
@keyframes cbgSparkFly5 { 0% { transform: translate(0,0); opacity:0.8; } 100% { transform: translate(-30px,-25px); opacity:0; } }
@keyframes cbgSparkFly6 { 0% { transform: translate(0,0); opacity:0.7; } 100% { transform: translate(5px,-45px); opacity:0; } }

/* ─── Hexagonal Grid Overlay ─── */
body.light-mode .cbg-hex-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(8,145,178,0.06) 1.5px, transparent 1.5px);
  background-size: 35px 35px;
  background-position: 0 0, 17px 20px;
  opacity: 0.8;
  animation: cbgHexDrift 20s linear infinite;
}
@keyframes cbgHexDrift { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } }

/* ─── Particle Field ─── */
body.light-mode .cbg-particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(8,145,178,0.15);
}
body.light-mode .cbg-pt-1 { top: 10%; left: 15%; animation: cbgParticle 12s linear infinite; }
body.light-mode .cbg-pt-2 { top: 30%; left: 60%; animation: cbgParticle 15s linear infinite 2s; width: 3px; height: 3px; }
body.light-mode .cbg-pt-3 { top: 50%; left: 80%; animation: cbgParticle 10s linear infinite 4s; }
body.light-mode .cbg-pt-4 { top: 70%; left: 25%; animation: cbgParticle 14s linear infinite 1s; width: 2px; height: 2px; }
body.light-mode .cbg-pt-5 { top: 85%; left: 55%; animation: cbgParticle 11s linear infinite 3s; }
body.light-mode .cbg-pt-6 { top: 15%; left: 75%; animation: cbgParticle 13s linear infinite 5s; width: 3px; height: 3px; }
body.light-mode .cbg-pt-7 { top: 45%; left: 10%; animation: cbgParticle 16s linear infinite 2.5s; width: 2px; height: 2px; }
body.light-mode .cbg-pt-8 { top: 60%; left: 90%; animation: cbgParticle 9s linear infinite 4.5s; }
@keyframes cbgParticle {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.5; }
  50% { opacity: 0.3; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-60px) translateX(30px); opacity: 0; }
}

/* ─── Blueprint Dimension Lines ─── */
body.light-mode .cbg-dimension {
  position: absolute;
}
body.light-mode .cbg-dim-h {
  top: 92%; left: 15%; width: 200px; height: 1px;
  background: rgba(8,145,178,0.08);
}
body.light-mode .cbg-dim-h::before,
body.light-mode .cbg-dim-h::after {
  content: ''; position: absolute; top: -4px; width: 1px; height: 9px;
  background: rgba(8,145,178,0.1);
}
body.light-mode .cbg-dim-h::before { left: 0; }
body.light-mode .cbg-dim-h::after { right: 0; }
body.light-mode .cbg-dim-v {
  top: 5%; right: 3%; width: 1px; height: 150px;
  background: rgba(8,145,178,0.06);
}
body.light-mode .cbg-dim-v::before,
body.light-mode .cbg-dim-v::after {
  content: ''; position: absolute; left: -4px; width: 9px; height: 1px;
  background: rgba(8,145,178,0.08);
}
body.light-mode .cbg-dim-v::before { top: 0; }
body.light-mode .cbg-dim-v::after { bottom: 0; }

/* ─── Oscilloscope Wave ─── */
body.light-mode .cbg-oscilloscope {
  position: absolute; bottom: 25%; left: 15%; width: 200px; height: 40px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 8px,
      rgba(8,145,178,0.03) 8px, rgba(8,145,178,0.03) 9px
    );
  border: 1px solid rgba(8,145,178,0.06);
  border-radius: 4px; overflow: hidden;
}
body.light-mode .cbg-oscilloscope::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: 
    radial-gradient(ellipse 60px 15px at 20% 50%, rgba(14,165,233,0.12) 0%, transparent 100%),
    radial-gradient(ellipse 60px 15px at 50% 30%, rgba(14,165,233,0.1) 0%, transparent 100%),
    radial-gradient(ellipse 60px 15px at 80% 60%, rgba(14,165,233,0.12) 0%, transparent 100%);
  animation: cbgOscilloSweep 5s linear infinite;
}
@keyframes cbgOscilloSweep { 0% { left: -100%; } 100% { left: 100%; } }

/* ─── Clean Room Laser Sweep ─── */
body.light-mode .cbg-laser-sweep {
  position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.15) 30%, rgba(14,165,233,0.15) 70%, transparent);
  box-shadow: 0 0 12px rgba(14,165,233,0.08);
  animation: cbgLaserSweep 7s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes cbgLaserSweep { 0% { top: -3px; opacity: 0; } 5% { opacity: 0.5; } 95% { opacity: 0.5; } 100% { top: 100%; opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════
   §7-BG WAVE 3: APEX OVERDRIVE — HIGH-VISIBILITY ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* ─── LARGE Turbine Engine ─── */
body.light-mode .cbg-turbine {
  position: absolute; top: 50%; left: 8%;
  width: 160px; height: 160px; transform: translateY(-50%);
}
body.light-mode .cbg-turbine-outer {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(8,145,178,0.15);
  box-shadow: inset 0 0 20px rgba(8,145,178,0.05);
}
body.light-mode .cbg-turbine-inner {
  position: absolute; inset: 20px; border-radius: 50%;
  border: 2px dashed rgba(8,145,178,0.12);
  animation: cbgGearSpin 20s linear infinite reverse;
}
body.light-mode .cbg-turbine-blade {
  position: absolute; top: 50%; left: 50%;
  width: 4px; height: 55px; background: linear-gradient(to bottom, rgba(8,145,178,0.2), rgba(8,145,178,0.05));
  transform-origin: top center; border-radius: 2px;
  animation: cbgGearSpin 8s linear infinite;
}
body.light-mode .cbg-tb-1 { transform: translate(-50%, 0) rotate(0deg); }
body.light-mode .cbg-tb-2 { transform: translate(-50%, 0) rotate(90deg); }
body.light-mode .cbg-tb-3 { transform: translate(-50%, 0) rotate(180deg); }
body.light-mode .cbg-tb-4 { transform: translate(-50%, 0) rotate(270deg); }
body.light-mode .cbg-turbine-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,0.25), rgba(8,145,178,0.1));
  border: 2px solid rgba(8,145,178,0.2);
  box-shadow: 0 0 15px rgba(14,165,233,0.1);
  animation: cbgCorePulse 3s ease-in-out infinite alternate;
}
@keyframes cbgCorePulse { 
  0% { box-shadow: 0 0 10px rgba(14,165,233,0.1); } 
  100% { box-shadow: 0 0 25px rgba(14,165,233,0.25), 0 0 50px rgba(14,165,233,0.08); } 
}

/* ─── CNC Tool Path ─── */
body.light-mode .cbg-cnc-path {
  position: absolute;
  border: 1.5px dashed rgba(8,145,178,0.15);
  border-right: none; border-top: none;
}
body.light-mode .cbg-cnc-1 {
  top: 12%; right: 20%; width: 120px; height: 80px;
  animation: cbgCncDraw 4s ease-in-out infinite;
}
body.light-mode .cbg-cnc-2 {
  top: calc(12% + 80px); right: 20%; width: 80px; height: 50px;
  animation: cbgCncDraw 4s ease-in-out infinite 1.5s;
}
body.light-mode .cbg-cnc-3 {
  top: calc(12% + 130px); right: calc(20% + 40px); width: 60px; height: 40px;
  animation: cbgCncDraw 4s ease-in-out infinite 3s;
}
body.light-mode .cbg-cnc-head {
  position: absolute; top: 12%; right: 20%;
  width: 10px; height: 10px; background: rgba(14,165,233,0.35);
  border-radius: 50%; box-shadow: 0 0 10px rgba(14,165,233,0.2);
  animation: cbgCncMove 8s ease-in-out infinite;
}
@keyframes cbgCncDraw {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  50% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0.3; }
}
@keyframes cbgCncMove {
  0% { top: 12%; right: 20%; }
  25% { top: calc(12% + 80px); right: 20%; }
  50% { top: calc(12% + 130px); right: calc(20% + 40px); }
  75% { top: calc(12% + 80px); right: calc(20% + 100px); }
  100% { top: 12%; right: 20%; }
}

/* ─── Steam Vents ─── */
body.light-mode .cbg-steam {
  position: absolute;
}
body.light-mode .cbg-steam-1 { bottom: 8%; left: 20%; }
body.light-mode .cbg-steam-2 { bottom: 8%; left: 24%; }
body.light-mode .cbg-steam-puff {
  position: absolute; bottom: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(8,145,178,0.08);
  filter: blur(3px);
  animation: cbgSteamRise 3s ease-out infinite;
}
body.light-mode .cbg-sp-1 { animation-delay: 0s; left: 0; }
body.light-mode .cbg-sp-2 { animation-delay: 1s; left: 5px; }
body.light-mode .cbg-sp-3 { animation-delay: 2s; left: -3px; }
body.light-mode .cbg-steam-2 .cbg-sp-1 { animation-delay: 0.5s; }
body.light-mode .cbg-steam-2 .cbg-sp-2 { animation-delay: 1.5s; }
body.light-mode .cbg-steam-2 .cbg-sp-3 { animation-delay: 2.5s; }
@keyframes cbgSteamRise {
  0% { transform: translateY(0) scale(1); opacity: 0.5; }
  50% { transform: translateY(-30px) scale(1.8) translateX(5px); opacity: 0.25; }
  100% { transform: translateY(-60px) scale(2.5) translateX(10px); opacity: 0; }
}

/* ─── Electrical Arc ─── */
body.light-mode .cbg-arc-zone {
  position: absolute; top: 25%; right: 3%; width: 50px; height: 30px;
}
body.light-mode .cbg-arc-terminal {
  position: absolute; top: 50%; width: 6px; height: 6px;
  background: rgba(14,165,233,0.3); border-radius: 50%;
  transform: translateY(-50%);
}
body.light-mode .cbg-at-l { left: 0; }
body.light-mode .cbg-at-r { right: 0; }
body.light-mode .cbg-arc {
  position: absolute; top: 40%; left: 10%; right: 10%; height: 3px;
  background: linear-gradient(90deg, rgba(14,165,233,0.5), rgba(59,130,246,0.4), rgba(14,165,233,0.5));
  border-radius: 2px; filter: blur(1px);
  animation: cbgArcFlash 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(14,165,233,0.3);
}
body.light-mode .cbg-arc-1 { animation-delay: 0s; transform: rotate(5deg); }
body.light-mode .cbg-arc-2 { animation-delay: 0.7s; transform: rotate(-3deg); top: 50%; }
body.light-mode .cbg-arc-3 { animation-delay: 1.4s; transform: rotate(8deg); top: 60%; }
@keyframes cbgArcFlash {
  0%, 100% { opacity: 0; }
  5% { opacity: 1; }
  10% { opacity: 0.2; }
  12% { opacity: 0.8; }
  15% { opacity: 0; }
  50% { opacity: 0; }
}

/* ─── Giant Schematic Motor Cross-Section ─── */
body.light-mode .cbg-motor-schematic {
  position: absolute; bottom: 30%; right: 35%;
  width: 120px; height: 120px;
}
body.light-mode .cbg-motor-stator {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(8,145,178,0.1);
}
body.light-mode .cbg-motor-rotor {
  position: absolute; inset: 20px; border-radius: 50%;
  border: 2px solid rgba(8,145,178,0.12);
  background: radial-gradient(circle, transparent 40%, rgba(8,145,178,0.04));
  animation: cbgGearSpin 6s linear infinite;
}
body.light-mode .cbg-motor-shaft {
  position: absolute; top: 50%; left: 50%;
  width: 60px; height: 4px; background: rgba(8,145,178,0.15);
  transform: translate(-50%,-50%); border-radius: 2px;
  animation: cbgGearSpin 6s linear infinite;
}
body.light-mode .cbg-motor-winding {
  position: absolute; width: 18px; height: 12px;
  border: 2px solid rgba(245,158,11,0.15);
  border-radius: 4px;
  animation: cbgWindingGlow 4s ease-in-out infinite alternate;
}
body.light-mode .cbg-mw-1 { top: 5px; left: 50%; transform: translateX(-50%); }
body.light-mode .cbg-mw-2 { bottom: 5px; left: 15px; transform: rotate(120deg); animation-delay: 1.3s; }
body.light-mode .cbg-mw-3 { bottom: 5px; right: 15px; transform: rotate(-120deg); animation-delay: 2.6s; }
@keyframes cbgWindingGlow {
  0% { border-color: rgba(245,158,11,0.1); background: transparent; }
  100% { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.05); }
}

/* ─── Data Flow Pipes ─── */
body.light-mode .cbg-pipe {
  position: absolute; height: 8px;
  background: rgba(8,145,178,0.06);
  border: 1px solid rgba(8,145,178,0.08);
  border-radius: 4px; overflow: hidden;
}
body.light-mode .cbg-pipe-flow {
  position: absolute; top: 1px; bottom: 1px; left: -30px; width: 30px;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.2), transparent);
  border-radius: 3px;
  animation: cbgPipeFlow 3s linear infinite;
}
body.light-mode .cbg-pipe-1 { top: 75%; left: 5%; width: 200px; }
body.light-mode .cbg-pipe-2 { top: 78%; left: 5%; width: 160px; }
body.light-mode .cbg-pipe-2 .cbg-pipe-flow { animation-delay: 1s; }
body.light-mode .cbg-pipe-3 { top: 75%; left: calc(5% + 200px); width: 8px; height: 35px; }
body.light-mode .cbg-pipe-3 .cbg-pipe-flow { 
  width: 100%; height: 15px; left: 1px; top: -15px;
  animation: cbgPipeFlowV 2s linear infinite 1.5s; 
}
@keyframes cbgPipeFlow { 0% { left: -30px; } 100% { left: calc(100% + 10px); } }
@keyframes cbgPipeFlowV { 0% { top: -15px; } 100% { top: calc(100% + 10px); } }

/* ─── Assembly Line with Career Boxes ─── */
body.light-mode .cbg-assembly-line {
  position: absolute; bottom: 2%; left: 30%; right: 5%; height: 45px;
}
body.light-mode .cbg-al-belt {
  position: absolute; bottom: 0; left: 0; right: 0; height: 6px;
  background: rgba(8,145,178,0.08);
  border: 1px solid rgba(8,145,178,0.1);
  border-radius: 3px;
}
body.light-mode .cbg-al-roller {
  position: absolute; bottom: -2px; width: 12px; height: 12px;
  border-radius: 50%; border: 1.5px solid rgba(8,145,178,0.12);
  background: rgba(8,145,178,0.04);
  animation: cbgGearSpin 2s linear infinite;
}
body.light-mode .cbg-alr-1 { left: 5%; }
body.light-mode .cbg-alr-2 { left: 25%; }
body.light-mode .cbg-alr-3 { left: 50%; }
body.light-mode .cbg-alr-4 { left: 75%; }
body.light-mode .cbg-alr-5 { right: 2%; }
body.light-mode .cbg-al-box {
  position: absolute; bottom: 10px;
  width: 28px; height: 28px;
  background: rgba(8,145,178,0.06);
  border: 1.5px solid rgba(8,145,178,0.12);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  animation: cbgBoxSlide 12s linear infinite;
}
body.light-mode .cbg-alb-1 { animation-delay: 0s; }
body.light-mode .cbg-alb-2 { animation-delay: 4s; }
body.light-mode .cbg-alb-3 { animation-delay: 8s; }
@keyframes cbgBoxSlide {
  0% { left: -30px; opacity: 0; }
  5% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { left: calc(100% + 10px); opacity: 0; }
}

/* ─── Radar Sweep ─── */
body.light-mode .cbg-radar {
  position: absolute; top: 5%; left: 60%;
  width: 130px; height: 130px;
}
body.light-mode .cbg-radar-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(8,145,178,0.08);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
body.light-mode .cbg-rr-1 { width: 40px; height: 40px; }
body.light-mode .cbg-rr-2 { width: 80px; height: 80px; }
body.light-mode .cbg-rr-3 { width: 120px; height: 120px; }
body.light-mode .cbg-radar-sweep-arm {
  position: absolute; top: 50%; left: 50%;
  width: 55px; height: 2px; transform-origin: left center;
  background: linear-gradient(90deg, rgba(14,165,233,0.3), transparent);
  animation: cbgRadarSweep 4s linear infinite;
}
body.light-mode .cbg-radar-sweep-arm::before {
  content: ''; position: absolute; top: -2px; left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(14,165,233,0.35);
}
body.light-mode .cbg-radar-blip {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(14,165,233,0.3);
  animation: cbgRadarBlip 4s ease-out infinite;
}
body.light-mode .cbg-rb-1 { top: 30%; left: 60%; animation-delay: 0.5s; }
body.light-mode .cbg-rb-2 { top: 55%; left: 75%; animation-delay: 1.5s; }
body.light-mode .cbg-rb-3 { top: 40%; left: 35%; animation-delay: 3s; }
@keyframes cbgRadarSweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes cbgRadarBlip {
  0% { opacity: 0; transform: scale(0); }
  10% { opacity: 0.8; transform: scale(1.5); }
  30% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

/* ─── Voltage Meter ─── */
body.light-mode .cbg-voltmeter {
  position: absolute; top: 60%; right: 15%;
  width: 70px; height: 40px;
}
body.light-mode .cbg-vm-face {
  position: absolute; inset: 0;
  border: 2px solid rgba(8,145,178,0.12);
  border-radius: 35px 35px 4px 4px;
  background: rgba(8,145,178,0.03);
  overflow: hidden;
}
body.light-mode .cbg-vm-face::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: rgba(8,145,178,0.1);
}
body.light-mode .cbg-vm-face::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(8,145,178,0.2);
}
body.light-mode .cbg-vm-needle {
  position: absolute; bottom: 2px; left: 50%;
  width: 2px; height: 30px;
  background: linear-gradient(to top, rgba(220,38,38,0.3), rgba(220,38,38,0.1));
  transform-origin: bottom center; border-radius: 1px;
  animation: cbgNeedleSwing 5s ease-in-out infinite alternate;
}
@keyframes cbgNeedleSwing {
  0% { transform: translateX(-50%) rotate(-40deg); }
  30% { transform: translateX(-50%) rotate(20deg); }
  60% { transform: translateX(-50%) rotate(-10deg); }
  100% { transform: translateX(-50%) rotate(35deg); }
}

/* ═══════════════════════════════════════════════════════════════
   §7-BG WAVE 4: APEX MAXIMUM — BOLD & COLORFUL
   ═══════════════════════════════════════════════════════════════ */

/* ─── Giant Flywheel with Spokes ─── */
body.light-mode .cbg-flywheel {
  position: absolute; bottom: 20%; left: 2%;
  width: 220px; height: 220px;
  animation: cbgGearSpin 12s linear infinite;
}
body.light-mode .cbg-fw-rim {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid rgba(8,145,178,0.18);
  box-shadow: inset 0 0 30px rgba(8,145,178,0.06), 0 0 20px rgba(8,145,178,0.04);
}
body.light-mode .cbg-fw-spoke {
  position: absolute; top: 50%; left: 50%;
  width: 3px; height: 95px; margin-top: -95px;
  background: linear-gradient(to top, rgba(8,145,178,0.2), rgba(8,145,178,0.06));
  transform-origin: bottom center;
}
body.light-mode .cbg-fws-1 { transform: rotate(0deg); }
body.light-mode .cbg-fws-2 { transform: rotate(60deg); }
body.light-mode .cbg-fws-3 { transform: rotate(120deg); }
body.light-mode .cbg-fws-4 { transform: rotate(180deg); }
body.light-mode .cbg-fws-5 { transform: rotate(240deg); }
body.light-mode .cbg-fws-6 { transform: rotate(300deg); }
body.light-mode .cbg-fw-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(8,145,178,0.2);
  background: radial-gradient(circle, rgba(14,165,233,0.15), transparent);
}

/* ─── Hydraulic Stamper Press ─── */
body.light-mode .cbg-stamper {
  position: absolute; top: 15%; left: 28%; width: 50px; height: 120px;
}
body.light-mode .cbg-stamper-frame {
  position: absolute; inset: 0;
  border: 2px solid rgba(8,145,178,0.12);
  border-radius: 4px; background: rgba(8,145,178,0.02);
}
body.light-mode .cbg-stamper-ram {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 50px; background: rgba(8,145,178,0.15);
  border-radius: 3px;
  animation: cbgStamperSlam 3s ease-in-out infinite;
}
body.light-mode .cbg-stamper-plate {
  position: absolute; bottom: 5px; left: 10%; right: 10%; height: 4px;
  background: rgba(8,145,178,0.2); border-radius: 2px;
}
body.light-mode .cbg-stamper-impact {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-radius: 50%;
  background: rgba(245,158,11,0.2);
  animation: cbgStamperImpact 3s ease-out infinite;
}
@keyframes cbgStamperSlam {
  0%, 100% { top: 5px; height: 50px; }
  40%, 60% { top: 55px; height: 50px; }
}
@keyframes cbgStamperImpact {
  0%, 39% { width: 0; height: 0; opacity: 0; }
  40% { width: 40px; height: 10px; opacity: 0.6; }
  60% { width: 60px; height: 15px; opacity: 0; }
  100% { opacity: 0; }
}

/* ─── Chain Drive Belt ─── */
body.light-mode .cbg-chain {
  position: absolute; top: 65%; right: 8%; width: 160px; height: 60px;
}
body.light-mode .cbg-chain-sprocket {
  position: absolute; top: 50%; width: 25px; height: 25px;
  border-radius: 50%; border: 2px solid rgba(8,145,178,0.2);
  transform: translateY(-50%);
  animation: cbgGearSpin 3s linear infinite;
}
body.light-mode .cbg-chain-sprocket::before {
  content: ''; position: absolute; inset: 6px;
  border-radius: 50%; border: 1px solid rgba(8,145,178,0.15);
}
body.light-mode .cbg-cs-1 { left: 0; }
body.light-mode .cbg-cs-2 { right: 0; animation-direction: reverse; }
body.light-mode .cbg-chain-link {
  position: absolute; width: 10px; height: 6px;
  border: 1.5px solid rgba(8,145,178,0.2);
  border-radius: 3px;
  animation: cbgChainMove 4s linear infinite;
}
body.light-mode .cbg-cl-1 { animation-delay: 0s; }
body.light-mode .cbg-cl-2 { animation-delay: 0.5s; }
body.light-mode .cbg-cl-3 { animation-delay: 1s; }
body.light-mode .cbg-cl-4 { animation-delay: 1.5s; }
body.light-mode .cbg-cl-5 { animation-delay: 2s; }
body.light-mode .cbg-cl-6 { animation-delay: 2.5s; }
body.light-mode .cbg-cl-7 { animation-delay: 3s; }
body.light-mode .cbg-cl-8 { animation-delay: 3.5s; }
@keyframes cbgChainMove {
  0% { left: 12px; top: 15px; }
  25% { left: 130px; top: 15px; }
  50% { left: 130px; top: 35px; }
  75% { left: 12px; top: 35px; }
  100% { left: 12px; top: 15px; }
}

/* ─── Industrial Gantry Crane ─── */
body.light-mode .cbg-crane {
  position: absolute; top: 3%; left: 45%; width: 200px; height: 100px;
}
body.light-mode .cbg-crane-beam {
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: rgba(8,145,178,0.15); border-radius: 2px;
}
body.light-mode .cbg-crane-leg {
  position: absolute; top: 0; width: 4px; height: 50px;
  background: rgba(8,145,178,0.12);
}
body.light-mode .cbg-cl-left { left: 5px; }
body.light-mode .cbg-cl-right { right: 5px; }
body.light-mode .cbg-crane-trolley {
  position: absolute; top: -3px;
  width: 20px; height: 10px;
  background: rgba(14,165,233,0.2);
  border: 1px solid rgba(14,165,233,0.15);
  border-radius: 3px;
  animation: cbgCraneTrolley 10s ease-in-out infinite;
}
body.light-mode .cbg-crane-cable {
  position: absolute; top: 8px; left: 0;
  width: 1.5px; height: 40px;
  background: rgba(8,145,178,0.2);
  animation: cbgCraneCable 10s ease-in-out infinite;
}
body.light-mode .cbg-crane-hook {
  position: absolute; top: 48px; left: 0;
  width: 10px; height: 10px;
  border: 2px solid rgba(8,145,178,0.2);
  border-top: none; border-radius: 0 0 5px 5px;
  animation: cbgCraneHook 10s ease-in-out infinite;
}
@keyframes cbgCraneTrolley { 0%,100% { left: 15px; } 50% { left: 165px; } }
@keyframes cbgCraneCable { 0%,100% { left: 24px; height: 40px; } 25% { height: 55px; } 50% { left: 174px; height: 40px; } 75% { height: 30px; } }
@keyframes cbgCraneHook { 0%,100% { left: 20px; top: 48px; } 25% { top: 63px; } 50% { left: 170px; top: 48px; } 75% { top: 38px; } }

/* ─── Wiring Harness ─── */
body.light-mode .cbg-wire {
  position: absolute; height: 3px; border-radius: 2px; overflow: hidden;
}
body.light-mode .cbg-wire-1 {
  top: 55%; left: 0; width: 25%;
  background: rgba(220,38,38,0.12);
  border: 0.5px solid rgba(220,38,38,0.08);
}
body.light-mode .cbg-wire-2 {
  top: 57%; left: 0; width: 20%;
  background: rgba(37,99,235,0.12);
  border: 0.5px solid rgba(37,99,235,0.08);
}
body.light-mode .cbg-wire-3 {
  top: 59%; left: 0; width: 15%;
  background: rgba(245,158,11,0.12);
  border: 0.5px solid rgba(245,158,11,0.08);
}
body.light-mode .cbg-wire-pulse {
  position: absolute; top: 0; bottom: 0; left: -20px; width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: cbgWirePulse 2s linear infinite;
}
body.light-mode .cbg-wire-2 .cbg-wire-pulse { animation-delay: 0.7s; }
body.light-mode .cbg-wire-3 .cbg-wire-pulse { animation-delay: 1.4s; }
@keyframes cbgWirePulse { 0% { left: -20px; } 100% { left: 100%; } }

/* ─── Safety Warning Stripes ─── */
body.light-mode .cbg-safety {
  position: absolute; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(245,158,11,0.08), rgba(245,158,11,0.08) 8px,
    transparent 8px, transparent 16px
  );
}
body.light-mode .cbg-safety-top { top: 0; }
body.light-mode .cbg-safety-bot { bottom: 0; }

/* ─── Pressure Gauge (large) ─── */
body.light-mode .cbg-pressure-gauge {
  position: absolute; top: 35%; right: 22%;
  width: 80px; height: 80px;
}
body.light-mode .cbg-pg-face {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(8,145,178,0.15);
  background: rgba(255,255,255,0.5);
  box-shadow: inset 0 0 15px rgba(8,145,178,0.05);
}
body.light-mode .cbg-pg-ticks {
  position: absolute; inset: 4px; border-radius: 50%;
  background: conic-gradient(
    from 225deg,
    transparent 0deg, rgba(8,145,178,0.08) 2deg, transparent 4deg,
    transparent 27deg, rgba(8,145,178,0.06) 29deg, transparent 31deg,
    transparent 54deg, rgba(8,145,178,0.06) 56deg, transparent 58deg,
    transparent 81deg, rgba(8,145,178,0.06) 83deg, transparent 85deg,
    transparent 108deg, rgba(8,145,178,0.06) 110deg, transparent 112deg,
    transparent 135deg, rgba(8,145,178,0.08) 137deg, transparent 139deg,
    transparent 162deg, rgba(8,145,178,0.06) 164deg, transparent 166deg,
    transparent 189deg, rgba(8,145,178,0.06) 191deg, transparent 193deg,
    transparent 216deg, rgba(8,145,178,0.06) 218deg, transparent 220deg,
    transparent 243deg, rgba(8,145,178,0.06) 245deg, transparent 247deg,
    transparent 270deg
  );
}
body.light-mode .cbg-pg-zone-green {
  position: absolute; inset: 6px; border-radius: 50%;
  background: conic-gradient(from 225deg, rgba(34,197,94,0.08) 0deg, rgba(34,197,94,0.08) 180deg, transparent 180deg);
  clip-path: inset(0 0 50% 0);
}
body.light-mode .cbg-pg-zone-red {
  position: absolute; inset: 6px; border-radius: 50%;
  background: conic-gradient(from 45deg, transparent 0deg, transparent 40deg, rgba(239,68,68,0.08) 40deg, rgba(239,68,68,0.08) 90deg, transparent 90deg);
  clip-path: inset(0 0 50% 0);
}
body.light-mode .cbg-pg-needle {
  position: absolute; bottom: 50%; left: 50%;
  width: 2px; height: 30px;
  background: linear-gradient(to top, rgba(220,38,38,0.35), rgba(220,38,38,0.1));
  transform-origin: bottom center;
  animation: cbgPressureNeedle 6s ease-in-out infinite alternate;
  border-radius: 1px;
}
body.light-mode .cbg-pg-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(8,145,178,0.2); border: 1px solid rgba(8,145,178,0.15);
}
@keyframes cbgPressureNeedle {
  0% { transform: translateX(-50%) rotate(-60deg); }
  40% { transform: translateX(-50%) rotate(30deg); }
  70% { transform: translateX(-50%) rotate(10deg); }
  100% { transform: translateX(-50%) rotate(50deg); }
}

/* ─── Blueprint Schematic ─── */
body.light-mode .cbg-blueprint {
  position: absolute; bottom: 40%; left: 30%;
  width: 180px; height: 100px;
}
body.light-mode .cbg-bp-line {
  position: absolute; background: rgba(8,145,178,0.12);
  animation: cbgBpDraw 5s ease-out forwards;
}
body.light-mode .cbg-bpl-1 { bottom: 0; left: 0; width: 60px; height: 2px; animation-delay: 0s; }
body.light-mode .cbg-bpl-2 { bottom: 0; left: 60px; width: 2px; height: 50px; animation-delay: 0.5s; }
body.light-mode .cbg-bpl-3 { bottom: 50px; left: 62px; width: 70px; height: 2px; animation-delay: 1s; }
body.light-mode .cbg-bpl-4 { bottom: 50px; left: 132px; width: 2px; height: 40px; animation-delay: 1.5s; }
body.light-mode .cbg-bpl-5 { bottom: 88px; left: 134px; width: 40px; height: 2px; animation-delay: 2s; }
body.light-mode .cbg-bp-circle {
  position: absolute; border-radius: 50%;
  border: 2px solid rgba(8,145,178,0.15);
  animation: cbgBpCircleDraw 1s ease-out forwards;
}
body.light-mode .cbg-bpc-1 { bottom: -6px; left: -6px; width: 14px; height: 14px; animation-delay: 0s; }
body.light-mode .cbg-bpc-2 { bottom: 44px; left: 56px; width: 14px; height: 14px; animation-delay: 1s; }
body.light-mode .cbg-bpc-3 { bottom: 82px; left: 126px; width: 14px; height: 14px; animation-delay: 2s; }
@keyframes cbgBpDraw { 0% { clip-path: inset(0 100% 0 0); opacity: 0; } 100% { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes cbgBpCircleDraw { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ─── Warning Beacons ─── */
body.light-mode .cbg-beacon {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(245,158,11,0.2);
  animation: cbgBeaconFlash 2s ease-in-out infinite;
}
body.light-mode .cbg-beacon-1 { top: 10%; left: 15%; }
body.light-mode .cbg-beacon-2 { bottom: 12%; right: 12%; animation-delay: 1s; }
@keyframes cbgBeaconFlash {
  0%, 100% { opacity: 0.2; box-shadow: 0 0 5px rgba(245,158,11,0.1); transform: scale(1); }
  50% { opacity: 0.7; box-shadow: 0 0 20px rgba(245,158,11,0.3), 0 0 40px rgba(245,158,11,0.1); transform: scale(1.2); }
}

/* ═══════════════════════════════════════════════════════════════
   §7-BG WAVE 5: APEX ULTIMATE — FULL DENSITY
   ═══════════════════════════════════════════════════════════════ */

/* ─── Full-Coverage Blueprint Grid ─── */
body.light-mode .cbg-blueprint-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(8,145,178,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,145,178,0.04) 1px, transparent 1px),
    linear-gradient(rgba(8,145,178,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,145,178,0.02) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

/* ─── Servo Motor ─── */
body.light-mode .cbg-servo {
  position: absolute; bottom: 55%; right: 3%;
  width: 70px; height: 45px;
}
body.light-mode .cbg-servo-body {
  position: absolute; bottom: 0; left: 0;
  width: 50px; height: 35px;
  border: 2.5px solid rgba(8,145,178,0.18);
  border-radius: 4px; background: rgba(8,145,178,0.04);
}
body.light-mode .cbg-servo-body::before {
  content: ''; position: absolute; top: 5px; left: 5px;
  width: 15px; height: 8px; border: 1px solid rgba(8,145,178,0.1);
  border-radius: 2px;
}
body.light-mode .cbg-servo-shaft {
  position: absolute; bottom: 17px; left: 50px;
  width: 12px; height: 4px; background: rgba(8,145,178,0.2);
  border-radius: 0 2px 2px 0;
}
body.light-mode .cbg-servo-horn {
  position: absolute; bottom: 10px; left: 56px;
  width: 3px; height: 22px; background: rgba(14,165,233,0.2);
  transform-origin: 50% 40%; border-radius: 1px;
  animation: cbgServoSwing 4s ease-in-out infinite alternate;
}
body.light-mode .cbg-servo-horn::after {
  content: ''; position: absolute; top: -3px; left: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid rgba(14,165,233,0.2);
}
body.light-mode .cbg-servo-heat {
  position: absolute; bottom: 38px; width: 8px; height: 2px;
  background: rgba(245,158,11,0.1);
  animation: cbgHeatWave 2s ease-out infinite;
}
body.light-mode .cbg-sh-1 { left: 10px; animation-delay: 0s; }
body.light-mode .cbg-sh-2 { left: 22px; animation-delay: 0.6s; }
body.light-mode .cbg-sh-3 { left: 34px; animation-delay: 1.2s; }
@keyframes cbgServoSwing { 0% { transform: rotate(-60deg); } 100% { transform: rotate(60deg); } }
@keyframes cbgHeatWave {
  0% { transform: translateY(0) scaleX(1); opacity: 0.4; }
  100% { transform: translateY(-15px) scaleX(1.5); opacity: 0; }
}

/* ─── Four-Bar Mechanical Linkage ─── */
body.light-mode .cbg-linkage {
  position: absolute; top: 45%; left: 18%;
  width: 120px; height: 80px;
}
body.light-mode .cbg-link {
  position: absolute; height: 3px; background: rgba(8,145,178,0.15);
  border-radius: 2px; transform-origin: left center;
}
body.light-mode .cbg-link-crank {
  bottom: 0; left: 0; width: 35px;
  animation: cbgCrankRotate 5s linear infinite;
}
body.light-mode .cbg-link-coupler {
  bottom: 0; left: 35px; width: 55px;
  animation: cbgCouplerMove 5s ease-in-out infinite;
}
body.light-mode .cbg-link-rocker {
  bottom: 0; right: 0; width: 40px;
  transform-origin: right center;
  animation: cbgRockerSwing 5s ease-in-out infinite;
}
body.light-mode .cbg-link-pivot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid rgba(8,145,178,0.18);
  background: rgba(14,165,233,0.06);
}
body.light-mode .cbg-lp-1 { bottom: -3px; left: -3px; }
body.light-mode .cbg-lp-2 { bottom: -3px; left: 32px; animation: cbgPivotOrbit 5s linear infinite; }
body.light-mode .cbg-lp-3 { bottom: -3px; right: 33px; animation: cbgPivotOsc 5s ease-in-out infinite; }
body.light-mode .cbg-lp-4 { bottom: -3px; right: -3px; }
@keyframes cbgCrankRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes cbgCouplerMove { 0%,100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(10deg) translateY(-15px); } }
@keyframes cbgRockerSwing { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes cbgPivotOrbit { 0% { bottom: -3px; left: 32px; } 25% { bottom: 25px; left: 15px; } 50% { bottom: -3px; left: 32px; } 75% { bottom: -25px; left: 15px; } 100% { bottom: -3px; left: 32px; } }
@keyframes cbgPivotOsc { 0%,100% { bottom: 10px; } 50% { bottom: -15px; } }

/* ─── Rotary Encoder Disk ─── */
body.light-mode .cbg-encoder {
  position: absolute; top: 30%; left: 12%;
  width: 80px; height: 80px;
}
body.light-mode .cbg-encoder-disk {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(8,145,178,0.12);
  animation: cbgGearSpin 4s linear infinite;
}
body.light-mode .cbg-encoder-slots {
  position: absolute; inset: 5px; border-radius: 50%;
  background: conic-gradient(
    rgba(8,145,178,0.1) 0deg, transparent 10deg, transparent 15deg,
    rgba(8,145,178,0.1) 15deg, transparent 25deg, transparent 30deg,
    rgba(8,145,178,0.1) 30deg, transparent 40deg, transparent 45deg,
    rgba(8,145,178,0.1) 45deg, transparent 55deg, transparent 60deg,
    rgba(8,145,178,0.1) 60deg, transparent 70deg, transparent 75deg,
    rgba(8,145,178,0.1) 75deg, transparent 85deg, transparent 90deg,
    rgba(8,145,178,0.1) 90deg, transparent 100deg, transparent 105deg,
    rgba(8,145,178,0.1) 105deg, transparent 115deg, transparent 120deg,
    rgba(8,145,178,0.1) 120deg, transparent 130deg, transparent 135deg,
    rgba(8,145,178,0.1) 135deg, transparent 145deg, transparent 150deg,
    rgba(8,145,178,0.1) 150deg, transparent 160deg, transparent 165deg,
    rgba(8,145,178,0.1) 165deg, transparent 175deg, transparent 180deg,
    rgba(8,145,178,0.1) 180deg, transparent 190deg, transparent 195deg,
    rgba(8,145,178,0.1) 195deg, transparent 205deg, transparent 210deg,
    rgba(8,145,178,0.1) 210deg, transparent 220deg, transparent 225deg,
    rgba(8,145,178,0.1) 225deg, transparent 235deg, transparent 240deg,
    rgba(8,145,178,0.1) 240deg, transparent 250deg, transparent 255deg,
    rgba(8,145,178,0.1) 255deg, transparent 265deg, transparent 270deg,
    rgba(8,145,178,0.1) 270deg, transparent 280deg, transparent 285deg,
    rgba(8,145,178,0.1) 285deg, transparent 295deg, transparent 300deg,
    rgba(8,145,178,0.1) 300deg, transparent 310deg, transparent 315deg,
    rgba(8,145,178,0.1) 315deg, transparent 325deg, transparent 330deg,
    rgba(8,145,178,0.1) 330deg, transparent 340deg, transparent 345deg,
    rgba(8,145,178,0.1) 345deg, transparent 355deg, transparent 360deg
  );
  animation: cbgGearSpin 4s linear infinite;
}
body.light-mode .cbg-encoder-reader {
  position: absolute; top: 50%; right: -8px; transform: translateY(-50%);
  width: 8px; height: 14px;
  border: 1.5px solid rgba(14,165,233,0.2);
  border-radius: 2px; background: rgba(14,165,233,0.06);
  animation: cbgEncoderRead 0.15s step-end infinite;
}
@keyframes cbgEncoderRead { 0%, 50% { background: rgba(14,165,233,0.06); } 25%, 75% { background: rgba(14,165,233,0.2); } }

/* ─── Pneumatic Cylinders ─── */
body.light-mode .cbg-pneumatic {
  position: absolute;
}
body.light-mode .cbg-pneu-1 { top: 18%; right: 12%; }
body.light-mode .cbg-pneu-2 { top: 18%; right: 16%; }
body.light-mode .cbg-pneu-barrel {
  width: 14px; height: 55px;
  border: 2px solid rgba(8,145,178,0.15);
  border-radius: 3px; background: rgba(8,145,178,0.03);
}
body.light-mode .cbg-pneu-rod {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 20px; background: rgba(8,145,178,0.2);
  border-radius: 2px;
  animation: cbgPneuExtend 3s ease-in-out infinite;
}
body.light-mode .cbg-pneu-2 .cbg-pneu-rod { animation-delay: 1.5s; }
body.light-mode .cbg-pneu-endcap {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 4px; background: rgba(8,145,178,0.15);
  border-radius: 2px;
  animation: cbgPneuCap 3s ease-in-out infinite;
}
body.light-mode .cbg-pneu-2 .cbg-pneu-endcap { animation-delay: 1.5s; }
@keyframes cbgPneuExtend { 0%,100% { height: 20px; top: -5px; } 50% { height: 35px; top: -20px; } }
@keyframes cbgPneuCap { 0%,100% { top: -8px; } 50% { top: -23px; } }

/* ─── Control Panel with LEDs ─── */
body.light-mode .cbg-ctrl-panel {
  position: absolute; bottom: 15%; left: 35%;
  width: 80px; height: 50px;
}
body.light-mode .cbg-ctrl-frame {
  position: absolute; inset: 0;
  border: 2px solid rgba(8,145,178,0.15);
  border-radius: 5px; background: rgba(8,145,178,0.03);
}
body.light-mode .cbg-led {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  animation: cbgLedBlink 3s ease-in-out infinite;
}
body.light-mode .cbg-led-1 { top: 8px; left: 8px; background: rgba(34,197,94,0.4); animation-delay: 0s; }
body.light-mode .cbg-led-2 { top: 8px; left: 18px; background: rgba(34,197,94,0.4); animation-delay: 0.5s; }
body.light-mode .cbg-led-3 { top: 8px; left: 28px; background: rgba(245,158,11,0.4); animation-delay: 1s; }
body.light-mode .cbg-led-4 { top: 8px; left: 38px; background: rgba(245,158,11,0.4); animation-delay: 1.5s; }
body.light-mode .cbg-led-5 { top: 8px; left: 48px; background: rgba(220,38,38,0.3); animation-delay: 2s; }
body.light-mode .cbg-led-6 { top: 8px; left: 58px; background: rgba(220,38,38,0.3); animation-delay: 2.5s; }
body.light-mode .cbg-ctrl-switch {
  position: absolute; bottom: 8px; width: 8px; height: 12px;
  border: 1.5px solid rgba(8,145,178,0.15); border-radius: 2px;
  background: rgba(8,145,178,0.06);
}
body.light-mode .cbg-sw-1 { left: 10px; }
body.light-mode .cbg-sw-2 { left: 25px; }
body.light-mode .cbg-ctrl-display {
  position: absolute; bottom: 6px; right: 8px;
  width: 28px; height: 14px;
  border: 1px solid rgba(14,165,233,0.15);
  border-radius: 2px; background: rgba(14,165,233,0.04);
  animation: cbgDisplayBlink 4s step-end infinite;
}
@keyframes cbgLedBlink { 0%,100% { opacity: 0.3; } 50% { opacity: 1; box-shadow: 0 0 6px currentColor; } }
@keyframes cbgDisplayBlink { 0%,100% { opacity: 0.6; } 50% { opacity: 1; background: rgba(14,165,233,0.1); } }

/* ─── Proximity Sensor Array ─── */
body.light-mode .cbg-sensor {
  position: absolute; width: 10px; height: 10px;
  border: 2px solid rgba(8,145,178,0.15);
  border-radius: 2px; background: rgba(8,145,178,0.05);
}
body.light-mode .cbg-sens-1 { top: 70%; left: 42%; }
body.light-mode .cbg-sens-2 { top: 70%; left: 48%; }
body.light-mode .cbg-sens-3 { top: 70%; left: 54%; }
body.light-mode .cbg-sensor-beam {
  position: absolute; top: 70%; height: 40px; width: 2px;
  background: linear-gradient(to bottom, rgba(14,165,233,0.2), transparent);
  animation: cbgSensorScan 2s ease-in-out infinite;
}
body.light-mode .cbg-sb-1 { left: calc(42% + 4px); animation-delay: 0s; }
body.light-mode .cbg-sb-2 { left: calc(48% + 4px); animation-delay: 0.6s; }
body.light-mode .cbg-sb-3 { left: calc(54% + 4px); animation-delay: 1.2s; }
@keyframes cbgSensorScan {
  0%,100% { height: 40px; opacity: 0.3; }
  50% { height: 60px; opacity: 0.8; }
}

/* ─── Network Topology ─── */
body.light-mode .cbg-network {
  position: absolute; top: 60%; right: 25%;
  width: 160px; height: 100px;
}
body.light-mode .cbg-net-node {
  position: absolute; width: 10px; height: 10px;
  border: 2px solid rgba(8,145,178,0.18);
  border-radius: 50%; background: rgba(14,165,233,0.08);
  animation: cbgNodePulse 3s ease-in-out infinite;
}
body.light-mode .cbg-nn-1 { top: 0; left: 50%; animation-delay: 0s; }
body.light-mode .cbg-nn-2 { top: 40%; left: 10%; animation-delay: 0.6s; }
body.light-mode .cbg-nn-3 { top: 40%; right: 10%; animation-delay: 1.2s; }
body.light-mode .cbg-nn-4 { bottom: 0; left: 25%; animation-delay: 1.8s; }
body.light-mode .cbg-nn-5 { bottom: 0; right: 25%; animation-delay: 2.4s; }
body.light-mode .cbg-net-line {
  position: absolute; background: rgba(8,145,178,0.08); overflow: hidden;
}
body.light-mode .cbg-nl-1 { top: 10px; left: calc(50% + 5px); width: 1px; height: 30px; transform: rotate(25deg); }
body.light-mode .cbg-nl-2 { top: 10px; left: calc(50% - 5px); width: 1px; height: 30px; transform: rotate(-25deg); }
body.light-mode .cbg-nl-3 { top: 50%; left: calc(10% + 10px); width: 40px; height: 1px; transform: rotate(20deg); }
body.light-mode .cbg-nl-4 { top: 50%; right: calc(10% + 10px); width: 40px; height: 1px; transform: rotate(-20deg); }
body.light-mode .cbg-net-pulse {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(14,165,233,0.4);
  animation: cbgNetPulse 3s linear infinite;
}
body.light-mode .cbg-np-1 { animation-delay: 0s; }
body.light-mode .cbg-np-2 { animation-delay: 0.75s; }
body.light-mode .cbg-np-3 { animation-delay: 1.5s; }
body.light-mode .cbg-np-4 { animation-delay: 2.25s; }
@keyframes cbgNetPulse {
  0% { top: 5px; left: 52%; opacity: 0; }
  15% { opacity: 0.8; }
  25% { top: 40%; left: 12%; }
  50% { top: 90%; left: 27%; opacity: 0.5; }
  75% { top: 40%; right: 12%; left: auto; opacity: 0.3; }
  100% { top: 5px; left: 52%; opacity: 0; }
}

/* ─── Large Floating Particles ─── */
body.light-mode .cbg-bigdot {
  position: absolute; border-radius: 50%;
  background: rgba(8,145,178,0.12);
  animation: cbgBigDotFloat 15s ease-in-out infinite alternate;
}
body.light-mode .cbg-bd-1 { top: 8%; left: 22%; width: 8px; height: 8px; }
body.light-mode .cbg-bd-2 { top: 25%; left: 55%; width: 6px; height: 6px; animation-delay: 2s; }
body.light-mode .cbg-bd-3 { top: 42%; right: 18%; width: 10px; height: 10px; animation-delay: 4s; background: rgba(14,165,233,0.1); }
body.light-mode .cbg-bd-4 { top: 65%; left: 35%; width: 7px; height: 7px; animation-delay: 6s; }
body.light-mode .cbg-bd-5 { bottom: 18%; right: 40%; width: 9px; height: 9px; animation-delay: 3s; background: rgba(14,165,233,0.08); }
body.light-mode .cbg-bd-6 { bottom: 30%; left: 48%; width: 5px; height: 5px; animation-delay: 5s; }
@keyframes cbgBigDotFloat {
  0% { transform: translate(0, 0); opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { transform: translate(20px, -25px); opacity: 0.2; }
}

/* ─── Corner Bracket Decorations ─── */
body.light-mode .cbg-corner {
  position: absolute; width: 40px; height: 40px;
  animation: cbgCornerPulse 4s ease-in-out infinite alternate;
}
body.light-mode .cbg-corner-tl {
  top: 20px; left: 20px;
  border-top: 3px solid rgba(8,145,178,0.15);
  border-left: 3px solid rgba(8,145,178,0.15);
}
body.light-mode .cbg-corner-tr {
  top: 20px; right: 20px;
  border-top: 3px solid rgba(8,145,178,0.15);
  border-right: 3px solid rgba(8,145,178,0.15);
  animation-delay: 1s;
}
body.light-mode .cbg-corner-bl {
  bottom: 20px; left: 20px;
  border-bottom: 3px solid rgba(8,145,178,0.15);
  border-left: 3px solid rgba(8,145,178,0.15);
  animation-delay: 2s;
}
body.light-mode .cbg-corner-br {
  bottom: 20px; right: 20px;
  border-bottom: 3px solid rgba(8,145,178,0.15);
  border-right: 3px solid rgba(8,145,178,0.15);
  animation-delay: 3s;
}
@keyframes cbgCornerPulse {
  0% { opacity: 0.3; }
  100% { opacity: 0.8; border-color: rgba(14,165,233,0.25); }
}

/* ═══ LIGHT ECO MODE OVERRIDES (50% Power / GPU Friendly) ═══ */
body.light-mode.eco-mode .p3-career-bg-light {
  opacity: 0.5; /* Global 50% intensity dial-back */
}
/* Remove expensive filters and glows */
body.light-mode.eco-mode .p3-career-bg-light * {
  box-shadow: none !important;
  filter: none !important;
}
/* Slow down all remaining animations significantly to save CPU/GPU cycles */
body.light-mode.eco-mode .p3-career-bg-light * {
  animation-duration: 20s !important;
}
/* Hide highly complex/particle elements entirely in Eco Mode */
body.light-mode.eco-mode .cbg-packet,
body.light-mode.eco-mode .cbg-laser,
body.light-mode.eco-mode .cbg-crosshair,
body.light-mode.eco-mode .cbg-databar,
body.light-mode.eco-mode .cbg-tower-signal {
  display: none !important;
  animation: none !important;
}

/* ─── Career Section Header ─── */
.p3-career-header {
  position: relative; margin-bottom: 4rem; padding: 2rem 0; overflow: hidden;
}

/* Laser scan line */
.p3-career-laser {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p3-cyan) 20%, var(--p3-cyan) 80%, transparent);
  box-shadow: 0 0 15px var(--p3-cyan), 0 0 30px var(--p3-cyan);
  animation: p3CareerLaser 5s linear infinite; opacity: 0.6; z-index: 5;
  top: 0;
}
@keyframes p3CareerLaser { 0% { top: 0; opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { top: 100%; opacity: 0; } }

/* Overline */
.p3-career-overline {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: var(--p3-font-mono); font-size: 0.85rem;
  color: var(--p3-cyan); letter-spacing: 0.25em; text-transform: uppercase;
  margin-bottom: 1.5rem; position: relative;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}
.p3-career-overline-line {
  display: inline-block; width: 40px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--p3-cyan));
  animation: p3OverlinePulse 2s ease-in-out infinite alternate;
}
.p3-career-overline-line:last-child { background: linear-gradient(90deg, var(--p3-cyan), transparent); }
@keyframes p3OverlinePulse { 0% { width: 25px; opacity: 0.4; } 100% { width: 50px; opacity: 1; } }
.p3-career-cursor {
  color: var(--p3-cyan); font-weight: 700;
  animation: p3CursorBlink 1s step-end infinite;
}
@keyframes p3CursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Title */
.p3-career-title {
  font-family: var(--p3-font-head);
  font-size: clamp(2.5rem, 4vw, 3.2rem);
  font-weight: 800; color: var(--p3-text);
  margin: 0.5rem 0 0.8rem; line-height: 1.1;
  text-transform: uppercase; letter-spacing: -0.02em;
  position: relative; z-index: 2;
}
.p3-career-highlight {
  color: var(--p3-cyan);
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  position: relative;
}
.p3-career-bracket {
  color: rgba(0, 212, 255, 0.4); font-weight: 300; font-size: 1.2em;
  vertical-align: middle; padding: 0 4px;
  animation: p3BracketFlicker 4s ease-in-out infinite alternate;
}
@keyframes p3BracketFlicker { 
  0%, 80% { opacity: 0.3; text-shadow: none; } 
  85% { opacity: 1; text-shadow: 0 0 15px var(--p3-cyan); }
  90% { opacity: 0.2; }
  95%, 100% { opacity: 0.8; text-shadow: 0 0 10px var(--p3-cyan); } 
}

/* Title underline scanner */
.p3-career-title-underline {
  height: 3px; width: 100%; max-width: 450px; position: relative; margin-bottom: 1.5rem;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.15), transparent);
  border-radius: 2px; overflow: hidden;
}
.p3-career-title-underline::after {
  content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--p3-cyan), transparent);
  animation: p3UnderlineScan 3s ease-in-out infinite;
}
@keyframes p3UnderlineScan { 0% { left: -30%; } 100% { left: 130%; } }

/* Subtitle */
.p3-career-sub {
  font-size: 1.05rem; color: var(--p3-text-2); line-height: 1.7;
  max-width: 750px; position: relative; padding-left: 1.5rem;
}
.p3-career-status-dot {
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--p3-cyan);
  box-shadow: 0 0 8px var(--p3-cyan), 0 0 16px rgba(0, 212, 255, 0.3);
  animation: p3StatusPulse 2s ease-in-out infinite;
}
@keyframes p3StatusPulse { 
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px var(--p3-cyan); } 
  50% { transform: scale(1.3); box-shadow: 0 0 16px var(--p3-cyan), 0 0 30px rgba(0,212,255,0.3); } 
}

/* Light Mode Overrides for Career Header */
.light-mode .p3-career-overline { color: #0891b2; text-shadow: none; }
.light-mode .p3-career-overline-line { background: linear-gradient(90deg, transparent, #0891b2); }
.light-mode .p3-career-overline-line:last-child { background: linear-gradient(90deg, #0891b2, transparent); }
.light-mode .p3-career-cursor { color: #0891b2; }
.light-mode .p3-career-title { color: #0f172a; }
.light-mode .p3-career-highlight { color: #0891b2; text-shadow: none; }
.light-mode .p3-career-bracket { color: rgba(8, 145, 178, 0.3); }
.light-mode .p3-career-title-underline { background: linear-gradient(90deg, transparent, rgba(8,145,178,0.15), transparent); }
.light-mode .p3-career-title-underline::after { background: linear-gradient(90deg, transparent, #0891b2, transparent); }
.light-mode .p3-career-sub { color: #475569; }
.light-mode .p3-career-status-dot { background: #0891b2; box-shadow: 0 0 8px rgba(8,145,178,0.4); }
.light-mode .p3-career-laser { background: linear-gradient(90deg, transparent, #0891b2, transparent); box-shadow: 0 0 10px rgba(8,145,178,0.3); opacity: 0.3; }

/* ─── End Career Header ─── */

.p3-flowchart-wrap { 
  background: var(--p3-glass); border: 1px solid var(--p3-border); border-radius: var(--p3-radius); padding: 2rem; backdrop-filter: blur(20px); position: relative; overflow: hidden; 
  background-image: 
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center center;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.2);
}
.p3-flowchart-wrap::before {
  content: ''; position: absolute; inset: 0; 
  background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.1), transparent);
  height: 20%; width: 100%; top: -20%;
  animation: p3ScanSweep 8s linear infinite; pointer-events: none; z-index: 0;
}
@keyframes p3ScanSweep { 0% { top: -20%; } 100% { top: 120%; } }

.p3-flowchart-svg { width: 100%; filter: drop-shadow(0 0 15px rgba(0,225,255,0.05)); overflow: visible; position: relative; z-index: 1; }

/* Flowchart Animations */
.data-line { animation: fnDashMove 2s linear infinite; }
@keyframes fnDashMove { to { stroke-dashoffset: -24; } }

.pulse-dot { animation: fnDotPulse 2s infinite alternate ease-in-out; }
@keyframes fnDotPulse { 0% { r: 4; filter: drop-shadow(0 0 2px currentColor); } 100% { r: 6; filter: drop-shadow(0 0 10px currentColor); } }

.float-anim { animation: fnFloat 6s ease-in-out infinite alternate; }
@keyframes fnFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }

/* Flowchart Hover Logic */
.flow-node { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; cursor: crosshair; }
.flow-node:hover { transform: scale(1.05); filter: drop-shadow(0 0 15px currentColor); }
.fn-bg { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.node-cyan:hover .fn-bg { filter: url(#glow-cyan); fill-opacity: 0.8; }
.node-amber:hover .fn-bg { filter: url(#glow-amber); fill-opacity: 0.8; }
.node-purple:hover .fn-bg { filter: url(#glow-purple); fill-opacity: 0.8; }

/* Mechatronic SVG Animation Layer */
.travel-particle { filter: drop-shadow(0 0 6px currentColor); }
.energy-ring { filter: drop-shadow(0 0 4px rgba(0,212,255,0.3)); }
.tech-brackets path { filter: drop-shadow(0 0 3px rgba(0,212,255,0.4)); }
.circuit-traces path { stroke-dasharray: 60; }
.list-dot { animation: fnListDotPulse 2.5s ease-in-out infinite alternate; }
@keyframes fnListDotPulse { 
  0% { opacity: 0.5; filter: drop-shadow(0 0 1px currentColor); } 
  100% { opacity: 1; filter: drop-shadow(0 0 6px currentColor); } 
}
.fn-dashed { animation: fnDashedPulse 4s ease-in-out infinite alternate; }
@keyframes fnDashedPulse { 
  0% { stroke-opacity: 0.6; } 
  100% { stroke-opacity: 1; filter: drop-shadow(0 0 5px currentColor); } 
}
.flow-list:hover .list-text { fill: #fff; filter: drop-shadow(0 0 3px rgba(255,255,255,0.3)); }
.list-text { transition: fill 0.3s, filter 0.3s; }

/* Salary Panel Improvements */
.p3-salary-panel {
  background: var(--p3-glass); border: 1px solid var(--p3-border); border-radius: var(--p3-radius);
  padding: 3rem; display: flex; flex-direction: column; gap: 2rem; backdrop-filter: blur(20px); position: relative; overflow: hidden;
  background-image: 
    linear-gradient(rgba(0, 212, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.2);
}
.p3-salary-panel::before {
  content: ''; position: absolute; inset: 0; 
  background: linear-gradient(to bottom, transparent, rgba(167, 139, 250, 0.05), transparent);
  height: 30%; width: 100%; top: -30%;
  animation: p3ScanSweep 6s linear infinite; pointer-events: none; z-index: 0;
}
.p3-salary-header { position: relative; z-index: 1; font-family: var(--p3-font-mono); font-size: 0.85rem; letter-spacing: 0.25em; color: var(--p3-text-dim); padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); text-transform: uppercase; }
.p3-salary-header::after { content: ' [SYS_ONLINE]'; color: var(--p3-cyan); font-size: 0.7rem; animation: p3Blink 2s step-end infinite; }
@keyframes p3Blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.p3-salary-item { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.8rem; transition: transform 0.3s; }
.p3-salary-item:hover { transform: translateX(10px); }
.p3-salary-role { font-size: 1.05rem; color: #fff; font-weight: 700; text-transform: uppercase; transition: color 0.3s; }
.p3-salary-item:hover .p3-salary-role { color: var(--p3-cyan); text-shadow: 2px 0 0 rgba(167,139,250,0.5), -2px 0 0 rgba(0,212,255,0.5); }

.p3-salary-bar-wrap { 
  height: 12px; background: rgba(0,0,0,0.5); border-radius: 6px; overflow: hidden; position: relative; 
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.p3-salary-bar-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 12px);
  z-index: 2; pointer-events: none;
  animation: p3Conveyor 2s linear infinite;
}
@keyframes p3Conveyor { 0% { background-position: 0 0; } 100% { background-position: -24px 0; } }
.p3-salary-bar { 
  height: 100%; width: 0; border-radius: 5px; transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; 
  background: linear-gradient(90deg, var(--p3-cyan), var(--p3-purple), var(--p3-cyan));
  background-size: 200% 100%;
  animation: p3PlasmaFlow 3s linear infinite;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}
@keyframes p3PlasmaFlow { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.p3-salary-bar::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0));
  border-radius: 5px 5px 0 0; mix-blend-mode: overlay;
}
.p3-salary-bar--fill { width: var(--sw, 50%); }

/* Glowing Head */
.p3-bar-glow { position: absolute; right: 0; top: 0; bottom: 0; width: 20px; background: #fff; filter: blur(4px); opacity: 0.8; mix-blend-mode: overlay; border-radius: 50%; transform: translateX(50%); animation: p3GlowPulse 1.5s infinite alternate; }
@keyframes p3GlowPulse { 0% { opacity: 0.5; width: 10px; } 100% { opacity: 1; width: 30px; filter: blur(8px); } }

.p3-salary-range { font-family: var(--p3-font-mono); font-size: 0.95rem; color: var(--p3-text-2); font-weight: 600; }

/* Enhanced Button */
.p3-wou-btn {
  margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.5rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--p3-radius-sm); text-decoration: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative; overflow: hidden; z-index: 1;
  animation: p3BtnPulse 3s infinite alternate ease-in-out;
}
@keyframes p3BtnPulse { 0% { box-shadow: 0 0 0 rgba(0, 212, 255, 0); } 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); border-color: rgba(0, 212, 255, 0.3); } }
.p3-wou-btn::before { 
  content: ''; position: absolute; inset: -2px; 
  background: conic-gradient(from 0deg, transparent, #00d4ff, transparent, #a78bfa, transparent); 
  border-radius: inherit; z-index: -2; opacity: 0.4;
  animation: p3BorderSpin 6s linear infinite; 
}
@keyframes p3BorderSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.p3-wou-btn::after { 
  content: ''; position: absolute; inset: 1px; 
  background: rgba(10, 10, 30, 0.95); border-radius: inherit; z-index: -1;
  transition: background 0.4s;
}
.p3-wou-btn:hover { transform: translateY(-6px); box-shadow: 0 15px 40px rgba(0, 212, 255, 0.25), 0 0 30px rgba(167,139,250,0.15); }
.p3-wou-btn:hover::before { opacity: 1; }
.p3-wou-btn:hover::after { background: rgba(0, 212, 255, 0.05); }
.p3-wou-btn .btn-text { font-size: 1.05rem; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; transition: text-shadow 0.3s; position: relative; z-index: 1; }
.p3-wou-btn:hover .btn-text { text-shadow: 0 0 15px rgba(0,212,255,0.8), 0 0 30px rgba(167,139,250,0.4); }
.p3-wou-btn .btn-sub { font-size: 0.8rem; color: var(--p3-text-dim); transition: color 0.3s; display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 1; }
.p3-wou-btn:hover .btn-sub { color: #fff; }
.p3-wou-btn .arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.p3-wou-btn:hover .arrow { transform: translateX(8px) scale(1.2); color: var(--p3-cyan); }

/* Light Mode Overrides for Section 7 */
.light-mode .p3-flowchart-wrap,
.light-mode .p3-salary-panel { 
  background-color: rgba(255,255,255,0.8); 
  border-color: rgba(0,0,0,0.1); 
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}
.light-mode .p3-flowchart-wrap::before { background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.05), transparent); }
.light-mode .p3-salary-panel::before { background: linear-gradient(to bottom, transparent, rgba(167, 139, 250, 0.1), transparent); }
.light-mode .p3-salary-header { color: #64748b; border-color: rgba(0,0,0,0.1); }
.light-mode .p3-salary-role { color: #0f172a; }
.light-mode .p3-salary-item:hover .p3-salary-role { color: var(--p3-cyan); text-shadow: none; }
.light-mode .p3-salary-bar-wrap { background: #e2e8f0; border-color: rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.light-mode .p3-salary-bar-wrap::before { background: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 12px); }
.light-mode .p3-salary-range { color: #475569; }
.light-mode .p3-wou-btn { background: #f8fafc; border-color: rgba(0,0,0,0.1); animation: none; }
.light-mode .p3-wou-btn::before { background: conic-gradient(from 0deg, transparent, rgba(0,180,220,0.3), transparent, rgba(140,100,220,0.3), transparent); opacity: 0.3; }
.light-mode .p3-wou-btn::after { background: rgba(248,250,252,0.98); }
.light-mode .p3-wou-btn .btn-text { color: #0f172a; }
.light-mode .p3-wou-btn .btn-sub { color: #64748b; }
.light-mode .p3-wou-btn:hover { background: #fff; border-color: var(--p3-cyan); box-shadow: 0 10px 20px rgba(0,212,255,0.1); }
.light-mode .p3-wou-btn:hover::after { background: rgba(255,255,255,0.95); }
.light-mode .p3-wou-btn:hover .btn-text { color: var(--p3-cyan); text-shadow: none; }
.light-mode .p3-wou-btn:hover .btn-sub { color: #0f172a; }
.light-mode .travel-particle { filter: drop-shadow(0 0 4px currentColor); }
.light-mode .energy-ring { stroke: rgba(0,180,220,0.3); }
.light-mode .list-text { fill: #475569 !important; }
.light-mode .flow-list:hover .list-text { fill: #0f172a !important; filter: none; }

/* SVG Light Mode */
.light-mode .fn-bg { fill: #fff !important; }
.light-mode .flow-node.node-cyan:hover .fn-bg { filter: drop-shadow(0 10px 20px rgba(0,180,220,0.2)) !important; }
.light-mode .flow-node.node-amber:hover .fn-bg { filter: drop-shadow(0 10px 20px rgba(230,130,0,0.2)) !important; }
.light-mode .flow-node.node-purple:hover .fn-bg { filter: drop-shadow(0 10px 20px rgba(130,100,230,0.2)) !important; }
.light-mode .fn-title { fill: #0f172a !important; }
.light-mode .fn-sub { fill: #64748b !important; }
.light-mode .list-text { fill: #475569 !important; }
.light-mode .data-line { stroke-width: 2.5; }
.light-mode .line-cyan { stroke: #0ea5e9 !important; }
.light-mode .dot-cyan { fill: #0ea5e9 !important; }
.light-mode .line-amber { stroke: #f97316 !important; }
.light-mode .dot-amber { fill: #f97316 !important; }
.light-mode .line-purple { stroke: #8b5cf6 !important; }
.light-mode .dot-purple { fill: #8b5cf6 !important; }
.light-mode .list-dot { opacity: 1 !important; }

/* ─── LIGHT CTA: BLUEPRINT ASSEMBLY ─── */
.p3-cta-light-grid { position: absolute; inset: 0; background-image: radial-gradient(circle at 50% 100%, rgba(14,165,233,0.15), transparent 60%), linear-gradient(rgba(14,165,233,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,0.05) 1px, transparent 1px); background-size: 100% 100%, 30px 30px, 30px 30px; }

/* Hazard Stripes */
.p3-cta-hazard { position: absolute; left: 0; width: 100%; height: 10px; background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 10px, transparent 10px, transparent 20px); opacity: 0.6; z-index: 5; animation: hazardSlide 20s linear infinite; }
.p3-cta-hazard-top { top: 0; border-bottom: 2px solid #f59e0b; }
.p3-cta-hazard-bottom { bottom: 0; border-top: 2px solid #f59e0b; animation-direction: reverse; }
@keyframes hazardSlide { 0% { background-position: 0 0; } 100% { background-position: 1000px 0; } }

/* Live Schematics */
.p3-cta-schematic { position: absolute; top: 15%; width: 150px; font-family: var(--p3-font-mono); font-size: 0.8rem; color: #0284c7; z-index: 2; pointer-events: none; }
.p3-cta-schematic-left { left: 5%; border-left: 2px solid rgba(14,165,233,0.5); padding-left: 10px; animation: schematicFloat 5s ease-in-out infinite alternate; }
.p3-cta-schematic-right { right: 5%; text-align: right; border-right: 2px solid rgba(14,165,233,0.5); padding-right: 10px; animation: schematicFloat 6s ease-in-out infinite alternate-reverse; }
.sch-data { margin-bottom: 5px; background: rgba(14,165,233,0.05); padding: 2px 5px; }
.sch-num { font-weight: bold; color: #0f172a; animation: numGlitch 1s steps(2, end) infinite; }
.sch-ok { color: #22c55e; font-weight: bold; animation: blink 2s infinite; }
.sch-line { width: 100%; height: 1px; background: rgba(14,165,233,0.5); margin-top: 10px; position: relative; }
.sch-line::after { content: ''; position: absolute; top: -3px; right: 0; width: 6px; height: 6px; border-radius: 50%; background: #0ea5e9; box-shadow: 0 0 10px #0ea5e9; animation: nodePulse 2s infinite; }
.sch-crosshair { width: 30px; height: 30px; border: 1px dashed rgba(14,165,233,0.6); margin-left: auto; margin-bottom: 10px; position: relative; animation: gearSpin 5s linear infinite; }
.sch-crosshair::before, .sch-crosshair::after { content: ''; position: absolute; background: rgba(14,165,233,0.8); }
.sch-crosshair::before { top: 14px; left: -5px; width: 40px; height: 1px; }
.sch-crosshair::after { left: 14px; top: -5px; width: 1px; height: 40px; }
@keyframes schematicFloat { 0% { transform: translateY(0); } 100% { transform: translateY(20px); } }
@keyframes numGlitch { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

/* CAD Nodes */
.p3-cta-cad-nodes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.cad-edge { stroke: rgba(14,165,233,0.3); stroke-width: 1; stroke-dasharray: 200; stroke-dashoffset: 200; animation: cadDraw 8s linear infinite alternate; }
.cad-node { fill: rgba(14,165,233,0.8); animation: nodePulse 4s infinite alternate; }
@keyframes cadDraw { 0% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } }

/* Robotic Assembly Arm */
.p3-cta-robo-arm { position: absolute; top: 10px; left: 50%; width: 100%; height: 200px; transform: translateX(-50%); pointer-events: none; z-index: 3; }
.robo-rail { position: absolute; top: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(180deg, #94a3b8, #e2e8f0); border-bottom: 2px solid #64748b; }
.robo-base { position: absolute; top: 10px; left: 30%; width: 60px; height: 30px; background: #475569; border-radius: 4px 4px 0 0; animation: roboSlide 15s ease-in-out infinite alternate; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.robo-joint-1 { position: absolute; bottom: -60px; left: 15px; width: 30px; height: 70px; background: #cbd5e1; border: 2px solid #94a3b8; border-radius: 15px; transform-origin: top center; animation: roboSwing1 15s ease-in-out infinite alternate; }
.robo-joint-1::before { content: ''; position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; background: #475569; border-radius: 50%; }
.robo-arm-segment { position: absolute; bottom: -5px; left: 5px; width: 16px; height: 80px; background: #f59e0b; border: 1px solid #d97706; }
.robo-joint-2 { position: absolute; bottom: -20px; left: -7px; width: 30px; height: 30px; background: #64748b; border-radius: 50%; border: 2px solid #475569; transform-origin: center; animation: roboSwing2 15s ease-in-out infinite alternate; }
.robo-claw-left, .robo-claw-right { position: absolute; bottom: -25px; width: 10px; height: 30px; background: #94a3b8; border: 1px solid #64748b; }
.robo-claw-left { left: 0; border-radius: 0 0 0 10px; transform-origin: top right; animation: clawGrip 3s infinite alternate; }
.robo-claw-right { right: 0; border-radius: 0 0 10px 0; transform-origin: top left; animation: clawGrip 3s infinite alternate-reverse; }
.robo-laser { position: absolute; bottom: -100px; left: 13px; width: 2px; height: 100px; background: linear-gradient(180deg, rgba(14,165,233,0.8), transparent); opacity: 0; animation: roboLaserFire 15s ease-in-out infinite alternate; }
@keyframes roboSlide { 0%, 10% { left: 20%; } 40%, 60% { left: 80%; } 90%, 100% { left: 20%; } }
@keyframes roboSwing1 { 0%, 20% { transform: rotate(15deg); } 40%, 60% { transform: rotate(-10deg); } 80%, 100% { transform: rotate(20deg); } }
@keyframes roboSwing2 { 0%, 20% { transform: rotate(-30deg); } 40%, 60% { transform: rotate(45deg); } 80%, 100% { transform: rotate(-15deg); } }
@keyframes clawGrip { 0% { transform: rotate(0deg); } 100% { transform: rotate(15deg); } }
@keyframes roboLaserFire { 0%, 38% { opacity: 0; } 40%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }

.p3-cta-gear { position: absolute; border-radius: 50%; border: 2px dashed rgba(14,165,233,0.2); }
.p3-cg-1 { bottom: -80px; left: -50px; width: 300px; height: 300px; animation: cbgGearSpin 30s linear infinite; }
.p3-cg-2 { top: -40px; right: -40px; width: 200px; height: 200px; animation: cbgGearSpin 20s linear infinite reverse; border-style: dotted; border-color: rgba(245,158,11,0.2); }
.p3-cta-blueprint-lines { position: absolute; inset: 0; background: linear-gradient(45deg, transparent 48%, rgba(14,165,233,0.1) 50%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgba(14,165,233,0.1) 50%, transparent 52%); background-size: 150px 150px; opacity: 0.5; }
.p3-cta-laser-scanner { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, rgba(14,165,233,0.4), transparent); box-shadow: 0 0 15px rgba(14,165,233,0.2); animation: ctaLightScan 6s ease-in-out infinite; }
@keyframes ctaLightScan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════
   §8  CTA — SYSTEM ENROLL
   ═══════════════════════════════════════════════════════════════ */
.p3-cta { position: relative; padding: 10rem 0; overflow: hidden; background: var(--p3-bg-2); }

/* Core CTA Containers */
.p3-cta-bg-light, .p3-cta-bg-dark { display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body:not(.light-mode) .p3-cta-bg-dark { display: block; }
body.light-mode .p3-cta-bg-light { display: block; }

/* ─── DARK CTA: NEON REACTOR ─── */
.p3-cta-dark-grid { position: absolute; inset: 0; background-image: radial-gradient(circle at 50% 100%, rgba(0,212,255,0.1), transparent 60%), linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px); background-size: 100% 100%, 40px 40px, 40px 40px; }

/* ── ULTRA-OVERDRIVE ELEMENTS ── */
.p3-cta-volumetric-grid { position: absolute; bottom: 0; left: -50%; width: 200%; height: 50%; background-image: linear-gradient(0deg, rgba(168,85,247,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,0.3) 1px, transparent 1px); background-size: 60px 30px; transform: perspective(500px) rotateX(70deg); transform-origin: bottom center; animation: volumetricScroll 2s linear infinite; box-shadow: inset 0 0 100px rgba(0,212,255,0.5); z-index: 0; pointer-events: none; }
@keyframes volumetricScroll { 0% { background-position: 0 0; } 100% { background-position: 0 30px; } }

.p3-cta-core-beam { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 100%; background: linear-gradient(0deg, rgba(0,212,255,0.8), rgba(168,85,247,0.2), transparent); filter: blur(20px); animation: coreBeamPulse 3s infinite alternate; z-index: 0; }
@keyframes coreBeamPulse { 0% { opacity: 0.5; width: 80px; } 100% { opacity: 1; width: 120px; } }

.p3-cta-ambient-flash { position: absolute; inset: 0; background: rgba(0,212,255,0.1); opacity: 0; animation: ambientFlash 7s infinite; z-index: 0; pointer-events: none; mix-blend-mode: overlay; }
@keyframes ambientFlash { 0%, 94% { opacity: 0; } 95% { opacity: 0.4; background: rgba(168,85,247,0.2); } 96% { opacity: 0; } 97% { opacity: 0.6; background: rgba(0,212,255,0.2); } 100% { opacity: 0; } }

.p3-cta-matrix-streams { position: absolute; top: -50px; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.matrix-stream { position: absolute; font-family: var(--p3-font-mono); font-size: 1.2rem; font-weight: bold; color: rgba(0,212,255,0.8); text-shadow: 0 0 10px rgba(0,212,255,1); writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; animation: matrixFall 4s linear infinite; }
.ms-1 { left: 10%; animation-duration: 5s; animation-delay: 0s; color: rgba(168,85,247,0.8); text-shadow: 0 0 10px rgba(168,85,247,1); }
.ms-2 { left: 30%; animation-duration: 3s; animation-delay: 2s; }
.ms-3 { left: 50%; animation-duration: 7s; animation-delay: 1s; }
.ms-4 { right: 30%; animation-duration: 4s; animation-delay: 3s; color: rgba(168,85,247,0.8); }
.ms-5 { right: 10%; animation-duration: 6s; animation-delay: 0.5s; }
.ms-6 { left: 80%; animation-duration: 5.5s; animation-delay: 4s; }
@keyframes matrixFall { 0% { top: -200px; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.p3-cta-hex-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.holo-hex { position: absolute; width: 100px; height: 115px; background: rgba(0,212,255,0.05); border: 2px solid rgba(0,212,255,0.3); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); box-shadow: inset 0 0 20px rgba(0,212,255,0.2); animation: hexFloat 20s linear infinite; }
.hh-1 { top: 20%; left: 15%; animation-duration: 25s; }
.hh-2 { top: 60%; left: 5%; transform: scale(0.6); border-color: rgba(168,85,247,0.3); animation-duration: 18s; animation-direction: reverse; }
.hh-3 { top: 30%; right: 10%; transform: scale(1.2); animation-duration: 30s; }
.hh-4 { top: 70%; right: 20%; transform: scale(0.8); border-color: rgba(168,85,247,0.3); animation-duration: 22s; }
.hh-5 { top: 10%; left: 50%; transform: scale(0.5); animation-duration: 15s; animation-direction: reverse; }
@keyframes hexFloat { 0% { transform: rotate(0deg) translateY(0) scale(1); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: rotate(360deg) translateY(-200px) scale(1.5); opacity: 0; } }

.p3-cta-laser-sweeper { position: absolute; background: rgba(0,212,255,0.5); box-shadow: 0 0 20px rgba(0,212,255,0.8), 0 0 40px rgba(0,212,255,0.4); z-index: 1; pointer-events: none; }
.cls-h { top: 0; left: 0; width: 100%; height: 2px; animation: laserSweepH 8s ease-in-out infinite alternate; }
.cls-v { top: 0; left: 0; width: 2px; height: 100%; background: rgba(168,85,247,0.5); box-shadow: 0 0 20px rgba(168,85,247,0.8); animation: laserSweepV 12s ease-in-out infinite alternate; }
@keyframes laserSweepH { 0% { top: 0; opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes laserSweepV { 0% { left: 0; opacity: 0; } 10%, 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.p3-cta-dark-gear { position: absolute; border: 2px dashed rgba(168,85,247,0.3); border-radius: 50%; z-index: 0; pointer-events: none; }
.cdg-1 { top: -100px; left: -100px; width: 400px; height: 400px; animation: cbgGearSpin 40s linear infinite; }
.cdg-2 { bottom: -150px; right: -150px; width: 500px; height: 500px; border-style: dotted; border-color: rgba(0,212,255,0.2); animation: cbgGearSpin 50s linear infinite reverse; }

.p3-cta-data-cubes { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 800px; }
.cta-cube { position: absolute; width: 40px; height: 40px; border: 1px solid rgba(0,212,255,0.6); background: rgba(0,212,255,0.1); box-shadow: inset 0 0 10px rgba(0,212,255,0.4); animation: dataCubeFloat 15s linear infinite; transform-style: preserve-3d; }
.cta-cube::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(168,85,247,0.6); transform: translateZ(20px); }
.cta-cube::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(0,212,255,0.6); transform: translateZ(-20px); }
.cc-1 { bottom: 10%; left: 25%; animation-duration: 18s; }
.cc-2 { top: 20%; right: 25%; animation-duration: 25s; animation-direction: reverse; border-color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.1); }
.cc-2::before, .cc-2::after { border-color: rgba(0,212,255,0.6); }
.cc-3 { bottom: 40%; left: 10%; animation-duration: 22s; transform: scale(0.6); }
.cc-4 { top: 50%; right: 10%; animation-duration: 16s; transform: scale(1.4); }
@keyframes dataCubeFloat { 0% { transform: translateY(100vh) rotateX(0deg) rotateY(0deg); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-20vh) rotateX(360deg) rotateY(360deg); opacity: 0; } }
.p3-cta-reactor { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; }
.p3-reactor-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,0.8), transparent); box-shadow: 0 0 40px rgba(168,85,247,0.6), 0 0 80px rgba(0,212,255,0.3); animation: ctaReactorPulse 4s ease-in-out infinite alternate; }
.p3-reactor-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 2px dashed rgba(0,212,255,0.3); box-shadow: 0 0 15px rgba(0,212,255,0.1), inset 0 0 15px rgba(0,212,255,0.1); }
.p3-rr-1 { width: 120px; height: 120px; animation: cbgGearSpin 10s linear infinite; }
.p3-rr-2 { width: 180px; height: 180px; border: 1px solid rgba(168,85,247,0.2); border-style: dotted; animation: cbgGearSpin 15s linear infinite reverse; }
@keyframes ctaReactorPulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%,-50%) scale(1.2); opacity: 1; box-shadow: 0 0 60px rgba(168,85,247,0.8), 0 0 100px rgba(0,212,255,0.5); } }

.p3-cta-circuit-left { position: absolute; bottom: 50px; left: 0; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,212,255,0.2)); }
.p3-cta-circuit-left::after { content: ''; position: absolute; top: -2px; left: 0; width: 40px; height: 6px; background: rgba(0,212,255,0.8); box-shadow: 0 0 20px rgba(0,212,255,0.6); animation: ctaCircuitRun 6s linear infinite; }
.p3-cta-circuit-right { position: absolute; bottom: 80px; right: 0; width: 40%; height: 2px; background: linear-gradient(-90deg, transparent, rgba(168,85,247,0.2)); }
.p3-cta-circuit-right::after { content: ''; position: absolute; top: -2px; right: 0; width: 40px; height: 6px; background: rgba(168,85,247,0.8); box-shadow: 0 0 20px rgba(168,85,247,0.6); animation: ctaCircuitRunRev 6s linear infinite 3s; }
@keyframes ctaCircuitRun { 0% { left: -40px; } 100% { left: 100%; } }
@keyframes ctaCircuitRunRev { 0% { right: -40px; } 100% { right: 100%; } }

.p3-cta-particle { position: absolute; border-radius: 50%; box-shadow: 0 0 10px currentColor; animation: ctaParticleRise 10s linear infinite; }
.ctap-1 { bottom: 0; left: 20%; width: 4px; height: 4px; color: rgba(0,212,255,0.6); background: rgba(0,212,255,0.8); animation-duration: 8s; }
.ctap-2 { bottom: -20px; left: 40%; width: 6px; height: 6px; color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.8); animation-duration: 12s; animation-delay: 2s; }
.ctap-3 { bottom: 0; right: 25%; width: 3px; height: 3px; color: rgba(0,212,255,0.5); background: rgba(0,212,255,0.7); animation-duration: 7s; animation-delay: 4s; }
.ctap-4 { bottom: -10px; right: 45%; width: 5px; height: 5px; color: rgba(255,170,0,0.5); background: rgba(255,170,0,0.7); animation-duration: 15s; animation-delay: 1s; }
.ctap-5 { bottom: 0; left: 70%; width: 4px; height: 4px; color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.8); animation-duration: 9s; animation-delay: 5s; }
.ctap-6 { bottom: -30px; left: 10%; width: 7px; height: 7px; color: rgba(0,212,255,0.4); background: rgba(0,212,255,0.6); animation-duration: 14s; animation-delay: 3s; }
@keyframes ctaParticleRise { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; transform: translateY(-400px) scale(0.5); } 100% { transform: translateY(-450px) scale(0); opacity: 0; } }

.p3-cta-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px); pointer-events: none; z-index: 1; }
.p3-cta-glow { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,212,255,0.05), transparent 70%); border-radius: 50%; filter: blur(40px); z-index: 0; }
.p3-cta-glow--left { top: -100px; left: -100px; }
.p3-cta-glow--right { bottom: -100px; right: -100px; background: radial-gradient(circle, rgba(168,85,247,0.04), transparent 70%); }

/* ─── LIGHT CTA: BLUEPRINT ASSEMBLY ─── */
.p3-cta-light-grid { position: absolute; inset: 0; background-image: radial-gradient(circle at 50% 100%, rgba(14,165,233,0.15), transparent 60%), linear-gradient(rgba(14,165,233,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,0.05) 1px, transparent 1px); background-size: 100% 100%, 30px 30px, 30px 30px; }
.p3-cta-gear { position: absolute; border-radius: 50%; border: 2px dashed rgba(14,165,233,0.2); }
.p3-cg-1 { bottom: -80px; left: -50px; width: 300px; height: 300px; animation: cbgGearSpin 30s linear infinite; }
.p3-cg-2 { top: -40px; right: -40px; width: 200px; height: 200px; animation: cbgGearSpin 20s linear infinite reverse; border-style: dotted; border-color: rgba(245,158,11,0.2); }
.p3-cta-blueprint-lines { position: absolute; inset: 0; background: linear-gradient(45deg, transparent 48%, rgba(14,165,233,0.1) 50%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgba(14,165,233,0.1) 50%, transparent 52%); background-size: 150px 150px; opacity: 0.5; }
.p3-cta-laser-scanner { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, rgba(14,165,233,0.4), transparent); box-shadow: 0 0 15px rgba(14,165,233,0.2); animation: ctaLightScan 6s ease-in-out infinite; }
@keyframes ctaLightScan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* New Light Mode Overdrive Elements */
.p3-cta-matrix-streams-light { position: absolute; top: -50px; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.matrix-stream-light { position: absolute; font-family: var(--p3-font-mono); font-size: 1.2rem; font-weight: bold; color: rgba(14,165,233,0.8); text-shadow: 0 0 10px rgba(14,165,233,1); writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; animation: matrixFall 4s linear infinite; }
.msl-1 { left: 15%; animation-duration: 5s; animation-delay: 0s; color: rgba(245,158,11,0.8); text-shadow: 0 0 10px rgba(245,158,11,1); }
.msl-2 { left: 35%; animation-duration: 3s; animation-delay: 2s; }
.msl-3 { left: 55%; animation-duration: 7s; animation-delay: 1s; }
.msl-4 { right: 35%; animation-duration: 4s; animation-delay: 3s; color: rgba(245,158,11,0.8); }
.msl-5 { right: 15%; animation-duration: 6s; animation-delay: 0.5s; }
.msl-6 { left: 85%; animation-duration: 5.5s; animation-delay: 4s; }

.p3-cta-light-core-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; }
.p3-cta-light-core { width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(14,165,233,0.3), transparent 70%); border: 4px dashed #0ea5e9; box-shadow: 0 0 40px rgba(14,165,233,0.5), inset 0 0 20px rgba(14,165,233,0.5); animation: cbgGearSpin 10s linear infinite; }
.p3-cta-light-core-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(245,158,11,0.5); animation: lightCorePulse 2s ease-in-out infinite alternate; }
@keyframes lightCorePulse { 0% { transform: translate(-50%,-50%) scale(0.8); opacity: 0.5; box-shadow: 0 0 10px rgba(245,158,11,0.2); } 100% { transform: translate(-50%,-50%) scale(1.5); opacity: 1; box-shadow: 0 0 40px rgba(245,158,11,0.6); border-color: #f59e0b; } }

/* ─── ECO MODE OVERRIDES ─── */
body.eco-mode:not(.light-mode) .p3-cta-bg-dark { opacity: 0.3; }
body.eco-mode:not(.light-mode) .p3-cta-bg-dark * { box-shadow: none !important; filter: none !important; animation-duration: 20s !important; }
body.eco-mode:not(.light-mode) .p3-cta-particle, body.eco-mode:not(.light-mode) .p3-cta-circuit-left::after, body.eco-mode:not(.light-mode) .p3-cta-circuit-right::after, body.eco-mode:not(.light-mode) .p3-cta-volumetric-grid, body.eco-mode:not(.light-mode) .p3-cta-core-beam, body.eco-mode:not(.light-mode) .p3-cta-ambient-flash, body.eco-mode:not(.light-mode) .p3-cta-matrix-streams, body.eco-mode:not(.light-mode) .p3-cta-hex-field, body.eco-mode:not(.light-mode) .p3-cta-laser-sweeper, body.eco-mode:not(.light-mode) .p3-cta-data-cubes, body.eco-mode:not(.light-mode) .p3-cta-dark-gear { display: none !important; animation: none !important; }
body.eco-mode.light-mode .p3-cta-bg-light { opacity: 0.5; }
body.eco-mode.light-mode .p3-cta-bg-light * { box-shadow: none !important; animation-duration: 20s !important; }
body.eco-mode.light-mode .p3-cta-laser-scanner, body.eco-mode.light-mode .p3-cta-matrix-streams-light, body.eco-mode.light-mode .p3-cta-light-core-container, body.eco-mode.light-mode .p3-cta-gear { display: none !important; animation: none !important; }

/* Footer Eco Mode Dial-back */
body.eco-mode .p3-footer-bg-dark, body.eco-mode .p3-footer-bg-light { opacity: 0.5; }
body.eco-mode .p3-footer-bg-dark *, body.eco-mode .p3-footer-bg-light * { box-shadow: none !important; animation-duration: 30s !important; }

.p3-cta-content { position: relative; z-index: 2; text-align: center; max-width: 1000px; margin: 0 auto; }
.p3-cta-badge { display: inline-block; font-family: var(--p3-font-mono); font-size: 0.85rem; letter-spacing: 0.3em; color: #00e1ff; border: 1px solid rgba(0,225,255,0.4); border-radius: 2px; padding: 0.6rem 2rem; margin-bottom: 2.5rem; text-transform: uppercase; background: rgba(0,225,255,0.08); box-shadow: 0 0 15px rgba(0,225,255,0.2), inset 0 0 10px rgba(0,225,255,0.1); position: relative; overflow: hidden; }
.p3-cta-badge::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: p3CtaBadgeSweep 4s linear infinite; }
@keyframes p3CtaBadgeSweep { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

.p3-cta-title { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; color: #fff; margin: 0 0 1.5rem; line-height: 1.05; text-transform: uppercase; text-shadow: 0 5px 20px rgba(0,0,0,0.5); }
.p3-cta-title span { color: transparent; background: linear-gradient(90deg, #00e1ff, #a855f7, #00e1ff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; animation: p3TextShimmer 4s linear infinite; text-shadow: 0 0 30px rgba(0,225,255,0.4); }

.p3-cta-sub { color: var(--p3-text-dim); font-size: 1.2rem; margin-bottom: 4rem; line-height: 1.8; max-width: 800px; margin-inline: auto; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* The Data Stats Box */
.p3-cta-stats { display: inline-flex; gap: 2px; background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.3); border-radius: 8px; margin-bottom: 4.5rem; overflow: hidden; backdrop-filter: blur(20px); max-width: 100%; flex-wrap: wrap; justify-content: center; box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 20px rgba(0,212,255,0.15); position: relative; }
.p3-cta-stats::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(168,85,247,0.3); border-radius: 8px; pointer-events: none; mix-blend-mode: overlay; }
.p3-cta-stat { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 3.5rem; background: rgba(5,10,20,0.85); flex: 1 1 auto; min-width: 150px; position: relative; transition: all 0.3s; }
.p3-cta-stat:hover { background: rgba(0,212,255,0.1); box-shadow: inset 0 0 30px rgba(0,212,255,0.2); }
.p3-cta-snum { font-family: var(--p3-font-mono); font-size: 2.8rem; font-weight: 700; color: #fff; text-shadow: 0 0 15px rgba(0,212,255,0.5); letter-spacing: 0.05em; }
.p3-cta-stat span:last-child { font-family: var(--p3-font-head); font-size: 0.9rem; color: #00e1ff; text-transform: uppercase; font-weight: 700; letter-spacing: 0.15em; }

.p3-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.p3-btn-cta { position: relative; display: inline-flex; align-items: center; gap: 1rem; padding: 1.4rem 5rem; background: transparent; color: #fff; font-weight: 800; font-size: 1.2rem; border-radius: 4px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s; overflow: hidden; border: 1px solid rgba(0,212,255,0.6); box-shadow: 0 0 20px rgba(0,212,255,0.2), inset 0 0 20px rgba(0,212,255,0.1); }
.p3-btn-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,212,255,0.2), rgba(168,85,247,0.2)); z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; }
.p3-btn-cta:hover { transform: translateY(-3px); border-color: #00e1ff; box-shadow: 0 0 40px rgba(0,212,255,0.6), inset 0 0 30px rgba(168,85,247,0.4); text-shadow: 0 0 10px rgba(255,255,255,0.5); }
.p3-btn-cta:hover::before { transform: scaleX(1); transform-origin: left; }
.p3-btn-cta svg { transition: transform 0.3s, filter 0.3s; }
.p3-btn-cta:hover svg { transform: translateX(5px); filter: drop-shadow(0 0 5px #fff); }

.p3-wa-row { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; position: relative; z-index: 5; }
.p3-wa-btn { display: flex; align-items: center; gap: 1.2rem; background: rgba(5,15,25,0.6); border: 1px solid rgba(37,211,102,0.3); border-radius: 6px; padding: 1.2rem 2rem; text-decoration: none; transition: all 0.3s; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); position: relative; overflow: hidden; }
.p3-wa-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: #25d366; transition: left 0.3s; }
.p3-wa-btn:hover { background: rgba(37,211,102,0.15); border-color: rgba(37,211,102,0.8); transform: translateY(-4px); box-shadow: 0 15px 40px rgba(37,211,102,0.2); }
.p3-wa-btn:hover::before { left: 0; }
.p3-wa-btn img { width: 32px; height: 32px; filter: drop-shadow(0 0 10px rgba(37,211,102,0.5)); }
.p3-wa-btn div { display: flex; flex-direction: column; gap: 0.3rem; text-align: left; }
.p3-wa-name { font-size: 1.1rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; }
.p3-wa-btn .p3-mono { font-size: 0.85rem; color: #25d366; text-shadow: 0 0 5px rgba(37,211,102,0.5); }

/* Priority Contact Overrides (Blue Neon) */
.p3-wa-btn-priority { transform: scale(1.1); background: rgba(0,225,255,0.1); border-color: rgba(0,225,255,0.6); box-shadow: 0 0 30px rgba(0,225,255,0.3), inset 0 0 20px rgba(0,225,255,0.15); margin: 0 1.5rem; z-index: 10; animation: priorityPulseBlue 2s infinite alternate; overflow: visible !important; }
.p3-wa-btn-priority::before { background: #00e1ff; height: 3px; left: 0 !important; width: 0; transition: width 0.3s ease; }
.p3-wa-btn-priority:hover::before { width: 100% !important; }
.p3-wa-btn-priority:hover { background: rgba(0,225,255,0.2); border-color: #00e1ff; transform: scale(1.15) translateY(-5px); box-shadow: 0 15px 40px rgba(0,225,255,0.5); }
.p3-wa-btn-priority .p3-mono { color: #00e1ff; text-shadow: 0 0 8px rgba(0,225,255,0.6); font-weight: bold; }
.p3-wa-btn-priority img { filter: drop-shadow(0 0 10px rgba(0,225,255,0.8)); }
.priority-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #00e1ff; color: #000; font-family: var(--p3-font-mono); font-size: 0.75rem; font-weight: 800; padding: 3px 12px; border-radius: 12px; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 0 15px rgba(0,225,255,0.8); z-index: 2; pointer-events: none; }
@keyframes priorityPulseBlue { 0% { box-shadow: 0 0 20px rgba(0,225,255,0.2), inset 0 0 15px rgba(0,225,255,0.1); } 100% { box-shadow: 0 0 50px rgba(0,225,255,0.6), inset 0 0 30px rgba(0,225,255,0.4); border-color: rgba(0,225,255,0.9); } }


/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.p3-footer { background: linear-gradient(180deg, #0a0f1c 0%, #082f49 100%); border-top: 1px solid rgba(0,225,255,0.2); box-shadow: inset 0 30px 60px rgba(0,225,255,0.05); padding: 6rem 0 3rem; position: relative; overflow: hidden; }
.p3-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #00e1ff, transparent); box-shadow: 0 0 20px #00e1ff, 0 0 40px rgba(0,225,255,0.5); }

/* Footer Background Layers */
.p3-footer-bg-dark, .p3-footer-bg-light { position: absolute; inset: 0; pointer-events: none; z-index: 0; display: none; overflow: hidden; }
body:not(.light-mode) .p3-footer-bg-dark { display: block; }
body.light-mode .p3-footer-bg-light { display: block; }

/* Dark Mode Footer Animations (Neon Grid & Particles) */
.footer-neon-grid { position: absolute; bottom: 0; left: -50%; width: 200%; height: 100%; background-image: linear-gradient(0deg, rgba(0,225,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,225,255,0.1) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg); transform-origin: bottom center; animation: footerGridScroll 5s linear infinite; }
@keyframes footerGridScroll { 0% { background-position: 0 0; } 100% { background-position: 0 50px; } }

.footer-particles { position: absolute; inset: 0; }
.footer-particles span { position: absolute; bottom: -20px; width: 4px; height: 4px; background: #00e1ff; border-radius: 50%; box-shadow: 0 0 10px #00e1ff, 0 0 20px #00e1ff; animation: footerParticleRise 15s linear infinite; opacity: 0; }
.fp-1 { left: 10%; animation-duration: 12s; } .fp-2 { left: 30%; animation-duration: 18s; animation-delay: 2s; width: 6px; height: 6px; } .fp-3 { left: 50%; animation-duration: 14s; animation-delay: 5s; } .fp-4 { right: 30%; animation-duration: 16s; animation-delay: 1s; } .fp-5 { right: 10%; animation-duration: 20s; animation-delay: 4s; width: 3px; height: 3px; } .fp-6 { right: 50%; animation-duration: 10s; animation-delay: 7s; }
@keyframes footerParticleRise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateY(-400px); opacity: 0; } }

.footer-scanline { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: rgba(0,225,255,0.5); box-shadow: 0 0 15px rgba(0,225,255,0.8); animation: footerScan 8s ease-in-out infinite; opacity: 0; }
@keyframes footerScan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* Light Mode Footer Animations (Blueprint Enhanced) */
.footer-blueprint-grid { position: absolute; inset: 0; background-image: linear-gradient(0deg, rgba(14,165,233,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,0.1) 1px, transparent 1px); background-size: 30px 30px; animation: footerBlueprintPan 10s linear infinite; }
@keyframes footerBlueprintPan { 0% { background-position: 0 0; } 100% { background-position: 30px 30px; } }

.footer-light-scanner { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, transparent, rgba(14,165,233,0.6), transparent); box-shadow: 0 0 20px rgba(14,165,233,0.4); animation: footerLightScan 4s ease-in-out infinite alternate; }
@keyframes footerLightScan { 0% { top: 0; } 100% { top: 100%; } }

.footer-light-hazard { position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: repeating-linear-gradient(45deg, rgba(14,165,233,0.1), rgba(14,165,233,0.1) 10px, transparent 10px, transparent 20px); animation: footerHazardScroll 2s linear infinite; }
@keyframes footerHazardScroll { 0% { background-position: 0 0; } 100% { background-position: 28px 0; } }

.footer-blueprint-gears { position: absolute; inset: 0; }
.fbg-1 { position: absolute; top: -50px; left: -50px; width: 250px; height: 250px; border: 3px dashed rgba(14,165,233,0.3); border-radius: 50%; box-shadow: 0 0 20px rgba(14,165,233,0.1), inset 0 0 20px rgba(14,165,233,0.1); animation: cbgGearSpin 20s linear infinite; }
.fbg-2 { position: absolute; bottom: -80px; right: 10%; width: 350px; height: 350px; border: 2px dotted rgba(245,158,11,0.4); border-radius: 50%; animation: cbgGearSpin 30s linear infinite reverse; }
.fbg-3 { position: absolute; top: 20%; right: 25%; width: 150px; height: 150px; border: 2px dashed rgba(14,165,233,0.4); border-radius: 50%; animation: cbgGearSpin 15s linear infinite; }

.footer-data-nodes { position: absolute; left: 0; width: 100%; height: 2px; background: rgba(14,165,233,0.2); }
.footer-data-nodes::before { content: ''; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; background: #0ea5e9; border-radius: 50%; box-shadow: 0 0 10px #0ea5e9; animation: footerNodeTravel 5s ease-in-out infinite alternate; }
.fdn-1 { top: 30%; } .fdn-1::before { animation-duration: 6s; }
.fdn-2 { top: 50%; } .fdn-2::before { animation-duration: 4s; animation-delay: 1s; }
.fdn-3 { top: 70%; background: rgba(245,158,11,0.2); } .fdn-3::before { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; animation-duration: 7s; animation-direction: alternate-reverse; }

@keyframes footerNodeTravel { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.p3-container { position: relative; z-index: 2; }
.p3-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 5rem; }
.p3-footer-logo { height: 50px; margin-bottom: 2rem; filter: drop-shadow(1px 0 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(0 -1px 0 #ffffff) drop-shadow(0 0 6px rgba(255,255,255,0.45)); }
.p3-footer-brand p { font-size: 1rem; color: #94a3b8; line-height: 1.8; }
.p3-footer-col h4 { font-family: var(--p3-font-mono); font-size: 0.85rem; letter-spacing: 0.2em; color: #fff; margin-bottom: 1.8rem; text-transform: uppercase;}
.p3-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.p3-footer-col ul li a { font-size: 0.95rem; color: #94a3b8; text-decoration: none; transition: color 0.2s; }
.p3-footer-col ul li a:hover { color: #fff; }
.p3-footer-social { display: flex; gap: 1.5rem; }
.p3-footer-social a img { width: 32px; height: 32px; filter: grayscale(100%) brightness(1.5) opacity(0.7); transition: all 0.3s; }
.p3-footer-social a:hover img { filter: grayscale(0%) opacity(1); }
.p3-footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 2.5rem; display: flex; justify-content: space-between; align-items: center; }
.p3-footer-bottom .p3-mono { font-size: 0.85rem; color: #64748b; }

/* ═══════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes p3GlitchAnim1 { 0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);} 20% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);} 40% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);} 60% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);} 80% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);} 100% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);} }
@keyframes p3GlitchAnim2 { 0% { clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);} 20% { clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);} 40% { clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);} 60% { clip-path: polygon(0 15%, 100% 15%, 100% 20%, 0 20%);} 80% { clip-path: polygon(0 58%, 100% 58%, 100% 58%, 0 58%);} 100% { clip-path: polygon(0 43%, 100% 43%, 100% 43%, 0 43%);} }

@keyframes p3ArmUpper { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
@keyframes p3ArmLower { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(12deg); } 62% { transform: rotate(-8deg); } }
@keyframes p3ArmHand { 0%,100% { transform: rotate(0deg); } 30% { transform: rotate(-15deg); } 70% { transform: rotate(10deg); } }
@keyframes p3FingerGrip { 0%,100% { transform: translateX(0); } 42%,58% { transform: translateX(4px); } }
@keyframes p3LaserPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 0.1; } }
@keyframes p3DataFlow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -28; } }
@keyframes p3DotBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes p3CursorBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@keyframes p3ScrollPulse { 0%,100% { opacity: 0.2; transform: scaleY(0.9); } 50% { opacity: 1; transform: scaleY(1.1); box-shadow: 0 0 10px var(--p3-cyan); } }
@keyframes p3RailPulse { 0% { left: -100px; } 100% { left: 100%; } }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .p3-robot-arm-wrap { width: 320px; height: 440px; right: 2%; opacity: 0.6; }
  .p3-career-layout { grid-template-columns: 1fr; }
  .p3-footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (max-width: 900px) {
  .p3-pillars-grid { grid-template-columns: 1fr 1fr; }
  .p3-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .p3-skills-grid { grid-template-columns: 1fr; gap: 4rem; }
  .p3-skills-chart { margin-top: 1rem; }
  .p3-robot-arm-wrap { width: 200px; height: 280px; opacity: 0.4; }
  .p3-hero-content { max-width: 100%; }
}
@media (max-width: 700px) {
  .p3-pillars-grid { grid-template-columns: 1fr; }
  .p3-flip-grid { grid-template-columns: 1fr; }
  .p3-industry-grid { grid-template-columns: 1fr; }
  .p3-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .p3-robot-arm-wrap { display: none; }
  .p3-hero-content { padding-left: 2rem; padding-right: 2rem; }
  .p3-phase-card { flex: 0 0 340px; }
  .p3-container { padding: 0 2rem; }
}
@media (max-width: 480px) {
  .p3-wa-row { flex-direction: column; align-items: stretch; }
  .p3-hero-actions { flex-direction: column; align-items: stretch;}
  .p3-journey-track { padding: 3.5rem 2rem; gap: 1.5rem; }
  .p3-phase-card { flex: 0 0 300px; padding: 2rem; }
  .p3-container { padding: 0 1.5rem; }
  .p3-hero-content { padding-left: 1.5rem; padding-right: 1.5rem; }
  .p3-hero-stats { flex-direction: column; width: 100%; }
  .p3-stat { padding: 1.2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MECHATRONIC BZZZZZ ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes p3TextFlicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.8; text-shadow: 0 0 20px var(--p3-cyan); transform: skewX(-2deg); }
  97% { opacity: 1; }
  98% { opacity: 0.6; text-shadow: 0 0 20px var(--p3-amber); }
  99% { opacity: 1; transform: skewX(2deg); }
}
@keyframes p3ElectricBzz1 {
  0%, 80% { opacity: 0; transform: none; clip-path: none; }
  81% { opacity: 1; background: var(--p3-bg); clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: translateX(-4px) skewX(-10deg); }
  83% { opacity: 1; background: var(--p3-bg); clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%); transform: translateX(3px) skewX(5deg); }
  85% { opacity: 0; transform: translateX(0); }
  94% { opacity: 1; background: var(--p3-bg); clip-path: polygon(0 10%, 100% 10%, 100% 15%, 0 15%); transform: translateX(-3px); }
  96% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes p3ElectricBzz2 {
  0%, 70% { opacity: 0; transform: none; clip-path: none; }
  71% { opacity: 1; background: var(--p3-bg); clip-path: polygon(0 40%, 100% 40%, 100% 45%, 0 45%); transform: translateX(5px) skewX(15deg); }
  72% { opacity: 0; transform: translateX(0); }
  88% { opacity: 1; background: var(--p3-bg); clip-path: polygon(0 80%, 100% 80%, 100% 88%, 0 88%); transform: translateX(-5px) skewX(-10deg); }
  90% { opacity: 1; background: var(--p3-bg); clip-path: polygon(0 5%, 100% 5%, 100% 10%, 0 10%); transform: translateX(2px); }
  92% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes p3BtnGlitchEffect {
  0% { transform: translateY(0); filter: none; }
  20% { transform: translate(-3px, 2px) skewX(10deg); filter: hue-rotate(90deg) contrast(150%); }
  40% { transform: translate(-2px, -2px) skewX(-10deg); filter: contrast(120%); }
  60% { transform: translate(3px, 2px) skewX(5deg); filter: hue-rotate(-90deg); }
  80% { transform: translate(2px, -2px) skewX(-5deg); filter: none; }
  100% { transform: translateY(-2px); filter: none; }
}

@keyframes p3BtnRandomGlitch {
  0%, 93%, 100% { transform: none; filter: none; clip-path: none; }
  94% { transform: skewX(8deg) translateX(-3px); filter: hue-rotate(120deg) contrast(150%); box-shadow: -4px 0 0 var(--p3-cyan); }
  95% { transform: none; filter: none; column-rule-color: none; }
  96% { transform: skewX(-8deg) translateX(3px); filter: hue-rotate(-120deg); box-shadow: 4px 0 0 var(--p3-amber); }
  97% { transform: none; filter: none; box-shadow: none; }
}

/* Structural System Glitches */
@keyframes p3BoxGlitch {
  0%, 93%, 100% { transform: none; box-shadow: 0 20px 50px rgba(0,0,0,0.5); filter: none; }
  94% { transform: skewX(2deg) translateX(-4px); box-shadow: -8px 0 0 var(--p3-cyan), 8px 0 0 var(--p3-amber); filter: contrast(120%); }
  95% { transform: none; box-shadow: 0 20px 50px rgba(0,0,0,0.5); filter: none; }
  96% { transform: skewX(-3deg) translateX(4px); box-shadow: 8px 0 0 var(--p3-cyan), -8px 0 0 var(--p3-purple); filter: brightness(1.2); }
  97% { transform: none; box-shadow: 0 20px 50px rgba(0,0,0,0.5); filter: none; }
}

@keyframes p3ScreenGlitch {
  0%, 96%, 100% { filter: none; }
  96.5% { filter: hue-rotate(15deg) contrast(110%); }
  97.5% { filter: hue-rotate(-15deg) brightness(1.1); }
}

/* ═══════════════════════════════════════════════════════════════
   §X HYPER-ENVIRONMENT MAXIMUM OVERDRIVE
   ═══════════════════════════════════════════════════════════════ */
.p3-hyper-environment {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  perspective: 1000px; transform-style: preserve-3d;
}

/* 1. Colossal 3D Orbital Rings */
.p3-orbital-rings {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  transform: translate(-50%, -50%) rotateX(65deg) translateY(-100px);
  transform-style: preserve-3d;
}
.p3-ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 2px solid rgba(0,225,255,0.4); box-shadow: 0 0 80px rgba(0,225,255,0.3) inset, 0 0 40px rgba(0,225,255,0.3);
  transform: translate(-50%, -50%);
}
.p3-ring-1 { width: 1400px; height: 1400px; border-width: 6px; border-style: dashed; border-color: rgba(0,225,255,0.5); animation: p3OrbitSpin1 60s linear infinite; }
.p3-ring-2 { width: 1800px; height: 1800px; border: 4px solid rgba(255,170,0,0.2); border-left: 6px dashed rgba(255,170,0,0.7); animation: p3OrbitSpin2 80s linear infinite reverse; }
.p3-ring-3 { width: 800px; height: 800px; border-width: 3px; border-style: dotted; border-color: rgba(180,0,255,0.6); box-shadow: 0 0 60px rgba(180,0,255,0.3) inset; animation: p3OrbitSpin1 40s linear infinite; }

@keyframes p3OrbitSpin1 { 0% { transform: translate(-50%, -50%) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateZ(360deg); } }
@keyframes p3OrbitSpin2 { 0% { transform: translate(-50%, -50%) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateZ(360deg); } }

/* 2. Hexadecimal Data Showers */
.p3-hexa-rain {
  position: absolute; inset: 0; z-index: 2; opacity: 0.6; /* Drastically increased visibility */
}
.p3-hexa-stream {
  position: absolute; top: -100px; left: var(--left);
  width: 20px; font-family: var(--p3-font-mono); font-size: 1.1rem; font-weight: 700; color: rgba(0,225,255,0.9);
  word-break: break-all; text-shadow: 0 0 15px rgba(0,225,255,0.8);
  animation: p3HexaFall 10s linear infinite; animation-delay: var(--delay);
  opacity: 0;
}
@keyframes p3HexaFall {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { transform: translateY(120vh); opacity: 0; }
}

/* 3. Heavy Parallax Gears */
.p3-heavy-gears {
  position: absolute; inset: 0; z-index: 1; opacity: 0.2; /* Was incredibly faint */
}
.p3-gear-bg { position: absolute; color: var(--p3-cyan); filter: drop-shadow(0 0 40px rgba(0,225,255,0.6)); }
.p3-gear-left { width: 800px; height: 800px; left: -200px; top: -200px; animation: p3GearLeft 45s linear infinite; }
.p3-gear-right { width: 1000px; height: 1000px; right: -300px; bottom: -400px; animation: p3GearRight 60s linear infinite reverse; color: var(--p3-amber); filter: drop-shadow(0 0 50px rgba(255,170,0,0.6)); }

@keyframes p3GearLeft { 100% { transform: rotate(360deg); } }
@keyframes p3GearRight { 100% { transform: rotate(360deg); } }

/* 4. Deep-Background Hydraulics */
.p3-pistons { position: absolute; inset: 0; opacity: 0.5; z-index: 1; }
.p3-piston { position: absolute; width: 60px; height: 400px; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.4), rgba(255,255,255,0.1)); border: 2px solid rgba(0,225,255,0.5); box-shadow: 0 0 30px rgba(0,225,255,0.2) inset; }
.p3-piston::after { content: ''; position: absolute; left: 10px; width: 40px; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(0,0,0,0.6) 10px, rgba(0,0,0,0.6) 12px); }
.p3-piston-top { top: -200px; left: 20%; animation: p3HydraulicTop 12s ease-in-out infinite; }
.p3-piston-bottom { bottom: -200px; right: 25%; animation: p3HydraulicBottom 15s ease-in-out infinite alternate; }

@keyframes p3HydraulicTop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(150px); } }
@keyframes p3HydraulicBottom { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }

/* 5. Cyber Dust Layer */
.p3-dust-layer { position: absolute; inset: -50%; background-image: radial-gradient(circle, rgba(0,225,255,0.8) 1.5px, transparent 2px); background-size: 100px 100px; animation: p3DustDrift 30s linear infinite; opacity: 0.4; pointer-events: none; }
.p3-dust-mid { background-image: radial-gradient(circle, rgba(255,170,0,1) 2.5px, transparent 3px); background-size: 150px 150px; animation: p3DustDrift 20s linear infinite reverse; opacity: 0.6; pointer-events: none; }
.p3-dust-front { background-image: radial-gradient(circle, rgba(0,225,255,1) 3px, transparent 4px); background-size: 80px 80px; animation: p3DustDrift 15s linear infinite; opacity: 0.5; transform: translateZ(100px); filter: drop-shadow(0 0 5px var(--p3-cyan)); pointer-events: none; }

@keyframes p3DustDrift { 0% { background-position: 0 0; } 100% { background-position: 1000px 1000px; } }

/* ═══════════════════════════════════════════════════════════════
   LIGHT / DARK MODE TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════ */
.hero-mode-toggle {
  position: absolute;
  bottom: 32px;
  right: 28px;
  z-index: 99999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.4s ease, background-color 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0, 212, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
}

/* Default (Dark Mode) -> Show Sun (to toggle to light) */
.hero-mode-toggle .mode-sun {
  display: block;
}
.hero-mode-toggle .mode-moon {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES (SOFT BLUE THEME)
   ═══════════════════════════════════════════════════════════════ */

/* Smooth color transitions for the theme switch */
.p3-body, .p3-hero, .p3-pillars, .p3-journey, .p3-skills, .p3-industries, .p3-career, .p3-cta, .p3-footer,
.p3-benefits {
  transition: background-color 1.2s ease-in-out, background-image 1.2s ease-in-out, background 1.2s ease-in-out, color 1.2s ease-in-out;
}

.p3-pillar-card, .p3-timeline-card, .p3-flip-front, .p3-flip-back, .p3-ind-tilt-inner, .p3-flowchart-wrap, .p3-salary-panel {
  transition: background 1.2s ease-in-out, background-color 1.2s ease-in-out, border-color 1.2s ease-in-out, box-shadow 1.2s ease-in-out, backdrop-filter 1.2s ease-in-out, -webkit-backdrop-filter 1.2s ease-in-out;
}

.p3-h1, .p3-h2, .p3-h3, .p3-h4, p, span, .p3-mono, .p3-glitch, .p3-card-desc, .p3-desc {
  transition: color 1.2s ease-in-out, text-shadow 1.2s ease-in-out;
}

/* Automation background element transitions */
.p3-agear { transition: color 1.2s ease-in-out, filter 1.2s ease-in-out; }
.p3-fwrench { transition: color 1.2s ease-in-out; }
.p3-conv-track { transition: background 1.2s ease-in-out; }
.p3-conv-box { transition: border-color 1.2s ease-in-out, background 1.2s ease-in-out; }
.p3-plc-rail, .p3-plc-rung { transition: background 1.2s ease-in-out; }
.p3-plc-sig { transition: background 1.2s ease-in-out, box-shadow 1.2s ease-in-out; }
.p3-spk { transition: background 1.2s ease-in-out, box-shadow 1.2s ease-in-out; }
.p3-rarc { transition: border-color 1.2s ease-in-out; }
.p3-hero-glow { transition: background 1.2s ease-in-out; }
.p3-scanlines, .p3-scanline-sweep { transition: opacity 1.2s ease-in-out; }
.p3-hero-badge, .p3-stat, .p3-btn { transition: background-color 1.2s ease-in-out, border-color 1.2s ease-in-out, color 1.2s ease-in-out, box-shadow 1.2s ease-in-out; }

/* Benefits section smooth transitions */
.p3-benefits-bg { transition: background 1.2s ease-in-out; }
.p3-eclipse-core, .p3-eclipse-sphere, .p3-eclipse-corona,
.p3-topo-laser-floor, .p3-topo-laser-roof,
.p3-lens-flare, .p3-ember-storm {
  transition: opacity 1.2s ease-in-out;
}
.p3-benefits .p3-overline { transition: color 1.2s ease-in-out, text-shadow 1.2s ease-in-out; }
.p3-benefits .p3-overline::before,
.p3-benefits .p3-overline::after { transition: background 1.2s ease-in-out, box-shadow 1.2s ease-in-out; }
.p3-benefits .p3-section-title { transition: filter 1.2s ease-in-out; }
.p3-benefits .p3-section-sub { transition: background-color 1.2s ease-in-out, color 1.2s ease-in-out, box-shadow 1.2s ease-in-out; }
.p3-benefits .p3-section-sub::before,
.p3-benefits .p3-section-sub::after { transition: background 1.2s ease-in-out; }
.p3-flip-value { transition: filter 1.2s ease-in-out; }
.p3-flip-front p { transition: color 1.2s ease-in-out, background 1.2s ease-in-out, border-color 1.2s ease-in-out, box-shadow 1.2s ease-in-out; }
.p3-flip-back p { transition: color 1.2s ease-in-out, text-shadow 1.2s ease-in-out; }
.p3-flip-front::before, .p3-flip-back::before { transition: background 1.2s ease-in-out; }
.node-spinner { transition: border-color 1.2s ease-in-out, box-shadow 1.2s ease-in-out; }
.p3-holo-emoji { transition: filter 1.2s ease-in-out; }
.p3-req-item { transition: background 1.2s ease-in-out, background-color 1.2s ease-in-out, border-color 1.2s ease-in-out, color 1.2s ease-in-out, box-shadow 1.2s ease-in-out; }
.p3-req-icon { transition: filter 1.2s ease-in-out; }
.node-mini .node-spinner { transition: border-color 1.2s ease-in-out, box-shadow 1.2s ease-in-out; }
.node-mini .p3-holo-emoji { transition: filter 1.2s ease-in-out; }

/* Apply light mode variables */
body.p3-body.light-mode {
  /* Vibrant soft blue backgrounds instead of flat slate */
  --p3-bg: #e2e8f0;
  --p3-bg-2: #dbeafe; /* Light blue tint */
  
  /* Glassmorphism tuned for light backgrounds */
  --p3-glass: rgba(255, 255, 255, 0.65);
  --p3-glass-hover: rgba(255, 255, 255, 0.9);
  
  /* Text tuned for soft blue background */
  --p3-text: #0f172a;       /* Slate 900 */
  --p3-text-2: #334155;     /* Slate 700 */
  --p3-text-dim: #475569;   /* Slate 600 */
  --p3-muted: #64748b;      /* Slate 500 */
  
  /* Retain brand accents but adjusted for light visibility */
  --p3-cyan: #0284c7;       /* Deeper cyan/blue */
  --p3-cyan-glow: rgba(2, 132, 199, 0.2);
  
  --p3-amber: #d97706;      /* Deeper amber */
  --p3-amber-glow: rgba(217, 119, 6, 0.2);
  
  --p3-purple: #7c3aed;     /* Deeper purple */
  
  --p3-border: rgba(15, 23, 42, 0.15);
  --p3-border-soft: rgba(15, 23, 42, 0.08);
}

/* Toggle button in light mode */
.light-mode .hero-mode-toggle {
  background: rgba(255, 255, 255, 0.92);
  border-color: #bfdbfe;
  color: #0f172a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.light-mode .hero-mode-toggle:hover {
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.15);
  background: #fff;
}
.light-mode .hero-mode-toggle .mode-sun {
  display: none;
}
.light-mode .hero-mode-toggle .mode-moon {
  display: block;
}

/* Background Effects Opacity Reduction in Light Mode */
.light-mode .p3-circuit-bg,
.light-mode .p3-hyper-environment {
  opacity: 0.15 !important;
}

.light-mode .p3-circuit-traces {
  opacity: 0.1;
}

/* Activate AAA Blueprint Drafting Background specifically for Light + Performance Mode */
body.light-mode:not(.eco-mode) .p3-sk-blueprint-overlay {
  display: block;
}

/* Radar Chart Light Mode Color Overrides */
/* Deepen the neon colors for better contrast against light backgrounds */
body.light-mode .p3-radar [fill="#00d4ff"] { fill: var(--p3-cyan) !important; }
body.light-mode .p3-radar [fill="rgba(0,212,255,0.9)"] { fill: rgba(2, 132, 199, 1) !important; }
body.light-mode .p3-radar [fill="rgba(0,212,255,0.7)"] { fill: rgba(2, 132, 199, 0.9) !important; }
body.light-mode .p3-radar [fill="rgba(0,212,255,0.5)"] { fill: rgba(2, 132, 199, 0.7) !important; }
body.light-mode .p3-radar [fill="rgba(0,212,255,0.15)"] { fill: rgba(2, 132, 199, 0.25) !important; }
body.light-mode .p3-radar [fill="rgba(0,212,255,0.09)"] { fill: rgba(2, 132, 199, 0.1) !important; }

body.light-mode .p3-radar [fill="#ff9f00"] { fill: var(--p3-amber) !important; }
body.light-mode .p3-radar [fill="rgba(255,159,0,0.9)"] { fill: rgba(217, 119, 6, 1) !important; }
body.light-mode .p3-radar [fill="rgba(255,159,0,0.7)"] { fill: rgba(217, 119, 6, 0.9) !important; }
body.light-mode .p3-radar [fill="rgba(255,159,0,0.5)"] { fill: rgba(217, 119, 6, 0.7) !important; }
body.light-mode .p3-radar [fill="rgba(255,159,0,0.15)"] { fill: rgba(217, 119, 6, 0.25) !important; }

body.light-mode .p3-radar [fill="#a78bfa"] { fill: var(--p3-purple) !important; }
body.light-mode .p3-radar [fill="rgba(167,139,250,0.9)"] { fill: rgba(124, 58, 237, 1) !important; }
body.light-mode .p3-radar [fill="rgba(167,139,250,0.7)"] { fill: rgba(124, 58, 237, 0.9) !important; }
body.light-mode .p3-radar [fill="rgba(167,139,250,0.5)"] { fill: rgba(124, 58, 237, 0.7) !important; }
body.light-mode .p3-radar [fill="rgba(167,139,250,0.15)"] { fill: rgba(124, 58, 237, 0.25) !important; }

body.light-mode .p3-radar [stroke="#00d4ff"] { stroke: var(--p3-cyan) !important; }
body.light-mode .p3-radar [stroke="#ff9f00"] { stroke: var(--p3-amber) !important; }
body.light-mode .p3-radar [stroke="#a78bfa"] { stroke: var(--p3-purple) !important; }
body.light-mode .p3-radar [stroke="rgba(0,212,255,0.12)"] { stroke: rgba(2, 132, 199, 0.2) !important; }
body.light-mode .p3-radar [stroke="rgba(0,212,255,0.07)"] { stroke: rgba(2, 132, 199, 0.15) !important; }
body.light-mode .p3-radar [stroke="rgba(0,212,255,0.05)"] { stroke: rgba(2, 132, 199, 0.1) !important; }

/* Radar Gradient Overrides */
body.light-mode .p3-radar stop[stop-color="rgba(0,212,255,0.12)"] { stop-color: rgba(2, 132, 199, 0.15) !important; }
body.light-mode .p3-radar stop[stop-color="rgba(0,212,255,0.15)"] { stop-color: rgba(2, 132, 199, 0.2) !important; }

/* Make journey section transparent in light mode so animation backgrounds show */
.light-mode .p3-journey {
  background: transparent !important;
}
.light-mode .p3-journey::before {
  opacity: 0 !important;
}

.light-mode .p3-ember-storm {
  opacity: 0.2;
}

/* Text Overrides for hardcoded #fff and other light colors */
.light-mode .p3-hero-subtitle,
.light-mode .p3-stat-num,
.light-mode .p3-pillar-num,
.light-mode .p3-pillar-title,
.light-mode .p3-flip-title,
.light-mode .p3-flip-desc,
.light-mode .p3-tc-title,
.light-mode .p3-tc-mod-item,
.light-mode .p3-skill-name,
.light-mode .p3-ind-title,
.light-mode .p3-salary-role,
.light-mode .p3-wa-name,
.light-mode .p3-end-title,
.light-mode h2, .light-mode h3, .light-mode h4 {
  color: var(--p3-text) !important;
  text-shadow: none !important;
}

/* Make hero heading vibrant in light mode */
.light-mode .p3-hero-heading,
.light-mode h1 {
  color: var(--p3-text) !important;
  text-shadow: 0 4px 20px rgba(2, 132, 199, 0.25) !important;
}

/* Fix massive muddy shadow on MECHATRONICS title in Pillars section */
.light-mode .p3-mega-glitch {
  color: var(--p3-text) !important;
  text-shadow: 0 4px 15px rgba(2, 132, 199, 0.15) !important;
}
.light-mode .p3-mega-glitch::before {
  text-shadow: -4px 0 rgba(14, 165, 233, 0.4) !important;
}
.light-mode .p3-mega-glitch::after {
  text-shadow: 4px 0 rgba(245, 158, 11, 0.4) !important;
}

.light-mode .p3-desc,
.light-mode .p3-pillar-desc,
.light-mode .p3-card-desc,
.light-mode .p3-stat-label,
.light-mode .p3-ind-desc,
.light-mode .p3-tc-desc,
.light-mode .p3-tc-status,
.light-mode .p3-tc-code,
.light-mode .p3-hud-box-text {
  color: var(--p3-text-2) !important;
}

.light-mode .p3-tc-meta {
  color: rgba(2, 132, 199, 1) !important;
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.2) !important;
}

.light-mode .p3-ml-node {
  background: rgba(240, 249, 255, 0.8) !important;
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.2) !important;
}

/* Card / Glassmorphism overrides */
.light-mode .p3-pillar-card,
.light-mode .p3-flip-front,
.light-mode .p3-flip-back,
.light-mode .p3-timeline-card,
.light-mode .p3-ind-tilt-inner,
.light-mode .p3-flowchart-wrap,
.light-mode .p3-salary-panel,
.light-mode .p3-wa-btn,
.light-mode .p3-hud-box-text {
  background: var(--p3-glass) !important;
  border-color: var(--p3-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

.light-mode .p3-pillar-card:hover,
.light-mode .p3-timeline-card:hover,
.light-mode .p3-industry-card:hover .p3-ind-tilt-inner {
  background: var(--p3-glass-hover) !important;
  border-color: var(--p3-border-soft) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Light mode apex overdrive background */
.light-mode .p3-apex-backdrop {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(245, 158, 11, 0.2)) !important;
}

/* Light mode — end panel text readability */
.light-mode .p3-end-title {
  color: #1e3a5f !important;
  text-shadow: none !important;
}
.light-mode .p3-end-shimmer {
  background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 40%, #f59e0b 70%, #0284c7 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.light-mode .p3-end-sub {
  color: #334155 !important;
}
.light-mode .p3-end-notification {
  color: #0369a1 !important;
  text-shadow: none !important;
}
.light-mode .p3-end-ornament {
  color: rgba(2, 132, 199, 0.5) !important;
  text-shadow: none !important;
}
.light-mode .p3-end-seal {
  color: #0284c7 !important;
  border-color: rgba(2, 132, 199, 0.4) !important;
}
.light-mode .p3-end-year {
  color: rgba(30, 58, 95, 0.5) !important;
}
.light-mode .p3-apex-overdrive {
  border-color: rgba(14, 165, 233, 0.2) !important;
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.08), inset 0 0 20px rgba(14, 165, 233, 0.05) !important;
}

/* Adjust gradients in light mode to use blue theme */
.light-mode .p3-stat,
.light-mode .p3-flip-inner {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   AUTOMATION BACKGROUND SYSTEM — DARK MODE (DEFAULT)
   ═══════════════════════════════════════════════════════════════ */
.p3-auto-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}

/* Blueprint Grid Floor */
.p3-bp-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,180,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,255,0.08) 1px, transparent 1px),
    linear-gradient(rgba(0,180,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  animation: p3BpGridDrift 20s linear infinite;
}
@keyframes p3BpGridDrift { to { background-position: 80px 80px; } }

/* Interlocking Gear Cluster */
.p3-gear-cluster { position: absolute; top: -40px; left: -60px; width: 500px; height: 500px; pointer-events: none; z-index: 1; }
.p3-agear { position: absolute; color: rgba(0,180,255,0.25); filter: drop-shadow(0 0 8px rgba(0,180,255,0.15)); }
.p3-agear-1 { width: 280px; height: 280px; top: 0; left: 0; animation: p3GearCW 30s linear infinite; }
.p3-agear-2 { width: 180px; height: 180px; top: 155px; left: 195px; animation: p3GearCCW 19.3s linear infinite; color: rgba(255,170,0,0.2); filter: drop-shadow(0 0 8px rgba(255,170,0,0.1)); }
.p3-agear-3 { width: 120px; height: 120px; top: 10px; left: 230px; animation: p3GearCW 12.9s linear infinite; color: rgba(167,139,250,0.2); filter: drop-shadow(0 0 6px rgba(167,139,250,0.1)); }
@keyframes p3GearCW { to { transform: rotate(360deg); } }
@keyframes p3GearCCW { to { transform: rotate(-360deg); } }

/* Floating Wrench Silhouettes */
.p3-fwrench { position: absolute; pointer-events: none; z-index: 2; color: rgba(0,180,255,0.12); }
.p3-fw1 { width: 200px; top: 35%; left: 55%; animation: p3WrenchDrift1 25s ease-in-out infinite; transform: rotate(25deg); }
.p3-fw2 { width: 160px; top: 60%; left: 8%; animation: p3WrenchDrift2 30s ease-in-out infinite; transform: rotate(-15deg); color: rgba(255,170,0,0.1); }
.p3-fw3 { width: 100px; top: 15%; left: 42%; animation: p3WrenchDrift3 20s ease-in-out infinite; transform: rotate(45deg); color: rgba(167,139,250,0.1); }
@keyframes p3WrenchDrift1 {
  0%,100% { transform: rotate(25deg) translate(0,0); opacity: 0.8; }
  50% { transform: rotate(35deg) translate(20px,-15px); opacity: 1; }
}
@keyframes p3WrenchDrift2 {
  0%,100% { transform: rotate(-15deg) translate(0,0); opacity: 0.7; }
  50% { transform: rotate(-5deg) translate(-15px,20px); opacity: 1; }
}
@keyframes p3WrenchDrift3 {
  0%,100% { transform: rotate(45deg) translate(0,0) scale(1); opacity: 0.6; }
  50% { transform: rotate(55deg) translate(10px,-10px) scale(1.1); opacity: 1; }
}

/* Conveyor Belt Assembly Line */
.p3-conveyor { position: absolute; bottom: 80px; left: 0; right: 0; height: 40px; z-index: 2; }
.p3-conv-track {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(0,180,255,0.3) 0px, rgba(0,180,255,0.3) 15px, transparent 15px, transparent 25px);
  animation: p3ConvMove 3s linear infinite;
}
.p3-conv-track-2 { top: auto; bottom: 0; }
@keyframes p3ConvMove { to { background-position: 25px 0; } }
.p3-conv-box {
  position: absolute; top: 6px; width: 28px; height: 28px;
  border: 1.5px solid rgba(0,180,255,0.35); background: rgba(0,180,255,0.06);
  animation: p3ConvSlide 8s linear infinite;
}
.cb1 { left: -28px; animation-delay: 0s; }
.cb2 { left: -28px; animation-delay: -2s; }
.cb3 { left: -28px; animation-delay: -4s; }
.cb4 { left: -28px; animation-delay: -6s; }
@keyframes p3ConvSlide { 0% { left: -28px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { left: 105%; opacity: 0; } }

/* PLC Ladder Logic */
.p3-plc { position: absolute; top: 10%; left: 3%; width: 45px; height: 70%; z-index: 2; }
.p3-plc-rail { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0,180,255,0.2); }
.p3-plc-l { left: 0; }
.p3-plc-r { right: 0; }
.p3-plc-rung { position: absolute; left: 0; right: 0; height: 2px; background: rgba(0,180,255,0.15); }
.pr1 { top: 10%; } .pr2 { top: 28%; } .pr3 { top: 46%; } .pr4 { top: 64%; } .pr5 { top: 82%; }
.p3-plc-sig {
  position: absolute; left: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--p3-cyan); box-shadow: 0 0 12px var(--p3-cyan);
  animation: p3PlcPulse 4s ease-in-out infinite;
}
@keyframes p3PlcPulse {
  0% { top: 8%; opacity: 1; } 20% { top: 26%; opacity: 0.6; } 40% { top: 44%; opacity: 1; }
  60% { top: 62%; opacity: 0.6; } 80% { top: 80%; opacity: 1; } 100% { top: 92%; opacity: 0; }
}

/* Welding Sparks */
.p3-sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.p3-spk {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #ffd700; box-shadow: 0 0 6px #ffd700, 0 0 12px rgba(255,170,0,0.5);
  opacity: 0; animation: p3SparkFlash 3s ease-out infinite;
}
.sp1 { top:25%; left:72%; animation-delay:0s; } .sp2 { top:40%; left:68%; animation-delay:0.4s; }
.sp3 { top:18%; left:78%; animation-delay:0.9s; } .sp4 { top:50%; left:75%; animation-delay:1.3s; }
.sp5 { top:30%; left:65%; animation-delay:1.8s; } .sp6 { top:55%; left:80%; animation-delay:0.6s; }
.sp7 { top:35%; left:70%; animation-delay:2.1s; } .sp8 { top:22%; left:82%; animation-delay:1.5s; }
.sp9 { top:45%; left:62%; animation-delay:2.5s; } .sp10 { top:60%; left:72%; animation-delay:0.2s; }
@keyframes p3SparkFlash {
  0% { opacity: 0; transform: scale(0) translate(0,0); }
  10% { opacity: 1; transform: scale(1.5); }
  30% { opacity: 0.8; transform: scale(1) translate(var(--sx,5px), var(--sy,-8px)); }
  100% { opacity: 0; transform: scale(0) translate(var(--sx,10px), var(--sy,15px)); }
}
.sp1 { --sx: 8px; --sy: -12px; } .sp2 { --sx: -5px; --sy: -10px; } .sp3 { --sx: 12px; --sy: 5px; }
.sp4 { --sx: -8px; --sy: -6px; } .sp5 { --sx: 6px; --sy: 10px; } .sp6 { --sx: -10px; --sy: -4px; }

/* Robotic Reach Arcs */
.p3-reach { position: absolute; right: 8%; top: 15%; width: 400px; height: 400px; z-index: 1; pointer-events: none; }
.p3-rarc {
  position: absolute; right: 0; bottom: 0; border-radius: 50%;
  border: 1.5px dashed rgba(0,180,255,0.15);
  border-right-color: transparent; border-bottom-color: transparent;
  animation: p3ReachPulse 5s ease-in-out infinite alternate;
}
.p3-rarc-1 { width: 250px; height: 250px; }
.p3-rarc-2 { width: 350px; height: 350px; border-color: rgba(255,170,0,0.1); border-right-color: transparent; border-bottom-color: transparent; animation-delay: 1s; }
.p3-rarc-3 { width: 180px; height: 180px; border-style: dotted; animation-delay: 2s; }
@keyframes p3ReachPulse { 0% { opacity: 0.3; } 100% { opacity: 0.8; } }

/* Blueprint Annotations (hidden in dark, shown in light) */
.p3-bp-annots { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.p3-bpa {
  position: absolute; font-family: var(--p3-font-mono); font-size: 0.7rem;
  color: rgba(2,132,199,0.4); letter-spacing: 0.1em;
  animation: p3BpaFloat 12s ease-in-out infinite;
}
.ba1 { top: 20%; left: 30%; animation-delay: 0s; } .ba2 { top: 45%; left: 60%; animation-delay: 2s; }
.ba3 { top: 70%; left: 20%; animation-delay: 4s; } .ba4 { top: 30%; left: 75%; animation-delay: 1s; }
.ba5 { top: 80%; left: 50%; animation-delay: 3s; } .ba6 { top: 55%; left: 15%; animation-delay: 5s; }
@keyframes p3BpaFloat {
  0%,100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-8px); opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════
   THEME SWITCH — FADE-TO-DARK OVERLAY
   Full-screen opacity fade (no sliding edges to expose glitches)
   ═══════════════════════════════════════════════════════════════ */
.p3-theme-surge {
  position: fixed; inset: 0; z-index: 999998; pointer-events: none;
  background: #030508;
  opacity: 0;
  /* No transform — stays in place, purely opacity-driven */
}

/* ═══════════════════════════════════════════════════════════════
   THEME SWITCH — INSTANT SNAP CLASS (applied while overlay is opaque)
   Kills ALL slow transitions so everything snaps to new values
   in a single frame, completely hidden behind the opaque overlay.
   ═══════════════════════════════════════════════════════════════ */
.p3-theme-transition *,
.p3-theme-transition *::before,
.p3-theme-transition *::after {
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — AUTOMATION BG OVERRIDES (BLUE BLUEPRINT)
   ═══════════════════════════════════════════════════════════════ */

/* Blueprint Grid — vibrant blueprint style */
.light-mode .p3-bp-grid {
  background-image:
    linear-gradient(rgba(2, 132, 199, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 132, 199, 0.4) 1px, transparent 1px),
    linear-gradient(rgba(2, 132, 199, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 132, 199, 0.15) 1px, transparent 1px);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
}

/* Gears — Maximum Vibrancy Mechatronic Colors (GPU Safe - No Filters) */
.light-mode .p3-agear-1 { color: rgba(14, 165, 233, 0.85); } /* Brilliant Cyan */
.light-mode .p3-agear-2 { color: rgba(245, 158, 11, 0.9); } /* Brilliant Amber */
.light-mode .p3-agear-3 { color: rgba(139, 92, 246, 0.85); } /* Brilliant Purple */

/* Wrenches — Vibrant Tool Colors (GPU Safe - No Filters) */
.light-mode .p3-fw1 { color: rgba(14, 165, 233, 0.7); }
.light-mode .p3-fw2 { color: rgba(245, 158, 11, 0.7); }
.light-mode .p3-fw3 { color: rgba(139, 92, 246, 0.7); }

/* Conveyor — High Contrast Metal & Amber */
.light-mode .p3-conv-track { background: repeating-linear-gradient(90deg, rgba(14, 165, 233, 0.8) 0px, rgba(14, 165, 233, 0.8) 15px, transparent 15px, transparent 25px); border-bottom: 2px solid rgba(245, 158, 11, 0.8); }
.light-mode .p3-conv-box { border-color: rgba(139, 92, 246, 0.9); background: rgba(139, 92, 246, 0.2); box-shadow: 0 0 10px rgba(139, 92, 246, 0.3); }

/* LESSEN ELECTRONIC THEME: Hide PLC logic and sparks in light mode */
.light-mode .p3-plc,
.light-mode .p3-sparks {
  display: none !important;
}

/* Reach arcs — Maximum Vibrancy Mechatronic Colors (GPU Safe - No Filters) */
.light-mode .p3-rarc-1 { border-color: rgba(14, 165, 233, 0.8); border-right-color: transparent; border-bottom-color: transparent; }
.light-mode .p3-rarc-2 { border-color: rgba(245, 158, 11, 0.8); border-right-color: transparent; border-bottom-color: transparent; }
.light-mode .p3-rarc-3 { border-color: rgba(139, 92, 246, 0.8); border-right-color: transparent; border-bottom-color: transparent; }

/* Show annotations in light mode */
.light-mode .p3-bp-annots { opacity: 1; }

/* Scanlines — soften in light mode */
.light-mode .p3-scanlines { opacity: 0.02 !important; }
.light-mode .p3-scanline-sweep { opacity: 0.3 !important; }

/* Hero glows — Extreme Vibrancy */
.light-mode .p3-hero-glow--cyan { background: radial-gradient(ellipse, rgba(14, 165, 233, 0.5) 0%, rgba(14, 165, 233, 0.15) 40%, transparent 70%) !important; }
.light-mode .p3-hero-glow--amber { background: radial-gradient(ellipse, rgba(245, 158, 11, 0.35) 0%, rgba(139, 92, 246, 0.15) 40%, transparent 70%) !important; } /* Amber to purple fade */

/* Stats Panel — colorful glass */
.light-mode .p3-hero-stats {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(15px) !important;
  border: 2px solid rgba(14, 165, 233, 0.5) !important;
  box-shadow: 0 15px 35px rgba(14, 165, 233, 0.15), 0 0 20px rgba(245, 158, 11, 0.1), inset 0 0 25px rgba(255, 255, 255, 0.9) !important;
}
.light-mode .p3-stat-divider {
  background: linear-gradient(to bottom, rgba(14, 165, 233, 0.5), rgba(245, 158, 11, 0.5)) !important;
}

/* Background gradient — Intense dynamic mesh (Smooth Fade via Pseudo-Element) */
.p3-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -5;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(186, 230, 253, 1) 0%, transparent 50%), 
    radial-gradient(circle at 90% 80%, rgba(253, 230, 138, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(221, 214, 254, 0.8) 0%, transparent 60%);
  background-color: #e2e8f0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}
.light-mode.p3-body::before {
  opacity: 1;
}
.light-mode.p3-body {
  background-image: none !important;
}

/* Fix Enroll Now outline button visibility in light mode */
.light-mode .p3-btn--outline {
  border-color: rgba(245, 158, 11, 0.6) !important;
  color: rgba(217, 119, 6, 1) !important; /* Slightly darker amber for text readability */
  background: rgba(245, 158, 11, 0.05) !important;
}
.light-mode .p3-btn--outline:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 1) !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3) !important;
}

/* Fix Primary Explore button visibility in light mode */
.light-mode .p3-btn--cyan {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.8) !important;
  color: rgba(2, 132, 199, 1) !important;
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.15) !important;
}
.light-mode .p3-btn--cyan:hover {
  background: rgba(14, 165, 233, 1) !important;
  color: #fff !important;
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.5) !important;
  border-color: rgba(14, 165, 233, 1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — MAXIMUM KINETIC ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* 1. Hyper-Speed Gears & Grid */
.light-mode .p3-agear-1 { animation-duration: 10s !important; will-change: transform; }
.light-mode .p3-agear-2 { animation-duration: 7s !important; will-change: transform; }
.light-mode .p3-agear-3 { animation-duration: 4s !important; will-change: transform; }

/* 2. Aggressive Wrench Drift */
.light-mode .p3-fw1 { animation-duration: 12s !important; will-change: transform; }
.light-mode .p3-fw2 { animation-duration: 14s !important; will-change: transform; }
.light-mode .p3-fw3 { animation-duration: 9s !important; will-change: transform; }

/* 3. Fast Conveyor Belt */
.light-mode .p3-conv-track { animation-duration: 0.8s !important; }
.light-mode .p3-conv-box { animation-duration: 3s !important; }

/* 4. Active High-Speed Data Flow on Robotic Arm */
.light-mode .p3-data-flow { 
  animation-duration: 0.6s !important; 
  stroke-width: 2 !important; 
  opacity: 0.8 !important; 
  stroke-dasharray: 8 6 !important; 
  stroke: rgba(14, 165, 233, 1) !important;
}

/* 5. Spinning & Pulsing Reach Arcs */
@keyframes p3ReachPulseLight {
  0% { opacity: 0.3; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.05); }
}
.light-mode .p3-rarc-1 { animation: p3ReachPulseLight 1.5s ease-in-out infinite alternate, p3GearCW 15s linear infinite !important; will-change: transform, opacity; }
.light-mode .p3-rarc-2 { animation: p3ReachPulseLight 2s ease-in-out infinite alternate, p3GearCCW 10s linear infinite !important; will-change: transform, opacity; }
.light-mode .p3-rarc-3 { animation: p3ReachPulseLight 1s ease-in-out infinite alternate, p3GearCW 5s linear infinite !important; will-change: transform, opacity; }

/* 6. Floating Stats Panel HUD (GPU Optimized) */
@keyframes p3StatsFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.light-mode .p3-hero-stats {
  animation: p3StatsFloat 4s ease-in-out infinite !important;
  will-change: transform !important;
}

/* 7. Active Sweeping Laser Scanner (GPU Optimized) */
@keyframes p3LightLaserSweep {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}
.light-mode .p3-scanline-sweep {
  top: 0 !important;
  height: 6px !important;
  background: linear-gradient(to bottom, transparent, rgba(14, 165, 233, 1), transparent) !important;
  opacity: 1 !important;
  animation: p3LightLaserSweep 3.5s ease-in-out infinite !important;
  z-index: 10 !important;
  will-change: transform, opacity !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — PILLARS SECTION OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
.light-mode .p3-accel-tunnel {
  background: var(--p3-bg-2);
  border-color: rgba(2, 132, 199, 0.2);
}

.light-mode .p3-pillars::before {
  background: radial-gradient(circle at center, rgba(2, 132, 199, 0.05) 0%, var(--p3-bg) 75%);
}

.light-mode .p3-pillars::after {
  background-image: 
    linear-gradient(rgba(2, 132, 199, 0.15) 2px, transparent 2px),
    linear-gradient(90deg, rgba(2, 132, 199, 0.15) 2px, transparent 2px);
  mask-image: radial-gradient(ellipse at center, white 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, white 0%, transparent 70%);
}

.light-mode .p3-tunnel-ring {
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: none;
  background: transparent;
}
.light-mode .p3-tunnel-ring::before,
.light-mode .p3-tunnel-ring::after {
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: none;
}
.light-mode .p3-tunnel-amber { border-color: rgba(245, 158, 11, 0.4); }
.light-mode .p3-tunnel-purple { border-color: rgba(139, 92, 246, 0.4); }

/* Clean up card scanner lines (remove muddy blur) */
.light-mode .p3-pillar-card--mech::before { background: rgba(14, 165, 233, 0.8) !important; box-shadow: 0 0 10px rgba(14, 165, 233, 0.3) !important; }
.light-mode .p3-pillar-card--amber::before { background: rgba(245, 158, 11, 0.8) !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important; }
.light-mode .p3-pillar-card--purple::before { background: rgba(139, 92, 246, 0.8) !important; box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important; }

/* Fix dark/muddy tags to be clean and vibrant */
.light-mode .p3-pillar-tags li {
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.light-mode .p3-pillar-card--mech .p3-pillar-tags li { background: rgba(14, 165, 233, 0.1) !important; border-color: rgba(14, 165, 233, 0.4) !important; color: rgba(2, 132, 199, 1) !important; }
.light-mode .p3-pillar-card--amber .p3-pillar-tags li { background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.4) !important; color: rgba(217, 119, 6, 1) !important; }
.light-mode .p3-pillar-card--purple .p3-pillar-tags li { background: rgba(139, 92, 246, 0.1) !important; border-color: rgba(139, 92, 246, 0.4) !important; color: rgba(109, 40, 217, 1) !important; }
.light-mode .p3-pillar-card--mech:hover .p3-pillar-tags li { background: rgba(14, 165, 233, 0.2) !important; border-color: rgba(14, 165, 233, 0.8) !important; }
.light-mode .p3-pillar-card--amber:hover .p3-pillar-tags li { background: rgba(245, 158, 11, 0.2) !important; border-color: rgba(245, 158, 11, 0.8) !important; }
.light-mode .p3-pillar-card--purple:hover .p3-pillar-tags li { background: rgba(139, 92, 246, 0.2) !important; border-color: rgba(139, 92, 246, 0.8) !important; }

.light-mode .p3-title-gear-left svg path,
.light-mode .p3-title-gear-right svg path {
  stroke: rgba(2, 132, 199, 0.3);
}

.light-mode .p3-header-laser-scan {
  background: linear-gradient(to right, transparent, rgba(2, 132, 199, 0.5), transparent);
}

.light-mode .p3-tunnel-core-beam {
  background: linear-gradient(90deg, transparent, rgba(2, 132, 199, 0.2), transparent);
}
.light-mode .p3-beam-center,
.light-mode .p3-beam-left,
.light-mode .p3-beam-right {
  box-shadow: none;
}

.light-mode .p3-tunnel-text {
  color: var(--p3-text-dim);
  text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — BENEFITS & REQUIREMENTS SECTION
   Premium soft-blue glass aesthetic with refined readability
   ═══════════════════════════════════════════════════════════════ */

/* --- Section Background (Smooth Fade via Pseudo-Element) --- */
.p3-benefits {
  z-index: 1; /* Establish stacking context */
}
.p3-benefits-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(180deg, #e2e8f0 0%, #dbeafe 50%, #e2e8f0 100%);
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}
.light-mode .p3-benefits-bg::after {
  opacity: 1;
}
.light-mode .p3-benefits {
  background: var(--p3-bg) !important; /* Base background stays dark, light gradient fades OVER it */
}
.light-mode .p3-eclipse-core,
.light-mode .p3-eclipse-sphere,
.light-mode .p3-eclipse-corona,
.light-mode .p3-topo-laser-floor,
.light-mode .p3-topo-laser-roof,
.light-mode .p3-lens-flare,
.light-mode .p3-ember-storm {
  opacity: 0 !important;
}

/* ── MECHATRONIC LIGHT MODE ANIMATION (Performance Mode) ── */
.p3-benefits-lm-anim {
  position: absolute; inset: 0; z-index: 12; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease-in-out; overflow: hidden;
}
.light-mode .p3-benefits-lm-anim { opacity: 1; }

/* 1. Technical Engineering Grid (Hex + Linear) */
.p3-lm-tech-grid {
  position: absolute; inset: 0;
  background-image: 
    linear-gradient(rgba(2, 132, 199, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 132, 199, 0.05) 1px, transparent 1px);
  background-size: 30px 30px; background-position: center;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
}
.p3-lm-hex-lattice {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='103.923' viewBox='0 0 60 103.923' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 17.32v34.64L30 69.28 0 51.96V17.32z' fill='none' stroke='rgba(2, 132, 199, 0.03)' stroke-width='1'/%3E%3Cpath d='M30 103.92L0 86.6v-34.64l30-17.32 30 17.32v34.64z' fill='none' stroke='rgba(2, 132, 199, 0.03)' stroke-width='1'/%3E%3C/svg%3E");
  animation: p3HexDrift 60s linear infinite;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
}
@keyframes p3HexDrift { 100% { background-position: 60px 103.923px; } }

/* 2. Complex Interlocking Gear Assembly */
.p3-lm-gear-assembly { position: absolute; inset: 0; overflow: hidden; }
.p3-css-gear {
  position: absolute; border-radius: 50%;
  border: 12px solid rgba(2, 132, 199, 0.1);
  box-shadow: 0 0 30px rgba(2, 132, 199, 0.05), inset 0 0 20px rgba(2, 132, 199, 0.05);
}
.p3-css-gear-teeth { position: absolute; inset: -24px; }
.p3-css-gear-teeth span {
  position: absolute; width: 18px; height: 100%; left: 50%; margin-left: -9px;
  background: rgba(2, 132, 199, 0.1); border-radius: 4px;
}
.p3-css-gear-teeth span:nth-child(2) { transform: rotate(30deg); }
.p3-css-gear-teeth span:nth-child(3) { transform: rotate(60deg); }
.p3-css-gear-teeth span:nth-child(4) { transform: rotate(90deg); }
.p3-css-gear-teeth span:nth-child(5) { transform: rotate(120deg); }
.p3-css-gear-teeth span:nth-child(6) { transform: rotate(150deg); }
.p3-css-gear-inner {
  position: absolute; inset: 18%; border-radius: 50%;
  border: 3px dashed rgba(2, 132, 199, 0.2);
}
.p3-css-gear-core {
  position: absolute; inset: 35%; border-radius: 50%;
  background: rgba(2, 132, 199, 0.05);
  border: 6px solid rgba(2, 132, 199, 0.15);
}
.p3-gear-main {
  width: 500px; height: 500px; top: -150px; left: -100px;
  animation: p3GearSpin 40s linear infinite;
}
.p3-gear-secondary {
  width: 300px; height: 300px; top: 180px; left: 320px;
  animation: p3GearSpin 24s linear infinite reverse;
}
.p3-gear-micro {
  width: 140px; height: 140px; top: 100px; left: 570px;
  animation: p3GearSpin 11.2s linear infinite;
}
.p3-gear-planetary {
  width: 400px; height: 400px; top: -50px; left: 350px;
  animation: p3GearSpin 35s linear infinite;
}
.p3-css-gear-orbit {
  position: absolute; width: 80px; height: 80px; border-radius: 50%;
  border: 4px dashed rgba(2, 132, 199, 0.3); background: rgba(2, 132, 199, 0.05);
  top: 50%; left: 50%; margin-top: -40px; margin-left: -40px;
}
/* Simulate planetary gear rotation relative to the main spinning gear */
.orbit-1 { transform: rotate(0deg) translateY(-140px) rotate(0deg); animation: p3OrbitCounter 10s linear infinite; }
.orbit-2 { transform: rotate(120deg) translateY(-140px) rotate(0deg); animation: p3OrbitCounter 10s linear infinite; }
.orbit-3 { transform: rotate(240deg) translateY(-140px) rotate(0deg); animation: p3OrbitCounter 10s linear infinite; }
@keyframes p3OrbitCounter { 100% { transform: rotate(-360deg); } }
@keyframes p3GearSpin { 100% { transform: rotate(360deg); } }

/* 3. Robotic Kinematic Arm Wireframe */
.p3-lm-kinematic-arm {
  position: absolute; right: 8%; top: 15%; width: 200px; height: 300px;
  transform-origin: top right;
  animation: p3ArmHover 12s ease-in-out infinite alternate;
}
.p3-lm-arm-base {
  position: absolute; right: -50px; top: 0; width: 100px; height: 100px;
  border-radius: 50%; border: 4px solid rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.05); box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
}
.p3-lm-arm-segment {
  position: absolute; background: rgba(2, 132, 199, 0.1);
  border: 2px solid rgba(2, 132, 199, 0.25); transform-origin: top center;
}
.p3-seg-1 {
  width: 30px; height: 180px; top: 50px; right: -15px; border-radius: 15px;
  animation: p3ArmJoint1 8s ease-in-out infinite alternate;
}
.p3-seg-2 {
  width: 20px; height: 150px; bottom: -150px; left: 3px; border-radius: 10px;
  animation: p3ArmJoint2 6s ease-in-out infinite alternate;
}
.p3-lm-arm-joint {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: #f1f5f9; border: 5px solid rgba(2, 132, 199, 0.4);
  left: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.2);
}
.p3-joint-elbow { bottom: -22px; }
.p3-joint-wrist { bottom: -22px; width: 34px; height: 34px; border-color: rgba(245, 158, 11, 0.4); }
.p3-lm-arm-effector {
  position: absolute; bottom: -45px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 35px;
}
.p3-effector-claw {
  position: absolute; top: 0; width: 18px; height: 35px;
  border: 3px solid rgba(245, 158, 11, 0.4); border-top: none;
}
.left { left: 0; border-right: none; border-bottom-left-radius: 10px; }
.right { right: 0; border-left: none; border-bottom-right-radius: 10px; }
@keyframes p3ArmHover { 100% { transform: translateY(40px) rotate(-8deg); } }
@keyframes p3ArmJoint1 { 0% { transform: rotate(20deg); } 100% { transform: rotate(55deg); } }
@keyframes p3ArmJoint2 { 0% { transform: rotate(-40deg); } 100% { transform: rotate(-100deg); } }

/* Secondary Precision Arm */
.p3-arm-secondary {
  right: auto; left: 4%; top: auto; bottom: 20%; width: 150px; height: 200px;
  transform-origin: bottom left; animation: p3ArmHover2 10s ease-in-out infinite alternate;
}
.p3-arm-secondary .p3-lm-arm-base { left: -30px; right: auto; bottom: -30px; top: auto; width: 80px; height: 80px; }
.p3-arm-secondary .p3-seg-1 { right: auto; left: 20px; top: -100px; height: 120px; animation: p3Arm2Joint1 7s ease-in-out infinite alternate; transform-origin: bottom center; }
.p3-arm-secondary .p3-seg-2 { left: auto; right: 5px; top: -100px; height: 100px; animation: p3Arm2Joint2 5s ease-in-out infinite alternate; transform-origin: bottom center; }
.p3-arm-secondary .p3-joint-elbow { bottom: auto; top: -20px; }
.p3-lm-arm-probe {
  position: absolute; top: -35px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 45px; background: rgba(2, 132, 199, 0.4); border-radius: 3px;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.6);
}
@keyframes p3ArmHover2 { 100% { transform: rotate(15deg); } }
@keyframes p3Arm2Joint1 { 0% { transform: rotate(-30deg); } 100% { transform: rotate(10deg); } }
@keyframes p3Arm2Joint2 { 0% { transform: rotate(20deg); } 100% { transform: rotate(70deg); } }

/* 4. Holographic Blueprint HUD Rings */
.p3-lm-hud-rings {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 700px; height: 700px; pointer-events: none; opacity: 0.5;
}
.p3-lm-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(2, 132, 199, 0.1);
}
.p3-lm-ring-outer { border: 2px dashed rgba(245, 158, 11, 0.15); animation: p3GearSpin 80s linear infinite; }
.p3-lm-ring-inner { inset: 12%; border: 1px solid rgba(2, 132, 199, 0.2); }
.p3-lm-ring-dashed { inset: 26%; border: 6px dotted rgba(2, 132, 199, 0.1); animation: p3GearSpin 50s linear infinite reverse; }
.p3-lm-ring-ticks {
  inset: 2%; border: none;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 3deg, rgba(245, 158, 11, 0.15) 3deg 4deg);
  mask-image: radial-gradient(circle at center, transparent 65%, black 66%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 65%, black 66%);
  animation: p3GearSpin 140s linear infinite;
}

/* 4B. Corner Diagnostic HUD */
.p3-lm-corner-hud {
  position: absolute; top: 15%; right: 5%; width: 180px;
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 10px; border-radius: 4px; box-shadow: 0 4px 15px rgba(2, 132, 199, 0.05);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.p3-hud-bar { height: 4px; background: rgba(2, 132, 199, 0.1); margin-bottom: 6px; border-radius: 2px; overflow: hidden; }
.p3-hud-fill { height: 100%; background: var(--p3-cyan); animation: p3HudPulse 1.5s ease infinite alternate; }
.p3-lm-corner-hud span { font-size: 0.6rem; color: rgba(2, 132, 199, 0.8); font-weight: 600; letter-spacing: 0.1em; }
@keyframes p3HudPulse { 0% { opacity: 0.6; } 100% { opacity: 1; } }

/* 4C. Vertical Hydraulic Piston Array */
.p3-lm-piston-array {
  position: absolute; top: 25%; left: 8%; display: flex; gap: 18px;
}
.p3-lm-hydraulic {
  width: 28px; height: 180px; background: rgba(245, 158, 11, 0.03);
  border: 2px solid rgba(245, 158, 11, 0.15); border-radius: 4px; position: relative;
  overflow: hidden;
}
.p3-lm-rod {
  position: absolute; bottom: 0; left: 4px; right: 4px; height: 100%;
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.1), rgba(2, 132, 199, 0.3) 50%, rgba(2, 132, 199, 0.1));
  transform-origin: bottom; animation: p3PistonPump 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes p3PistonPump { 0% { transform: scaleY(0.2); } 100% { transform: scaleY(0.9); } }

/* 4D. Assembly Conveyor Track */
.p3-lm-conveyor-track {
  position: absolute; top: 80px; left: 0; right: 0; height: 35px;
  background: rgba(2, 132, 199, 0.04); border-top: 1px dashed rgba(2, 132, 199, 0.2);
  border-bottom: 1px dashed rgba(2, 132, 199, 0.2); overflow: hidden;
}
.p3-lm-conveyor-belt {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(2, 132, 199, 0.1) 20px, rgba(2, 132, 199, 0.1) 22px);
  animation: p3ConveyorMove 1s linear infinite;
}
.p3-lm-conveyor-item {
  position: absolute; top: 6px; width: 45px; height: 23px;
  background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 4px; animation: p3ConveyorItemMove 18s linear infinite;
}
.item-1 { animation-delay: 0s; }
.item-2 { animation-delay: -6s; }
.item-3 { animation-delay: -12s; }
@keyframes p3ConveyorMove { 100% { background-position: 22px 0; } }
@keyframes p3ConveyorItemMove { 0% { left: -60px; } 100% { left: 100%; } }

/* 5. High-Speed Actuator Rail */
.p3-lm-actuator-rail {
  position: absolute; bottom: 120px; left: 10%; right: 10%; height: 4px;
  background: rgba(2, 132, 199, 0.15); border-radius: 2px;
}
.p3-lm-actuator-shuttle {
  position: absolute; top: -8px; left: 0; width: 45px; height: 20px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 4px; box-shadow: 0 0 20px rgba(2, 132, 199, 0.5);
  animation: p3ShuttleMove 3.5s cubic-bezier(0.7, 0, 0.3, 1) infinite alternate;
}
.p3-lm-rail-markers {
  position: absolute; top: 12px; left: 0; width: 100%; height: 12px;
  background-image: linear-gradient(90deg, rgba(2, 132, 199, 0.2) 2px, transparent 2px);
  background-size: 60px 12px;
}
@keyframes p3ShuttleMove { 0% { left: 0%; } 100% { left: calc(100% - 45px); } }

/* 6. Blueprint System Readout Text */
.p3-lm-schematic-text {
  position: absolute; bottom: 60px; right: 10%;
  font-size: 0.8rem; font-weight: 600; color: rgba(245, 158, 11, 0.8);
  letter-spacing: 0.2em; animation: p3TextPulse 1.5s ease-in-out infinite alternate;
}
@keyframes p3TextPulse { 0% { opacity: 0.4; } 100% { opacity: 1; text-shadow: 0 0 12px rgba(245, 158, 11, 0.4); } }

/* 9. Sweeping Horizontal Laser */
.p3-lm-sweep-laser {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.8), #fff, rgba(14, 165, 233, 0.8), transparent);
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.6);
  animation: p3LMSweepDown 6s linear infinite;
  opacity: 0.6; pointer-events: none; z-index: 5;
}
@keyframes p3LMSweepDown { 0% { transform: translateY(-20px); } 100% { transform: translateY(110vh); } }

/* 10. Spinning Blueprint Drone */
.p3-lm-drone {
  position: absolute; top: 30%; left: -50px; width: 60px; height: 20px;
  background: rgba(2, 132, 199, 0.1); border: 2px solid rgba(2, 132, 199, 0.3);
  border-radius: 10px; box-shadow: 0 0 10px rgba(2, 132, 199, 0.2);
  animation: p3LMDroneFly 18s ease-in-out infinite; z-index: 5;
}
.drone-prop {
  position: absolute; top: -5px; width: 24px; height: 4px;
  background: rgba(245, 158, 11, 0.4); border-radius: 2px;
  animation: p3GearSpin 0.2s linear infinite;
}
.drone-prop.left { left: -10px; }
.drone-prop.right { right: -10px; }
.drone-lens {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; background: rgba(14, 165, 233, 1); border-radius: 50%;
  box-shadow: 0 0 8px rgba(14, 165, 233, 1); animation: p3BlinkFast 2s infinite alternate;
}
.drone-scan-cone {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 100px; height: 150px;
  background: linear-gradient(to bottom, rgba(14, 165, 233, 0.2), transparent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: p3DroneScan 3s ease-in-out infinite alternate; transform-origin: top center;
}
@keyframes p3LMDroneFly {
  0% { transform: translate(0, 0) rotate(5deg); }
  25% { transform: translate(30vw, 50px) rotate(-5deg); }
  50% { transform: translate(60vw, -20px) rotate(5deg); }
  75% { transform: translate(30vw, 80px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(5deg); }
}
@keyframes p3DroneScan { 0% { transform: translateX(-50%) rotate(-15deg); opacity: 0.5; } 100% { transform: translateX(-50%) rotate(15deg); opacity: 0.8; } }

/* 11. Floating Data Crystal */
.p3-lm-data-crystal {
  position: absolute; bottom: 15%; right: 15%; width: 40px; height: 60px;
  animation: p3CrystalFloat 5s ease-in-out infinite alternate; z-index: 5;
}
.crystal-core {
  position: absolute; inset: 0; background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.5);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: inset 0 0 15px rgba(14, 165, 233, 0.4);
  animation: p3GearSpin 20s linear infinite;
}
.crystal-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(70deg);
  width: 80px; height: 80px; border: 2px dashed rgba(245, 158, 11, 0.3); border-radius: 50%;
  animation: p3GearSpin 10s linear infinite reverse;
}
@keyframes p3CrystalFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-30px); } }

/* 12. Pulsing Tech Nodes */
.p3-lm-tech-nodes { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.p3-lm-node {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(245, 158, 11, 1); box-shadow: 0 0 10px rgba(245, 158, 11, 1);
  animation: p3FadePulse 2s infinite alternate;
}
.p3-lm-node.n1 { top: 20%; left: 30%; animation-delay: 0.5s; }
.p3-lm-node.n2 { top: 60%; right: 25%; animation-delay: 1.2s; background: rgba(14, 165, 233, 1); box-shadow: 0 0 10px rgba(14, 165, 233, 1); }
.p3-lm-node.n3 { bottom: 30%; left: 45%; animation-delay: 2.1s; }

/* Smooth transitions for Benefits Section Header */
.p3-benefits .p3-overline,
.p3-benefits .p3-overline::before,
.p3-benefits .p3-overline::after,
.p3-benefits .p3-section-title,
.p3-benefits .p3-section-title .p3-amber,
.p3-benefits .p3-section-sub,
.p3-benefits .p3-section-sub::before,
.p3-benefits .p3-section-sub::after {
  transition: color 0.8s ease, text-shadow 0.8s ease, background 0.8s ease, background-color 0.8s ease, box-shadow 0.8s ease, filter 0.8s ease, -webkit-text-fill-color 0.8s ease;
}

/* --- Section Header Typography --- */
.light-mode .p3-benefits .p3-overline {
  color: var(--p3-cyan) !important;
  text-shadow: none !important;
}
.light-mode .p3-benefits .p3-overline::before,
.light-mode .p3-benefits .p3-overline::after {
  background: linear-gradient(90deg, transparent, var(--p3-cyan), transparent) !important;
  box-shadow: none !important;
}

/* Section title — clean metallic blue gradient, no dark drop-shadows */
.light-mode .p3-benefits .p3-section-title {
  background: linear-gradient(90deg, #0f172a 0%, #0284c7 50%, #0f172a 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}
.light-mode .p3-benefits .p3-section-title .p3-amber {
  background: linear-gradient(90deg, #92400e 0%, #d97706 30%, #ea580c 70%, #92400e 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

/* Data pill — inverted for light: darker bg, white text */
.light-mode .p3-benefits .p3-section-sub {
  background: var(--p3-cyan) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3) !important;
}
/* Fix the cybernetic cut colors to match light bg */
.light-mode .p3-benefits .p3-section-sub::before,
.light-mode .p3-benefits .p3-section-sub::after {
  background: var(--p3-bg) !important;
}

/* --- Flip Card Glass Panels --- */
.light-mode .p3-flip-front {
  background-color: rgba(241,245,249,0.95) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), inset 0 0 0 1px rgba(14,165,233,0.15), inset 0 -20px 40px rgba(14,165,233,0), 0 8px 32px rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
}
.light-mode .p3-flip-back {
  background-color: rgba(254,243,199,0.95) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), inset 0 0 0 1px rgba(245,158,11,0.2), inset 0 -20px 40px rgba(245,158,11,0), 0 8px 32px rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
}

/* Volumetric glow behind cards — subtle soft blue/amber */
.light-mode .p3-flip-front::before {
  background: radial-gradient(circle at 50% 30%, rgba(14,165,233,0.08) 0%, transparent 60%) !important;
}
.light-mode .p3-flip-back::before {
  background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.08) 0%, transparent 70%) !important;
}

/* Hover states */
.light-mode .p3-flip-card:hover .p3-flip-back,
.light-mode .p3-flip-card.is-glitch-locked .p3-flip-back {
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), inset 0 0 0 2px rgba(245,158,11,0.3) !important;
}

/* --- Flip Card Typography --- */
.light-mode .p3-flip-front h4 {
  color: var(--p3-cyan) !important;
  text-shadow: none !important;
}
.light-mode .p3-flip-back h4 {
  color: var(--p3-amber) !important;
  text-shadow: none !important;
}

/* Value numbers — rich blue gradient for cyan cards */
.light-mode .p3-flip-value {
  background: linear-gradient(180deg, #0369a1 0%, #0284c7 40%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 6px rgba(2, 132, 199, 0.15)) !important;
}
/* Value numbers — rich amber gradient for amber cards */
.light-mode .p3-flip-card--amber .p3-flip-value {
  background: linear-gradient(180deg, #b45309 0%, #d97706 40%, #fbbf24 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 6px rgba(217, 119, 6, 0.15)) !important;
}

/* Value span (e.g. "/month") */
.light-mode .p3-flip-value span {
  -webkit-text-fill-color: var(--p3-text-dim) !important;
  color: var(--p3-text-dim) !important;
}

/* Front pill badges — soft glass with readable text */
.light-mode .p3-flip-front p {
  color: var(--p3-text) !important;
  background: rgba(14,165,233,0.08) !important;
  border-color: rgba(14,165,233,0.25) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
  text-shadow: none !important;
  backdrop-filter: blur(8px) !important;
}

/* Back card body text */
.light-mode .p3-flip-back p {
  color: var(--p3-text-2) !important;
  text-shadow: none !important;
}

/* --- Mech Node Spinners — Refined for Light BG --- */
.light-mode .node-spinner {
  border-color: rgba(14,165,233,0.5) !important;
  box-shadow: 0 0 12px rgba(14,165,233,0.15), inset 0 0 12px rgba(14,165,233,0.1) !important;
}
.light-mode .node-square-type .node-spinner {
  border-color: rgba(14,165,233,0.5) !important;
}
.light-mode .node-pulse-type .node-spinner {
  border-color: rgba(14,165,233,0.5) !important;
}

/* Amber card node spinners */
.light-mode .p3-flip-card--amber .node-spinner,
.light-mode .p3-flip-back .node-spinner {
  border-color: rgba(245,158,11,0.5) !important;
  box-shadow: 0 0 12px rgba(245,158,11,0.15), inset 0 0 12px rgba(245,158,11,0.1) !important;
}

/* Holographic Emoji — warmer, less aggressive filter for light mode */
.light-mode .p3-holo-emoji {
  filter: drop-shadow(0 0 8px rgba(14,165,233,0.4)) !important;
}
.light-mode .p3-flip-card--amber .p3-holo-emoji,
.light-mode .p3-flip-back .p3-holo-emoji {
  filter: drop-shadow(0 0 8px rgba(245,158,11,0.4)) !important;
}

/* --- Requirement Bars --- */
.light-mode .p3-req-item {
  background: rgba(255,255,255,0.8) !important;
  border: 2px solid rgba(245,158,11,0.2) !important;
  border-left: 6px solid var(--p3-amber) !important;
  color: var(--p3-text) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(12px) !important;
}
.light-mode .p3-req-item:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(245,158,11,0.5) !important;
  box-shadow: 0 8px 24px rgba(245,158,11,0.12) !important;
}

/* Requirement node mini icons — warm amber glow, no aggressive holographic */
.light-mode .node-mini .node-spinner {
  border-color: rgba(245,158,11,0.5) !important;
  box-shadow: 0 0 8px rgba(245,158,11,0.15) !important;
}
.light-mode .node-mini .p3-holo-emoji {
  filter: drop-shadow(0 0 6px rgba(245,158,11,0.3)) !important;
}
.light-mode .p3-req-icon {
  filter: none !important;
}

/* ── Light Mode: Course Structure HUD Box ── */
.light-mode .p3-hud-desc-box {
  background: rgba(255, 255, 255, 0.6) !important;
  border-left: 3px solid var(--p3-cyan) !important;
  box-shadow: 0 8px 32px rgba(2, 132, 199, 0.08) !important;
}
.light-mode .p3-hud-desc-main {
  color: var(--p3-text) !important;
  font-weight: 500 !important;
}
.light-mode .p3-hud-console {
  background: rgba(15, 23, 42, 0.03) !important;
  border: 1px solid rgba(2, 132, 199, 0.15) !important;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.02) !important;
}
.light-mode .p3-cmd-line {
  color: var(--p3-text-dim) !important;
}
.light-mode .p3-cmd-success .p3-cyan {
  color: var(--p3-cyan) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* ── Light Mode: Elegant Mechatronic Journey Background ── */
.p3-journey-lm-anim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease-in-out; overflow: hidden;
}
.light-mode .p3-journey-lm-anim { opacity: 1; }

/* 1. Blueprint Hex Grid Background */
.p3-j-blueprint-hex {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='207.846' viewBox='0 0 120 207.846' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0L120 34.64v69.28L60 138.56 0 103.92V34.64z' fill='none' stroke='rgba(2, 132, 199, 0.02)' stroke-width='1.5'/%3E%3Cpath d='M60 207.84L0 173.2v-69.28l60-34.64 60 34.64v69.28z' fill='none' stroke='rgba(2, 132, 199, 0.02)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 80px 138.56px;
  animation: p3JHexDrift 90s linear infinite;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
@keyframes p3JHexDrift { 100% { background-position: 80px 138.56px; } }

/* 2. Massive Astrolabe / Clockwork Mechanism (Left Side) */
.p3-j-astrolabe {
  position: absolute; left: -150px; top: -100px; width: 600px; height: 600px;
  opacity: 0.8;
}
.p3-j-astro-ring {
  position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.p3-j-astrolabe .ring-1 {
  width: 500px; height: 500px; border: 1px solid rgba(2, 132, 199, 0.1);
  border-top: 3px solid rgba(2, 132, 199, 0.3); animation: p3GearSpin 60s linear infinite;
}
.p3-j-astrolabe .ring-2 {
  width: 420px; height: 420px; border: 2px dashed rgba(245, 158, 11, 0.15);
  animation: p3GearSpin 45s linear infinite reverse;
}
.p3-j-astrolabe .ring-3 {
  width: 320px; height: 320px; border: 1px solid rgba(2, 132, 199, 0.05);
  background: repeating-conic-gradient(from 0deg, transparent 0deg 10deg, rgba(2, 132, 199, 0.04) 10deg 11deg);
  animation: p3GearSpin 120s linear infinite;
}
.p3-j-astro-core {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(2, 132, 199, 0.1); border: 2px solid rgba(2, 132, 199, 0.3);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(2, 132, 199, 0.2);
}

/* 3. Elegant Gear Train (Right Side) */
.p3-j-gear-train {
  position: absolute; right: 10%; top: 15%; opacity: 0.6;
}
.p3-j-gear-1 { width: 200px; height: 200px; border: 4px solid rgba(2, 132, 199, 0.15); animation: p3GearSpin 20s linear infinite; }
.p3-j-gear-1 .p3-css-gear-teeth span { background: rgba(2, 132, 199, 0.15); }
.p3-j-gear-2 { width: 120px; height: 120px; top: 110px; left: -80px; border: 3px solid rgba(245, 158, 11, 0.15); animation: p3GearSpin 12s linear infinite reverse; }
.p3-j-gear-2 .p3-css-gear-teeth span { background: rgba(245, 158, 11, 0.15); }

/* 4. The Journey Arc / Monorail */
.p3-j-timeline-arc {
  position: absolute; top: 250px; left: 15%; right: -5%; height: 200px;
}
.p3-j-arc-path {
  position: absolute; inset: 0; border-top: 2px solid rgba(2, 132, 199, 0.2);
  border-radius: 50% 50% 0 0;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
.p3-j-mechanical-slider {
  position: absolute; top: -6px; left: 0; width: 60px; height: 14px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 7px; box-shadow: 0 0 15px rgba(2, 132, 199, 0.5);
  animation: p3JSliderMove 12s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes p3JSliderMove { 0% { left: 10%; transform: rotate(-5deg) translateY(15px); } 50% { transform: rotate(0deg) translateY(0); } 100% { left: 80%; transform: rotate(5deg) translateY(15px); } }

/* 5. Data Nodes */
.p3-j-data-node {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--p3-amber); top: -8px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
  animation: p3FadePulse 3s infinite alternate;
}
.p3-j-timeline-arc .node-a { left: 20%; transform: translateY(12px); animation-delay: 0s; }
.p3-j-timeline-arc .node-b { left: 50%; transform: translateY(0px); animation-delay: 1s; }
.p3-j-timeline-arc .node-c { left: 75%; transform: translateY(10px); animation-delay: 2s; }

/* 6. Technical Vertical Measurement Scale */
.p3-j-vert-scale {
  position: absolute; right: 5%; top: 0; bottom: 0; width: 20px;
  background-image: repeating-linear-gradient(180deg, transparent, transparent 18px, rgba(2, 132, 199, 0.2) 18px, rgba(2, 132, 199, 0.2) 20px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

/* 7. Corner Animations */
.p3-j-corner { position: absolute; opacity: 0.7; }
.p3-j-top-right { top: 80px; right: 80px; }
.p3-j-bottom-left { top: 750px; left: 80px; }
.p3-j-bottom-right { top: 750px; right: 80px; }

/* Top Right: Target Radar */
.p3-j-target-radar {
  width: 80px; height: 80px; position: relative; border-radius: 50%;
}
.p3-j-target-radar::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(2, 132, 199, 0.4);
  animation: p3GearSpin 15s linear infinite reverse;
}
.p3-j-radar-ring {
  position: absolute; inset: 10px; border: 2px solid rgba(2, 132, 199, 0.1); border-radius: 50%;
  border-top-color: var(--p3-cyan); animation: p3GearSpin 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.p3-j-radar-cross {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(2, 132, 199, 0.4) calc(50% - 1px), rgba(2, 132, 199, 0.4) calc(50% + 1px), transparent calc(50% + 1px)),
              linear-gradient(180deg, transparent calc(50% - 1px), rgba(2, 132, 199, 0.4) calc(50% - 1px), rgba(2, 132, 199, 0.4) calc(50% + 1px), transparent calc(50% + 1px));
}
.p3-j-radar-blip {
  position: absolute; width: 6px; height: 6px; background: var(--p3-amber); border-radius: 50%;
  top: 18px; right: 18px; box-shadow: 0 0 8px var(--p3-amber);
  animation: p3FadePulse 2s infinite alternate;
}

/* Bottom Left: Precision Crosshair Array */
.p3-j-precision-cross {
  width: 60px; height: 60px; position: relative;
}
.p3-j-cross-circle {
  position: absolute; inset: 0; border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 50%;
  border-right-color: transparent; border-bottom-color: transparent;
  animation: p3GearSpin 8s linear infinite;
}
.p3-j-cross-line {
  position: absolute; background: rgba(2, 132, 199, 0.5);
}
.p3-j-cross-line.x { top: 50%; left: -20px; right: -20px; height: 1px; transform: translateY(-50%); }
.p3-j-cross-line.y { left: 50%; top: -20px; bottom: -20px; width: 1px; transform: translateX(-50%); }
.p3-j-cross-dot {
  position: absolute; top: 50%; left: 50%; width: 4px; height: 4px;
  background: var(--p3-cyan); border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--p3-cyan); animation: p3BlinkFast 1.5s infinite;
}

/* Bottom Right: Cascade Data Stream */
.p3-j-data-cascade {
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Courier New', monospace; font-size: 0.75rem; color: rgba(2, 132, 199, 0.4);
  text-align: right; user-select: none;
}
.p3-j-data-cascade span { animation: p3DataCascade 4s steps(1) infinite; }
.p3-j-data-cascade span:nth-child(2) { animation-delay: 1s; color: rgba(245, 158, 11, 0.5); }
.p3-j-data-cascade span:nth-child(3) { animation-delay: 2s; }
.p3-j-data-cascade span:nth-child(4) { animation-delay: 3s; opacity: 0.5; }

@keyframes p3DataCascade {
  0% { content: "1101001"; }
  25% { content: "0011010"; }
  50% { content: "1010110"; }
  75% { content: "0100101"; }
  100% { content: "1101001"; }
}

/* 8. Orbiting Satellite Probes */
.p3-j-satellite-orbit {
  position: absolute; top: -50px; left: -100px; width: 500px; height: 500px;
  border-radius: 50%; pointer-events: none; z-index: 2;
}
.orbit-a { animation: p3GearSpin 25s linear infinite; }
.orbit-b { animation: p3GearSpin 35s linear infinite reverse; width: 650px; height: 650px; top: -125px; left: -175px;}
.p3-j-satellite {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; background: rgba(2, 132, 199, 0.8);
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 12px rgba(2, 132, 199, 0.6);
  animation: p3BlinkFast 1.5s infinite;
}
.orbit-b .p3-j-satellite { background: rgba(245, 158, 11, 0.8); box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); }

/* 9. Sine Wave Data Trace */
.p3-j-sine-wave {
  position: absolute; top: 400px; left: 10%; width: 80%; height: 100px;
  color: rgba(245, 158, 11, 0.3); opacity: 0.6; pointer-events: none; z-index: 2;
}
.p3-j-sine-wave path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: p3SineDraw 8s linear infinite; }
@keyframes p3SineDraw { 0% { stroke-dashoffset: 1000; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1000; } }

/* 10. Ascending Data Sparks */
.p3-j-data-sparks { position: absolute; bottom: 0; right: 20%; width: 100px; height: 300px; pointer-events: none; z-index: 2; }
.p3-j-data-sparks .spark {
  position: absolute; bottom: 0; width: 2px; height: 15px;
  background: rgba(14, 165, 233, 1); box-shadow: 0 0 5px rgba(14, 165, 233, 1);
  animation: p3SparkRise 4s linear infinite; opacity: 0;
}
.p3-j-data-sparks .s1 { left: 10%; animation-delay: 0s; animation-duration: 3s; }
.p3-j-data-sparks .s2 { left: 30%; animation-delay: 1.5s; background: rgba(245, 158, 11, 1); }
.p3-j-data-sparks .s3 { left: 50%; animation-delay: 0.5s; animation-duration: 5s; }
.p3-j-data-sparks .s4 { left: 70%; animation-delay: 2.2s; }
.p3-j-data-sparks .s5 { left: 90%; animation-delay: 1.1s; background: rgba(245, 158, 11, 1); }
@keyframes p3SparkRise { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-300px); opacity: 0; } }

/* 11. Rotating Cyber-Reticule */
.p3-j-cyber-reticule {
  position: absolute; bottom: 150px; left: 10%; width: 120px; height: 120px;
  opacity: 0.4; pointer-events: none; z-index: 2;
}
.ret-ring-1 { position: absolute; inset: 0; border: 2px dashed rgba(2, 132, 199, 0.5); border-radius: 50%; animation: p3GearSpin 12s linear infinite; }
.ret-ring-2 { position: absolute; inset: 20px; border: 2px solid rgba(245, 158, 11, 0.3); border-radius: 50%; animation: p3GearSpin 8s linear infinite reverse; }
.ret-cross {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(2, 132, 199, 0.4) calc(50% - 1px), rgba(2, 132, 199, 0.4) calc(50% + 1px), transparent calc(50% + 1px)),
              linear-gradient(180deg, transparent calc(50% - 1px), rgba(2, 132, 199, 0.4) calc(50% - 1px), rgba(2, 132, 199, 0.4) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE PERFORMANCE — HUD HEADER BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

.p3-hud-lm-bg {
  position: absolute; inset: -40px -60px; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease-in-out; overflow: hidden;
  border-radius: 20px;
}
.light-mode .p3-hud-lm-bg { opacity: 1; }
body.eco-mode .p3-hud-lm-bg { display: none !important; }

/* Blueprint dot grid */
.p3-hud-lm-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(14, 165, 233, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 80%);
}

/* Floating ambient orbs */
.p3-hud-lm-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.p3-hud-lm-orb.orb-1 {
  width: 300px; height: 300px; top: -50px; right: -50px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
  animation: p3HudOrbDrift1 12s ease-in-out infinite alternate;
}
.p3-hud-lm-orb.orb-2 {
  width: 250px; height: 250px; bottom: -30px; left: -30px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
  animation: p3HudOrbDrift2 15s ease-in-out infinite alternate;
}
@keyframes p3HudOrbDrift1 {
  0% { transform: translate(0, 0); opacity: 0.5; }
  100% { transform: translate(-30px, 20px); opacity: 0.8; }
}
@keyframes p3HudOrbDrift2 {
  0% { transform: translate(0, 0); opacity: 0.4; }
  100% { transform: translate(20px, -15px); opacity: 0.7; }
}

/* Horizontal scanline sweep */
.p3-hud-lm-scanline {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.5), rgba(255,255,255,0.8), rgba(14, 165, 233, 0.5), transparent);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
  animation: p3HudLmScan 7s linear infinite;
  opacity: 0.5;
}
@keyframes p3HudLmScan { 0% { transform: translateY(-10px); } 100% { transform: translateY(600px); } }

/* Animated circuit traces */
.p3-hud-lm-circuit {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
}
.p3-hud-lm-circuit svg { width: 100%; height: 100%; }
.p3-hud-lm-trace {
  fill: none; stroke: rgba(14, 165, 233, 0.3); stroke-width: 1.5;
  stroke-dasharray: 800; stroke-dashoffset: 800;
  animation: p3HudTraceDraw 6s linear infinite;
}
.p3-hud-lm-trace.t2 {
  stroke: rgba(245, 158, 11, 0.2); stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: p3HudTraceDraw2 8s linear infinite;
}
.p3-hud-lm-circuit .p3-hud-lm-node {
  fill: rgba(14, 165, 233, 0.5); animation: p3FadePulse 2s infinite alternate;
}
@keyframes p3HudTraceDraw { 0% { stroke-dashoffset: 800; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -800; } }
@keyframes p3HudTraceDraw2 { 0% { stroke-dashoffset: 1000; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1000; } }

/* Rotating compass element (top-right) */
.p3-hud-lm-compass {
  position: absolute; top: 20px; right: 20px; width: 80px; height: 80px;
  opacity: 0.3;
}
.compass-ring {
  position: absolute; inset: 0; border: 2px dashed rgba(2, 132, 199, 0.3);
  border-radius: 50%; animation: p3GearSpin 20s linear infinite;
}
.compass-needle {
  position: absolute; top: 50%; left: 50%; width: 2px; height: 60%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.6) 0%, transparent 40%, transparent 60%, rgba(245, 158, 11, 0.4) 100%);
  animation: p3GearSpin 8s ease-in-out infinite reverse;
  transform-origin: center center;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE ECO — JOURNEY BACKGROUND (lightweight)
   ═══════════════════════════════════════════════════════════════ */

/* Hidden by default — only visible in light-mode + eco-mode */
.p3-journey-lm-eco {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease-in-out; overflow: hidden;
}
.light-mode.eco-mode .p3-journey-lm-eco { opacity: 1; }

/* Subtle dot-grid pattern */
.p3-j-eco-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(14, 165, 233, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Slow-drifting ambient glow */
.p3-j-eco-glow {
  position: absolute; top: 20%; left: 30%; width: 500px; height: 500px;
  border-radius: 50%; filter: blur(80px);
  background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, rgba(245, 158, 11, 0.06) 50%, transparent 70%);
  animation: p3JEcoGlowDrift 20s ease-in-out infinite alternate;
}
@keyframes p3JEcoGlowDrift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  100% { transform: translate(60px, -40px) scale(1.15); opacity: 0.9; }
}

/* Single horizontal scan line — very gentle */
.p3-j-eco-line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(14, 165, 233, 0.3) 50%, transparent 90%);
  animation: p3JEcoLineSweep 10s linear infinite;
}
@keyframes p3JEcoLineSweep { 0% { transform: translateY(0); } 100% { transform: translateY(1000px); } }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE ECO — JOURNEY BACKGROUND (GPU-friendly)
   Only visible in dark-mode + eco-mode. No filters, no blur.
   ═══════════════════════════════════════════════════════════════ */

.p3-journey-dm-eco {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease-in-out; overflow: hidden;
  display: none;
}
/* Show only in dark eco mode */
body.eco-mode:not(.light-mode) .p3-journey-dm-eco { display: block !important; opacity: 1 !important; }

/* Static dot grid — bright enough to see on dark bg */
.p3-de-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0, 225, 255, 0.15) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Slow ambient glow — transform-only, no filter/blur */
.p3-de-glow {
  position: absolute; top: 20%; left: 30%; width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 225, 255, 0.15) 0%, rgba(255, 170, 0, 0.06) 40%, transparent 70%);
  animation: p3DeGlowDrift 25s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes p3DeGlowDrift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  100% { transform: translate(50px, -40px) scale(1.15); opacity: 1; }
}

/* Single gentle scanline — transform-only */
.p3-de-scan {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(0, 225, 255, 0.5) 50%, transparent 95%);
  box-shadow: 0 0 8px rgba(0, 225, 255, 0.3);
  animation: p3DeScanSweep 12s linear infinite;
  will-change: transform;
}
@keyframes p3DeScanSweep { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } }

/* Corner bracket decorations — static, visible */
.p3-de-corner {
  position: absolute; width: 50px; height: 50px; pointer-events: none;
  opacity: 0.4;
}
.p3-de-corner.c-tl { top: 20px; left: 20px; border-top: 2px solid rgba(0, 225, 255, 0.7); border-left: 2px solid rgba(0, 225, 255, 0.7); }
.p3-de-corner.c-tr { top: 20px; right: 20px; border-top: 2px solid rgba(0, 225, 255, 0.7); border-right: 2px solid rgba(0, 225, 255, 0.7); }
.p3-de-corner.c-bl { bottom: 20px; left: 20px; border-bottom: 2px solid rgba(255, 170, 0, 0.6); border-left: 2px solid rgba(255, 170, 0, 0.6); }
.p3-de-corner.c-br { bottom: 20px; right: 20px; border-bottom: 2px solid rgba(255, 170, 0, 0.6); border-right: 2px solid rgba(255, 170, 0, 0.6); }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE PERFORMANCE ONLY — CYBERPUNK JOURNEY OVERDRIVE
   Only visible in dark-mode (NOT light-mode) + NOT eco-mode
   ═══════════════════════════════════════════════════════════════ */

.p3-journey-dm-perf {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden; transition: opacity 1.2s ease-in-out;
}
.light-mode .p3-journey-dm-perf { display: none !important; }
body.eco-mode .p3-journey-dm-perf { display: none !important; }

/* 1. Neon hex grid floor — 3D perspective */
.p3-dp-hex-floor {
  position: absolute; bottom: 0; left: -10%; right: -10%; height: 50%;
  background-image:
    linear-gradient(0deg, rgba(0, 225, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 225, 255, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(55deg);
  transform-origin: bottom center;
  animation: p3DpGridPulse 8s ease-in-out infinite alternate;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,1) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,1) 100%);
}
@keyframes p3DpGridPulse {
  0% { background-size: 60px 60px; opacity: 0.4; }
  100% { background-size: 65px 65px; opacity: 0.7; }
}

/* 2. Holographic data streams */
.p3-dp-holo-streams { position: absolute; inset: 0; overflow: hidden; }
.dp-stream {
  position: absolute; top: -250px;
  font-size: 0.65rem; line-height: 1.6; letter-spacing: 0.2em;
  color: rgba(0, 225, 255, 0.25); user-select: none;
  animation: p3DpStreamFall linear infinite;
  text-shadow: 0 0 6px rgba(0, 225, 255, 0.3);
}
.dp-stream.ds1 { left: 5%; animation-duration: 14s; animation-delay: 0s; }
.dp-stream.ds2 { left: 20%; animation-duration: 11s; animation-delay: 3s; color: rgba(255, 170, 0, 0.2); text-shadow: 0 0 6px rgba(255, 170, 0, 0.2); }
.dp-stream.ds3 { left: 38%; animation-duration: 16s; animation-delay: 1s; }
.dp-stream.ds4 { left: 55%; animation-duration: 12s; animation-delay: 5s; color: rgba(255, 170, 0, 0.2); text-shadow: 0 0 6px rgba(255, 170, 0, 0.2); }
.dp-stream.ds5 { left: 75%; animation-duration: 13s; animation-delay: 2s; }
.dp-stream.ds6 { left: 92%; animation-duration: 15s; animation-delay: 4s; color: rgba(255, 170, 0, 0.2); text-shadow: 0 0 6px rgba(255, 170, 0, 0.2); }
@keyframes p3DpStreamFall {
  0% { transform: translateY(-250px); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translateY(120vh); opacity: 0; }
}

/* 3. Plasma energy core */
.p3-dp-plasma-core {
  position: absolute; top: 30%; right: 12%; width: 200px; height: 200px;
}
.dp-plasma-ring {
  position: absolute; inset: 0; border-radius: 50%;
}
.dp-plasma-ring.pr1 {
  border: 2px solid rgba(0, 225, 255, 0.3);
  border-top-color: rgba(0, 225, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 225, 255, 0.2), inset 0 0 15px rgba(0, 225, 255, 0.05);
  animation: p3GearSpin 8s linear infinite;
}
.dp-plasma-ring.pr2 {
  inset: 25px; border: 1px dashed rgba(255, 170, 0, 0.3);
  animation: p3GearSpin 12s linear infinite reverse;
}
.dp-plasma-ring.pr3 {
  inset: 50px; border: 2px solid rgba(0, 225, 255, 0.15);
  border-left-color: transparent; border-bottom-color: transparent;
  animation: p3GearSpin 5s linear infinite;
}
.dp-plasma-orb {
  position: absolute; top: 50%; left: 50%; width: 30px; height: 30px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 225, 255, 0.8), rgba(0, 225, 255, 0.1) 60%, transparent 70%);
  box-shadow: 0 0 30px rgba(0, 225, 255, 0.5), 0 0 60px rgba(0, 225, 255, 0.2);
  animation: p3DpOrbPulse 3s ease-in-out infinite alternate;
}
@keyframes p3DpOrbPulse {
  0% { transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 20px rgba(0, 225, 255, 0.3), 0 0 40px rgba(0, 225, 255, 0.1); }
  100% { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 40px rgba(0, 225, 255, 0.6), 0 0 80px rgba(0, 225, 255, 0.3); }
}

/* 4. Electric arc lightning */
.p3-dp-arcs { position: absolute; inset: 0; opacity: 0.5; }
.dp-arc-svg { position: absolute; width: 100%; height: 100%; }
.dp-arc {
  fill: none; stroke: rgba(0, 225, 255, 0.7); stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(0, 225, 255, 0.8));
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: p3DpArcFlash 4s linear infinite;
}
.dp-arc.a2 { stroke: rgba(255, 170, 0, 0.6); animation-delay: 1.5s; filter: drop-shadow(0 0 4px rgba(255, 170, 0, 0.8)); }
.dp-arc.a3 { animation-delay: 3s; animation-duration: 5s; }
@keyframes p3DpArcFlash {
  0% { stroke-dashoffset: 200; opacity: 0; }
  10% { opacity: 1; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  60% { opacity: 0; }
  100% { stroke-dashoffset: -200; opacity: 0; }
}

/* 5. Neon horizontal scan lines */
.p3-dp-neon-scan {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 225, 255, 0.8), #fff, rgba(0, 225, 255, 0.8), transparent);
  box-shadow: 0 0 20px rgba(0, 225, 255, 0.6), 0 0 60px rgba(0, 225, 255, 0.2);
  opacity: 0.6;
}
.p3-dp-neon-scan.s1 { animation: p3DpNeonScan1 6s linear infinite; }
.p3-dp-neon-scan.s2 {
  background: linear-gradient(90deg, transparent, rgba(255, 170, 0, 0.6), rgba(255, 255, 255, 0.8), rgba(255, 170, 0, 0.6), transparent);
  box-shadow: 0 0 15px rgba(255, 170, 0, 0.4);
  animation: p3DpNeonScan2 9s linear infinite; opacity: 0.4;
}
@keyframes p3DpNeonScan1 { 0% { top: -5px; opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 100% { top: 100%; opacity: 0; } }
@keyframes p3DpNeonScan2 { 0% { top: 100%; opacity: 0; } 10% { opacity: 0.5; } 90% { opacity: 0.5; } 100% { top: -5px; opacity: 0; } }

/* 6. Floating holo-glyphs */
.p3-dp-holo-glyphs { position: absolute; inset: 0; }
.dp-glyph {
  position: absolute; font-size: 2rem; color: rgba(0, 225, 255, 0.15);
  text-shadow: 0 0 10px rgba(0, 225, 255, 0.2);
  animation: p3DpGlyphFloat 20s ease-in-out infinite;
}
.dp-glyph.g1 { top: 10%; left: 8%; animation-delay: 0s; }
.dp-glyph.g2 { top: 60%; left: 15%; animation-delay: 4s; color: rgba(255, 170, 0, 0.12); text-shadow: 0 0 10px rgba(255, 170, 0, 0.15); }
.dp-glyph.g3 { top: 25%; right: 25%; animation-delay: 8s; font-size: 1.5rem; }
.dp-glyph.g4 { top: 70%; right: 8%; animation-delay: 2s; font-size: 2.5rem; }
.dp-glyph.g5 { top: 45%; left: 45%; animation-delay: 6s; color: rgba(255, 170, 0, 0.12); text-shadow: 0 0 10px rgba(255, 170, 0, 0.15); }
.dp-glyph.g6 { top: 85%; left: 65%; animation-delay: 10s; }
@keyframes p3DpGlyphFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.15; }
  25% { transform: translateY(-20px) rotate(90deg); opacity: 0.3; }
  50% { transform: translateY(10px) rotate(180deg); opacity: 0.15; }
  75% { transform: translateY(-15px) rotate(270deg); opacity: 0.25; }
}

/* 7. Energy conduit lines */
.p3-dp-conduits { position: absolute; inset: 0; opacity: 0.5; }
.p3-dp-conduits svg { width: 100%; height: 100%; }
.dp-conduit {
  fill: none; stroke: rgba(0, 225, 255, 0.25); stroke-width: 1.5;
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: p3DpConduitFlow 8s linear infinite;
}
.dp-conduit.c2 { stroke: rgba(255, 170, 0, 0.2); animation-delay: 4s; animation-duration: 10s; }
.dp-cnode { fill: rgba(0, 225, 255, 0.6); animation: p3FadePulse 2s infinite alternate; }
@keyframes p3DpConduitFlow { 0% { stroke-dashoffset: 1200; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1200; } }

/* 8. Glitch distortion bands */
.p3-dp-glitch-bands { position: absolute; inset: 0; }
.dp-band {
  position: absolute; left: 0; right: 0; height: 3px;
  background: rgba(0, 225, 255, 0.15);
  box-shadow: 2px 0 0 rgba(255, 0, 0, 0.1), -2px 0 0 rgba(0, 255, 0, 0.1);
  opacity: 0;
}
.dp-band.b1 { top: 20%; animation: p3DpGlitchBand 8s infinite; }
.dp-band.b2 { top: 55%; animation: p3DpGlitchBand 8s infinite 3s; }
.dp-band.b3 { top: 80%; animation: p3DpGlitchBand 8s infinite 6s; }
@keyframes p3DpGlitchBand {
  0%, 94%, 100% { opacity: 0; transform: scaleX(1); height: 3px; }
  95% { opacity: 0.8; transform: scaleX(1.02); height: 5px; }
  96% { opacity: 0; transform: scaleX(0.98); }
  97% { opacity: 0.6; transform: scaleX(1.01); height: 2px; }
  98% { opacity: 0; }
}

/* 9. Sonar ping ripples */
.p3-dp-sonar { position: absolute; bottom: 25%; left: 10%; }
.dp-sonar-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(0, 225, 255, 0.5);
  width: 20px; height: 20px; margin: -10px;
  animation: p3DpSonarPing 5s ease-out infinite; opacity: 0;
}
.dp-sonar-ring.sr1 { animation-delay: 0s; }
.dp-sonar-ring.sr2 { animation-delay: 1.7s; border-color: rgba(255, 170, 0, 0.4); }
.dp-sonar-ring.sr3 { animation-delay: 3.3s; }
@keyframes p3DpSonarPing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(20); opacity: 0; } }

/* 10. Warning chevron bar */
.p3-dp-warning-bar {
  position: absolute; bottom: 20px; left: 0; right: 0; height: 22px;
  overflow: hidden; background: rgba(255, 170, 0, 0.03);
  border-top: 1px solid rgba(255, 170, 0, 0.15);
  border-bottom: 1px solid rgba(255, 170, 0, 0.15);
}
.dp-warning-inner {
  white-space: nowrap; font-size: 0.6rem; letter-spacing: 0.15em; line-height: 22px;
  color: rgba(255, 170, 0, 0.4);
  animation: p3DpWarningScroll 25s linear infinite;
}
@keyframes p3DpWarningScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 11. Pulsing neon border frame */
.p3-dp-neon-frame {
  position: absolute; inset: 20px; border: 1px solid rgba(0, 225, 255, 0.08);
  border-radius: 12px; pointer-events: none;
  animation: p3DpFramePulse 6s ease-in-out infinite alternate;
}
@keyframes p3DpFramePulse {
  0% { border-color: rgba(0, 225, 255, 0.05); box-shadow: inset 0 0 20px rgba(0, 225, 255, 0.02); }
  50% { border-color: rgba(255, 170, 0, 0.1); box-shadow: inset 0 0 30px rgba(255, 170, 0, 0.03); }
  100% { border-color: rgba(0, 225, 255, 0.12); box-shadow: inset 0 0 40px rgba(0, 225, 255, 0.05); }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE PERFORMANCE ONLY — JOURNEY EXTREME OVERDRIVE
   Only visible in light-mode + NOT eco-mode
   ═══════════════════════════════════════════════════════════════ */

.p3-journey-lm-perf {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease-in-out; overflow: hidden;
}
.light-mode .p3-journey-lm-perf { opacity: 1; }
body.eco-mode .p3-journey-lm-perf { display: none !important; opacity: 0 !important; }

/* 1. Full-screen precision laser grid */
.p3-jp-laser-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: p3JpGridShift 30s linear infinite;
}
@keyframes p3JpGridShift { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }

/* 2. Sweeping vertical laser */
.p3-jp-laser-v {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(14, 165, 233, 0.6), #fff, rgba(14, 165, 233, 0.6), transparent);
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.4), 0 0 60px rgba(14, 165, 233, 0.1);
  animation: p3JpLaserV 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes p3JpLaserV { 0% { left: -5%; opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 100% { left: 105%; opacity: 0; } }

/* 3. Sweeping horizontal laser */
.p3-jp-laser-h {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.5), #fff, rgba(245, 158, 11, 0.5), transparent);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
  animation: p3JpLaserH 8s linear infinite;
}
@keyframes p3JpLaserH { 0% { transform: translateY(-5px); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { transform: translateY(calc(100vh + 5px)); opacity: 0; } }

/* 4. Industrial particle storm */
.p3-jp-particle-field { position: absolute; inset: 0; }
.jp-p {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: p3JpParticleDrift linear infinite;
}
.jp-p { width: 4px; height: 4px; background: rgba(14, 165, 233, 0.6); box-shadow: 0 0 6px rgba(14, 165, 233, 0.8); }
.jp1 { left: 5%; animation-duration: 12s; animation-delay: 0s; }
.jp2 { left: 12%; animation-duration: 9s; animation-delay: 1s; background: rgba(245, 158, 11, 0.7); box-shadow: 0 0 6px rgba(245, 158, 11, 0.8); }
.jp3 { left: 22%; animation-duration: 14s; animation-delay: 3s; width: 3px; height: 3px; }
.jp4 { left: 32%; animation-duration: 11s; animation-delay: 0.5s; }
.jp5 { left: 42%; animation-duration: 10s; animation-delay: 2s; background: rgba(245, 158, 11, 0.7); box-shadow: 0 0 6px rgba(245, 158, 11, 0.8); }
.jp6 { left: 52%; animation-duration: 13s; animation-delay: 4s; width: 5px; height: 5px; }
.jp7 { left: 62%; animation-duration: 8s; animation-delay: 1.5s; }
.jp8 { left: 72%; animation-duration: 15s; animation-delay: 3.5s; background: rgba(245, 158, 11, 0.7); box-shadow: 0 0 6px rgba(245, 158, 11, 0.8); }
.jp9 { left: 80%; animation-duration: 11s; animation-delay: 0.8s; width: 3px; height: 3px; }
.jp10 { left: 88%; animation-duration: 9s; animation-delay: 2.5s; }
.jp11 { left: 95%; animation-duration: 12s; animation-delay: 4.5s; }
.jp12 { left: 48%; animation-duration: 16s; animation-delay: 5s; width: 6px; height: 6px; background: rgba(14, 165, 233, 0.4); }
@keyframes p3JpParticleDrift {
  0% { top: 110%; opacity: 0; transform: scale(0); }
  10% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; }
  100% { top: -5%; opacity: 0; transform: scale(0.5) translateX(40px); }
}

/* 5. Data matrix rain */
.p3-jp-matrix-rain { position: absolute; inset: 0; overflow: hidden; }
.jp-col {
  position: absolute; top: -200px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; line-height: 1.4;
  color: rgba(14, 165, 233, 0.2); letter-spacing: 0.15em; user-select: none;
  animation: p3JpMatrixFall linear infinite;
}
.jp-col.c1 { left: 8%; animation-duration: 12s; animation-delay: 0s; }
.jp-col.c2 { left: 25%; animation-duration: 15s; animation-delay: 2s; color: rgba(245, 158, 11, 0.15); }
.jp-col.c3 { left: 45%; animation-duration: 10s; animation-delay: 4s; }
.jp-col.c4 { left: 70%; animation-duration: 14s; animation-delay: 1s; color: rgba(245, 158, 11, 0.15); }
.jp-col.c5 { left: 90%; animation-duration: 11s; animation-delay: 3s; }
@keyframes p3JpMatrixFall { 0% { transform: translateY(-200px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(120vh); opacity: 0; } }

/* 6. HUD targeting reticule */
.p3-jp-target-hud {
  position: absolute; top: 50%; right: 15%; width: 160px; height: 160px;
  transform: translateY(-50%); opacity: 0.3;
}
.jp-target-outer { position: absolute; inset: 0; border: 2px solid rgba(14, 165, 233, 0.4); border-radius: 50%; animation: p3GearSpin 15s linear infinite; }
.jp-target-mid { position: absolute; inset: 20px; border: 1px dashed rgba(245, 158, 11, 0.3); border-radius: 50%; animation: p3GearSpin 10s linear infinite reverse; }
.jp-target-inner { position: absolute; inset: 45px; border: 2px solid rgba(14, 165, 233, 0.3); border-radius: 50%; border-bottom-color: transparent; border-left-color: transparent; animation: p3GearSpin 5s linear infinite; }
.jp-target-cross-h { position: absolute; top: 50%; left: -20px; right: -20px; height: 1px; background: rgba(14, 165, 233, 0.3); transform: translateY(-50%); }
.jp-target-cross-v { position: absolute; left: 50%; top: -20px; bottom: -20px; width: 1px; background: rgba(14, 165, 233, 0.3); transform: translateX(-50%); }
.jp-target-blip { position: absolute; top: 30%; left: 60%; width: 8px; height: 8px; background: rgba(245, 158, 11, 0.8); border-radius: 50%; box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); animation: p3FadePulse 1.5s infinite alternate; }

/* 7. Mechanical piston */
.p3-jp-piston {
  position: absolute; left: 3%; top: 40%; width: 20px; height: 200px; opacity: 0.25;
}
.jp-piston-shaft { position: absolute; left: 50%; width: 4px; height: 100%; transform: translateX(-50%); background: rgba(14, 165, 233, 0.4); border-radius: 2px; }
.jp-piston-head {
  position: absolute; left: 50%; transform: translateX(-50%); width: 18px; height: 18px;
  background: rgba(14, 165, 233, 0.2); border: 2px solid rgba(14, 165, 233, 0.5); border-radius: 3px;
  animation: p3JpPiston 2s ease-in-out infinite;
}
@keyframes p3JpPiston { 0%, 100% { top: 0; } 50% { top: calc(100% - 18px); } }

/* 8. Energy pulse rings */
.p3-jp-pulse-rings { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); }
.jp-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(14, 165, 233, 0.5);
  animation: p3JpPulseExpand 4s ease-out infinite; opacity: 0;
}
.jp-ring.r1 { width: 20px; height: 20px; margin: -10px; }
.jp-ring.r2 { width: 20px; height: 20px; margin: -10px; animation-delay: 1.3s; border-color: rgba(245, 158, 11, 0.4); }
.jp-ring.r3 { width: 20px; height: 20px; margin: -10px; animation-delay: 2.6s; }
@keyframes p3JpPulseExpand { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(15); opacity: 0; } }

/* 9. Large rotating astro-compass */
.p3-jp-astro-compass {
  position: absolute; bottom: 10%; left: 8%; width: 200px; height: 200px; opacity: 0.2;
}
.jp-ac-ring-1 { position: absolute; inset: 0; border: 2px solid rgba(2, 132, 199, 0.3); border-radius: 50%; border-top: 3px solid rgba(2, 132, 199, 0.6); animation: p3GearSpin 25s linear infinite; }
.jp-ac-ring-2 { position: absolute; inset: 25px; border: 1px dashed rgba(245, 158, 11, 0.2); border-radius: 50%; animation: p3GearSpin 18s linear infinite reverse; }
.jp-ac-ring-3 { position: absolute; inset: 55px; border: 2px solid rgba(2, 132, 199, 0.15); border-radius: 50%; background: repeating-conic-gradient(from 0deg, transparent 0deg 15deg, rgba(2, 132, 199, 0.03) 15deg 16deg); animation: p3GearSpin 40s linear infinite; }
.jp-ac-needle { position: absolute; top: 10%; left: 50%; width: 2px; height: 80%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(245, 158, 11, 0.5), transparent 30%, transparent 70%, rgba(14, 165, 233, 0.5)); transform-origin: center center; animation: p3GearSpin 12s ease-in-out infinite reverse; }

/* 10. Welding sparks */
.p3-jp-weld-sparks { position: absolute; top: 15%; right: 5%; width: 60px; height: 150px; }
.ws {
  position: absolute; top: 0; width: 2px; border-radius: 1px;
  background: rgba(245, 158, 11, 1); box-shadow: 0 0 4px rgba(245, 158, 11, 1);
  animation: p3JpWeldSpark linear infinite; opacity: 0;
}
.w1 { left: 10%; height: 12px; animation-duration: 1.5s; animation-delay: 0s; }
.w2 { left: 25%; height: 8px; animation-duration: 1.2s; animation-delay: 0.3s; }
.w3 { left: 40%; height: 15px; animation-duration: 1.8s; animation-delay: 0.6s; }
.w4 { left: 55%; height: 10px; animation-duration: 1.3s; animation-delay: 0.2s; }
.w5 { left: 70%; height: 6px; animation-duration: 1.6s; animation-delay: 0.9s; }
.w6 { left: 85%; height: 14px; animation-duration: 1.1s; animation-delay: 0.5s; }
.w7 { left: 30%; height: 9px; animation-duration: 2s; animation-delay: 1.2s; }
.w8 { left: 60%; height: 11px; animation-duration: 1.4s; animation-delay: 0.8s; }
@keyframes p3JpWeldSpark {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(150px) rotate(45deg); opacity: 0; }
}

/* 11. Thermal scan overlay */
.p3-jp-thermal {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.02) 0%, transparent 30%, transparent 70%, rgba(245, 158, 11, 0.03) 100%);
  animation: p3JpThermalPulse 6s ease-in-out infinite alternate;
}
@keyframes p3JpThermalPulse { 0% { opacity: 0.3; } 100% { opacity: 0.8; } }

/* 12. Scrolling telemetry ticker */
.p3-jp-ticker {
  position: absolute; bottom: 30px; left: 0; right: 0; height: 20px;
  overflow: hidden; opacity: 0.15;
}
.jp-ticker-inner {
  white-space: nowrap; font-size: 0.6rem; letter-spacing: 0.12em; line-height: 20px;
  color: rgba(14, 165, 233, 0.8);
  animation: p3JpTickerScroll 30s linear infinite;
}
@keyframes p3JpTickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE ECO — BENEFITS BACKGROUND (lightweight)
   ═══════════════════════════════════════════════════════════════ */

/* Hidden by default — only visible in light-mode + eco-mode */
.p3-benefits-lm-eco {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease-in-out; overflow: hidden;
}
.light-mode.eco-mode .p3-benefits-lm-eco { opacity: 1; }

/* Subtle cross-hatch pattern */
.p3-b-eco-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg, rgba(14, 165, 233, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Soft warm-cool gradient orb */
.p3-b-eco-glow {
  position: absolute; top: 40%; right: 10%; width: 400px; height: 400px;
  border-radius: 50%; filter: blur(100px);
  background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, rgba(14, 165, 233, 0.08) 50%, transparent 70%);
  animation: p3BEcoGlowPulse 15s ease-in-out infinite alternate;
}
@keyframes p3BEcoGlowPulse {
  0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  100% { transform: translate(-40px, 30px) scale(1.2); opacity: 0.8; }
}

/* Thin vertical accent line */
.p3-b-eco-accent {
  position: absolute; left: 5%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent 10%, rgba(14, 165, 233, 0.2) 50%, transparent 90%);
}

/* In eco mode, hide the heavy performance benefits animations */
body.eco-mode .p3-benefits-lm-anim { opacity: 0 !important; display: none !important; }

/* ═══════════ PERFORMANCE MODE TOGGLE ═══════════ */
.p3-perf-toggle {
  position: absolute;
  bottom: 32px;
  right: 80px; /* Sits directly left of the dark mode toggle */
  z-index: 99999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.4s ease, background-color 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.p3-perf-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0, 212, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
}

.p3-perf-toggle .mode-perf-on { display: block; }
.p3-perf-toggle .mode-perf-off { display: none; }

body.eco-mode .p3-perf-toggle {
  border-color: rgba(255, 170, 0, 0.3);
  color: var(--p3-amber);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.08);
}
body.eco-mode .p3-perf-toggle:hover {
  box-shadow: 0 6px 24px rgba(255, 170, 0, 0.2);
  background: rgba(255, 255, 255, 0.15);
}
body.eco-mode .p3-perf-toggle .mode-perf-on { display: none; }
body.eco-mode .p3-perf-toggle .mode-perf-off { display: block; }

/* Light mode adjustments for perf toggle */
.light-mode .p3-perf-toggle {
  background: rgba(255, 255, 255, 0.92);
  border-color: #bfdbfe;
  color: #0f172a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.light-mode .p3-perf-toggle:hover {
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.15);
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   ECO MODE — BACKGROUND-ONLY OVERRIDES (GPU FRIENDLY)
   Only dials back heavy ambient/background/particle layers.
   Cards, text, hovers, flip animations all remain untouched.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Hide heavy particle/ambient background systems entirely */
body.eco-mode .p3-accel-tunnel,
body.eco-mode .p3-sparks,
body.eco-mode .p3-ember-storm,
body.eco-mode .p3-lens-flare,
body.eco-mode .p3-eclipse-core,
body.eco-mode .p3-topo-laser-floor,
body.eco-mode .p3-topo-laser-roof,
body.eco-mode .p3-particles-container,
body.eco-mode .p3-hud-radar,
body.eco-mode .p3-hud-glitch-layer,
body.eco-mode .p3-scanlines,
body.eco-mode .p3-scanline-sweep,
body.eco-mode .p3-fwrench,
body.eco-mode .p3-gear-cluster,
body.eco-mode .p3-journey-ambient,
body.eco-mode .p3-conveyor,
body.eco-mode .p3-plc,
body.eco-mode .p3-reach,
body.eco-mode .p3-bp-annots,
body.eco-mode .p3-bp-grid,
body.eco-mode .p3-dust-back,
body.eco-mode .p3-dust-mid,
body.eco-mode .p3-dust-front {
  display: none !important;
}

/* 2. Tone down ambient glows to static, near-invisible state */
body.eco-mode .p3-hero-glow,
body.eco-mode .p3-eclipse-sphere,
body.eco-mode .p3-eclipse-corona,
body.eco-mode .p3-optical-overlay,
body.eco-mode .p3-blueprint-bg {
  opacity: 0.05 !important;
  animation: none !important;
  filter: none !important;
}

/* 3. Stop the heavy 3D tunnel ring animations */
body.eco-mode .p3-tunnel-frame {
  animation: none !important;
  opacity: 0 !important;
}
body.eco-mode .p3-tunnel-core-beam {
  animation: none !important;
  opacity: 0 !important;
}

/* 4. Disable the 3D synthwave grid floor animation */
body.eco-mode .p3-pillars::after {
  animation: none !important;
  opacity: 0.03 !important;
}

/* 5. Simplify the robot arm — static pose, no continuous animation */
body.eco-mode .p3-arm-upper,
body.eco-mode .p3-arm-lower,
body.eco-mode .p3-arm-hand,
body.eco-mode .p3-finger-l,
body.eco-mode .p3-finger-r,
body.eco-mode .p3-laser,
body.eco-mode .p3-data-flow {
  animation: none !important;
}

/* 6. Disable heavy background filters on benefits section bg */
body.eco-mode .p3-benefits-bg {
  background: #070b14 !important;
}
body.eco-mode.light-mode .p3-benefits-bg {
  background: transparent !important;
}
body.eco-mode .p3-benefits-bg > *:not(.p3-benefits-lm-eco) {
  display: none !important;
}

/* ---------------------------------------------------------------
   APEX MECHA-DRIVE BACKGROUND (DARK MODE EXCLUSIVE)
   --------------------------------------------------------------- */
.p3-industries-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--p3-bg-2); perspective: 1000px; transform-style: preserve-3d; }
body.light-mode .p3-industries-bg * { display: none !important; }

/* 1. Perspective Laser Floor */
.md-perspective-floor {
  position: absolute; bottom: -50%; left: -50%; width: 200%; height: 150%;
  background: 
    linear-gradient(transparent 0%, rgba(245, 158, 11, 0.1) 2%, transparent 3%),
    linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.1) 2%, transparent 3%);
  background-size: 50px 50px;
  transform: rotateX(75deg);
  transform-origin: top center;
  animation: floorMove 5s linear infinite;
  pointer-events: none; opacity: 0.3;
}
@keyframes floorMove { 0% { background-position: 0 0; } 100% { background-position: 0 50px; } }

/* 2. Gyroscopic Engine Core */
.md-gyro-core {
  position: absolute; top: 50%; left: 50%; width: 600px; height: 600px;
  transform-style: preserve-3d;
  animation: coreFloat 10s ease-in-out infinite alternate;
  pointer-events: none; opacity: 0.15;
}
.md-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px dashed var(--p3-amber);
  box-shadow: inset 0 0 50px rgba(245, 158, 11, 0.2), 0 0 50px rgba(245, 158, 11, 0.2);
}
.ring-1 { animation: gyroSpinX 15s linear infinite; border-style: dotted; }
.ring-2 { animation: gyroSpinY 20s linear infinite; border-color: var(--p3-cyan); width: 80%; height: 80%; top: 10%; left: 10%; }
.ring-3 { animation: gyroSpinZ 25s linear infinite; width: 60%; height: 60%; top: 20%; left: 20%; }
@keyframes gyroSpinX { 100% { transform: rotateX(360deg) rotateY(180deg); } }
@keyframes gyroSpinY { 100% { transform: rotateY(360deg) rotateZ(180deg); } }
@keyframes gyroSpinZ { 100% { transform: rotateZ(360deg) rotateX(180deg); } }
@keyframes coreFloat { 0% { transform: translate(-50%, -50%) translateZ(-200px); } 100% { transform: translate(-50%, -50%) translateZ(100px); } }

/* 3. Factory Warning Tape */
.md-warning-tape {
  position: absolute; width: 200%; height: 30px; background: repeating-linear-gradient(45deg, var(--p3-amber) 0, var(--p3-amber) 20px, #000 20px, #000 40px);
  opacity: 0.15; display: flex; align-items: center; overflow: hidden; pointer-events: none; z-index: 1;
}
.md-warning-tape span { color: #000; font-family: var(--p3-font-mono); font-weight: 900; font-size: 0.8rem; letter-spacing: 5px; white-space: nowrap; animation: tapeScroll 20s linear infinite; }
.wt-top { top: 15%; transform: rotate(-5deg); left: -10%; }
.wt-bottom { bottom: 15%; transform: rotate(5deg); left: -10%; }
@keyframes tapeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 4. Moving Assembly Pipelines */
.md-assembly-line { position: absolute; top: 0; right: 10%; width: 200px; height: 100%; display: flex; gap: 30px; transform: skewX(-20deg); opacity: 0.3; pointer-events: none; z-index: 1; }
.md-pipe { width: 4px; height: 100%; background: rgba(255,255,255,0.05); position: relative; overflow: hidden; }
.md-pipe::after { content: ''; position: absolute; top: -100px; left: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, transparent, var(--p3-amber), #fff); animation: pipeShoot 3s linear infinite; }
.md-pipe:nth-child(2)::after { animation-delay: 0.7s; background: linear-gradient(to bottom, transparent, var(--p3-cyan), #fff); }
.md-pipe:nth-child(3)::after { animation-delay: 1.5s; }
.md-pipe:nth-child(4)::after { animation-delay: 2.2s; background: linear-gradient(to bottom, transparent, var(--p3-cyan), #fff); }
@keyframes pipeShoot { 0% { top: -100px; opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* 5. Holographic Radar Sweep */
.md-radar-sweep {
  position: absolute; top: 50%; left: 50%; width: 200vw; height: 200vw; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(245, 158, 11, 0.05) 90deg, transparent 90deg);
  border-radius: 50%;
  animation: radarSpin 8s linear infinite; pointer-events: none; z-index: 2;
}
@keyframes radarSpin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* 6. Binary Rain */
.md-binary-stream {
  position: absolute; font-family: var(--p3-font-mono); color: var(--p3-amber); font-size: 0.7rem; opacity: 0.3; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 5px;
  animation: binaryFall 10s linear infinite; pointer-events: none; z-index: 1;
}
.bs-1 { left: 5%; top: -50%; }
.bs-2 { left: 25%; top: -80%; animation-duration: 15s; color: var(--p3-cyan); font-size: 1rem; opacity: 0.1; }
.bs-3 { right: 5%; top: -30%; animation-duration: 8s; }
@keyframes binaryFall { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.3; } 90% { opacity: 0.3; } 100% { transform: translateY(150vh); opacity: 0; } }

/* 7. Giant Rotating Gears */
.md-gear {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(245,158,11,0.02) 41%, transparent 50%),
              repeating-conic-gradient(from 0deg, transparent 0deg, transparent 15deg, rgba(245,158,11,0.05) 15deg, rgba(245,158,11,0.05) 30deg);
  pointer-events: none; opacity: 0.3; z-index: 1;
}
.gear-left { top: -200px; left: -200px; animation: gearSpin 40s linear infinite; }
.gear-right { bottom: -200px; right: -200px; animation: gearSpin 60s linear infinite reverse; }
@keyframes gearSpin { 100% { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   DARK MODE PERFORMANCE: ADVANCED MECHATRONIC AUTOMATION
   --------------------------------------------------------------- */
/* Hide base dark background when in dark performance mode (neither eco nor light mode) */
body:not(.eco-mode):not(.light-mode) .p3-industries-bg { display: none !important; }

.p3-industries-dm-perf {
  display: none; /* hidden by default */
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  background: var(--p3-bg-2);
  perspective: 1200px;
}
/* Show Dark Performance only in dark mode without eco mode */
body:not(.eco-mode):not(.light-mode) .p3-industries-dm-perf {
  display: block;
}

/* 1. Deep Technical Grid Background */
.dp-ind-grid {
  position: absolute; inset: -50%;
  background: 
    linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(60deg) translateY(-100px);
  transform-origin: center top;
  animation: dpGridScroll 10s linear infinite;
  pointer-events: none;
}
@keyframes dpGridScroll { 0% { background-position: 0 0; } 100% { background-position: 0 60px; } }

/* 2. Holographic Planetary Gears */
.dp-ind-planetary {
  position: absolute; top: 30%; right: 5%;
  width: 500px; height: 500px;
  transform: translateY(-50%) rotateX(20deg) rotateY(-20deg);
  transform-style: preserve-3d;
  opacity: 0.15;
}
.dp-gear {
  position: absolute; border-radius: 50%;
  border: 2px solid var(--p3-cyan);
}
.dp-gear-sun {
  width: 100px; height: 100px;
  top: 50%; left: 50%; margin: -50px 0 0 -50px;
  border-width: 4px; border-style: dashed;
  animation: dpSpin 10s linear infinite;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}
.dp-gear-planet {
  width: 120px; height: 120px;
  top: 50%; left: 50%; margin: -60px 0 0 -60px;
  border-style: dotted; border-width: 3px;
}
.dp-gear-planet.p1 { transform: rotate(0deg) translateX(160px); animation: dpPlanet1 10s linear infinite; }
.dp-gear-planet.p2 { transform: rotate(120deg) translateX(160px); animation: dpPlanet2 10s linear infinite; }
.dp-gear-planet.p3 { transform: rotate(240deg) translateX(160px); animation: dpPlanet3 10s linear infinite; }
.dp-gear-ring {
  width: 440px; height: 440px;
  top: 50%; left: 50%; margin: -220px 0 0 -220px;
  border: 6px dashed rgba(255, 170, 0, 0.4);
  animation: dpSpinRev 20s linear infinite;
}
@keyframes dpSpin { 100% { transform: rotate(360deg); } }
@keyframes dpSpinRev { 100% { transform: rotate(-360deg); } }
@keyframes dpPlanet1 { 100% { transform: rotate(360deg) translateX(160px) rotate(-360deg); } }
@keyframes dpPlanet2 { 100% { transform: rotate(480deg) translateX(160px) rotate(-480deg); } }
@keyframes dpPlanet3 { 100% { transform: rotate(600deg) translateX(160px) rotate(-600deg); } }

/* 3. Kinematic Robotic Arm System */
.dp-ind-robot-sys {
  position: absolute; bottom: 10%; left: 10%;
  width: 300px; height: 400px;
  opacity: 0.25; filter: drop-shadow(0 0 10px var(--p3-amber));
}
.dp-rob-base {
  position: absolute; bottom: 0; left: 100px;
  width: 100px; height: 40px;
  background: linear-gradient(90deg, transparent, var(--p3-amber), transparent);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
}
.dp-rob-arm-1 {
  position: absolute; bottom: 30px; left: 130px;
  width: 40px; height: 180px;
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid var(--p3-amber);
  transform-origin: bottom center;
  animation: dpArm1 8s ease-in-out infinite alternate;
}
.dp-rob-joint-1 {
  position: absolute; top: -15px; left: -5px;
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid var(--p3-cyan); background: var(--p3-bg-2);
}
.dp-rob-arm-2 {
  position: absolute; top: 0; left: 10px;
  width: 20px; height: 150px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid var(--p3-cyan);
  transform-origin: top center;
  animation: dpArm2 6s ease-in-out infinite alternate;
}
.dp-rob-joint-2 {
  position: absolute; bottom: -10px; left: -10px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px dotted var(--p3-purple);
}
.dp-rob-tool {
  position: absolute; bottom: -40px; left: -5px;
  width: 30px; height: 40px;
  border-top: 5px solid var(--p3-purple);
  border-left: 2px solid var(--p3-purple);
  border-right: 2px solid var(--p3-purple);
}
.dp-tool-laser {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 2px; height: 0; background: var(--p3-purple);
  box-shadow: 0 0 10px var(--p3-purple);
  animation: dpLaserFire 4s infinite;
}
@keyframes dpArm1 { 0% { transform: rotate(-20deg); } 100% { transform: rotate(40deg); } }
@keyframes dpArm2 { 0% { transform: rotate(10deg); } 100% { transform: rotate(-70deg); } }
@keyframes dpLaserFire { 0%, 70% { height: 0; opacity: 0; } 75%, 85% { height: 200px; opacity: 1; } 90%, 100% { height: 0; opacity: 0; } }

/* 4. Hydraulic Piston Array */
.dp-ind-hydraulics {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: flex; gap: 40px; opacity: 0.15;
}
.dp-hyd-unit {
  position: relative; width: 60px; height: 250px;
  border-left: 2px solid var(--p3-cyan);
  border-right: 2px solid var(--p3-cyan);
  background: linear-gradient(180deg, rgba(0,212,255,0.1), transparent);
}
.dp-hyd-piston {
  position: absolute; top: -100px; left: 10px;
  width: 40px; height: 150px;
  background: var(--p3-cyan);
  animation: dpPistonDrive 3s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
.dp-hyd-burst {
  position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 20px;
  background: radial-gradient(ellipse at center, var(--p3-cyan) 0%, transparent 70%);
  opacity: 0;
  animation: dpBurst 3s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
.u2 .dp-hyd-piston, .u2 .dp-hyd-burst { animation-delay: 1s; }
.u3 .dp-hyd-piston, .u3 .dp-hyd-burst { animation-delay: 2s; }
@keyframes dpPistonDrive { 0%, 10% { top: -100px; } 20%, 80% { top: 0; } 90%, 100% { top: -100px; } }
@keyframes dpBurst { 0%, 18% { opacity: 0; transform: translateX(-50%) scale(0.5); } 20% { opacity: 0.8; transform: translateX(-50%) scale(1.5); } 30%, 100% { opacity: 0; transform: translateX(-50%) scale(2); } }

/* 5. Circuit Logic Traces */
.dp-ind-traces {
  position: absolute; inset: 0; opacity: 0.3;
  pointer-events: none;
}
.dp-trace {
  fill: none; stroke: rgba(167, 139, 250, 0.2); stroke-width: 2;
}
.dp-trace-node {
  fill: var(--p3-purple);
  animation: dpNodePulse 2s infinite alternate;
}
.dp-trace.t1 { stroke: var(--p3-cyan); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dpTraceFlow 4s linear infinite; }
.dp-trace.t2 { stroke: var(--p3-amber); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dpTraceFlow 5s linear infinite 1s; }
.dp-trace.t3 { stroke: var(--p3-purple); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dpTraceFlow 6s linear infinite 2s; }
@keyframes dpTraceFlow { 0% { stroke-dashoffset: 1000; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes dpNodePulse { 0% { filter: drop-shadow(0 0 2px var(--p3-purple)); transform: scale(1); } 100% { filter: drop-shadow(0 0 10px var(--p3-purple)); transform: scale(1.5); } }

/* 6. High-Speed Conveyor/Data Track */
.dp-ind-conveyor {
  position: absolute; bottom: 25%; right: -10%;
  width: 120%; height: 60px;
  transform: rotate(10deg); opacity: 0.2;
}
.dp-conv-track {
  position: absolute; inset: 0;
  border-top: 2px dashed var(--p3-amber);
  border-bottom: 2px solid var(--p3-amber);
  background: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255, 170, 0, 0.1) 40px, rgba(255, 170, 0, 0.1) 80px);
  animation: dpConvScroll 2s linear infinite reverse;
}
.dp-conv-node {
  position: absolute; top: 10px; width: 40px; height: 40px;
  background: rgba(255, 170, 0, 0.3); border: 2px solid var(--p3-amber);
  box-shadow: 0 0 15px var(--p3-amber);
  animation: dpConvMove 6s linear infinite;
}
.dp-conv-node.n1 { left: -10%; }
.dp-conv-node.n2 { left: -10%; animation-delay: 2s; }
.dp-conv-node.n3 { left: -10%; animation-delay: 4s; }
@keyframes dpConvScroll { 100% { background-position: 80px 0; } }
@keyframes dpConvMove { 0% { left: -10%; } 100% { left: 110%; } }

/* 7. Scanning Radar Rings */
.dp-ind-radar {
  position: absolute; bottom: -100px; right: 10%;
  width: 300px; height: 300px;
  border-radius: 50%;
  transform: rotateX(70deg); opacity: 0.3;
}
.dp-radar-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid var(--p3-cyan);
}
.dp-radar-ring.r1 { width: 100%; height: 100%; }
.dp-radar-ring.r2 { width: 50%; height: 50%; border-style: dashed; animation: dpSpin 10s linear infinite; }
.dp-radar-sweep {
  position: absolute; top: 50%; left: 50%;
  width: 50%; height: 2px; background: linear-gradient(90deg, var(--p3-cyan), transparent);
  transform-origin: left center;
  animation: dpSpin 4s linear infinite;
}

/* 8. Floating Holographic Data Readouts */
.dp-ind-hud {
  position: absolute; top: 15%; left: 5%;
  color: var(--p3-cyan); font-size: 0.75rem;
  opacity: 0.4; letter-spacing: 2px;
}
.dp-hud-line { margin-bottom: 0.5rem; overflow: hidden; white-space: nowrap; }
.dp-hud-line.hl1 { animation: dpTypewriter 3s steps(30) infinite alternate; }
.dp-hud-line.hl2 { color: var(--p3-amber); animation: dpTypewriter 4s steps(30) infinite alternate 1s; }
.dp-hud-line.hl3 { color: var(--p3-purple); animation: dpTypewriter 5s steps(30) infinite alternate 2s; }
@keyframes dpTypewriter { 0%, 10% { width: 0; } 90%, 100% { width: 100%; } }

/* Energy Pulse Ambient Overlay */
.dp-ind-ambient {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(0, 212, 255, 0.05), transparent 60%);
  pointer-events: none; z-index: 10;
  mix-blend-mode: screen;
  animation: dpAmbientPulse 8s ease-in-out infinite alternate;
}
@keyframes dpAmbientPulse { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 1; transform: scale(1.1); } }

/* 9. Vibrant Plasma Orbs */
.dp-ind-plasma { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.6; mix-blend-mode: screen; }
.dp-plasma { position: absolute; border-radius: 50%; filter: blur(40px); animation: dpPlasmaFloat 15s infinite alternate ease-in-out; }
.dp-plasma.p-cyan { width: 300px; height: 300px; background: rgba(0, 212, 255, 0.4); top: 10%; left: 20%; animation-delay: 0s; }
.dp-plasma.p-amber { width: 250px; height: 250px; background: rgba(255, 170, 0, 0.4); bottom: 20%; right: 15%; animation-delay: -5s; }
.dp-plasma.p-purple { width: 400px; height: 400px; background: rgba(167, 139, 250, 0.3); top: 40%; left: 60%; animation-delay: -10s; }
.dp-plasma.p-magenta { width: 200px; height: 200px; background: rgba(236, 72, 153, 0.4); bottom: 10%; left: 30%; animation-delay: -7s; }
@keyframes dpPlasmaFloat { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -50px) scale(1.2); } 100% { transform: translate(-30px, 30px) scale(0.9); } }

/* 10. Multicolored Data Matrix Rain */
.dp-ind-matrix { position: absolute; inset: 0; pointer-events: none; overflow: hidden; font-size: 1.2rem; font-weight: 700; opacity: 0.5; }
.dp-rain { position: absolute; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 5px; animation: dpMatrixFall linear infinite; opacity: 0; }
.dp-rain.r1 { left: 10%; color: #00d4ff; text-shadow: 0 0 10px #00d4ff; animation-duration: 4s; animation-delay: 0s; }
.dp-rain.r2 { left: 30%; color: #ff9f00; text-shadow: 0 0 10px #ff9f00; animation-duration: 6s; animation-delay: 1s; }
.dp-rain.r3 { left: 50%; color: #a78bfa; text-shadow: 0 0 10px #a78bfa; animation-duration: 5s; animation-delay: 2s; }
.dp-rain.r4 { left: 70%; color: #ec4899; text-shadow: 0 0 10px #ec4899; animation-duration: 7s; animation-delay: 3s; }
.dp-rain.r5 { left: 90%; color: #10b981; text-shadow: 0 0 10px #10b981; animation-duration: 4.5s; animation-delay: 0.5s; }
@keyframes dpMatrixFall { 0% { top: -20%; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 120%; opacity: 0; } }

/* 11. High-Intensity Laser Sweeps */
.dp-ind-lasers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.7; }
.dp-laser { position: absolute; background: #fff; }
.dp-laser.l-horiz { width: 100%; height: 2px; top: 0; box-shadow: 0 0 20px #00d4ff, 0 0 40px #00d4ff; animation: dpLaserH 6s ease-in-out infinite alternate; }
.dp-laser.l-vert { width: 2px; height: 100%; left: 0; box-shadow: 0 0 20px #ec4899, 0 0 40px #ec4899; animation: dpLaserV 8s ease-in-out infinite alternate; }
.dp-laser.l-diag { width: 200%; height: 3px; top: -50%; left: -50%; transform: rotate(45deg); box-shadow: 0 0 20px #ff9f00, 0 0 40px #ff9f00; animation: dpLaserD 10s linear infinite; }
@keyframes dpLaserH { 0% { top: 0; } 100% { top: 100%; } }
@keyframes dpLaserV { 0% { left: 0; } 100% { left: 100%; } }
@keyframes dpLaserD { 0% { transform: rotate(45deg) translateY(-1000px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: rotate(45deg) translateY(1000px); opacity: 0; } }

/* 12. Glowing Hexagonal Particle Storm */
.dp-ind-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.8; }
.dp-hex { position: absolute; bottom: -50px; font-size: 2rem; animation: dpHexStorm linear infinite; opacity: 0; filter: drop-shadow(0 0 10px currentColor); }
.dp-hex.h1 { left: 15%; color: #00d4ff; animation-duration: 12s; animation-delay: 0s; font-size: 1.5rem; }
.dp-hex.h2 { left: 35%; color: #ec4899; animation-duration: 15s; animation-delay: -5s; font-size: 3rem; }
.dp-hex.h3 { left: 55%; color: #ff9f00; animation-duration: 10s; animation-delay: -2s; font-size: 2rem; }
.dp-hex.h4 { left: 75%; color: #a78bfa; animation-duration: 18s; animation-delay: -8s; font-size: 4rem; }
.dp-hex.h5 { left: 85%; color: #10b981; animation-duration: 14s; animation-delay: -3s; font-size: 2.5rem; }
.dp-hex.h6 { left: 5%; color: #f43f5e; animation-duration: 11s; animation-delay: -7s; font-size: 1.8rem; }
@keyframes dpHexStorm { 0% { transform: translateY(0) rotate(0deg) scale(0.5); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { transform: translateY(-120vh) rotate(360deg) scale(1.5); opacity: 0; } }

/* 13. Massive Reactor Core Pulse */
.dp-ind-reactor { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; pointer-events: none; z-index: 0; opacity: 0.6; mix-blend-mode: screen; }
.dp-reactor-core { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff, #00d4ff 40%, transparent 70%); border-radius: 50%; box-shadow: 0 0 100px #00d4ff; animation: dpCoreBeat 1.5s ease-in-out infinite alternate; }
.dp-reactor-ring-1 { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; transform: translate(-50%, -50%); border: 4px solid rgba(0,212,255,0.3); border-radius: 50%; border-top-color: transparent; border-bottom-color: transparent; animation: dpSpin 8s linear infinite; }
.dp-reactor-ring-2 { position: absolute; top: 50%; left: 50%; width: 600px; height: 600px; transform: translate(-50%, -50%); border: 2px dashed rgba(255,170,0,0.5); border-radius: 50%; animation: dpSpinRev 15s linear infinite; }
.dp-reactor-rays { position: absolute; top: 50%; left: 50%; width: 1000px; height: 1000px; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(0,212,255,0.1) 0deg, rgba(0,212,255,0.1) 5deg, transparent 5deg, transparent 15deg); animation: dpSpin 30s linear infinite; mask-image: radial-gradient(circle, black 20%, transparent 60%); -webkit-mask-image: radial-gradient(circle, black 20%, transparent 60%); }
@keyframes dpCoreBeat { 0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 50px #00d4ff; } 100% { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 150px #00d4ff, 0 0 50px #fff; } }

/* 14. Audio Spectrum Visualizer */
.dp-ind-spectrum { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: flex-end; height: 100px; opacity: 0.5; pointer-events: none; }
.dp-bar { width: 15px; background: linear-gradient(to top, var(--p3-cyan), var(--p3-purple)); border-radius: 5px 5px 0 0; box-shadow: 0 0 15px var(--p3-purple); animation: dpBarBounce 1s infinite alternate ease-in-out; }
.dp-bar.b1 { height: 20%; animation-delay: 0.1s; } .dp-bar.b2 { height: 40%; animation-delay: 0.3s; } .dp-bar.b3 { height: 70%; animation-delay: 0.2s; }
.dp-bar.b4 { height: 90%; animation-delay: 0.5s; background: linear-gradient(to top, var(--p3-amber), var(--p3-cyan)); }
.dp-bar.b5 { height: 100%; animation-delay: 0.1s; background: linear-gradient(to top, var(--p3-amber), #fff); }
.dp-bar.b6 { height: 80%; animation-delay: 0.4s; background: linear-gradient(to top, var(--p3-amber), var(--p3-cyan)); }
.dp-bar.b7 { height: 50%; animation-delay: 0.2s; } .dp-bar.b8 { height: 30%; animation-delay: 0.6s; } .dp-bar.b9 { height: 15%; animation-delay: 0.1s; }
@keyframes dpBarBounce { 0% { transform: scaleY(0.5); } 100% { transform: scaleY(1.5); filter: hue-rotate(45deg); } }

/* 15. Giant Moving Holographic Target */
.dp-ind-target { position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 1px dashed rgba(236,72,153,0.6); opacity: 0.4; pointer-events: none; animation: dpTargetWander 20s infinite ease-in-out alternate; box-shadow: 0 0 30px rgba(236,72,153,0.2) inset; }
.dp-target-crosshair { position: absolute; inset: 0; background: linear-gradient(to right, transparent 49%, rgba(236,72,153,0.8) 50%, transparent 51%), linear-gradient(to bottom, transparent 49%, rgba(236,72,153,0.8) 50%, transparent 51%); }
.dp-target-circle { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; border-radius: 50%; border: 2px solid rgba(236,72,153,0.8); animation: dpTargetPulse 2s infinite alternate; }
@keyframes dpTargetWander { 0% { top: 10%; left: 10%; transform: rotate(0deg) scale(1); } 33% { top: 60%; left: 80%; transform: rotate(90deg) scale(1.2); } 66% { top: 80%; left: 20%; transform: rotate(180deg) scale(0.8); } 100% { top: 20%; left: 50%; transform: rotate(270deg) scale(1.5); } }
@keyframes dpTargetPulse { 0% { transform: scale(1); box-shadow: 0 0 10px #ec4899; } 100% { transform: scale(1.2); box-shadow: 0 0 30px #ec4899; } }

/* 16. Energy Shockwaves */
.dp-ind-shockwaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.dp-shockwave { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); border: 5px solid rgba(0,212,255,0.8); opacity: 0; animation: dpShockRipple 6s infinite ease-out; }
.dp-shockwave.sw2 { border-color: rgba(255,170,0,0.8); animation-delay: 3s; top: 30%; left: 70%; }
@keyframes dpShockRipple { 0% { width: 10px; height: 10px; opacity: 1; border-width: 10px; } 100% { width: 2000px; height: 2000px; opacity: 0; border-width: 1px; } }

/* ---------------------------------------------------------------
   LIGHT MODE: APEX LIGHT-FACTORY BACKGROUND
   --------------------------------------------------------------- */
.p3-industries-bg-light { display: none; position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #e0f2fe; }
body.light-mode .p3-industries-bg-light { display: block; }
body.light-mode .p3-industries-bg,
body.light-mode .p3-industries-dm-perf { display: none !important; }

/* 1. Pulsing Hex Core */
.lf-hex-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 800px; height: 800px;
  background: 
    repeating-linear-gradient(30deg, transparent, transparent 40px, rgba(2, 132, 199, 0.05) 40px, rgba(2, 132, 199, 0.05) 42px),
    repeating-linear-gradient(-30deg, transparent, transparent 40px, rgba(2, 132, 199, 0.05) 40px, rgba(2, 132, 199, 0.05) 42px);
  mask-image: radial-gradient(circle, black 20%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle, black 20%, transparent 60%);
  animation: hexPulse 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hexPulse { 0% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); } }

/* 2. Massive Isometric Conveyor Belt */
.lf-conveyor-belt {
  position: absolute; bottom: 10%; right: -10%; width: 120%; height: 100px;
  transform: rotate(-15deg);
  background: repeating-linear-gradient(90deg, rgba(2, 132, 199, 0.1) 0, rgba(2, 132, 199, 0.1) 20px, transparent 20px, transparent 40px);
  border-top: 4px solid var(--p3-cyan); border-bottom: 4px solid var(--p3-cyan);
  animation: beltMove 2s linear infinite; pointer-events: none;
}
@keyframes beltMove { 100% { background-position: -40px 0; } }
.lf-item { position: absolute; top: 50%; width: 60px; height: 40px; background: #fff; border: 2px solid var(--p3-amber); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); transform: translateY(-50%); animation: itemMove 10s linear infinite; }
.i-1 { left: 110%; }
.i-2 { left: 110%; animation-delay: 3.3s; border-color: var(--p3-cyan); }
.i-3 { left: 110%; animation-delay: 6.6s; }
@keyframes itemMove { 0% { left: 110%; } 100% { left: -10%; } }

/* 3. CSS Robotic Arm */
.lf-robo-arm-base {
  position: absolute; top: -50px; left: 15%; width: 50px; height: 100px;
  background: var(--p3-text-2); border-radius: 0 0 20px 20px;
  transform-origin: top center; animation: armSwing 8s ease-in-out infinite alternate; z-index: 1; pointer-events: none;
}
.lf-robo-arm-joint1 {
  position: absolute; bottom: -10px; left: -5px; width: 60px; height: 250px;
  background: linear-gradient(180deg, var(--p3-text-2) 0%, var(--p3-cyan) 100%);
  border-radius: 30px; transform-origin: top center; animation: joint1Swing 6s ease-in-out infinite alternate;
}
.lf-robo-arm-joint2 {
  position: absolute; bottom: 10px; left: 10px; width: 40px; height: 150px;
  background: #fff; border: 4px solid var(--p3-cyan); border-radius: 20px;
  transform-origin: top center; animation: joint2Swing 5s ease-in-out infinite alternate;
}
.lf-robo-arm-claw {
  position: absolute; bottom: -20px; left: -10px; width: 60px; height: 40px;
  border: 6px solid var(--p3-amber); border-top: none; border-radius: 0 0 10px 10px;
  animation: clawPinch 3s ease-in-out infinite alternate;
}
@keyframes armSwing { 0% { transform: rotate(-30deg); } 100% { transform: rotate(30deg); } }
@keyframes joint1Swing { 0% { transform: rotate(10deg); } 100% { transform: rotate(-50deg); } }
@keyframes joint2Swing { 0% { transform: rotate(-20deg); } 100% { transform: rotate(60deg); } }
@keyframes clawPinch { 0% { width: 60px; left: -10px; } 100% { width: 30px; left: 5px; } }

/* 4. Fiber Optic Data Streams */
.lf-fiber-stream { position: absolute; width: 2px; background: linear-gradient(180deg, transparent, var(--p3-amber), transparent); opacity: 0; animation: fiberShoot 2s ease-in infinite; pointer-events: none; }
.fs-1 { left: 80%; height: 200px; animation-duration: 3s; }
.fs-2 { left: 40%; height: 300px; animation-duration: 2.5s; animation-delay: 1s; background: linear-gradient(180deg, transparent, var(--p3-cyan), transparent); }
.fs-3 { left: 20%; height: 150px; animation-duration: 4s; animation-delay: 2s; }
@keyframes fiberShoot { 0% { top: -300px; opacity: 1; } 100% { top: 150vh; opacity: 0; } }

/* 5. Schematic Rings */
.lf-schematic-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(2, 132, 199, 0.3); box-shadow: 0 0 30px rgba(2, 132, 199, 0.1); pointer-events: none; }
.sr-1 { width: 1200px; height: 1200px; top: -600px; left: -600px; border: 4px dashed rgba(2, 132, 199, 0.15); animation: gearSpin 60s linear infinite; }
.sr-2 { width: 800px; height: 800px; bottom: -400px; right: -400px; border: 2px dotted rgba(245, 158, 11, 0.3); animation: gearSpin 40s linear infinite reverse; }

/* 6. Clean Room Laser Sweep (Enhanced) */
.lm-clean-sweep {
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  mix-blend-mode: overlay;
  animation: cleanSweep 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform: skewX(-20deg); pointer-events: none; z-index: 2;
}
@keyframes cleanSweep { 0% { left: -100%; } 100% { left: 200%; } }

/* 7. Hydraulic Stamper */
.lf-hydraulic-press { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 100vh; pointer-events: none; z-index: 0; }
.press-shaft { position: absolute; top: -80%; left: 50%; transform: translateX(-50%); width: 60px; height: 80%; background: linear-gradient(90deg, #cbd5e1, #f1f5f9, #cbd5e1); border: 2px solid #94a3b8; animation: pressDrop 12s cubic-bezier(0.8, 0, 0.2, 1) infinite; }
.press-head { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 40px; background: #94a3b8; border-radius: 0 0 10px 10px; border-bottom: 6px solid var(--p3-amber); }
.press-shockwave { position: absolute; bottom: 20%; left: 50%; transform: translate(-50%, 50%) scale(0); width: 300px; height: 100px; border: 4px solid var(--p3-cyan); border-radius: 50%; opacity: 0; animation: pressShock 12s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes pressDrop { 0%, 80%, 100% { top: -80%; } 85% { top: 10%; } 86% { top: 9%; } 87% { top: 10%; } }
@keyframes pressShock { 0%, 85% { transform: translate(-50%, 50%) scale(0); opacity: 0; } 86% { opacity: 0.8; border-width: 10px; } 95% { transform: translate(-50%, 50%) scale(3); opacity: 0; border-width: 1px; } 100% { transform: translate(-50%, 50%) scale(3); opacity: 0; } }

/* 8. Pneumatic Data Tubes */
.lf-pneumatic-tube { position: absolute; top: -10%; width: 60px; height: 120%; background: linear-gradient(90deg, rgba(2, 132, 199, 0.02), rgba(2, 132, 199, 0.1), rgba(2, 132, 199, 0.02)); border-left: 2px solid rgba(2, 132, 199, 0.2); border-right: 2px solid rgba(2, 132, 199, 0.2); pointer-events: none; }
.pt-left { left: 5%; } .pt-right { right: 5%; }
.tube-capsule { position: absolute; left: 50%; transform: translateX(-50%); width: 40px; height: 80px; border-radius: 20px; background: #fff; border: 3px solid var(--p3-cyan); box-shadow: 0 0 20px rgba(2, 132, 199, 0.4); opacity: 0; }
.tube-capsule::after { content: ''; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 10px; background: repeating-linear-gradient(0deg, transparent, transparent 5px, var(--p3-cyan) 5px, var(--p3-cyan) 10px); opacity: 0.5; }
.c-1 { animation: tubeShootUp 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.c-2 { border-color: var(--p3-amber); box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); animation: tubeShootDown 7s cubic-bezier(0.4, 0, 0.2, 1) infinite 2s; }
.c-2::after { background: repeating-linear-gradient(0deg, transparent, transparent 5px, var(--p3-amber) 5px, var(--p3-amber) 10px); }
.c-3 { animation: tubeShootUp 5s cubic-bezier(0.4, 0, 0.2, 1) infinite 1s; }
@keyframes tubeShootUp { 0% { bottom: -10%; opacity: 1; } 100% { bottom: 110%; opacity: 1; } }
@keyframes tubeShootDown { 0% { top: -10%; opacity: 1; } 100% { top: 110%; opacity: 1; } }

/* 9. Automated Drone */
.lf-drone { position: absolute; top: 20%; left: -10%; width: 60px; height: 20px; background: #94a3b8; border-radius: 10px; animation: droneFlight 15s ease-in-out infinite; pointer-events: none; z-index: 2; }
.drone-prop { position: absolute; top: -5px; width: 30px; height: 4px; background: rgba(2, 132, 199, 0.5); border-radius: 2px; animation: propSpin 0.1s linear infinite; }
.p-l { left: -15px; } .p-r { right: -15px; }
.drone-cargo { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); width: 30px; height: 20px; background: #fff; border: 2px solid var(--p3-amber); box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
.drone-cargo::before { content: ''; position: absolute; top: -15px; left: 5px; width: 2px; height: 15px; background: #94a3b8; }
.drone-cargo::after { content: ''; position: absolute; top: -15px; right: 5px; width: 2px; height: 15px; background: #94a3b8; }
@keyframes propSpin { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.1); } 100% { transform: scaleX(1); } }
@keyframes droneFlight { 
  0% { transform: translate(0, 0) rotate(5deg); } 
  20% { transform: translate(30vw, 50px) rotate(-2deg); } 
  40% { transform: translate(60vw, -30px) rotate(3deg); } 
  60% { transform: translate(90vw, 20px) rotate(-1deg); } 
  80% { transform: translate(110vw, -10px) rotate(5deg); } 
  100% { transform: translate(120vw, 0) rotate(0deg); } 
}


/* ---------------------------------------------------------------
   ECO MODE: INDUSTRY APPLICATIONS - DIAL BACK (NOT REMOVE)
   Keep the aesthetic, just reduce intensity slightly.
   --------------------------------------------------------------- */

/* Dark Mode BG: slow down heavy 3D animations -> FROZEN for extreme GPU friendly */
body.eco-mode .md-perspective-floor { animation: none !important; opacity: 0.15 !important; }
body.eco-mode .md-ring { animation: none !important; }
body.eco-mode .md-gyro-core { opacity: 0.08 !important; animation: none !important; }
body.eco-mode .md-radar-sweep { animation: none !important; opacity: 0.6 !important; }
body.eco-mode .md-binary-stream { animation: none !important; opacity: 0.15 !important; }
body.eco-mode .md-warning-tape span { animation: none !important; }
body.eco-mode .md-gear { animation: none !important; opacity: 0.15 !important; }
body.eco-mode .md-pipe::after { animation: none !important; }

/* Light Mode BG: slow down and soften -> FROZEN for extreme GPU friendly */
body.eco-mode .lf-hex-core { animation: none !important; opacity: 0.2 !important; }
body.eco-mode .lf-conveyor-belt { animation: none !important; }
body.eco-mode .lf-item { animation: none !important; }
body.eco-mode .lf-robo-arm-base { animation: none !important; }
body.eco-mode .lf-robo-arm-joint1 { animation: none !important; }
body.eco-mode .lf-robo-arm-joint2 { animation: none !important; }
body.eco-mode .lf-robo-arm-claw { animation: none !important; }
body.eco-mode .lf-fiber-stream { animation: none !important; opacity: 0.5 !important; }
body.eco-mode .lf-schematic-ring { animation: none !important; opacity: 0.6 !important; }
body.eco-mode .lm-clean-sweep { animation: none !important; }
body.eco-mode .press-shaft { animation: none !important; }
body.eco-mode .press-shockwave { animation: none !important; }
body.eco-mode .tube-capsule { animation: none !important; }
body.eco-mode .lf-drone { animation: none !important; }
body.eco-mode .drone-prop { animation: none !important; }

/* Additional Eco Mode overrides for extreme GPU friendliness */
body.eco-mode .p3-j-eco-glow,
body.eco-mode .p3-j-eco-line,
body.eco-mode .p3-de-glow,
body.eco-mode .p3-de-scan,
body.eco-mode .p3-b-eco-glow,
body.eco-mode .p3-lm-kinematic-arm,
body.eco-mode .p3-lm-arm-segment,
body.eco-mode .p3-lm-arm-effector,
body.eco-mode .p3-arm-secondary,
body.eco-mode .p3-arm-secondary .p3-seg-1,
body.eco-mode .p3-arm-secondary .p3-seg-2 {
  animation: none !important;
  transform: none !important;
}

/* Hide performance mode toggle completely */
.p3-perf-toggle {
  display: none !important;
}

/* ---------------------------------------------------------------
   PERFORMANCE MODE: EXTRA LIGHT-FACTORY ANIMATIONS
   --------------------------------------------------------------- */

/* 10. Welding Spark Bursts */
.lf-spark-cluster { position: absolute; pointer-events: none; z-index: 3; }
.sc-1 { top: 35%; right: 8%; }
.sc-2 { bottom: 25%; left: 12%; }
.spark {
  position: absolute; width: 3px; height: 3px; background: var(--p3-amber);
  border-radius: 50%; box-shadow: 0 0 6px var(--p3-amber), 0 0 12px rgba(245,158,11,0.5);
  animation: sparkBurst 4s ease-out infinite;
}
.spark:nth-child(1) { animation-delay: 0s; }
.spark:nth-child(2) { animation-delay: 0.1s; }
.spark:nth-child(3) { animation-delay: 0.15s; }
.spark:nth-child(4) { animation-delay: 0.2s; }
.spark:nth-child(5) { animation-delay: 0.25s; }
.spark:nth-child(6) { animation-delay: 0.3s; }
@keyframes sparkBurst {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--sx, 40px) * 1), calc(var(--sy, -30px) * 1)) scale(0); opacity: 0; }
}
.spark:nth-child(1) { --sx: 50px; --sy: -60px; }
.spark:nth-child(2) { --sx: -40px; --sy: -50px; }
.spark:nth-child(3) { --sx: 70px; --sy: -20px; }
.spark:nth-child(4) { --sx: -30px; --sy: -70px; }
.spark:nth-child(5) { --sx: 20px; --sy: -80px; }
.spark:nth-child(6) { --sx: -60px; --sy: -30px; }

/* 11. Circuit Board Traces */
.lf-circuit-trace {
  position: absolute; height: 2px; background: rgba(2,132,199,0.15); pointer-events: none;
  overflow: hidden;
}
.lf-circuit-trace::after {
  content: ''; position: absolute; top: 0; left: -30px; width: 30px; height: 100%;
  background: linear-gradient(90deg, transparent, var(--p3-cyan), transparent);
  box-shadow: 0 0 8px var(--p3-cyan);
  animation: traceRun 3s linear infinite;
}
.ct-1 { top: 25%; left: 0; width: 40%; transform: rotate(0deg); }
.ct-2 { top: 55%; right: 0; width: 35%; transform: rotate(0deg); }
.ct-3 { top: 40%; left: 20%; width: 2px; height: 200px; background: rgba(2,132,199,0.1); }
.ct-3::after { width: 100%; height: 30px; left: 0; top: -30px; background: linear-gradient(180deg, transparent, var(--p3-cyan), transparent); animation-name: traceRunV; }
.ct-4 { top: 30%; right: 25%; width: 2px; height: 250px; background: rgba(245,158,11,0.1); }
.ct-4::after { width: 100%; height: 30px; left: 0; top: -30px; background: linear-gradient(180deg, transparent, var(--p3-amber), transparent); animation-name: traceRunV; animation-delay: 1.5s; }
@keyframes traceRun { 0% { left: -30px; } 100% { left: 110%; } }
@keyframes traceRunV { 0% { top: -30px; } 100% { top: 110%; } }

/* 12. HUD Targeting Crosshairs */
.lf-crosshair {
  position: absolute; width: 80px; height: 80px; pointer-events: none; z-index: 1;
  border: 1px solid rgba(2,132,199,0.3); border-radius: 50%;
  animation: crosshairDrift 12s ease-in-out infinite alternate;
}
.ch-1 { top: 20%; left: 30%; }
.ch-2 { bottom: 30%; right: 20%; animation-delay: 6s; border-color: rgba(245,158,11,0.3); }
.ch-ring {
  position: absolute; inset: 10px; border: 2px dashed rgba(2,132,199,0.2); border-radius: 50%;
  animation: gearSpin 8s linear infinite;
}
.ch-2 .ch-ring { border-color: rgba(245,158,11,0.2); animation-direction: reverse; }
.lf-crosshair::before {
  content: ''+''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 1.5rem; color: rgba(2,132,199,0.3); font-weight: 200;
}
.ch-2::before { color: rgba(245,158,11,0.3); }
@keyframes crosshairDrift { 0% { transform: translate(0,0); } 100% { transform: translate(40px, -30px); } }

/* 13. Energy Pulse Waves */
.lf-energy-pulse {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0);
  border-radius: 50%; border: 2px solid rgba(2,132,199,0.15);
  pointer-events: none; opacity: 0;
  animation: energyPulse 6s ease-out infinite;
}
.ep-1 { width: 300px; height: 300px; }
.ep-2 { width: 300px; height: 300px; animation-delay: 2s; border-color: rgba(245,158,11,0.1); }
.ep-3 { width: 300px; height: 300px; animation-delay: 4s; }
@keyframes energyPulse {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 0.6; border-width: 4px; }
  100% { transform: translate(-50%,-50%) scale(4); opacity: 0; border-width: 1px; }
}

/* 14. Rotating Protractor */
.lf-protractor {
  position: absolute; bottom: 5%; left: 8%; width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(2,132,199,0.1);
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg, transparent 9deg, rgba(2,132,199,0.04) 9deg, rgba(2,132,199,0.04) 10deg);
  animation: gearSpin 90s linear infinite; pointer-events: none; z-index: 0;
}
.lf-protractor::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 50%; height: 1px;
  transform-origin: left center; background: linear-gradient(90deg, var(--p3-amber), transparent);
  animation: gearSpin 10s linear infinite; opacity: 0.4;
}

/* Eco mode: hide the new perf-only extras */
body.eco-mode .lf-spark-cluster { display: none !important; }
body.eco-mode .lf-circuit-trace { display: none !important; }
body.eco-mode .lf-crosshair { display: none !important; }
body.eco-mode .lf-energy-pulse { display: none !important; }
body.eco-mode .lf-protractor { animation-duration: 180s !important; opacity: 0.5 !important; }

/* 15. Laser Cutters */
.lf-laser-cutter { position: absolute; width: 4px; background: #fff; box-shadow: 0 0 15px var(--p3-amber), 0 0 30px var(--p3-amber); z-index: 4; opacity: 0; pointer-events: none; }
.lc-1 { left: 35%; top: 0; height: 100%; animation: laserCut 8s infinite; }
.lc-2 { right: 25%; top: 0; height: 100%; animation: laserCut 12s infinite 4s; box-shadow: 0 0 15px var(--p3-cyan), 0 0 30px var(--p3-cyan); }
@keyframes laserCut { 0% { height: 0; opacity: 1; } 10% { height: 100vh; opacity: 1; } 20% { height: 100vh; opacity: 0; } 100% { height: 100vh; opacity: 0; } }

/* 16. Holographic Cubes */
.lf-holo-cube { position: absolute; width: 60px; height: 60px; transform-style: preserve-3d; pointer-events: none; z-index: 1; }
.hc-1 { top: 15%; right: 15%; animation: cubeSpin 10s linear infinite; }
.hc-2 { bottom: 20%; left: 20%; width: 40px; height: 40px; animation: cubeSpin 15s linear infinite reverse; }
.cube-face { position: absolute; width: 100%; height: 100%; border: 1px solid rgba(2, 132, 199, 0.4); background: rgba(2, 132, 199, 0.05); }
.hc-2 .cube-face { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.05); }
.cube-face.front  { transform: translateZ(30px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(30px); }
.cube-face.right  { transform: rotateY(90deg) translateZ(30px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(30px); }
.cube-face.top    { transform: rotateX(90deg) translateZ(30px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(30px); }
.hc-2 .cube-face.front  { transform: translateZ(20px); }
.hc-2 .cube-face.back   { transform: rotateY(180deg) translateZ(20px); }
.hc-2 .cube-face.right  { transform: rotateY(90deg) translateZ(20px); }
.hc-2 .cube-face.left   { transform: rotateY(-90deg) translateZ(20px); }
.hc-2 .cube-face.top    { transform: rotateX(90deg) translateZ(20px); }
.hc-2 .cube-face.bottom { transform: rotateX(-90deg) translateZ(20px); }
@keyframes cubeSpin { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } }

/* 17. System Status Monitors */
.lf-status-monitor { position: absolute; display: flex; gap: 4px; align-items: flex-end; padding: 10px; border: 1px solid rgba(2, 132, 199, 0.2); background: rgba(2, 132, 199, 0.05); border-radius: 4px; pointer-events: none; z-index: 1; }
.sm-1 { top: 45%; left: 5%; width: 80px; height: 50px; }
.bar { width: 12px; background: var(--p3-cyan); opacity: 0.7; }
.b1 { animation: barJump 2s ease-in-out infinite alternate; }
.b2 { animation: barJump 1.5s ease-in-out infinite alternate 0.5s; }
.b3 { animation: barJump 2.5s ease-in-out infinite alternate 1s; }
.b4 { animation: barJump 1.8s ease-in-out infinite alternate 0.2s; }
@keyframes barJump { 0% { height: 10%; } 100% { height: 90%; } }

/* Eco mode overrides for new elements */
body.eco-mode .lf-laser-cutter { display: none !important; }
body.eco-mode .lf-holo-cube { display: none !important; }
body.eco-mode .lf-status-monitor { display: none !important; }

/* 18. Overhead Gantry Crane */
.lf-gantry-crane { position: absolute; top: 5%; left: 0; width: 100%; height: 200px; pointer-events: none; z-index: 1; }
.gantry-rail { position: absolute; top: 0; left: 0; width: 100%; height: 8px; background: #94a3b8; border-bottom: 2px solid #cbd5e1; }
.gantry-cart { position: absolute; top: 8px; left: -100px; width: 60px; height: 30px; background: #64748b; border-bottom: 4px solid var(--p3-amber); animation: gantryTravel 25s ease-in-out infinite; }
.gantry-cart::before { content: ''; position: absolute; top: 5px; left: 10px; width: 40px; height: 10px; background: #334155; }
.gantry-cable { position: absolute; top: 30px; left: 28px; width: 4px; height: 50px; background: #cbd5e1; animation: gantryHoist 25s ease-in-out infinite; transform-origin: top; }
.gantry-hook { position: absolute; bottom: -20px; left: -8px; width: 20px; height: 20px; border: 4px solid #475569; border-top-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-45deg); }
@keyframes gantryTravel { 0%, 10% { left: -100px; } 40%, 60% { left: 60%; } 90%, 100% { left: 110%; } }
@keyframes gantryHoist { 0%, 35% { transform: scaleY(1); } 40%, 45% { transform: scaleY(3); } 50%, 100% { transform: scaleY(1); } }

/* 19. Digital Calipers */
.lf-caliper { position: absolute; top: 40%; left: -200px; width: 150px; height: 60px; pointer-events: none; z-index: 2; animation: caliperSlide 18s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.caliper-body { position: absolute; top: 20px; left: 0; width: 100%; height: 20px; background: linear-gradient(90deg, #94a3b8, #cbd5e1); border: 1px solid #64748b; }
.caliper-body::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #cbd5e1; transform: translateY(-50%); }
.caliper-jaw { position: absolute; width: 10px; height: 60px; background: #64748b; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 100%); }
.caliper-jaw.fixed { top: 0; right: 0; }
.caliper-jaw.sliding { top: 0; right: 50px; animation: caliperMeasure 18s ease-in-out infinite; }
.caliper-readout { position: absolute; top: -5px; right: 65px; background: #fff; border: 1px solid var(--p3-cyan); color: var(--p3-cyan); font-family: monospace; font-size: 0.6rem; padding: 2px 4px; border-radius: 2px; box-shadow: 0 0 5px rgba(2, 132, 199, 0.3); animation: caliperMeasure 18s ease-in-out infinite; }
@keyframes caliperSlide { 0%, 15% { left: -200px; } 25%, 75% { left: 5%; } 85%, 100% { left: -200px; } }
@keyframes caliperMeasure { 0%, 30% { right: 50px; } 40%, 60% { right: 120px; } 70%, 100% { right: 50px; } }

/* 20. Holographic Blueprint Scanner */
.lf-blueprint-scan { position: absolute; bottom: 10%; right: 15%; width: 200px; height: 200px; pointer-events: none; z-index: 0; opacity: 0.6; }
.blueprint-wireframe { position: absolute; inset: 0; border: 1px solid rgba(2, 132, 199, 0.2); border-radius: 50%; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(2, 132, 199, 0.1) 10px, rgba(2, 132, 199, 0.1) 11px); -webkit-mask-image: linear-gradient(to bottom, transparent, black, transparent); mask-image: linear-gradient(to bottom, transparent, black, transparent); }
.blueprint-wireframe::after { content: ''; position: absolute; inset: 20px; border: 2px dashed rgba(2, 132, 199, 0.3); border-radius: 50%; animation: gearSpin 15s linear infinite reverse; }
.blueprint-laser { position: absolute; top: -10%; left: 0; width: 100%; height: 4px; background: var(--p3-cyan); box-shadow: 0 0 10px var(--p3-cyan); animation: blueprintScan 6s ease-in-out infinite alternate; }
@keyframes blueprintScan { 0% { top: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 110%; opacity: 0; } }

/* 21. Warning Beacons */
.lf-beacon { position: absolute; top: -5px; width: 40px; height: 15px; background: #64748b; border-radius: 0 0 20px 20px; pointer-events: none; z-index: 5; }
.b-left { left: 20%; } .b-right { right: 20%; }
.beacon-light { position: absolute; top: 15px; left: 10px; width: 20px; height: 20px; background: var(--p3-amber); border-radius: 50%; opacity: 0.8; box-shadow: 0 0 20px var(--p3-amber), 0 0 40px rgba(245, 158, 11, 0.6); animation: beaconSpin 1s linear infinite; }
.b-right .beacon-light { animation-delay: 0.5s; }
@keyframes beaconSpin { 0% { opacity: 0.2; transform: scaleX(0.5); } 50% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0.2; transform: scaleX(0.5); } }

/* Eco mode overrides for new elements */
body.eco-mode .lf-gantry-crane { display: none !important; }
body.eco-mode .lf-caliper { display: none !important; }
body.eco-mode .lf-blueprint-scan { display: none !important; }
body.eco-mode .lf-beacon { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT CTA OVERRIDES (Blueprint Assembly Aesthetic)
   ═══════════════════════════════════════════════════════════════ */
.light-mode .p3-cta { background: #f0f8ff; }
.light-mode .p3-cta-badge {
  color: #0ea5e9 !important; border-color: rgba(14,165,233,0.3) !important; background: rgba(14,165,233,0.05) !important; box-shadow: none !important;
}
.light-mode .p3-cta-title { color: #0f172a !important; text-shadow: none !important; }
.light-mode .p3-cta-title span { background: linear-gradient(90deg, #0ea5e9, #f59e0b, #0ea5e9) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; text-shadow: none !important; }
.light-mode .p3-cta-sub { color: #475569 !important; text-shadow: none !important; }

.light-mode .p3-cta-stats { background: rgba(255,255,255,0.7) !important; border-color: rgba(14,165,233,0.2) !important; box-shadow: 0 10px 30px rgba(14,165,233,0.1) !important; }
.light-mode .p3-cta-stats::after { display: none; }
.light-mode .p3-cta-stat { background: rgba(255,255,255,0.8) !important; border-right: 1px solid rgba(14,165,233,0.1); }
.light-mode .p3-cta-stat:last-child { border-right: none; }
.light-mode .p3-cta-stat:hover { background: rgba(240,249,255,0.9) !important; box-shadow: inset 0 0 20px rgba(14,165,233,0.1) !important; }
.light-mode .p3-cta-snum { color: #0ea5e9 !important; text-shadow: none !important; }
.light-mode .p3-cta-stat span:last-child { color: #475569 !important; }

.light-mode .p3-btn-cta { background: #0ea5e9 !important; color: #fff !important; border-color: #0ea5e9 !important; box-shadow: 0 10px 20px rgba(14,165,233,0.2) !important; }
.light-mode .p3-btn-cta::before { background: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0)) !important; }
.light-mode .p3-btn-cta:hover { transform: translateY(-3px) !important; box-shadow: 0 15px 30px rgba(14,165,233,0.4) !important; text-shadow: none !important; border-color: #0ea5e9 !important; }
.light-mode .p3-btn-cta:hover svg { filter: none !important; }

.light-mode .p3-wa-btn { background: #fff !important; border-color: rgba(37,211,102,0.2) !important; box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; }
.light-mode .p3-wa-btn::before { background: #25d366 !important; }
.light-mode .p3-wa-btn:hover { transform: translateY(-4px) !important; box-shadow: 0 15px 30px rgba(37,211,102,0.15) !important; background: rgba(240,253,244,1) !important; border-color: #25d366 !important; }
.light-mode .p3-wa-name { color: #0f172a !important; }
.light-mode .p3-wa-btn .p3-mono { text-shadow: none !important; }
.light-mode .p3-wa-btn img { filter: none !important; }

/* Light Mode Priority Contact Overrides (Blue Light) */
.light-mode .p3-wa-btn-priority { background: linear-gradient(135deg, #fff, #e0f2fe) !important; border-color: rgba(14,165,233,0.5) !important; box-shadow: 0 10px 25px rgba(14,165,233,0.15) !important; animation: priorityPulseLightBlue 2s infinite alternate; }
.light-mode .p3-wa-btn-priority::before { background: #0ea5e9 !important; }
.light-mode .p3-wa-btn-priority:hover { transform: scale(1.15) translateY(-5px) !important; border-color: #0ea5e9 !important; box-shadow: 0 15px 35px rgba(14,165,233,0.3) !important; }
.light-mode .p3-wa-btn-priority .p3-mono { color: #0284c7 !important; }
.light-mode .priority-badge { background: #0ea5e9; color: #fff; box-shadow: 0 5px 15px rgba(14,165,233,0.4); }
@keyframes priorityPulseLightBlue { 0% { box-shadow: 0 5px 15px rgba(14,165,233,0.1); } 100% { box-shadow: 0 15px 30px rgba(14,165,233,0.3); border-color: rgba(14,165,233,0.8); } }

/* Light Mode Footer Override (Blue Light) */
.light-mode .p3-footer { background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important; border-top: 1px solid rgba(14,165,233,0.3) !important; }
.light-mode .p3-footer::before { background: linear-gradient(90deg, transparent, #0ea5e9, transparent) !important; box-shadow: 0 0 15px rgba(14,165,233,0.4) !important; }
.light-mode .p3-footer-brand p, .light-mode .p3-footer-col p { color: #334155 !important; }
.light-mode .p3-footer-col h4 { color: #0f172a !important; }
.light-mode .p3-footer-col ul li a { color: #475569 !important; }
.light-mode .p3-footer-col ul li a:hover { color: #0ea5e9 !important; }
.light-mode .p3-footer-logo { filter: drop-shadow(0 0 5px rgba(14,165,233,0.2)) !important; }
.light-mode .p3-footer-bottom .p3-mono { color: #64748b !important; }
.light-mode .p3-footer-social a img { filter: grayscale(100%) opacity(0.6) !important; }
.light-mode .p3-footer-social a:hover img { filter: grayscale(0%) opacity(1) !important; }

/* ==========================================================================
   ECO MODE OVERRIDES (FREEZE ALL MECHATRONIC GRAPHICS & BACKGROUND ANIMATIONS)
   ========================================================================== */
body.eco-mode .p3-career-bg-light *,
body.eco-mode .p3-career-bg-dark *,
body.light-mode.eco-mode .p3-career-bg-light *,
body.eco-mode:not(.light-mode) .p3-career-bg-dark * {
  animation: none !important;
}

body.eco-mode .p3-journey-lm-anim *,
body.eco-mode .p3-journey-dm-anim *,
body.eco-mode .p3-journey-lm-perf *,
body.eco-mode .p3-journey-dm-perf *,
body.eco-mode .p3-timeline-card *,
body.eco-mode .p3-timeline-track * {
  animation: none !important;
}

body.eco-mode .lf-protractor,
body.eco-mode .p3-header-mecha-wrapper *,
body.eco-mode .p3-skills-header-grid *,
body.eco-mode .grid-laser-x,
body.eco-mode .grid-laser-y,
body.eco-mode .p3-flowchart-wrap *,
body.eco-mode .p3-salary-bar-wrap *,
body.eco-mode .p3-salary-bar,
body.eco-mode .p3-bar-glow,
body.eco-mode .p3-cta-bg-light *,
body.eco-mode .p3-cta-bg-dark *,
body.eco-mode .p3-footer-bg-light *,
body.eco-mode .p3-footer-bg-dark *,
body.eco-mode .p3-pillar-card,
body.eco-mode .p3-pillar-card *,
body.eco-mode .p3-pillar-icon,
body.eco-mode .p3-pillar-icon *,
body.eco-mode .p3-hero,
body.eco-mode .p3-hero *,
body.eco-mode .p3-auto-bg *,
body.eco-mode .p3-gear-cluster,
body.eco-mode .p3-gear-cluster *,
body.eco-mode .p3-fwrench,
body.eco-mode .p3-conveyor,
body.eco-mode .p3-conveyor *,
body.eco-mode .p3-plc,
body.eco-mode .p3-plc *,
body.eco-mode .p3-sparks,
body.eco-mode .p3-sparks *,
body.eco-mode .p3-reach,
body.eco-mode .p3-reach *,
body.eco-mode .p3-scanlines,
body.eco-mode .p3-robot-arm-wrap,
body.eco-mode .p3-robot-arm-wrap *,
body.eco-mode .p3-badge-dot,
body.eco-mode .p3-glitch,
body.eco-mode .p3-glitch::before,
body.eco-mode .p3-glitch::after,
body.eco-mode .p3-cursor,
body.eco-mode .p3-hero-stats,
body.eco-mode .p3-stat-num,
body.eco-mode .p3-scroll-line,
body.eco-mode .p3-accel-tunnel,
body.eco-mode .p3-accel-tunnel *,
body.eco-mode .p3-pillars::after,
body.eco-mode .p3-pillar-card::before,
body.eco-mode .p3-pillar-card::after,
body.eco-mode .p3-pillar-icon::before,
body.eco-mode .p3-pillar-icon::after,
body.eco-mode .p3-eclipse-sphere,
body.eco-mode .p3-eclipse-corona,
body.eco-mode .p3-topo-laser-floor,
body.eco-mode .p3-topo-laser-roof,
body.eco-mode .p3-lens-flare,
body.eco-mode .p3-ember-storm,
body.eco-mode .node-spinner,
body.eco-mode .p3-holo-emoji,
body.eco-mode .p3-req-icon,
body.eco-mode .p3-req-item {
  animation: none !important;
  transition: none !important;
}

/* Also disable active hover transformations in eco-mode that trigger heavy updates */
body.eco-mode .p3-pillar-card:hover,
body.eco-mode .p3-flip-card:hover .p3-flip-inner,
body.eco-mode .p3-industry-card:hover .p3-ind-tilt-inner,
body.eco-mode .p3-req-item:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Completely freeze mousemove-based tilt and parallax offsets under Eco Mode */
body.eco-mode .p3-flip-inner {
  transform: none !important;
  transition: none !important;
}
body.eco-mode .p3-eclipse-core {
  transform: translate(-50%, -50%) !important;
  transition: none !important;
}
body.eco-mode .p3-lens-flare {
  transform: rotate(-15deg) translateY(-50%) !important;
  transition: none !important;
}

/* Completely hide GPU-heavy background elements in the Journey Section and Phase Cards in Eco Mode */
body.eco-mode .p3-journey-lm-anim,
body.eco-mode .p3-journey-dm-anim,
body.eco-mode .p3-hud-lm-bg,
body.eco-mode .p3-particles-container,
body.eco-mode .p3-hud-radar,
body.eco-mode .p3-hud-glitch-layer,
body.eco-mode .p3-hud-bg-wireframe,
body.eco-mode .p3-hud-ruler,
body.eco-mode .p3-journey-ambient,
body.eco-mode .p3-p1-hor-laser,
body.eco-mode .p3-p1-grid-floor,
body.eco-mode .p3-p1-core-engine,
body.eco-mode .p3-p1-data-stream,
body.eco-mode .p3-p1-hex-particles,
body.eco-mode .p3-p1-sonar-ping,
body.eco-mode .p3-p1-energy-pulse,
body.eco-mode .p3-p1-circuit-traces,
body.eco-mode .p3-p1-diag-wipe,
body.eco-mode .p3-p1-data-waterfall,
body.eco-mode .p3-p1-holo-badge,
body.eco-mode .p3-p1-ticker,
body.eco-mode .p3-p1-ekg,
body.eco-mode .p3-p1-hex-reticle,
body.eco-mode .p3-p1-glitch-flash,
body.eco-mode .p3-p1-signal-bars,
body.eco-mode .p3-p2-gear-system,
body.eco-mode .p3-p2-blueprint-grid,
body.eco-mode .p3-p2-oscilloscope,
body.eco-mode .p3-p2-thermal-gauge,
body.eco-mode .p3-p2-beacon,
body.eco-mode .p3-p2-compass,
body.eco-mode .p3-p2-uplink-ticker,
body.eco-mode .p3-p2-stamp,
body.eco-mode .p3-p2-hor-sweep,
body.eco-mode .p3-p2-diag-hatching,
body.eco-mode .p3-p3-atomic-orbitals,
body.eco-mode .p3-p3-dna-helix,
body.eco-mode .p3-p3-plasma-nebula,
body.eco-mode .p3-p3-neural-net,
body.eco-mode .p3-p3-matrix-rain,
body.eco-mode .p3-tc-glow,
body.eco-mode .p3-tc-scanline,
body.eco-mode .p3-tc-noise,
body.eco-mode .p3-tc-mesh,
body.eco-mode .p3-tc-tracker,
body.eco-mode .p3-industries-bg,
body.eco-mode .p3-industries-dm-perf,
body.eco-mode .p3-industries-bg-light,
body.eco-mode .p3-skills-header-grid,
body.eco-mode .p3-career-bg-light,
body.eco-mode .p3-career-bg-dark,
body.eco-mode .p3-footer-bg-light,
body.eco-mode .p3-footer-bg-dark,
body.eco-mode .p3-footer-circuit {
  display: none !important;
}