/* ═══════════════════════════════════════════════════════════════
   PROGRAM 2 — INDUSTRIAL ELECTRONICS
   "GREEN MOTHERBOARD" DESIGN SYSTEM
   Part 1: Design Tokens + Base + Typography + Utilities
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS (Dark Mode Default) ── */
:root {
  /* PCB Substrate */
  --p2-bg-deep: #050a06;
  --p2-bg: #071a0e;
  --p2-bg-mid: #0f3d1e;
  --p2-bg-card: #0c2814;
  --p2-bg-surface: #112e1a;

  /* Accent Colors */
  --p2-green: #00ff41;
  --p2-green-dim: #00cc34;
  --p2-green-muted: rgba(0, 255, 65, 0.15);
  --p2-copper: #c87533;
  --p2-copper-light: #d4915c;
  --p2-copper-dim: rgba(200, 117, 51, 0.3);
  --p2-solder: #c8d6e5;
  --p2-amber: #ffbe0b;
  --p2-amber-dim: rgba(255, 190, 11, 0.15);
  --p2-red: #ff3333;

  /* Text */
  --p2-text: #ffffff;
  --p2-text-dim: #bacbc2;
  --p2-text-muted: #8ba89b;

  /* Borders */
  --p2-border: rgba(0, 255, 65, 0.12);
  --p2-border-copper: rgba(200, 117, 51, 0.25);

  /* Shadows */
  --p2-glow-green: 0 0 20px rgba(0, 255, 65, 0.15), 0 0 60px rgba(0, 255, 65, 0.05);
  --p2-glow-copper: 0 0 20px rgba(200, 117, 51, 0.2);

  /* Transitions */
  --p2-transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index layers */
  --p2-z-modal: 10000;
  --p2-z-mode-panel: 9000;
  --p2-z-nav: 1000;
  --p2-z-topbar: 1001;
  --p2-z-boot: 9999;
}

/* ── RESET & BASE ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.p2-body {
  font-family: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--p2-bg-deep);
  color: var(--p2-text);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--p2-transition), color var(--p2-transition);
}

/* ── TYPOGRAPHY ── */
.p2-fira {
  font-family: 'Fira Code', 'Courier New', monospace;
}

.p2-cta {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0;
  background: var(--p2-bg);
  overflow: hidden;
}

/* ── CTA BACKGROUND ── */
.p2-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* PCB Grid */
.p2-cta-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--p2-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--p2-border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 70%);
}

/* SVG Circuit Traces */

/* Radial Surge */
.p2-cta-surge {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(0, 255, 65, 0.06) 0%, transparent 50%);
  animation: p2-cta-surge-pulse 4s ease-in-out infinite alternate;
  transition: background 0.4s ease;
}

@keyframes p2-cta-surge-pulse {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Floating Particles */

/* ── CTA CONTENT ── */
.p2-cta-content {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

/* Power Icon with Rings */
.p2-cta-icon {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p2-cta-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--p2-green);
  transition: all 0.4s ease;
}

.p2-cta-ring-1 {
  width: 120px;
  height: 120px;
  opacity: 0.15;
  animation: p2-cta-ring-spin 12s linear infinite;
  border-style: dashed;
}

.p2-cta-ring-2 {
  width: 96px;
  height: 96px;
  opacity: 0.25;
  animation: p2-cta-ring-spin 8s linear infinite reverse;
}

.p2-cta-ring-3 {
  width: 76px;
  height: 76px;
  opacity: 0.35;
  animation: p2-cta-ring-breathe 3s ease-in-out infinite alternate;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.15);
}

@keyframes p2-cta-ring-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes p2-cta-ring-breathe {
  0% {
    transform: scale(0.95);
    opacity: 0.2;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.1);
  }

  100% {
    transform: scale(1.05);
    opacity: 0.4;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.2);
  }
}

.p2-cta-power-svg {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.4));
  animation: p2-led-pulse 3s ease-in-out infinite;
}

/* Text Glass Box */
.p2-cta-text-glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 32px 24px;
  margin: 0 auto 36px;
  max-width: 650px;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 5;
}

:not(.light-mode) .p2-cta-text-glass {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.05);
}

/* Title */
.p2-cta-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--p2-text);
  margin-bottom: 16px;
  line-height: 1.2;
}

/* Subtitle */
.p2-cta-sub {
  font-size: 0.95rem;
  color: var(--p2-text-dim);
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Primary CTA Actions */
.p2-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.p2-btn-lg {
  padding: 16px 36px;
  font-size: 1rem;
}

/* ── WHATSAPP CONTACT CARDS ── */
.p2-cta-wa-row {
  margin-bottom: 40px;
}

.p2-cta-wa-heading {
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--p2-text-dim);
  margin-bottom: 20px;
  opacity: 0.6;
}

.p2-cta-wa-cards {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.p2-wa-card {
  position: relative;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--p2-border);
  border-radius: 12px;
  padding: 18px 24px;
  min-width: 180px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.p2-wa-card:hover {
  transform: translateY(-4px);
  border-color: #25d366;
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.15), 0 0 0 1px rgba(37, 211, 102, 0.2);
  background: rgba(37, 211, 102, 0.05);
}

.p2-wa-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.p2-wa-icon {
  border-radius: 6px;
  flex-shrink: 0;
}

.p2-wa-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.p2-wa-name {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--p2-text);
}

.p2-wa-num {
  font-size: 0.75rem;
  color: var(--p2-text-dim);
  letter-spacing: 1px;
}

/* Priority Card — Kalai */
.p2-wa-priority {
  border-color: var(--p2-amber);
  background: rgba(255, 176, 0, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 176, 0, 0.15);
}

.p2-wa-priority:hover {
  border-color: var(--p2-amber);
  box-shadow: 0 8px 30px rgba(255, 176, 0, 0.15), 0 0 0 1px rgba(255, 176, 0, 0.3);
  background: rgba(255, 176, 0, 0.06);
}

.p2-wa-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 2px 10px;
  background: var(--p2-amber);
  color: #000;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 4px;
  animation: p2-wa-badge-shimmer 3s ease-in-out infinite;
}

@keyframes p2-wa-badge-shimmer {

  0%,
  100% {
    box-shadow: 0 0 5px rgba(255, 176, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 15px rgba(255, 176, 0, 0.5), 0 0 30px rgba(255, 176, 0, 0.2);
  }
}

/* ── CONTACT INFO PANEL ── */
.p2-cta-info-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 32px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--p2-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.p2-cta-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--p2-text-dim);
}

.p2-cta-info-item svg {
  flex-shrink: 0;
  opacity: 0.5;
  color: var(--p2-green);
}

.p2-cta-info-item a {
  color: var(--p2-text-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.p2-cta-info-item a:hover {
  color: var(--p2-green);
}

.p2-cta-info-divider {
  width: 1px;
  height: 20px;
  background: var(--p2-border);
}

/* ── DARK MODE OVERRIDES ── */
:not(.light-mode) .p2-wa-card {
  background: rgba(255, 255, 255, 0.03);
}

:not(.light-mode) .p2-cta-info-panel {
  background: rgba(255, 255, 255, 0.03);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .p2-cta-wa-cards {
    flex-direction: column;
    align-items: center;
  }

  .p2-wa-card {
    width: 100%;
    max-width: 280px;
  }

  .p2-cta-info-panel {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }

  .p2-cta-info-divider {
    width: 60%;
    height: 1px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CTA — LIGHT PERFORMANCE MODE HOVER ENHANCEMENTS
   (Only when hovering the CTA section in light perf mode)
   ═══════════════════════════════════════════════════════════════ */

/* Power Icon — rings glow intensifies smoothly */

/* SVG Traces — brighter */

/* Junction Nodes — pulse bigger */

/* Surge — intensify */

/* Grid — brighter */

/* Title — glow */

/* Overline — flicker */

/* Enroll Button — glow */

/* WhatsApp Cards — enhanced hover */

/* Priority Badge — glow stronger smoothly */

/* WhatsApp icon — bounce */

/* Contact Panel — glow */

/* WA heading — color shift */

/* ═══════════════════════════════════════════════════════════════
   CTA — MISSING COMPONENT CIRCUIT BG (Perf Mode Only)
   ═══════════════════════════════════════════════════════════════ */

/* Hidden by default */

/* Show only in light performance mode */

/* ── Circuit Traces ── */

/* ── Central IC Gap (the missing component) ── */

/* ── Spark Arcs (trying to bridge the gap) ── */

/* ── Data Packets ── */

/* ── Error Rings (appear after spark fails) ── */

/* ── Junction Nodes ── */

/* ── "SIGNAL LOST" Labels ── */

/* ── HOVER ENHANCEMENTS (Perf Mode only) ── */

/* Traces brighten smoothly */

/* Gap pulses brighter */

/* Junctions brighter */

/* Hide standard Perf circuit in Turbo Mode */

/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
   CTA — OVERCLOCK MODE CIRCUIT BG (Turbo Mode Only)
   â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */

/* Hidden by default */

/* Show ONLY in overclock perf mode */

/* ── Base State: Broken & Chaotic ── */

/* Fixed Elements (Hidden in base state) */

/* ── HOVER STATE (Almost Fixed) ── */
/* Triggered when hovering over interactive elements */

/* ── CLICK STATE (Completely Fixed - 10s via .is-fixed class) ── */

/* ── Turbo Mode Interactive Nodes (Corners) ── */

/* Hover Interaction */

/* Connecting laser line on hover */

.p2-green {
  color: var(--p2-green);
}

.p2-copper {
  color: var(--p2-copper);
}

.p2-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
  position: relative;
}

/* ── SECTION SHARED ── */
.p2-section-trace {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--p2-copper), transparent);
  transform: translateX(-50%);
}

.p2-section-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 80px);
  position: relative;
}

.p2-overline {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--p2-green);
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.7;
}

.p2-section-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--p2-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.p2-section-sub {
  font-size: 0.8rem;
  color: var(--p2-text-dim);
  margin-top: 12px;
  letter-spacing: 2px;
}

/* ── LED INDICATOR ── */
.p2-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p2-green);
  box-shadow: 0 0 6px var(--p2-green), 0 0 12px rgba(0, 255, 65, 0.3);
  animation: p2-led-pulse 2s ease-in-out infinite;
}

.p2-led-amber {
  background: var(--p2-amber);
  box-shadow: 0 0 6px var(--p2-amber), 0 0 12px rgba(255, 190, 11, 0.3);
}

/* ── SOLDER DOT (bullet) ── */
.p2-solder-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p2-solder);
  margin-right: 12px;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(200, 214, 229, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS — FOUNDATION
   ═══════════════════════════════════════════════════════════════ */

@keyframes p2-led-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes p2-trace-flow {
  0% {
    stroke-dashoffset: 100;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes p2-cursor-blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

@keyframes p2-float {

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

  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}

@keyframes p2-signal-pulse {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

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

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes p2-current-flow {
  0% {
    cy: 40;
    opacity: 1;
  }

  100% {
    cy: 310;
    opacity: 0.3;
  }
}

@keyframes p2-glow-breathe {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.8;
  }
}

@keyframes p2-scroll-line {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

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

@keyframes p2-rail-pulse {
  0% {
    left: -10%;
  }

  100% {
    left: 110%;
  }
}

@keyframes p2-chip-place {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes p2-badge-sweep {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }

  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

@keyframes p2-hdd-led {

  0%,
  10% {
    opacity: 1;
    box-shadow: 0 0 15px var(--p2-green);
    transform: scale(1);
  }

  12%,
  18% {
    opacity: 0.2;
    box-shadow: none;
    transform: scale(0.8);
  }

  20%,
  30% {
    opacity: 1;
    box-shadow: 0 0 25px var(--p2-green);
    transform: scale(1.1);
  }

  32%,
  35% {
    opacity: 0.2;
    box-shadow: none;
    transform: scale(0.8);
  }

  37%,
  45% {
    opacity: 1;
    box-shadow: 0 0 15px var(--p2-green);
    transform: scale(1);
  }

  47%,
  80% {
    opacity: 0.1;
    box-shadow: none;
    transform: scale(0.8);
  }

  85%,
  100% {
    opacity: 1;
    box-shadow: 0 0 15px var(--p2-green);
    transform: scale(1);
  }
}

@keyframes p2-title-glitch-luxury {

  0%,
  95%,
  100% {
    transform: translate(0);
    text-shadow: 0 0 20px rgba(0, 255, 65, 0.6);
  }

  96% {
    transform: translate(-3px, 2px);
    text-shadow: -4px 0 rgba(255, 0, 0, 0.8), 4px 0 rgba(0, 255, 255, 0.8);
  }

  97% {
    transform: translate(3px, -2px);
    text-shadow: 4px 0 rgba(255, 0, 0, 0.8), -4px 0 rgba(0, 255, 255, 0.8);
  }

  98% {
    transform: translate(0);
    text-shadow: 0 0 50px rgba(0, 255, 65, 1), 0 0 80px rgba(0, 255, 65, 0.8);
  }

  99% {
    transform: translate(-2px, 2px);
    text-shadow: -3px 0 rgba(255, 0, 0, 0.8), 3px 0 rgba(0, 255, 255, 0.8);
  }
}

@keyframes p2-lcd-flicker {

  0%,
  90%,
  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 15px rgba(0, 255, 65, 0.4);
  }

  92% {
    opacity: 0.3;
    transform: scale(0.96);
  }

  94% {
    opacity: 1;
    text-shadow: 0 0 50px rgba(0, 255, 65, 1);
    transform: scale(1.1);
  }

  96% {
    opacity: 0.5;
  }

  98% {
    opacity: 1;
    transform: scale(1.05);
    text-shadow: 0 0 30px rgba(0, 255, 65, 0.8);
  }
}

@keyframes p2-liquid-sweep {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes p2-surge-line {
  0% {
    transform: scaleX(0);
    transform-origin: left;
    opacity: 1;
    box-shadow: 0 0 10px var(--p2-green);
  }

  40% {
    transform: scaleX(1);
    transform-origin: left;
    opacity: 1;
    box-shadow: 0 0 40px var(--p2-green);
  }

  41% {
    transform-origin: right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: right;
    opacity: 0;
  }
}

@keyframes p2-matrix-glow {

  0%,
  100% {
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.2);
  }

  50% {
    text-shadow: 0 0 20px rgba(0, 255, 65, 0.8);
    color: #fff;
  }
}

@keyframes p2-holo-wobble-extreme {

  0%,
  100% {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(0);
    box-shadow: 0 15px 50px rgba(0, 255, 65, 0.1), 0 0 0 1px rgba(0, 255, 65, 0.2);
  }

  25% {
    transform: perspective(1200px) rotateX(3deg) rotateY(2deg) translateY(-8px);
    box-shadow: 15px 25px 60px rgba(0, 255, 65, 0.2), 0 0 0 1px rgba(0, 255, 65, 0.4);
  }

  50% {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(-15px);
    box-shadow: 0 30px 80px rgba(0, 255, 65, 0.3), 0 0 0 1px rgba(0, 255, 65, 0.5);
  }

  75% {
    transform: perspective(1200px) rotateX(-3deg) rotateY(-2deg) translateY(-8px);
    box-shadow: -15px 25px 60px rgba(0, 255, 65, 0.2), 0 0 0 1px rgba(0, 255, 65, 0.4);
  }
}

@keyframes p2-btn-pulse-extreme {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.8), 0 0 20px rgba(0, 255, 65, 0.5);
  }

  70% {
    box-shadow: 0 0 0 30px rgba(0, 255, 65, 0), 0 0 60px rgba(0, 255, 65, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 65, 0), 0 0 20px rgba(0, 255, 65, 0);
  }
}

/* ═══════════════════════════════════════════════════════════════
   OVERCLOCK MODAL
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MODE PANEL (Floating)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════ */

.p2-topbar {
  background: var(--p2-bg-deep);
  border-bottom: 1px solid var(--p2-border);
  z-index: var(--p2-z-topbar);
  position: relative;
}

.p2-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.p2-topbar-left,
.p2-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p2-topbar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--p2-text-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.p2-topbar-item:hover {
  color: var(--p2-green);
}

.p2-topbar-item svg {
  color: var(--p2-green);
  opacity: 0.7;
}

.p2-topbar-div {
  width: 1px;
  height: 14px;
  background: var(--p2-border);
}

.p2-topbar-social {
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.p2-topbar-social:hover {
  opacity: 1;
}

.p2-topbar-social img {
  width: 16px;
  height: 16px;
}

.p2-topbar-wa {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #25d366;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.7rem;
  transition: opacity 0.2s;
}

.p2-topbar-wa:hover {
  opacity: 0.8;
}

.p2-topbar-wa img {
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════ */

.p2-nav {
  position: sticky;
  top: 0;
  z-index: var(--p2-z-nav);
  background: rgba(7, 26, 14, 0.92);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--p2-border);
  transition: background var(--p2-transition);
}

.p2-nav-trace {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--p2-copper) 20%, var(--p2-green) 50%, var(--p2-copper) 80%, transparent 100%);
  opacity: 0.4;
}

.p2-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 64px;
}

.p2-nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.p2-nav-logo img {
  height: 56px;
  width: auto;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all var(--p2-transition);
}

.light-mode .p2-nav-logo img {
  background: transparent;
  box-shadow: none;
}

.p2-nav-logo-text {
  display: flex;
  flex-direction: column;
}

.p2-nav-brand {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--p2-text);
  line-height: 1.2;
}

.p2-nav-tagline {
  font-size: 0.65rem;
  color: var(--p2-text-muted);
  letter-spacing: 1px;
}

.p2-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin-left: auto;
}

.p2-nav-link {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: var(--p2-text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s;
  position: relative;
}

.p2-nav-link:hover,
.p2-nav-link.active {
  color: var(--p2-green);
  background: var(--p2-green-muted);
}

/* Dropdown */
.p2-nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.p2-dropdown-toggle {
  background: none;
  border: none;
  color: var(--p2-text-dim);
  cursor: pointer;
  padding: 6px 4px;
  margin-left: -4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.p2-dropdown-toggle:hover {
  color: var(--p2-green);
}

.p2-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 320px;
  background: rgba(7, 26, 14, 0.97);
  border: 1px solid var(--p2-border);
  border-radius: 8px;
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.p2-nav-dropdown:hover .p2-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.p2-dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--p2-text-dim);
  text-decoration: none;
  font-size: 0.82rem;
  border-radius: 6px;
  transition: all 0.2s;
}

.p2-dropdown-menu li a:hover,
.p2-dropdown-menu li a.p2-dd-current {
  background: var(--p2-green-muted);
  color: var(--p2-green);
}

.p2-dd-icon {
  font-size: 1.1rem;
}

/* Nav CTA */
.p2-nav-cta-wrap {
  margin-left: 8px;
}

.p2-btn-nav-enroll {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--p2-green);
  color: #000;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 6px;
  transition: all 0.25s;
}

.p2-btn-nav-enroll:hover {
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
  transform: translateY(-1px);
}

.p2-nav-logo {
  order: 1;
}

.p2-nav-links {
  order: 2;
}

.p2-toggle-cluster {
  order: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 255, 65, 0.03);
  border: 1px solid var(--p2-border);
  border-radius: 30px;
  padding: 6px 16px;
  margin-left: 20px;
  transition: all 0.3s ease;
}

.p2-toggle-cluster:hover {
  background: rgba(0, 255, 65, 0.06);
  border-color: rgba(0, 255, 65, 0.25);
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
}

.light-mode .p2-toggle-cluster {
  background: rgba(200, 117, 51, 0.04);
  border-color: var(--p2-border-copper);
}

.light-mode .p2-toggle-cluster:hover {
  background: rgba(200, 117, 51, 0.08);
  border-color: rgba(200, 117, 51, 0.4);
  box-shadow: 0 0 15px rgba(200, 117, 51, 0.1);
}

.p2-toggle-cluster .p2-theme-switch {
  margin-left: 0;
}

.p2-hamburger {
  order: 4;
}

/* Theme Switch (Circuit Breaker) */
.p2-theme-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  cursor: pointer;
}

.p2-switch-track {
  width: 40px;
  height: 22px;
  background: var(--p2-bg-mid);
  border: 1px solid var(--p2-border);
  border-radius: 11px;
  position: relative;
  transition: all 0.3s;
}

/* Boot Switch Overrides (beats default and light-mode styles) */
body #p2BootSwitch:not(.off) .p2-switch-thumb {
  left: 20px;
  background: var(--p2-green);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
  transform: none;
}

body #p2BootSwitch.off .p2-switch-track {
  background: var(--p2-bg-mid);
  border-color: rgba(255, 51, 51, 0.5);
}

body #p2BootSwitch.off .p2-switch-thumb {
  left: 2px;
  background: var(--p2-red);
  box-shadow: 0 0 5px rgba(255, 51, 51, 0.5);
  transform: none;
}

.p2-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--p2-green);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
  transition: all 0.3s;
}

.light-mode .p2-switch-thumb {
  left: 20px;
  background: var(--p2-amber);
  box-shadow: 0 0 8px rgba(255, 190, 11, 0.5);
}

.p2-switch-label {
  font-size: 0.65rem;
  color: var(--p2-text-muted);
  letter-spacing: 2px;
}

/* Hamburger */
.p2-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.p2-hamburger span {
  width: 24px;
  height: 2px;
  background: var(--p2-green);
  transition: all 0.3s;
}

/* ═══════════════════════════════════════════════════════════════
   §1 HERO — BOOT SEQUENCE
   ═══════════════════════════════════════════════════════════════ */
.p2-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 0 80px;
}

/* Boot Overlay */
.p2-boot-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--p2-z-boot);
  background: #000;
  display: flex;
  align-items: flex-start;
  padding: 60px;
  transition: opacity 0.8s ease;
}

.p2-boot-overlay.done {
  opacity: 0;
  pointer-events: none;
}

/* Instantly hide overlay if user turned off boot sequence */
.p2-boot-off .p2-boot-overlay {
  display: none !important;
}

.p2-boot-screen {
  max-width: 700px;
}

.p2-boot-line {
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  color: var(--p2-green);
  line-height: 1.8;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s, transform 0.3s;
}

.p2-boot-line.visible {
  opacity: 1;
  transform: translateX(0);
}

.p2-boot-go.visible {
  color: #fff;
  font-weight: 700;
}

/* PCB Background */
.p2-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p2-pcb-substrate {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(15, 61, 30, 0.4) 0%, transparent 70%), var(--p2-bg-deep);
}

.p2-pcb-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.p2-pcb-traces-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.p2-trace {
  stroke-dasharray: 8 4;
  animation: p2-trace-flow 3s linear infinite;
}

.p2-trace.t-main {
  stroke-dasharray: 12 6;
}

.p2-spad {
  opacity: 0.5;
}

.p2-via {
  opacity: 0.4;
}

/* Floating Components */

/* Hero Content */
.p2-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
}

.p2-hero-content.revealed {
  opacity: 1;
  transform: translateY(0);
}

.p2-hero-badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  border-radius: 50px;
  background: var(--p2-green-muted);
  margin-bottom: 30px;
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--p2-green);
  border: 1px solid var(--p2-border);
  animation: p2-float 6s ease-in-out infinite, p2-matrix-glow 4s infinite alternate;
}

.p2-hero-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 30px;
  background: rgba(0, 255, 65, 0.4);
  filter: blur(10px);
  animation: p2-badge-sweep 2.5s infinite linear;
  pointer-events: none;
}

.p2-hero-badge .p2-led {
  animation: p2-hdd-led 2s infinite;
}

.p2-badge-sep {
  opacity: 0.3;
}

.p2-hero-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--p2-text);
}

.p2-solder-text {
  display: inline-block;
  position: relative;
  animation: p2-title-glitch-luxury 5s infinite;
  animation-delay: calc(var(--delay, 0) * 0.5s);
}

.p2-solder-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 15px var(--p2-green), 0 0 30px var(--p2-green);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: p2-surge-line 3s infinite cubic-bezier(0.77, 0, 0.17, 1);
}

.p2-green {
  color: var(--p2-green);
}

.p2-hero-sub {
  position: relative;
  font-size: 0.95rem;
  color: var(--p2-text-dim);
  margin-bottom: 40px;
  min-height: 1.5em;
  letter-spacing: 1px;
  animation: p2-matrix-glow 4s infinite alternate;
}

.p2-cursor {
  color: var(--p2-green);
  animation: p2-cursor-blink 1s step-end infinite;
}

/* Stats Ribbon */
.p2-hero-stats {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  border: 1px solid var(--p2-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(7, 26, 14, 0.6);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  animation: p2-holo-wobble-extreme 10s ease-in-out infinite;
  transform-style: preserve-3d;
}

.p2-hero-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%, transparent 100%);
  background-size: 300% 300%;
  animation: p2-stats-sweep 3s infinite linear;
  pointer-events: none;
  z-index: 10;
}

.p2-hstat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}

.p2-hstat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--p2-green);
  transition: width 0.3s;
}

.p2-hstat:hover::after {
  width: 100%;
}

.p2-hstat:hover {
  background: var(--p2-green-muted);
}

.p2-hstat-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.p2-hstat-prefix {
  font-size: 0.9rem;
  color: var(--p2-green);
  font-weight: 700;
  animation: p2-glow-breathe 3s infinite ease-in-out;
}

.p2-hstat-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--p2-green);
  line-height: 1;
  display: inline-block;
  animation: p2-lcd-flicker 4s infinite;
}

.p2-hstat-unit {
  font-size: 0.75rem;
  color: var(--p2-text-muted);
  margin-top: 6px;
  font-weight: 500;
}

.p2-hstat-label {
  font-size: 0.8rem;
  color: var(--p2-text-dim);
  margin-top: 6px;
  font-weight: 600;
}

.p2-hstat-div {
  width: 1px;
  background: var(--p2-border);
  align-self: stretch;
  opacity: 0.5;
}

/* CTA Buttons */
.p2-hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.p2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
}

.p2-btn-primary {
  background: linear-gradient(90deg, var(--p2-green), var(--p2-copper-light), var(--p2-green));
  background-size: 200% 200%;
  color: #000;
  border: none;
  animation: p2-liquid-sweep 3s ease infinite, p2-btn-pulse-extreme 2.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

.p2-btn-primary:hover {
  box-shadow: 0 0 35px rgba(0, 255, 65, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px) scale(1.02);
  animation: none;
}

.p2-btn-outline {
  background: transparent;
  color: var(--p2-green);
  border-color: var(--p2-green);
  position: relative;
  overflow: hidden;
  animation: p2-title-glitch-luxury 6s infinite;
}

.p2-btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.2);
  animation: p2-glow-breathe 2s infinite ease-in-out;
  pointer-events: none;
}

.p2-btn-outline::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.4), transparent);
  animation: p2-badge-sweep 2.5s infinite linear;
  animation-delay: 1s;
  pointer-events: none;
  filter: blur(4px);
}

.p2-btn-outline:hover {
  background: var(--p2-green-muted);
  box-shadow: 0 0 25px rgba(0, 255, 65, 0.3);
  transform: translateY(-3px) scale(1.02);
  animation: none;
}

/* Scroll Hint */
.p2-scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.p2-scroll-trace {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--p2-green), transparent);
  animation: p2-scroll-line 1.5s ease-in-out infinite;
}

.p2-scroll-hint .p2-fira {
  font-size: 0.6rem;
  color: var(--p2-text-muted);
  letter-spacing: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   §2 OVERVIEW — SYSTEM INFORMATION
   ═══════════════════════════════════════════════════════════════ */
.p2-overview {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--p2-bg);
}

.p2-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  align-items: start;
}

/* BIOS Panel */
@keyframes p2-bios-vertical-scan {
  0% {
    top: -20%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 120%;
    opacity: 0;
  }
}

@keyframes p2-badge-throb {
  0% {
    box-shadow: 0 0 5px rgba(0, 255, 65, 0.2);
  }

  100% {
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.8);
    border-color: #fff;
  }
}

@keyframes p2-data-flicker {

  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
  }

  3%,
  5% {
    opacity: 0.3;
    text-shadow: none;
  }

  4%,
  6% {
    opacity: 1;
    text-shadow: 0 0 15px #0f0;
  }
}

@keyframes p2-sch-led-flash {
  0% {
    fill: rgba(0, 255, 65, 0.1);
    filter: drop-shadow(0 0 2px rgba(0, 255, 65, 0.2));
  }

  100% {
    fill: rgba(0, 255, 65, 0.9);
    filter: drop-shadow(0 0 20px #0f0);
  }
}

@keyframes p2-sch-radar-sweep {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

@keyframes p2-panel-breathe {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.1), inset 0 0 10px rgba(0, 255, 65, 0.1);
    border-color: var(--p2-green);
  }

  50% {
    box-shadow: 0 0 40px rgba(0, 255, 65, 0.3), inset 0 0 25px rgba(0, 255, 65, 0.2);
    border-color: rgba(0, 255, 65, 0.8);
  }
}

@keyframes p2-row-pulse {

  0%,
  100% {
    opacity: 0.8;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(4px);
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
  }
}

.p2-bios-panel {
  position: relative;
  background: #000;
  border: 2px solid var(--p2-green);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.1), inset 0 0 10px rgba(0, 255, 65, 0.1);
  animation: p2-panel-breathe 4s infinite ease-in-out;
}

.p2-bios-panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 15px;
  background: linear-gradient(to bottom, transparent, rgba(0, 255, 65, 0.6), transparent);
  animation: p2-bios-vertical-scan 3s linear infinite;
  pointer-events: none;
  z-index: 10;
}

.p2-bios-titlebar {
  background: var(--p2-green);
  color: #000;
  padding: 12px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #000;
  box-shadow: 0 2px 10px rgba(0, 255, 65, 0.2);
}

.p2-bios-dot {
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  animation: p2-led-pulse 1s infinite alternate;
}

.p2-bios-body {
  padding: 24px 24px 24px 34px;
  position: relative;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 65, 0.03) 3px, rgba(0, 255, 65, 0.03) 4px);
}

.p2-bios-body::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: var(--p2-copper);
  opacity: 0.6;
}

.p2-bios-body::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 30px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--p2-green);
  box-shadow: 0 0 10px var(--p2-green);
  animation: p2-led-pulse 1.5s infinite alternate;
}

.p2-bios-table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  z-index: 1;
}

.p2-bios-table tr {
  border-bottom: 1px dashed rgba(0, 255, 65, 0.2);
  transition: background 0.2s;
  animation: p2-row-pulse 4s infinite ease-in-out;
}

.p2-bios-table tr:nth-child(even) {
  animation-delay: 2s;
}

.p2-bios-table tr:hover {
  background: rgba(0, 255, 65, 0.08);
}

.p2-bios-table td {
  padding: 14px 12px;
  font-size: 0.85rem;
  color: var(--p2-green);
  vertical-align: top;
}

.p2-bios-table td:not(.p2-bios-key) {
  animation: p2-data-flicker 5s infinite;
}

.p2-bios-key {
  color: var(--p2-copper-light) !important;
  white-space: nowrap;
  width: 150px;
  font-size: 0.75rem !important;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.p2-bios-cursor {
  margin-top: 16px;
  color: var(--p2-green);
  font-size: 1.2rem;
  animation: p2-cursor-blink 1s step-end infinite;
}

/* JPK Badge */
.p2-jpk-badge {
  position: relative;
  margin: 0 16px 16px;
  padding: 12px 16px;
  border: 1px solid var(--p2-green);
  border-radius: 4px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--p2-green);
  letter-spacing: 2px;
  overflow: hidden;
  background: rgba(0, 255, 65, 0.05);
  animation: p2-badge-throb 2s infinite alternate;
}

.p2-jpk-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
  animation: p2-rail-pulse 2.5s linear infinite;
}

/* Circuit Schematic */
@keyframes p2-grid-pan {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 40px 40px;
  }
}

@keyframes p2-readout-flicker {

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    opacity: 0.8;
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
  }

  20%,
  22%,
  24%,
  55% {
    opacity: 0.2;
    text-shadow: none;
  }
}

.p2-circuit-schematic {
  background: rgba(7, 26, 14, 0.8);
  border: 2px solid var(--p2-border-copper);
  border-radius: 8px;
  padding: 24px;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(200, 117, 51, 0.05);
  overflow: hidden;
  animation: p2-panel-breathe 5s infinite alternate-reverse;
}

.p2-circuit-schematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 255, 65, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 65, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
  animation: p2-grid-pan 6s linear infinite;
}

.p2-circuit-schematic::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.15), transparent);
  transform: skewX(-20deg);
  animation: p2-sch-radar-sweep 3s infinite linear;
  pointer-events: none;
  z-index: 1;
}

/* Overdrive Circuit Overrides */

.p2-circuit-svg {
  width: 100%;
  max-height: 400px;
  filter: drop-shadow(0 0 3px rgba(0, 255, 65, 0.4));
  position: relative;
  z-index: 2;
}

.p2-sch-line {
  stroke-dasharray: 8 4;
  animation: p2-trace-flow 1.5s linear infinite reverse;
}

.p2-sch-comp {
  filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.6));
  animation: p2-sch-led-flash 0.5s infinite alternate;
}

.p2-current-dot {
  animation: p2-current-flow 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 10px #0f0;
}

.p2-sch-readout {
  position: absolute;
  bottom: 12px;
  left: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--p2-green);
  opacity: 0.8;
  letter-spacing: 2px;
  z-index: 2;
  text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
  animation: p2-readout-flicker 3s infinite;
}

/* About Block */
.p2-about-block {
  position: relative;
  padding: 30px 30px 30px 40px;
  border-left: 2px solid var(--p2-copper);
  background: rgba(200, 117, 51, 0.03);
  border-radius: 0 8px 8px 0;
}

.p2-about-trace {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--p2-copper), var(--p2-green), var(--p2-copper));
}

.p2-about-heading {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--p2-text);
  margin-bottom: 20px;
}

.p2-about-list {
  list-style: none;
  padding: 0;
}

.p2-about-list li {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--p2-text-dim);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   §3 BENEFITS — COMPONENT RACK
   ═══════════════════════════════════════════════════════════════ */
.p2-benefits {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--p2-bg-deep);
}

.p2-rack {
  position: relative;
}

/* Motherboard Rail */
.p2-rack-rail {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--p2-copper);
  opacity: 0.3;
  transform: translateY(-50%);
  overflow: hidden;
}

.p2-rail-pulse {
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--p2-green), transparent);
  animation: p2-rail-pulse 4s linear infinite;
}

.p2-rack-row {
  margin-bottom: 50px;
}

.p2-rack-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--p2-green);
  margin-bottom: 24px;
}

.p2-rack-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* Component Card */

/* --- Enhanced Benefit Cards --- */
@keyframes p2-card-breathe {

  0%,
  100% {
    border-color: rgba(5, 150, 105, 0.1);
    box-shadow: inset 0 0 10px rgba(5, 150, 105, 0.02);
  }

  50% {
    border-color: rgba(5, 150, 105, 0.4);
    box-shadow: inset 0 0 15px rgba(5, 150, 105, 0.05);
  }
}

@keyframes p2-icon-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes p2-icon-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

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

.p2-comp-card {
  animation: p2-card-breathe 4s infinite alternate ease-in-out;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.p2-comp-card:hover {
  transform: translateY(-8px) scale(1.02);
}

.p2-comp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 150, 105, 0.05) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: none;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}

.p2-comp-card:hover::before {
  opacity: 1;
}

.p2-comp-icon {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  background: rgba(5, 150, 105, 0.05);
  border-radius: 12px;
  box-shadow: inset 0 0 10px rgba(5, 150, 105, 0.1);
  animation: p2-icon-pulse 3s infinite alternate;
}

.p2-comp-amber .p2-comp-icon {
  background: rgba(255, 190, 11, 0.05);
  box-shadow: inset 0 0 10px rgba(255, 190, 11, 0.1);
}

.p2-comp-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px dashed var(--p2-green);
  border-radius: 14px;
  animation: p2-icon-spin 10s infinite linear;
  opacity: 0.5;
  transition: all 0.4s;
}

.p2-comp-amber .p2-comp-icon::before {
  border-color: var(--p2-amber);
}

.p2-comp-card:hover .p2-comp-icon::before {
  animation-duration: 3s;
  opacity: 1;
  box-shadow: 0 0 15px var(--p2-green);
}

.p2-comp-amber:hover .p2-comp-icon::before {
  box-shadow: 0 0 15px var(--p2-amber);
}

.p2-comp-icon::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--p2-green);
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--p2-green);
}

.p2-comp-amber .p2-comp-icon::after {
  background: var(--p2-amber);
  box-shadow: 0 0 8px var(--p2-amber);
}

/* Ensure icon sits above background effects */
.p2-comp-body {
  position: relative;
  z-index: 1;
}

/* ------------------------------ */
.p2-comp-card {
  position: relative;
  background: var(--p2-bg-card);
  border: 1px solid var(--p2-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.p2-comp-card:hover {
  border-color: var(--p2-green);
  box-shadow: var(--p2-glow-green);
  transform: translateY(-4px);
}

.p2-comp-card.p2-comp-amber:hover {
  border-color: var(--p2-amber);
  box-shadow: 0 0 20px rgba(255, 190, 11, 0.15), 0 0 60px rgba(255, 190, 11, 0.05);
}

/* LED on card */
.p2-comp-led {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p2-text-muted);
  transition: all 0.4s;
}

.p2-comp-card:hover .p2-comp-led {
  background: var(--p2-green);
  box-shadow: 0 0 8px var(--p2-green);
}

.p2-comp-amber:hover .p2-comp-led {
  background: var(--p2-amber);
  box-shadow: 0 0 8px var(--p2-amber);
}

/* Pin connector visual */
.p2-comp-pins {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--p2-copper) 0px, var(--p2-copper) 3px, transparent 3px, transparent 8px);
  opacity: 0.3;
  transition: opacity 0.4s;
}

.p2-comp-card:hover .p2-comp-pins {
  opacity: 0.8;
}

.p2-comp-body {
  padding: 24px 20px 28px;
}

.p2-comp-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 12px;
}

.p2-comp-body h4 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--p2-text);
  margin-bottom: 6px;
}

.p2-comp-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--p2-green);
  margin-bottom: 8px;
}

.p2-comp-value span {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--p2-text-dim);
  margin-left: 4px;
}

.p2-comp-amber .p2-comp-value {
  color: var(--p2-amber);
}

.p2-comp-body p {
  font-size: 0.8rem;
  color: var(--p2-text-dim);
  line-height: 1.5;
}

/* Datasheet footer */
.p2-comp-datasheet {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
  border-top: 1px solid var(--p2-border);
  font-size: 0.6rem;
  letter-spacing: 1px;
  color: var(--p2-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   §4 MODULES — PCB LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.p2-modules {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--p2-bg);
}

@keyframes p2-module-board-scan {
  0% {
    transform: translateX(-110%) skewX(-14deg);
    opacity: 0;
  }

  16%,
  58% {
    opacity: 0.5;
  }

  100% {
    transform: translateX(110%) skewX(-14deg);
    opacity: 0;
  }
}

@keyframes p2-module-grid-drift {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 40px 40px, 40px 40px;
  }
}

@keyframes p2-module-corner-ping {

  0%,
  100% {
    opacity: 0.45;
    box-shadow: inset 0 0 0 3px rgba(0, 255, 65, 0.035), 0 0 10px rgba(0, 255, 65, 0.08);
  }

  50% {
    opacity: 1;
    box-shadow: inset 0 0 0 3px rgba(0, 255, 65, 0.08), 0 0 20px rgba(0, 255, 65, 0.3);
  }
}

@keyframes p2-module-chip-breathe {

  0%,
  100% {
    box-shadow: var(--p2-module-cpu-shadow-rest);
  }

  50% {
    box-shadow: var(--p2-module-cpu-shadow-live);
  }
}

@keyframes p2-module-pin-flow {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 24px 0;
  }
}

@keyframes p2-module-pin-flow-y {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 24px;
  }
}

@keyframes p2-module-bus-flow {
  0% {
    background-position: 220% 0;
    opacity: 0.35;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    background-position: -220% 0;
    opacity: 0.35;
  }
}

@keyframes p2-module-vertical-flow {
  0% {
    background-position: 0 -80px;
  }

  100% {
    background-position: 0 80px;
  }
}

@keyframes p2-module-node-pulse {

  0%,
  100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.12);
  }

  50% {
    transform: translateX(-50%) scale(1.22);
    box-shadow: 0 0 22px rgba(0, 255, 65, 0.35);
  }
}

@keyframes p2-module-via-spark {

  0%,
  100% {
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(0.75);
  }

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

@keyframes p2-module-card-breathe {

  0%,
  100% {
    filter: var(--p2-module-card-filter-rest);
  }

  50% {
    filter: var(--p2-module-card-filter-live);
  }
}

@keyframes p2-module-contact-flow {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 28px 0;
  }
}

@keyframes p2-module-shine {
  0% {
    background-position: -160% 0;
  }

  100% {
    background-position: 160% 0;
  }
}

@keyframes p2-module-stage-pulse {

  0%,
  100% {
    opacity: 0.9;
  }

  50% {
    opacity: 0.55;
  }
}

@keyframes p2-smd-current-drift {
  0% {
    background-position: 0 0;
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.25);
  }

  100% {
    background-position: 42px 0;
    filter: brightness(1);
  }
}

@keyframes p2-smd-cap-charge {

  0%,
  100% {
    transform: translateZ(0) rotate(var(--p2-smd-rot, 0deg)) scale(1);
    box-shadow: 0 0 0 rgba(0, 255, 65, 0);
  }

  50% {
    transform: translateZ(0) rotate(var(--p2-smd-rot, 0deg)) scale(1.08);
    box-shadow: 0 0 18px rgba(0, 255, 65, 0.28);
  }
}

@keyframes p2-smd-diode-flash {

  0%,
  72%,
  100% {
    opacity: 0.68;
    filter: brightness(1);
  }

  78% {
    opacity: 1;
    filter: brightness(1.9) drop-shadow(0 0 10px rgba(0, 255, 65, 0.5));
  }
}

@keyframes p2-smd-ic-process {

  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.12), 0 0 0 rgba(0, 255, 65, 0);
  }

  50% {
    box-shadow: inset 0 0 0 1px rgba(0, 255, 65, 0.32), 0 0 22px rgba(0, 255, 65, 0.18);
  }
}

@keyframes p2-smd-xtal-tick {

  0%,
  100% {
    transform: translateZ(0) rotate(var(--p2-smd-rot, 0deg)) scale(1);
  }

  50% {
    transform: translateZ(0) rotate(var(--p2-smd-rot, 0deg)) scale(1.06);
  }
}

@keyframes p2-smd-via-ripple {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.25);
    opacity: 0.48;
  }

  55% {
    box-shadow: 0 0 0 9px rgba(0, 255, 65, 0);
    opacity: 1;
  }
}

@keyframes p2-bus-packet-run {
  0% {
    left: -82px;
    transform: translate3d(0, 0, 0) scaleX(0.82);
    opacity: 0;
  }

  10%,
  78% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 18px);
    transform: translate3d(0, 0, 0) scaleX(1);
    opacity: 0;
  }
}

@keyframes p2-card-smd-sequence {

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

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

@keyframes p2-status-led-pulse {

  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.82);
  }

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

@keyframes p2-footprint-read {
  0% {
    background-position: 0 0;
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }

  100% {
    background-position: 32px 0;
    opacity: 0.45;
  }
}

/* PCB Board */
.p2-pcb-board {
  position: relative;
  background: var(--p2-bg-deep);
  border: 2px solid var(--p2-border-copper);
  border-radius: 14px;
  padding: clamp(34px, 4.8vw, 66px);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 65, 0.04),
    inset 0 0 80px rgba(0, 255, 65, 0.035),
    0 24px 70px rgba(0, 0, 0, 0.16);
}

.p2-pcb-board::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 42%, rgba(0, 255, 65, 0.09), transparent 58%);
  animation: p2-module-board-scan 7s ease-in-out infinite;
}

.p2-pcb-board-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 255, 65, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  animation: p2-module-grid-drift 14s linear infinite;
}

.p2-pcb-board>*:not(.p2-pcb-board-bg):not(.p2-board-corners):not(.p2-pcb-silkscreen):not(.p2-smd-layer) {
  position: relative;
  z-index: 1;
}

.p2-smd-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.p2-smd-part,
.p2-smd-via {
  position: absolute;
  display: block;
}

.p2-smd-part {
  --p2-smd-rot: 0deg;
  transform: rotate(var(--p2-smd-rot));
  opacity: 0.72;
}

.p2-smd-part::before,
.p2-smd-part::after {
  content: '';
  position: absolute;
}

.p2-smd-res {
  width: 52px;
  height: 12px;
  border: 1px solid rgba(0, 255, 65, 0.16);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(0, 255, 65, 0.22) 8px 10px, transparent 10px 16px),
    linear-gradient(90deg, var(--p2-copper) 0 9px, rgba(200, 117, 51, 0.18) 9px 43px, var(--p2-copper) 43px 100%);
  background-size: 42px 100%, 100% 100%;
  animation: p2-smd-current-drift 3.4s linear infinite;
}

.p2-smd-res::before,
.p2-smd-res::after {
  top: 3px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: rgba(200, 117, 51, 0.8);
}

.p2-smd-res::before {
  left: -10px;
}

.p2-smd-res::after {
  right: -10px;
}

.p2-smd-cap {
  width: 22px;
  height: 32px;
  border: 1px solid rgba(0, 255, 65, 0.18);
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--p2-copper) 0 4px, transparent 4px 18px, var(--p2-copper) 18px 100%),
    rgba(0, 255, 65, 0.045);
  animation: p2-smd-cap-charge 3.8s ease-in-out infinite;
}

.p2-smd-cap::before {
  inset: 7px 7px;
  border-radius: 50%;
  background: rgba(0, 255, 65, 0.18);
}

.p2-smd-diode {
  width: 58px;
  height: 13px;
  border: 1px solid rgba(0, 255, 65, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--p2-copper) 0 8px, rgba(0, 255, 65, 0.08) 8px 45px, var(--p2-amber) 45px 49px, var(--p2-copper) 49px 100%);
  animation: p2-smd-diode-flash 4.4s ease-in-out infinite;
}

.p2-smd-ic {
  width: 70px;
  height: 42px;
  border: 1px solid rgba(0, 255, 65, 0.2);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(7, 26, 14, 0.62);
  animation: p2-smd-ic-process 4.8s ease-in-out infinite;
}

.p2-smd-ic::before,
.p2-smd-ic::after {
  left: 8px;
  right: 8px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--p2-copper) 0 4px, transparent 4px 9px);
  opacity: 0.72;
}

.p2-smd-ic::before {
  top: -5px;
}

.p2-smd-ic::after {
  bottom: -5px;
}

.p2-smd-xtal {
  --p2-smd-rot: -8deg;
  width: 52px;
  height: 22px;
  border: 1px solid rgba(200, 117, 51, 0.42);
  border-radius: 11px;
  background: linear-gradient(90deg, var(--p2-copper) 0 8px, rgba(200, 117, 51, 0.1) 8px 44px, var(--p2-copper) 44px 100%);
  animation: p2-smd-xtal-tick 2.4s ease-in-out infinite;
}

.p2-smd-via {
  width: 9px;
  height: 9px;
  border: 1px solid var(--p2-copper);
  border-radius: 50%;
  background: radial-gradient(circle, var(--p2-green) 0 2px, transparent 3px);
  opacity: 0.65;
  animation: p2-smd-via-ripple 3.2s ease-out infinite;
}

.p2-smd-r1 {
  top: 16%;
  left: 13%;
  --p2-smd-rot: 4deg;
}

.p2-smd-r2 {
  top: 54%;
  right: 7%;
  --p2-smd-rot: -5deg;
  animation-delay: -1.1s;
}

.p2-smd-r3 {
  bottom: 18%;
  left: 9%;
  --p2-smd-rot: -2deg;
  animation-delay: -2.2s;
}

.p2-smd-c1 {
  top: 26%;
  right: 18%;
  --p2-smd-rot: 8deg;
}

.p2-smd-c2 {
  bottom: 24%;
  right: 12%;
  --p2-smd-rot: -4deg;
  animation-delay: -1.4s;
}

.p2-smd-c3 {
  top: 64%;
  left: 7%;
  --p2-smd-rot: 5deg;
  animation-delay: -2.6s;
}

.p2-smd-d1 {
  top: 32%;
  left: 8%;
  --p2-smd-rot: -8deg;
}

.p2-smd-d2 {
  bottom: 13%;
  right: 24%;
  --p2-smd-rot: 7deg;
  animation-delay: -1.8s;
}

.p2-smd-u1 {
  top: 13%;
  right: 7%;
  --p2-smd-rot: 2deg;
}

.p2-smd-x1 {
  bottom: 10%;
  left: 33%;
}

.p2-smd-v1 {
  top: 24%;
  left: 24%;
}

.p2-smd-v2 {
  top: 44%;
  right: 28%;
  animation-delay: -0.5s;
}

.p2-smd-v3 {
  bottom: 31%;
  left: 18%;
  animation-delay: -1s;
}

.p2-smd-v4 {
  bottom: 20%;
  right: 36%;
  animation-delay: -1.5s;
}

.p2-smd-v5 {
  top: 72%;
  right: 8%;
  animation-delay: -2s;
}

.p2-smd-v6 {
  top: 39%;
  left: 44%;
  animation-delay: -2.5s;
}

.p2-board-corners {
  position: absolute;
  inset: 18px;
  z-index: 2;
  pointer-events: none;
}

.p2-board-corners span {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--p2-border-copper);
  border-radius: 50%;
  background: var(--p2-bg-deep);
  box-shadow:
    inset 0 0 0 3px rgba(0, 255, 65, 0.035),
    0 0 18px rgba(0, 255, 65, 0.08);
  animation: p2-module-corner-ping 3.8s ease-in-out infinite;
}

.p2-board-corners span:nth-child(1) {
  top: 0;
  left: 0;
}

.p2-board-corners span:nth-child(2) {
  top: 0;
  right: 0;
  animation-delay: 0.7s;
}

.p2-board-corners span:nth-child(3) {
  bottom: 0;
  left: 0;
  animation-delay: 1.4s;
}

.p2-board-corners span:nth-child(4) {
  bottom: 0;
  right: 0;
  animation-delay: 2.1s;
}

.p2-pcb-silkscreen {
  position: absolute;
  bottom: 10px;
  right: 16px;
  font-size: 0.6rem;
  color: var(--p2-text-muted);
  letter-spacing: 2px;
  opacity: 0.4;
  z-index: 2;
}

/* Central CPU Chip */
.p2-chip-cpu {
  position: relative;
  --p2-module-cpu-shadow-rest:
    0 0 0 1px rgba(0, 255, 65, 0.08),
    0 16px 42px rgba(0, 0, 0, 0.22),
    0 0 34px rgba(200, 117, 51, 0.16);
  --p2-module-cpu-shadow-live:
    0 0 0 1px rgba(0, 255, 65, 0.18),
    0 18px 46px rgba(0, 0, 0, 0.24),
    0 0 44px rgba(0, 255, 65, 0.14);
  max-width: 520px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 55%),
    #0a0a0a;
  border: 2px solid var(--p2-copper);
  border-radius: 6px;
  box-shadow: var(--p2-module-cpu-shadow-rest);
  animation: p2-module-chip-breathe 5.5s ease-in-out infinite;
}

.p2-chip-cpu .p2-chip-body {
  padding: clamp(22px, 3vw, 30px) clamp(24px, 4vw, 42px);
  text-align: center;
}

.p2-chip-label {
  display: block;
  font-size: 0.72rem;
  color: var(--p2-copper-light);
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-weight: 600;
}

.p2-chip-cpu .p2-chip-name {
  display: block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(1.15rem, 2.15vw, 1.4rem);
  font-weight: 700;
  color: var(--p2-text);
  line-height: 1.28;
  margin-bottom: 16px;
}

.p2-chip-coreline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 255, 65, 0.14);
  border-radius: 999px;
  background: rgba(0, 255, 65, 0.035);
}

.p2-chip-coreline span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  color: var(--p2-green);
  letter-spacing: 1px;
  white-space: nowrap;
}

.p2-chip-coreline span+span::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--p2-copper-light);
  opacity: 0.65;
}

.p2-cpu-smd-status {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  color: var(--p2-text-muted);
  font-size: 0.58rem;
  letter-spacing: 1px;
}

.p2-cpu-smd-status span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.p2-cpu-smd-status span::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--p2-green);
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.55);
  animation: p2-status-led-pulse 1.7s ease-in-out infinite;
}

.p2-cpu-smd-status span:nth-child(2)::before {
  animation-delay: -0.45s;
}

.p2-cpu-smd-status span:nth-child(3)::before {
  animation-delay: -0.9s;
}

/* Chip notch */
.p2-chip-notch {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 10px;
  border-radius: 0 0 10px 10px;
  border: 1px solid var(--p2-copper);
  border-top: none;
  background: var(--p2-bg-deep);
}

/* Chip pin rows (top/bottom/left/right) */
.p2-chip-pins-top,
.p2-chip-pins-bottom {
  position: absolute;
  left: 15%;
  right: 15%;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--p2-copper) 0px, var(--p2-copper) 4px, transparent 4px, transparent 12px);
  opacity: 0.5;
  animation: p2-module-pin-flow 1.8s linear infinite;
}

.p2-chip-pins-top {
  top: -6px;
}

.p2-chip-pins-bottom {
  bottom: -6px;
}

.p2-chip-pins-left,
.p2-chip-pins-right {
  position: absolute;
  top: 15%;
  bottom: 15%;
  width: 6px;
  background: repeating-linear-gradient(180deg, var(--p2-copper) 0px, var(--p2-copper) 4px, transparent 4px, transparent 12px);
  opacity: 0.5;
  animation: p2-module-pin-flow-y 1.8s linear infinite;
}

.p2-chip-pins-left {
  left: -6px;
}

.p2-chip-pins-right {
  right: -6px;
}

.p2-module-bus {
  position: relative;
  width: min(760px, 86%);
  height: 68px;
  margin: 0 auto 18px;
  overflow: hidden;
}

.p2-module-bus::before,
.p2-module-bus::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--p2-copper), var(--p2-green), transparent);
  background-size: 100% 200%;
  opacity: 0.45;
  animation: p2-module-vertical-flow 2.8s linear infinite;
}

.p2-module-bus::before {
  top: 0;
  width: 2px;
  height: 34px;
}

.p2-module-bus::after {
  top: 34px;
  left: 0;
  right: 0;
  width: auto;
  height: 2px;
  transform: none;
  background: linear-gradient(90deg, transparent, var(--p2-copper), var(--p2-green), var(--p2-copper), transparent);
  background-size: 220% 100%;
  animation: p2-module-bus-flow 3.6s linear infinite;
}

.p2-module-bus span {
  position: absolute;
  top: 29px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  border: 1px solid var(--p2-copper);
  border-radius: 50%;
  background: var(--p2-bg-deep);
  box-shadow: 0 0 14px rgba(0, 255, 65, 0.18);
  animation: p2-module-node-pulse 3s ease-in-out infinite;
}

.p2-module-bus span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--p2-green);
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.6);
  animation: p2-module-via-spark 1.6s ease-in-out infinite;
}

.p2-module-bus span::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 1px;
  height: 24px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--p2-copper), transparent);
  opacity: 0.55;
}

.p2-module-bus span:nth-child(1) {
  left: 5%;
}

.p2-module-bus span:nth-child(2) {
  left: 20%;
  animation-delay: 0.18s;
}

.p2-module-bus span:nth-child(3) {
  left: 35%;
  animation-delay: 0.36s;
}

.p2-module-bus span:nth-child(4) {
  left: 50%;
  animation-delay: 0.54s;
}

.p2-module-bus span:nth-child(5) {
  left: 65%;
  animation-delay: 0.72s;
}

.p2-module-bus span:nth-child(6) {
  left: 80%;
  animation-delay: 0.9s;
}

.p2-module-bus span:nth-child(7) {
  left: 95%;
  animation-delay: 1.08s;
}

.p2-bus-packet {
  position: absolute;
  left: -82px;
  right: auto;
  top: 31px;
  width: 82px;
  height: 7px;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2) 20%, var(--p2-green) 48%, rgba(255, 255, 255, 0.92) 54%, var(--p2-copper) 66%, transparent);
  filter: drop-shadow(0 0 7px rgba(0, 255, 65, 0.3));
  animation: p2-bus-packet-run 4.6s linear infinite;
}

.p2-bus-packet-2 {
  animation-delay: -1.5s;
  filter: hue-rotate(34deg) drop-shadow(0 0 10px rgba(0, 255, 65, 0.35));
}

.p2-bus-packet-3 {
  animation-delay: -3s;
  filter: hue-rotate(72deg) drop-shadow(0 0 10px rgba(0, 255, 65, 0.35));
}

/* Module Chips Grid */
.p2-chips-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
  align-items: stretch;
}

.p2-chip-module {
  position: relative;
  --p2-module-card-filter-rest: drop-shadow(0 0 0 rgba(0, 255, 65, 0));
  --p2-module-card-filter-live: drop-shadow(0 0 10px rgba(0, 255, 65, 0.08));
  grid-column: span 3;
  min-height: 152px;
  display: flex;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 64%),
    #0a0a0a;
  border: 1px solid var(--p2-copper-dim);
  border-radius: 6px;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
  animation: p2-chip-place 0.6s ease-out backwards, p2-module-card-breathe 5.8s ease-in-out infinite;
  cursor: default;
  overflow: visible;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 65, 0.025),
    0 14px 34px rgba(0, 0, 0, 0.14);
}

.p2-chip-module::before,
.p2-chip-module::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.p2-chip-module::before {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(0, 255, 65, 0.09), transparent);
  background-size: 220% 100%;
  background-position: -160% 0;
  opacity: 0;
  transition: opacity 0.35s;
}

.p2-chip-module::after {
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--p2-copper) 0 10px, transparent 10px 18px);
  background-size: 28px 100%;
  opacity: 0.4;
  animation: p2-module-contact-flow 2.2s linear infinite;
}

.p2-chip-module:nth-child(n + 5) {
  grid-column: span 4;
}

.p2-chip-module:nth-child(1) {
  animation-delay: 0.1s, 0s;
}

.p2-chip-module:nth-child(2) {
  animation-delay: 0.2s, 0.35s;
}

.p2-chip-module:nth-child(3) {
  animation-delay: 0.3s, 0.7s;
}

.p2-chip-module:nth-child(4) {
  animation-delay: 0.4s, 1.05s;
}

.p2-chip-module:nth-child(5) {
  animation-delay: 0.5s, 1.4s;
}

.p2-chip-module:nth-child(6) {
  animation-delay: 0.6s, 1.75s;
}

.p2-chip-module:nth-child(7) {
  animation-delay: 0.7s, 2.1s;
}

.p2-chip-module:hover {
  border-color: var(--p2-green);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 65, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.2),
    0 0 24px rgba(0, 255, 65, 0.12);
  transform: translateY(-5px);
}

.p2-chip-module:hover::before {
  opacity: 1;
}

.p2-chip-module:hover::before {
  animation: p2-module-shine 1.2s ease-out;
}

.p2-chip-module .p2-chip-body {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: 20px 20px 36px;
}

.p2-chip-stage {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 65, 0.08);
  letter-spacing: 0;
  animation: p2-module-stage-pulse 4.5s ease-in-out infinite;
}

.p2-chip-id {
  display: block;
  font-size: 0.66rem;
  color: var(--p2-copper-light);
  letter-spacing: 1.1px;
  margin-bottom: 9px;
  opacity: 0.95;
  font-weight: 600;
}

.p2-chip-module .p2-chip-name {
  display: block;
  max-width: 88%;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--p2-solder);
  line-height: 1.42;
}

.p2-chip-tag {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 9px;
  border: 1px solid rgba(0, 255, 65, 0.14);
  border-radius: 999px;
  background: rgba(0, 255, 65, 0.045);
  color: var(--p2-green);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.75px;
}

.p2-chip-module:hover .p2-chip-stage {
  color: rgba(0, 255, 65, 0.16);
}

.p2-chip-module:hover .p2-chip-tag {
  background: rgba(0, 255, 65, 0.09);
  border-color: rgba(0, 255, 65, 0.25);
}

.p2-chip-module .p2-chip-notch {
  width: 14px;
  height: 7px;
}

.p2-module-footprint {
  display: flex;
  gap: 6px;
  width: min(150px, 88%);
  margin-top: 12px;
  padding-top: 7px;
  border-top: 1px solid rgba(0, 255, 65, 0.1);
  background: repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.22) 0 8px, transparent 8px 16px);
  background-size: 32px 1px;
  background-repeat: repeat-x;
  background-position: 0 top;
  animation: p2-footprint-read 2.8s linear infinite;
}

.p2-module-footprint i {
  display: block;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: var(--p2-copper);
  opacity: 0.72;
}

.p2-module-smd-bank {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 5px;
  pointer-events: none;
  z-index: 2;
}

.p2-module-smd-bank span {
  width: 12px;
  height: 6px;
  border: 1px solid rgba(0, 255, 65, 0.18);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--p2-copper) 0 3px, rgba(0, 255, 65, 0.08) 3px 9px, var(--p2-copper) 9px 100%);
  opacity: 0.65;
  animation: p2-card-smd-sequence 2.4s ease-in-out infinite;
}

.p2-module-smd-bank span:nth-child(2) {
  animation-delay: -0.35s;
}

.p2-module-smd-bank span:nth-child(3) {
  animation-delay: -0.7s;
}

.p2-chip-module:hover .p2-module-smd-bank span,
.p2-chip-module:hover .p2-module-footprint {
  animation-duration: 1.1s;
}

/* Tooltip */
.p2-chip-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: 260px;
  padding: 14px;
  background: rgba(7, 26, 14, 0.97);
  border: 1px solid var(--p2-green);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--p2-text-dim);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.p2-chip-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--p2-green);
}

.p2-chip-module:hover .p2-chip-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* ═══════════════════════════════════════════════════════════════
   §5 SKILLS — MULTIMETER READOUT
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  .p2-pcb-board::before,
  .p2-pcb-board-bg,
  .p2-board-corners span,
  .p2-chip-cpu,
  .p2-chip-pins-top,
  .p2-chip-pins-bottom,
  .p2-chip-pins-left,
  .p2-chip-pins-right,
  .p2-module-bus::before,
  .p2-module-bus::after,
  .p2-module-bus span,
  .p2-module-bus span::before,
  .p2-bus-packet,
  .p2-smd-part,
  .p2-smd-via,
  .p2-cpu-smd-status span::before,
  .p2-chip-module,
  .p2-chip-module::after,
  .p2-module-footprint,
  .p2-module-smd-bank span,
  .p2-chip-stage {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   §6 TIMELINE — SIGNAL PROPAGATION
   ═══════════════════════════════════════════════════════════════ */
.p2-timeline {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--p2-bg);
}

.p2-signal-path {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 60px;
}

.p2-signal-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28px;
  width: 2px;
  background: linear-gradient(180deg, var(--p2-copper), var(--p2-green), var(--p2-copper));
  opacity: 0.4;
}

.p2-signal-pulse-dot {
  position: absolute;
  left: -4px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--p2-green);
  box-shadow: 0 0 12px var(--p2-green);
  animation: p2-signal-travel 6s linear infinite;
}

@keyframes p2-signal-travel {
  0% {
    top: 0;
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0.3;
  }
}

.p2-signal-node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 50px;
}

.p2-node-pad {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--p2-copper);
  background: var(--p2-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: -28px;
  box-shadow: 0 0 15px rgba(200, 117, 51, 0.15);
  transition: all 0.4s;
}

.p2-signal-node:hover .p2-node-pad {
  border-color: var(--p2-green);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
}

.p2-node-num {
  font-size: 0.8rem;
  color: var(--p2-copper-light);
}

.p2-signal-node:hover .p2-node-num {
  color: var(--p2-green);
}

.p2-node-pad-final {
  border-color: var(--p2-green);
  box-shadow: 0 0 25px rgba(0, 255, 65, 0.2);
}

.p2-node-content {
  position: relative;
  flex: 1;
  padding: 24px;
  background: color-mix(in srgb, var(--p2-bg-deep) 60%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 255, 65, 0.1);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.p2-node-content::before {
  content: '';
  position: absolute;
  top: 27px;
  /* Align with center of node pad (56/2 = 28px) */
  left: -52px;
  /* Bridge the visual gap */
  width: 52px;
  height: 2px;
  background: rgba(0, 255, 65, 0.15);
  transition: all 0.4s;
  z-index: -1;
}

.p2-signal-node:hover .p2-node-content {
  transform: translateY(-5px);
  border-color: rgba(0, 255, 65, 0.4);
  box-shadow: 0 15px 35px rgba(0, 255, 65, 0.15), inset 0 0 20px rgba(0, 255, 65, 0.05);
  background: color-mix(in srgb, var(--p2-bg-deep) 80%, transparent);
}

.p2-signal-node:hover .p2-node-content::before {
  background: var(--p2-green);
  box-shadow: 0 0 10px var(--p2-green);
}

.p2-node-content h3 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--p2-text);
  margin-bottom: 8px;
}

.p2-node-content p {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--p2-text);
  opacity: 1;
  line-height: 1.7;
}

.p2-node-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 16px;
  border: 1px solid var(--p2-green);
  border-radius: 4px;
  background: var(--p2-green-muted);
  font-size: 0.7rem;
  color: var(--p2-green);
  letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   §7 CAREER — OUTPUT TERMINALS
   ═══════════════════════════════════════════════════════════════ */
.p2-career {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--p2-bg-deep);
}

/* Interactive Electronic Background (Performance Mode) */

/* =========================================================================
   ECO MODE OVERRIDES - GPU Friendly & Battery Saver 
   (Static background, no animations, low opacity)
   ========================================================================= */

.eco-mode .p2-career:hover * {
  /* Prevent any hover states from re-triggering animations or heavy box-shadows in Eco Mode */
  animation: none !important;
}

/* Base Grid */

/* Activate Grid - Continuous */

/* Unique Electronic Pathway Traces (SVG) */

/* Circuit Nodes (Hollow circles with dots) */

/* Floating Data Hex Nodes */

/* Corner Accents */

/* Large Tech Rings */

/* Scanner Sweep */

/* Data Matrix Blocks */

.p2-ic-diagram {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px 40px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

/* Master MCU Center Block - Redesigned as Logic START Node */
.p2-ic-center {
  grid-column: 1 / span 2;
  justify-self: center;
  position: relative;
  background: #060b07 linear-gradient(135deg, rgba(0, 255, 65, 0.02) 25%, transparent 25%, transparent 50%, rgba(0, 255, 65, 0.02) 50%, rgba(0, 255, 65, 0.02) 75%, transparent 75%, transparent);
  background-size: 8px 8px;
  border: 2px solid var(--p2-copper);
  border-radius: 50px;
  /* Capsule logic shape */
  padding: 20px 45px;
  text-align: center;
  min-width: 280px;
  box-shadow: 0 0 30px rgba(200, 117, 51, 0.15), inset 0 0 15px rgba(0, 255, 65, 0.03);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: p2-ic-center-breathe 4s ease-in-out infinite alternate;
  cursor: pointer;
  z-index: 50;
}

@keyframes p2-ic-center-breathe {
  0% {
    box-shadow: 0 0 15px rgba(200, 117, 51, 0.1), inset 0 0 5px rgba(0, 255, 65, 0.02);
    border-color: rgba(200, 117, 51, 0.5);
  }

  100% {
    box-shadow: 0 10px 35px rgba(200, 117, 51, 0.35), inset 0 0 25px rgba(0, 255, 65, 0.08);
    border-color: var(--p2-copper);
  }
}

/* MCU Core Pulsing LED */
.p2-ic-center-led-pulse {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--p2-green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--p2-green);
  animation: p2-mcu-led-pulse 1s infinite alternate;
}

@keyframes p2-mcu-led-pulse {
  0% {
    opacity: 0.3;
    filter: brightness(0.6);
  }

  100% {
    opacity: 1;
    filter: brightness(1.2) drop-shadow(0 0 5px var(--p2-green));
  }
}

.p2-ic-center:hover {
  animation-play-state: paused;
  box-shadow: 0 15px 45px rgba(0, 255, 65, 0.25) !important;
  border-color: var(--p2-green) !important;
}

.p2-ic-center:hover .p2-ic-center-led-pulse {
  background-color: var(--p2-amber);
  box-shadow: 0 0 12px var(--p2-amber);
}

.p2-ic-center-code {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--p2-copper);
  letter-spacing: 2px;
  margin-right: 10px;
  transition: color 0.3s;
  font-weight: 600;
  vertical-align: middle;
}

.p2-ic-center-name {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--p2-text);
  line-height: 1.2;
  vertical-align: middle;
}

.p2-ic-center-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--p2-green);
  letter-spacing: 2px;
  margin-top: 4px;
  transition: color 0.3s;
  font-weight: 600;
}

.p2-ic-center:hover .p2-ic-center-code {
  color: var(--p2-green);
}

.p2-ic-center:hover .p2-ic-center-sub {
  color: var(--p2-text);
}

/* Flowchart OR divider for mobile view */
.p2-flowchart-or {
  display: none;
}

/* Flowchart Branching Connector styles */
.p2-flowchart-branch {
  grid-column: 1 / span 2;
  position: relative;
  height: 50px;
  margin-top: -50px;
  margin-bottom: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

.p2-flow-line-main {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 25px;
  background: var(--p2-copper);
  transform: translateX(-50%);
}

.p2-flow-line-horizontal {
  position: absolute;
  top: 25px;
  left: 25%;
  right: 25%;
  height: 3px;
  background: var(--p2-copper);
}

.p2-flow-line-left {
  position: absolute;
  top: 25px;
  left: 25%;
  width: 3px;
  height: 25px;
  background: var(--p2-copper);
}

.p2-flow-line-right {
  position: absolute;
  top: 25px;
  right: 25%;
  width: 3px;
  height: 25px;
  background: var(--p2-copper);
}

.p2-flow-line-left::after,
.p2-flow-line-right::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--p2-copper);
}

/* Branch signal pulses */
.p2-flow-line-left::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px var(--p2-green), 0 0 16px var(--p2-green);
  animation: p2-flow-branch-pulse 3s infinite linear;
}

.p2-flow-line-right::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px var(--p2-amber), 0 0 16px var(--p2-amber);
  animation: p2-flow-branch-pulse 3s infinite linear;
}

@keyframes p2-flow-branch-pulse {
  0% {
    top: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    top: 100%;
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Left/Right Pin Columns */
.p2-ic-pins-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
}

.p2-pins-left {
  grid-column: 1;
}

.p2-pins-right {
  grid-column: 2;
}

.p2-pins-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  padding-bottom: 12px;
  margin-bottom: 5px;
  gap: 12px;
  font-size: 0.95rem;
  letter-spacing: 4px;
  color: var(--p2-green);
  font-weight: 700;
  text-transform: uppercase;
}

.p2-pins-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--p2-copper), transparent);
  opacity: 0.4;
}

.p2-pins-left .p2-pins-title {
  flex-direction: row;
}

.p2-pins-right .p2-pins-title {
  color: var(--p2-amber);
}

.p2-pins-title .p2-led {
  animation: p2-title-led-pulse 1.5s infinite alternate ease-in-out;
}

@keyframes p2-title-led-pulse {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Redesigned Flowchart Circuit Cards */
.p2-pin-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  background: rgba(12, 40, 20, 0.65);
  background-image: radial-gradient(rgba(0, 255, 65, 0.04) 1px, transparent 1px);
  background-size: 8px 8px;
  border: 2px solid var(--p2-border);
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  z-index: 1;
  width: 100%;
  max-width: 320px;
}

.p2-pins-left .p2-pin-item {
  border-right: 3px solid var(--p2-copper);
}

.p2-pins-right .p2-pin-item {
  border-left: 3px solid var(--p2-copper);
}

/* Hover highlights card & socket */
.p2-pin-item:hover {
  border-color: var(--p2-green);
  box-shadow: 0 10px 30px rgba(0, 255, 65, 0.15), inset 0 0 10px rgba(0, 255, 65, 0.05);
  transform: translateY(-2px) scale(1.02);
  z-index: 10;
}

.p2-pins-left .p2-pin-item:hover {
  border-right: 3px solid var(--p2-green);
}

.p2-pins-right .p2-pin-item:hover {
  border-left: 3px solid var(--p2-green);
}

/* Card Internal Header & Marks */
.p2-pin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgba(0, 255, 65, 0.1);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.p2-pins-left .p2-pin-header {
  flex-direction: row-reverse;
}

.p2-pin-id {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--p2-green);
  letter-spacing: 1px;
}

.p2-pins-right .p2-pin-id {
  color: var(--p2-amber);
}

.p2-pin-tech {
  font-size: 0.65rem;
  color: var(--p2-text-muted);
  opacity: 0.6;
}

/* Icon & Title Row */
.p2-pin-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.p2-pins-left .p2-pin-title-row {
  flex-direction: row-reverse;
}

/* IC Socket Frame around Icons */
.p2-pin-icon-socket {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(0, 255, 65, 0.06);
  border: 1px solid rgba(0, 255, 65, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 8px rgba(0, 255, 65, 0.05);
  transition: all 0.3s;
  flex-shrink: 0;
}

.p2-socket-amber {
  background: rgba(255, 190, 11, 0.06);
  border-color: rgba(255, 190, 11, 0.15);
  box-shadow: inset 0 0 8px rgba(255, 190, 11, 0.05);
}

.p2-pin-icon {
  width: 16px;
  height: 16px;
  color: var(--p2-green);
  transition: all 0.3s;
}

.p2-icon-amber {
  color: var(--p2-amber);
}

.p2-pin-item:hover .p2-pin-icon-socket {
  background: rgba(0, 255, 65, 0.15);
  border-color: var(--p2-green);
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
}

.p2-pin-item:hover .p2-socket-amber {
  background: rgba(255, 190, 11, 0.15);
  border-color: var(--p2-amber);
  box-shadow: 0 0 10px rgba(255, 190, 11, 0.2);
}

.p2-pin-item:hover .p2-pin-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px var(--p2-green));
}

.p2-pin-item:hover .p2-icon-amber {
  filter: drop-shadow(0 0 5px var(--p2-amber));
}

/* Solder Terminal Sockets on Card Edges - Redesigned to Top Center */
.p2-pin-terminal {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--p2-copper);
  border: 2px solid var(--p2-solder);
  box-shadow: 0 0 6px var(--p2-copper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  transition: all 0.3s;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
}

.p2-pin-terminal span {
  position: absolute;
  font-size: 8px;
  font-weight: 700;
  color: var(--p2-copper);
  opacity: 0.8;
  pointer-events: none;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.p2-pins-left .p2-pin-terminal span {
  color: var(--p2-green);
}

.p2-pins-right .p2-pin-terminal span {
  color: var(--p2-amber);
}

.p2-pins-left .p2-pin-item:hover .p2-pin-terminal {
  background: var(--p2-green);
  border-color: #fff;
  box-shadow: 0 0 10px var(--p2-green);
}

.p2-pins-right .p2-pin-item:hover .p2-pin-terminal {
  background: var(--p2-amber);
  border-color: #fff;
  box-shadow: 0 0 10px var(--p2-amber);
}

.p2-pin-item:hover .p2-pin-terminal span {
  opacity: 1;
}

.p2-pins-left .p2-pin-item:hover .p2-pin-terminal span {
  color: var(--p2-green);
}

.p2-pins-right .p2-pin-item:hover .p2-pin-terminal span {
  color: var(--p2-amber);
}

/* Flowchart Vertical Connecting Wires */
.p2-pin-wire {
  position: absolute;
  width: 3px;
  height: 40px;
  background: var(--p2-copper);
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  opacity: 0.7;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

/* Hide wire on last card of each column */
.p2-pins-left .p2-pin-item:last-child .p2-pin-wire,
.p2-pins-right .p2-pin-item:last-child .p2-pin-wire {
  display: none !important;
}

/* Highlight wires on hover */
.p2-pins-left .p2-pin-item:hover .p2-pin-wire {
  background: var(--p2-green);
  opacity: 1;
}

.p2-pins-right .p2-pin-item:hover .p2-pin-wire {
  background: var(--p2-amber);
  opacity: 1;
}

/* Flowchart Arrowheads pointing INTO the cards */
.p2-pin-wire::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--p2-copper);
  transition: all 0.3s;
  z-index: 12;
}

.p2-pins-left .p2-pin-item:hover .p2-pin-wire::after {
  border-top-color: var(--p2-green);
  filter: drop-shadow(0 0 5px var(--p2-green));
}

.p2-pins-right .p2-pin-item:hover .p2-pin-wire::after {
  border-top-color: var(--p2-amber);
  filter: drop-shadow(0 0 5px var(--p2-amber));
}

/* 2-Step Signal Propagation Pulses (Moving Dots) flowing vertically */
.p2-pin-wire::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  z-index: 10;
  opacity: 0;
}

.p2-pins-left .p2-pin-wire::before {
  box-shadow: 0 0 8px var(--p2-green), 0 0 16px var(--p2-green);
  animation: p2-pulse-vertical-flow 3s infinite linear;
}

.p2-pins-right .p2-pin-wire::before {
  box-shadow: 0 0 8px var(--p2-amber), 0 0 16px var(--p2-amber);
  animation: p2-pulse-vertical-flow 3s infinite linear;
}

@keyframes p2-pulse-vertical-flow {
  0% {
    top: 0;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  90% {
    top: 100%;
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Vertical animation delay offsets to cascade the data flow */
.p2-pins-left .p2-pin-item:nth-child(2) .p2-pin-wire::before {
  animation-delay: 0s;
}

.p2-pins-left .p2-pin-item:nth-child(3) .p2-pin-wire::before {
  animation-delay: 1.5s;
}

.p2-pins-right .p2-pin-item:nth-child(2) .p2-pin-wire::before {
  animation-delay: 0s;
}

.p2-pins-right .p2-pin-item:nth-child(3) .p2-pin-wire::before {
  animation-delay: 0.8s;
}

.p2-pins-right .p2-pin-item:nth-child(4) .p2-pin-wire::before {
  animation-delay: 1.6s;
}

/* Clean Labels and Description Styles */
.p2-pin-label h4 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--p2-text);
  margin: 0;
  line-height: 1.2;
}

.p2-pin-label p {
  font-size: 0.95rem;
  color: var(--p2-text-dim);
  opacity: 0.9;
  line-height: 1.5;
  margin: 0;
}

/* Light Mode Visual Overrides for Circuit Flowchart */
.light-mode .p2-pin-item {
  background: rgba(255, 255, 255, 0.85);
  background-image: radial-gradient(rgba(5, 150, 105, 0.06) 1px, transparent 1px);
  border: 2px solid rgba(5, 150, 105, 0.2);
}

.light-mode .p2-ic-center {
  background: rgba(255, 255, 255, 0.9) linear-gradient(135deg, rgba(5, 150, 105, 0.02) 25%, transparent 25%, transparent 50%, rgba(5, 150, 105, 0.02) 50%, rgba(5, 150, 105, 0.02) 75%, transparent 75%, transparent);
  background-size: 8px 8px;
  box-shadow: 0 0 30px rgba(13, 148, 136, 0.08), inset 0 0 15px rgba(5, 150, 105, 0.04);
}

.light-mode .p2-ic-center-notch {
  background: #ffffff;
}

.light-mode .p2-pin-icon-socket {
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.15);
}

.light-mode .p2-socket-amber {
  background: rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.15);
}

/* Relaxed Mode Overrides for Career Pathway Flowchart */

/* ========================================================
   § PERFORMANCE MODE ANIMATIONS (LIGHT)
   ======================================================== */

/* ═══════════════════════════════════════════════════════════════
   §9 FOOTER
   ═══════════════════════════════════════════════════════════════ */
.p2-footer {
  position: relative;
  padding: 60px 0 0;
  background: var(--p2-bg-deep);
  border-top: 1px solid var(--p2-border);
}

.p2-footer-trace {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--p2-copper) 15%, var(--p2-green) 50%, var(--p2-copper) 85%, transparent 100%);
  opacity: 0.5;
}

.p2-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.p2-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.p2-footer-brand img {
  width: 90px;
  height: 90px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

body:not(.light-mode) .p2-footer-brand img {
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
}

body.light-mode .p2-footer-brand img {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.p2-footer-brand-name {
  display: block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--p2-text);
}

.p2-footer-brand-tag {
  display: block;
  font-size: 0.6rem;
  color: var(--p2-green);
  letter-spacing: 1px;
}

.p2-footer-desc {
  font-size: 0.8rem;
  color: var(--p2-text-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}

.p2-footer-social {
  display: flex;
  gap: 12px;
}

.p2-footer-social a {
  display: flex;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.p2-footer-social a:hover {
  opacity: 1;
}

.p2-footer-social img {
  width: 22px;
  height: 22px;
}

.p2-footer-heading {
  font-size: 0.7rem;
  color: var(--p2-green);
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.p2-footer-links {
  list-style: none;
  padding: 0;
}

.p2-footer-links li {
  margin-bottom: 8px;
}

.p2-footer-links a {
  color: var(--p2-text-dim);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.2s;
}

.p2-footer-links a:hover {
  color: var(--p2-green);
}

.p2-footer-contact p {
  font-size: 0.8rem;
  color: var(--p2-text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
}

.p2-footer-contact a {
  color: var(--p2-text-dim);
  text-decoration: none;
}

.p2-footer-contact a:hover {
  color: var(--p2-green);
}

.p2-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--p2-border);
  font-size: 0.7rem;
  color: var(--p2-text-muted);
}

.p2-footer-rev {
  letter-spacing: 2px;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
.light-mode {
  --p2-bg-deep: #f0fdf4;
  --p2-bg: #fafffe;
  --p2-bg-mid: #e6f7ed;
  --p2-bg-card: #ffffff;
  --p2-bg-surface: #f0faf5;
  --p2-green: #059669;
  --p2-green-dim: #047857;
  --p2-green-muted: rgba(5, 150, 105, 0.08);
  --p2-copper: #0d9488;
  --p2-copper-light: #14b8a6;
  --p2-copper-dim: rgba(13, 148, 136, 0.15);
  --p2-solder: #475569;
  --p2-amber: #d97706;
  --p2-amber-dim: rgba(217, 119, 6, 0.1);
  --p2-text: #1e293b;
  --p2-text-dim: #475569;
  --p2-text-muted: #94a3b8;
  --p2-border: rgba(5, 150, 105, 0.12);
  --p2-border-copper: rgba(13, 148, 136, 0.2);
  --p2-glow-green: 0 4px 20px rgba(5, 150, 105, 0.1);
  --p2-glow-copper: 0 4px 20px rgba(13, 148, 136, 0.1);
}

/* Light mode specific overrides */
.light-mode .p2-nav {
  background: rgba(240, 253, 244, 0.92);
}

.light-mode .p2-topbar {
  background: #e6f7ed;
}

.light-mode .p2-boot-overlay {
  background: #f0fdf4;
}

.light-mode .p2-boot-line {
  color: var(--p2-green);
}

.light-mode .p2-boot-go.visible {
  color: var(--p2-text);
}

.light-mode .p2-pcb-substrate {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(5, 150, 105, 0.06) 0%, transparent 70%), var(--p2-bg-deep);
}

.light-mode .p2-pcb-grid {
  background-image: linear-gradient(rgba(5, 150, 105, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 150, 105, 0.04) 1px, transparent 1px);
}

.light-mode .p2-pcb-traces-svg {
  opacity: 0.2;
}

.light-mode .p2-pcb-traces-svg .p2-trace {
  stroke: var(--p2-copper);
}

.light-mode .p2-pcb-traces-svg .p2-spad {
  fill: var(--p2-copper);
}

.light-mode .p2-hero-stats {
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.light-mode .p2-hero-badge {
  border-color: rgba(5, 150, 105, 0.15);
  background: rgba(5, 150, 105, 0.05);
}

.light-mode .p2-btn-primary {
  color: #1e293b;
}

.light-mode .p2-bios-panel {
  background: #fff;
  border-color: var(--p2-green);
}

.light-mode .p2-bios-titlebar {
  background: var(--p2-green);
  color: #fff;
}

.light-mode .p2-bios-table td {
  color: var(--p2-text);
}

.light-mode .p2-bios-key {
  color: var(--p2-copper) !important;
}

.light-mode .p2-bios-cursor {
  color: var(--p2-green);
}

.light-mode .p2-jpk-badge {
  border-color: var(--p2-green);
  color: var(--p2-green);
}

.light-mode .p2-circuit-schematic {
  background: rgba(240, 253, 244, 0.5);
}

.light-mode .p2-comp-card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.light-mode .p2-comp-card:hover {
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.12);
}

.light-mode .p2-pcb-board {
  background: rgba(248, 255, 254, 0.96);
  border-color: rgba(20, 184, 166, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(20, 184, 166, 0.08),
    inset 0 0 90px rgba(20, 184, 166, 0.035),
    0 24px 72px rgba(15, 23, 42, 0.08);
}

.light-mode .p2-pcb-board-bg {
  background-image: linear-gradient(rgba(5, 150, 105, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 150, 105, 0.03) 1px, transparent 1px);
}

.light-mode .p2-chip-cpu {
  --p2-module-cpu-shadow-rest:
    0 0 0 1px rgba(5, 150, 105, 0.12),
    0 16px 36px rgba(15, 23, 42, 0.08),
    0 0 28px rgba(20, 184, 166, 0.12);
  --p2-module-cpu-shadow-live:
    0 0 0 1px rgba(5, 150, 105, 0.2),
    0 18px 40px rgba(15, 23, 42, 0.1),
    0 0 34px rgba(20, 184, 166, 0.2);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, 0.045), transparent 58%),
    #fff;
  border-color: #0f9f93;
  box-shadow: var(--p2-module-cpu-shadow-rest);
}

.light-mode .p2-chip-label,
.light-mode .p2-chip-id {
  color: #0f766e;
  opacity: 1;
}

.light-mode .p2-chip-coreline span,
.light-mode .p2-chip-tag {
  color: #047857;
}

.light-mode .p2-chip-module {
  --p2-module-card-filter-rest: drop-shadow(0 0 0 rgba(20, 184, 166, 0));
  --p2-module-card-filter-live: drop-shadow(0 0 10px rgba(20, 184, 166, 0.1));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 255, 254, 0.98)),
    #fff;
  border-color: rgba(20, 184, 166, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(20, 184, 166, 0.05),
    0 14px 34px rgba(15, 23, 42, 0.07);
}

.light-mode .p2-chip-module .p2-chip-name {
  color: #1e293b;
}

.light-mode .p2-board-corners span,
.light-mode .p2-module-bus span {
  background: #f8fffe;
}

.light-mode .p2-chip-coreline,
.light-mode .p2-chip-tag {
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.16);
}

.light-mode .p2-chip-stage {
  color: rgba(5, 150, 105, 0.12);
}

.light-mode .p2-smd-res,
.light-mode .p2-smd-diode {
  border-color: rgba(15, 118, 110, 0.2);
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(5, 150, 105, 0.22) 8px 10px, transparent 10px 16px),
    linear-gradient(90deg, #d4915c 0 9px, rgba(20, 184, 166, 0.08) 9px 43px, #d4915c 43px 100%);
}

.light-mode .p2-smd-cap,
.light-mode .p2-smd-ic,
.light-mode .p2-smd-xtal {
  border-color: rgba(15, 118, 110, 0.24);
  background-color: rgba(255, 255, 255, 0.66);
}

.light-mode .p2-smd-via {
  border-color: rgba(15, 118, 110, 0.42);
  background: radial-gradient(circle, #0f766e 0 2px, transparent 3px);
}

.light-mode .p2-cpu-smd-status {
  color: rgba(30, 41, 59, 0.62);
}

.light-mode .p2-module-footprint {
  border-top-color: rgba(15, 118, 110, 0.14);
  background-image: repeating-linear-gradient(90deg, rgba(15, 118, 110, 0.25) 0 8px, transparent 8px 16px);
}

.light-mode .p2-module-smd-bank span {
  border-color: rgba(15, 118, 110, 0.2);
  background: linear-gradient(90deg, #d4915c 0 3px, rgba(15, 118, 110, 0.08) 3px 9px, #d4915c 9px 100%);
}

.light-mode .p2-chip-module:hover {
  border-color: #0f9f93;
  box-shadow:
    inset 0 0 0 1px rgba(20, 184, 166, 0.12),
    0 18px 38px rgba(15, 23, 42, 0.1),
    0 0 24px rgba(20, 184, 166, 0.15);
}

.light-mode .p2-chip-tooltip {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--p2-green);
  color: var(--p2-text-dim);
}

.light-mode .p2-ic-center {
  background: #fff;
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.08);
}

.light-mode .p2-pin-item {
  background: #fff;
}

.light-mode .p2-node-pad {
  background: #fff;
}

.light-mode .p2-switch-track {
  background: #e6f7ed;
}

.light-mode .p2-btn-nav-enroll {
  background: var(--p2-green);
  color: #fff;
}

.light-mode .p2-dropdown-menu {
  background: rgba(255, 255, 255, 0.97);
}

.light-mode .p2-footer {
  background: #e6f7ed;
}

.light-mode .p2-cta {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(5, 150, 105, 0.04) 0%, transparent 70%), var(--p2-bg);
}

.light-mode .p2-led {
  background: var(--p2-green);
  box-shadow: 0 0 6px var(--p2-green);
}

/* Light Mode Performance Animation (Background Only) - Seamless Edition */
@keyframes p2-lm-grid-scroll {
  0% {
    background-position: 0 -1000px;
  }

  100% {
    background-position: 0 0;
  }
}

@keyframes p2-lm-grid-pulse {

  0%,
  100% {
    background-image: linear-gradient(rgba(5, 150, 105, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 150, 105, 0.05) 1px, transparent 1px);
  }

  50% {
    background-image: linear-gradient(rgba(5, 150, 105, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 150, 105, 0.2) 1px, transparent 1px);
    box-shadow: inset 0 0 100px rgba(5, 150, 105, 0.05);
  }
}

@keyframes p2-lm-radar-sweep {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

@keyframes p2-lm-trace-flow-seamless {
  0% {
    stroke-dashoffset: 160;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

/* Light Performance Mode - Program Overview Additions (Extreme) */

/* Background Elements for Light Performance Mode */

/* CPU Socket */

@keyframes p2-cpu-core-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Data Bus */

/* Circuit Paths (Diagonal) */

/* Circuit Vias */

/* Microcontroller */

/* Crystal Oscillator */

/* EXTENDED EXTREME CPU & CIRCUIT ANIMATIONS (More Visible) */

/* Massive background substrate */

/* Giant background CPU Socket */

/* Glowing thick data bus */

/* Thick Traces */

/* Mega Packets */

/* Gears */

/* Capacitor Array */

/* Overrides to make previous elements more visible! */

/* ═══════════════════════════════════════════════════════════════
   ECO LIGHT MODE — 45% Scaled Performance Animations
   ═══════════════════════════════════════════════════════════════ */

.light-mode.eco-mode .p2-overview .p2-container {
  position: relative;
  z-index: 1;
}

/* Chip, RAM, GPU — visible but muted */

/* Traces — slower */

/* Grid, scanner, radar — reduced */

/* Data streams, status — slower blink */

/* Energy lines, thick traces — dimmer */

/* Binary, hex lattice, scan beam — very faint */

/* Pulse rings, spinners — slower */

/* CPU sockets — reduced glow */

/* Data bus, circuit paths, vias — muted */

/* Misc elements — reduced */

/* ═══════════════════════════════════════════════════════════════
   OVERCLOCK LIGHT MODE — Extreme Mechatronic Foreground Animations
   ═══════════════════════════════════════════════════════════════ */

/* Ensure background elements are visible in overclock mode and inherit performance styles */

/* Foreground panel shaking and intense pulsing */

/* Titlebar glitching */

/* Extreme SVG circuit lines */

/* Rapid current dot */

/* Table elements intense green text */

/* Section title text shadow glitch */

/* JPK Badge flashing */

/* About Block intense borders */

/* REMOVED: Container neon scanline (user request) */

/* Twitching overline */

/* Speed toggle absolute panic mode */

/* Flashing SVG components */

/* List items jitter */

/* More intense table row hover glitch */

/* ═══════════════════════════════════════════════════════════════
   OVERCLOCK LIGHT MODE — Extreme Background Overrides
   ═══════════════════════════════════════════════════════════════ */
/* Speed up all floating background chips and sockets */

/* Make the CPU cores spin frantically and flash red */

/* Insanely fast data packets and traces */

/* Frantic grid scrolling and radar sweeping */

/* Hyper spinning gears */

/* Vibrating capacitor arrays */

/* ═══════════════════════════════════════════════════════════════
   TURBO OVERCLOCK EXCLUSIVE BACKGROUND ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Hazard warning strips scrolling horizontally */

/* Matrix-style data cascade */

/* Lightning arcing effect */

/* Giant CRITICAL warning text floating in background */

/* Giant Glitching Hexagon */

/* Cooling Fans */

/* Thermal Vents / Smoke */

/* Data Corruption Blocks (VRAM Glitch) */

/* Targeting Crosshairs */

/* Vertical Marquee Warning */

/* Shockwave Rings */

/* ═══════════════════════════════════════════════════════════════
   DARK PERFORMANCE MODE — Glowy Neon Tuning
   ═══════════════════════════════════════════════════════════════ */

/* Enable the high-density electronic component background in Dark Performance Mode */

/* Neon Glow Overrides for Dark Mode Background Components */

/* Dark Performance Mode - Program Overview Additions (Extreme) */

/* ═══════════════════════════════════════════════════════════════
   ECO MODE — Minimal animations
   ═══════════════════════════════════════════════════════════════ */


.eco-mode .p2-hero-content {
  opacity: 1;
  transform: none;
  transition: none;
}

.eco-mode .p2-trace,
.eco-mode .p2-solder-text::after,
.eco-mode .p2-btn-outline::after {
  animation: none;
  display: none;
}

.eco-mode .p2-hero-badge::before,
.eco-mode .p2-hero-stats::before {
  display: none;
}

.eco-mode .p2-led,
.eco-mode .p2-solder-text,
.eco-mode .p2-hero-sub,
.eco-mode .p2-hero-badge,
.eco-mode .p2-hero-stats,
.eco-mode .p2-hstat-prefix,
.eco-mode .p2-hstat-num,
.eco-mode .p2-btn-primary,
.eco-mode .p2-btn-outline,
.eco-mode .p2-btn-outline::before {
  animation: none;
}

.eco-mode .p2-rail-pulse {
  animation: none;
  display: none;
}

.eco-mode .p2-signal-pulse-dot {
  animation: none;
  display: none;
}

.eco-mode .p2-current-dot {
  animation: none;
}

.eco-mode .p2-jpk-glow {
  animation: none;
  display: none;
}

.eco-mode .p2-scroll-trace {
  animation: none;
}

.eco-mode .p2-cursor {
  animation: none;
  opacity: 1;
}

.eco-mode .p2-bios-cursor {
  animation: none;
  opacity: 1;
}

.eco-mode .p2-cta-icon svg {
  animation: none;
}

.eco-mode .p2-chip-module {
  animation: none;
  opacity: 1;
  transform: none;
}

.eco-mode .p2-pcb-grid {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT ECO MODE — 45% Capability Performance Animations
   ═══════════════════════════════════════════════════════════════ */
.light-mode.eco-mode .p2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent, transparent 800px, rgba(5, 150, 105, 0.02) 950px, rgba(5, 150, 105, 0.2) 995px, rgba(0, 255, 0, 0.45) 1000px);
  background-size: 100% 1000px;
  animation: p2-lm-grid-scroll 22s linear infinite !important;
  pointer-events: none;
  z-index: 0;
  display: block;
}

.light-mode.eco-mode .p2-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 1200px;
  background: conic-gradient(from 0deg, transparent 70%, rgba(5, 150, 105, 0.02) 95%, rgba(5, 150, 105, 0.15) 100%);
  border-radius: 50%;
  border: none;
  transform: translate3d(-50%, -50%, 0) rotate(0deg);
  will-change: transform;
  backface-visibility: hidden;
  animation: p2-lm-radar-sweep 18s linear infinite !important;
  pointer-events: none;
  z-index: 0;
  display: block;
}

.light-mode.eco-mode .p2-pcb-grid {
  display: block !important;
  animation: p2-lm-grid-pulse 9s infinite alternate ease-in-out !important;
  opacity: 0.45;
}

.light-mode.eco-mode .p2-trace {
  display: block !important;
  stroke: rgba(5, 150, 105, 0.45) !important;
  stroke-dasharray: 40, 120 !important;
  stroke-width: 2px !important;
  animation: p2-lm-trace-flow-seamless 5.5s infinite linear !important;
  opacity: 0.45 !important;
  filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK ECO MODE — 45% Capability Performance Animations
   ═══════════════════════════════════════════════════════════════ */
body:not(.light-mode).eco-mode .p2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent, transparent 800px, rgba(5, 150, 105, 0.02) 950px, rgba(5, 150, 105, 0.1) 995px, rgba(0, 255, 0, 0.45) 1000px);
  background-size: 100% 1000px;
  animation: p2-lm-grid-scroll 22s linear infinite !important;
  pointer-events: none;
  z-index: 0;
  display: block;
}

body:not(.light-mode).eco-mode .p2-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 1200px;
  background: conic-gradient(from 0deg, transparent 70%, rgba(5, 150, 105, 0.05) 95%, rgba(0, 255, 0, 0.2) 100%);
  border-radius: 50%;
  border: none;
  transform: translate3d(-50%, -50%, 0) rotate(0deg);
  will-change: transform;
  backface-visibility: hidden;
  animation: p2-lm-radar-sweep 18s linear infinite !important;
  pointer-events: none;
  z-index: 0;
  display: block;
}

body:not(.light-mode).eco-mode .p2-pcb-grid {
  animation: p2-lm-grid-pulse 9s infinite alternate ease-in-out !important;
  display: block !important;
  opacity: 0.35 !important;
}

body:not(.light-mode).eco-mode .p2-pcb-traces-svg .p2-trace {
  stroke: rgba(0, 255, 65, 0.8) !important;
  stroke-dasharray: 40, 120 !important;
  stroke-width: 2px !important;
  animation: p2-lm-trace-flow-seamless 5.5s infinite linear !important;
  opacity: 1 !important;
  filter: none !important;
  display: block !important;
}

body:not(.light-mode).eco-mode .p2-hero-bg::before {
  content: '';
  position: absolute;
  inset: -50%;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(0, 255, 0, 0.06) 101px, rgba(0, 255, 0, 0.06) 102px, transparent 103px),
    repeating-linear-gradient(-45deg, transparent, transparent 100px, rgba(5, 150, 105, 0.06) 101px, rgba(5, 150, 105, 0.06) 102px, transparent 103px);
  background-size: 200px 200px;
  animation: p2-turbo-lm-diagonal-lasers 11s linear infinite !important;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}

body:not(.light-mode).eco-mode .p2-pcb-substrate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 150px, rgba(0, 255, 0, 0.02) 151px, rgba(0, 255, 0, 0.02) 153px, transparent 154px);
  background-size: 100% 1000px;
  animation: p2-turbo-lm-data-pillars 18s linear infinite !important;
  pointer-events: none;
  z-index: -2;
}

body:not(.light-mode).eco-mode .p2-pcb-substrate::after {
  content: '';
  position: absolute;
  inset: -50%;
  background-image: radial-gradient(circle, rgba(0, 255, 0, 0.45) 1.5px, transparent 1.5px);
  background-size: 120px 120px;
  animation: p2-turbo-lm-particle-rain 33s linear infinite !important;
  opacity: 0.18 !important;
  pointer-events: none;
  z-index: -2;
}

body:not(.light-mode).eco-mode .p2-pcb-grid::after {
  content: '';
  position: absolute;
  inset: -50%;
  background-image: radial-gradient(rgba(0, 255, 0, 0.13) 2px, transparent 2px);
  background-size: 40px 40px;
  animation: p2-turbo-lm-dot-matrix 13s linear infinite !important;
  opacity: 0.13 !important;
  pointer-events: none;
  z-index: -1;
}

body:not(.light-mode).eco-mode .p2-hero-stats::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
  background: linear-gradient(to bottom, transparent, rgba(0, 255, 0, 0.13));
  animation: p2-turbo-lm-stat-drop 4.5s infinite linear !important;
  pointer-events: none;
  z-index: -1;
  display: block !important;
}

body:not(.light-mode).eco-mode .p2-hero-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  border: 2px dashed rgba(0, 255, 0, 0.18);
  border-radius: 50%;
  animation: p2-turbo-lm-hud-ring 18s infinite linear !important;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.05) !important;
  display: none !important;
}

body:not(.light-mode).eco-mode .p2-hero-content::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  border: 1px solid rgba(0, 255, 0, 0.09);
  border-radius: 50%;
  border-top-color: rgba(0, 255, 0, 0.45);
  border-bottom-color: rgba(0, 255, 0, 0.45);
  animation: p2-turbo-lm-hud-ring 26s infinite linear reverse !important;
  pointer-events: none;
  z-index: -1;
  display: none !important;
}

body:not(.light-mode).eco-mode .p2-hero-title::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  top: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 48%, rgba(0, 255, 0, 0.4) 50%, transparent 52%);
  animation: p2-turbo-lm-title-glitch-bar 6.5s infinite linear !important;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: screen;
}

body:not(.light-mode).eco-mode .p2-hero-stats {
  box-shadow: 0 0 18px rgba(0, 255, 0, 0.09), inset 0 0 9px rgba(0, 255, 0, 0.04) !important;
  border: 1px solid rgba(0, 255, 0, 0.22) !important;
}

body:not(.light-mode).eco-mode .p2-btn-primary {
  box-shadow: 0 0 13px rgba(0, 255, 0, 0.13) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT TURBO (OVERCLOCK) MODE — LUXURY ELEGANT WOW ANIMATION
   ═══════════════════════════════════════════════════════════════ */

@keyframes p2-turbo-lm-hud-ring {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
    border-width: 1px;
    opacity: 0;
  }

  20% {
    opacity: 0.8;
    border-width: 3px;
  }

  80% {
    opacity: 0.8;
    border-width: 1px;
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(2);
    border-width: 10px;
    opacity: 0;
  }
}

@keyframes p2-turbo-lm-dot-matrix {
  0% {
    background-position: 0 0, 20px 20px;
  }

  100% {
    background-position: 100px 100px, 120px 120px;
  }
}

@keyframes p2-turbo-lm-particle-rain {
  0% {
    background-position: 0 0, 50px 50px, 100px 100px;
  }

  100% {
    background-position: 0 1000px, 50px 800px, 100px 1200px;
  }
}

@keyframes p2-turbo-lm-diagonal-lasers {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 500px 500px, -500px 500px;
  }
}

@keyframes p2-turbo-lm-stat-drop {
  0% {
    top: -20%;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    top: 120%;
    opacity: 0;
  }
}

@keyframes p2-turbo-lm-title-glitch-bar {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  20% {
    transform: translateY(200%);
    opacity: 0;
  }

  100% {
    transform: translateY(200%);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OVERCLOCK MODE — Maximum visual fidelity
   ══════════════════════@keyframes p2-lm-turbo-title-raw {
  0% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(5,150,105,0.4)) drop-shadow(0 0 20px rgba(0,255,0,0.2)); letter-spacing: 0px; transform: scale(1); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 0 20px rgba(5,150,105,0.8)) drop-shadow(0 0 40px rgba(0,255,0,0.5)); letter-spacing: 2px; transform: scale(1.02); }
  100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(5,150,105,0.4)) drop-shadow(0 0 20px rgba(0,255,0,0.2)); letter-spacing: 0px; transform: scale(1); }
}

@keyframes p2-lm-turbo-stats-raw {
  0% { box-shadow: 0 0 20px rgba(5,150,105,0.2), inset 0 0 15px rgba(0,255,0,0.1); border-color: rgba(5,150,105,0.5); transform: translateY(0) perspective(1000px) rotateX(0deg) rotateY(0deg); background-position: 0 0; }
  50% { box-shadow: 0 0 50px rgba(5,150,105,0.5), inset 0 0 30px rgba(0,255,0,0.3); border-color: #0f0; transform: translateY(-8px) perspective(1000px) rotateX(2deg) rotateY(-1deg); background-position: 100px 100px; }
  100% { box-shadow: 0 0 20px rgba(5,150,105,0.2), inset 0 0 15px rgba(0,255,0,0.1); border-color: rgba(5,150,105,0.5); transform: translateY(0) perspective(1000px) rotateX(0deg) rotateY(0deg); background-position: 0 0; }
}

@keyframes p2-lm-turbo-num-raw {
  0% { color: #022c22; text-shadow: 0 0 5px rgba(0,255,0,0.3); transform: scale(1) translate(0,0); }
  25% { color: #0f0; text-shadow: 0 0 15px rgba(0,255,0,0.8); transform: scale(1.1) translate(-2px, 1px); }
  50% { color: #065f46; text-shadow: 0 0 10px rgba(0,255,0,0.5); transform: scale(0.95) translate(1px, -2px); }
  75% { color: #0f0; text-shadow: 0 0 20px rgba(0,255,0,0.9); transform: scale(1.05) translate(-1px, 2px); }
  100% { color: #022c22; text-shadow: 0 0 5px rgba(0,255,0,0.3); transform: scale(1) translate(0,0); }
}

@keyframes p2-lm-turbo-btn-raw {
  0%, 100% { box-shadow: 0 0 15px rgba(5,150,105,0.2), inset 0 0 5px rgba(0,255,0,0.2); border-color: rgba(5,150,105,0.5); transform: scale(1); background-position: 0% 50%; }
  50% { box-shadow: 0 0 40px rgba(5,150,105,0.6), inset 0 0 20px rgba(0,255,0,0.5); border-color: #0f0; transform: scale(1.05); background-position: 100% 50%; }
}

@keyframes p2-lm-turbo-beam-raw {
  0% { transform: scaleX(0); transform-origin: left; opacity: 0.8; box-shadow: 0 0 10px #0f0; }
  50% { transform: scaleX(1); transform-origin: left; opacity: 1; box-shadow: 0 0 30px #0f0; }
  51% { transform-origin: right; }
  100% { transform-origin: right; transform: scaleX(0); opacity: 0.8; box-shadow: 0 0 10px #0f0; }
}

@keyframes p2-lm-turbo-stats-scan {
  0% { top: -10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

@keyframes p2-lm-turbo-decode {
  0% { opacity: 0.7; letter-spacing: 0px; filter: drop-shadow(0 0 5px rgba(0,255,0,0.5)); }
  50% { opacity: 1; letter-spacing: 3px; filter: drop-shadow(0 0 15px #0f0); }
  100% { opacity: 0.7; letter-spacing: 0px; filter: drop-shadow(0 0 5px rgba(0,255,0,0.5)); }
}

.light-mode.overclock-mode .p2-solder-text {
  animation: p2-lm-turbo-title-raw 2.5s ease-in-out infinite !important;
  color: transparent !important;
  background: linear-gradient(90deg, #022c22 0%, #0f0 10%, #065f46 20%, #022c22 50%, #0f0 60%, #059669 70%, #022c22 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
}

.light-mode.overclock-mode .p2-hero-stats {
  animation: p2-lm-turbo-stats-raw 2.5s infinite ease-in-out !important;
  border: 1px solid rgba(5,150,105,0.5) !important;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.85), rgba(255,255,255,0.85) 10px, rgba(230,255,230,0.9) 10px, rgba(230,255,230,0.9) 20px) !important;
  background-size: 200% 200% !important;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.light-mode.overclock-mode .p2-hero-stats::before {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: #0f0; box-shadow: 0 0 15px #0f0, 0 0 30px #0f0;
  animation: p2-lm-turbo-stats-scan 2.5s infinite linear !important;
  pointer-events: none; z-index: 10;
}

.light-mode.overclock-mode .p2-hstat-num {
  animation: p2-lm-turbo-num-raw 1.5s infinite ease-in-out !important;
  display: inline-block;
}

.light-mode.overclock-mode .p2-btn-primary,
.light-mode.overclock-mode .p2-btn-outline {
  animation: p2-lm-turbo-btn-raw 2s infinite ease-in-out !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(200,255,200,0.9), rgba(255,255,255,0.8)) !important;
  background-size: 200% auto !important;
  color: #022c22 !important;
  text-shadow: none !important;
  font-weight: 700;
}

.light-mode.overclock-mode .p2-btn-primary:hover,
.light-mode.overclock-mode .p2-btn-outline:hover {
  background: #059669 !important;
  color: #fff !important;
}

.light-mode.overclock-mode .p2-solder-text::after {
  background: linear-gradient(90deg, transparent, rgba(5,150,105,0.8), transparent) !important;
  box-shadow: 0 0 10px rgba(5,150,105,0.3) !important;
  height: 3px !important;
  animation: p2-lm-turbo-beam-raw 2s infinite ease-in-out !important;
}

.light-mode.overclock-mode .p2-hero-badge {
  animation: p2-lm-turbo-decode 2s infinite ease-in-out !important;
  border: 1px solid rgba(5,150,105,0.5) !important;
  background: rgba(255,255,255,0.8) !important;
  color: #022c22 !important;
  text-shadow: none !important;
}

.light-mode.overclock-mode .p2-hero-sub {
  animation: p2-lm-turbo-decode 3s infinite ease-in-out !important;
  color: #065f46 !important;
  text-shadow: none !important;
  display: inline-block;
}-badge { animation: p2-turbo-stats-surge 1.5s infinite reverse !important; border: 3px solid #0f0 !important; }
.overclock-mode .p2-hero-sub { animation: p2-turbo-title-mega-glow 3s infinite reverse !important; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT TURBO FOREGROUND — PREMIUM RAW ELECTRONIC
   ═══════════════════════════════════════════════════════════════ */
@keyframes p2-lm-turbo-title-raw {
  0% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 10px rgba(5, 150, 105, 0.4)) drop-shadow(0 0 20px rgba(0, 255, 0, 0.2));
    transform: scale(1);
  }

  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 20px rgba(5, 150, 105, 0.8)) drop-shadow(0 0 40px rgba(0, 255, 0, 0.5));
    transform: scale(1.02);
  }

  100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 10px rgba(5, 150, 105, 0.4)) drop-shadow(0 0 20px rgba(0, 255, 0, 0.2));
    transform: scale(1);
  }
}

@keyframes p2-lm-turbo-stats-raw {
  0% {
    box-shadow: 0 0 20px rgba(5, 150, 105, 0.2), inset 0 0 15px rgba(0, 255, 0, 0.1);
    border-color: rgba(5, 150, 105, 0.5);
    transform: translateY(0) perspective(1000px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    box-shadow: 0 0 50px rgba(5, 150, 105, 0.5), inset 0 0 30px rgba(0, 255, 0, 0.3);
    border-color: #0f0;
    transform: translateY(-8px) perspective(1000px) rotateX(2deg) rotateY(-1deg);
  }

  100% {
    box-shadow: 0 0 20px rgba(5, 150, 105, 0.2), inset 0 0 15px rgba(0, 255, 0, 0.1);
    border-color: rgba(5, 150, 105, 0.5);
    transform: translateY(0) perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
}

@keyframes p2-lm-turbo-num-raw {
  0% {
    color: #022c22;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
    transform: scale(1);
  }

  25% {
    color: #0f0;
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.8);
    transform: scale(1.1);
  }

  50% {
    color: #065f46;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    transform: scale(0.95);
  }

  75% {
    color: #0f0;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.9);
    transform: scale(1.05);
  }

  100% {
    color: #022c22;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
    transform: scale(1);
  }
}

@keyframes p2-lm-turbo-btn-raw {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(5, 150, 105, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.2);
    border-color: rgba(5, 150, 105, 0.5);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 40px rgba(5, 150, 105, 0.6), inset 0 0 20px rgba(0, 255, 0, 0.5);
    border-color: #0f0;
    transform: scale(1.05);
  }
}

@keyframes p2-lm-turbo-beam-raw {
  0% {
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0.8;
    box-shadow: 0 0 10px #0f0;
  }

  50% {
    transform: scaleX(1);
    transform-origin: left;
    opacity: 1;
    box-shadow: 0 0 30px #0f0;
  }

  51% {
    transform-origin: right;
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
    opacity: 0.8;
    box-shadow: 0 0 10px #0f0;
  }
}

@keyframes p2-lm-turbo-stats-scan {
  0% {
    top: -10%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 110%;
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DARK TURBO (OVERCLOCK) MODE — ALL OUT MAX NEON
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   DARK ECO MODE — Toned Down Neon Background
   ═══════════════════════════════════════════════════════════════ */
/* Enable the high-density electronic component background in Dark Eco Mode, but at 45% capacity */

/* Eco Neon Glow Overrides (dimmer, less intense, slower) */

/* ═══════════════════════════════════════════════════════════════
   DARK OVERCLOCK MODE — Maximum Hardware Meltdown (Neon Overdrive)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Reactor Core Meltdown Components (Red-Hot & Violet Neon) */

/* 2. Hyper-Speed Laser Data Buses */

/* 3. Extreme OC Elements Styled for Dark Mode */

/* Circuit Schematic Dark Turbo Styles */

/* Circuit Schematic Dark Turbo OVERDRIVE (Automatic in Overclock Mode) */

/* ═══════════════════════════════════════════════════════════════
   LIGHT PERFORMANCE MODE ONLY — Benefits Section Animations
   ═══════════════════════════════════════════════════════════════ */

/* --- Light Performance Mode: Extreme Header Animations --- */

/* --- EXTENDED THINKING: OMNI-MECHATRONIC BACKGROUND (Light Performance) --- */

@keyframes p2-bg-grid-pan {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 60px;
  }
}

@keyframes p2-bg-data-sweep {
  0% {
    background-position: 0% -50%, 0% 150%;
  }

  100% {
    background-position: 0% 150%, 0% -50%;
  }
}

@keyframes p2-hud-spin-slow {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.02);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes p2-hud-spin-reverse {
  0% {
    transform: rotate(360deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(0.98);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes p2-pulse-opacity {

  0%,
  100% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes p2-hex-float {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-50px) rotate(15deg);
  }
}

@keyframes p2-scanline-fast {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100vh);
  }
}

@keyframes p2-ticker-tape {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* Layer 1: Complex Isometric PCB Substrate */

/* Layer 2: Massive Sweeping Radar Beams & Holographic Scanners */

/* Layer 3: Giant HUD Circles & Crosshairs */

/* Layer 4: Opposite spinning amber data rings with massive mechanical gear feel */

/* Layer 5: High-Speed Data Packets (Vertical bus traces) */

/* Layer 6: Floating Hexagonal Nodes / Solder Pads */

/* Layer 7: Continuous Horizontal Laser Scanline */

/* Layer 8: Background Binary Ticker Tape Streams */

/* Layer 9: Scattered SMD Components (Surface Mount Devices) flickering */

/* Layer 10: Central Processor Core / Cooling Fan */
@keyframes p2-cpu-core-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Layer 11: Massive Array of Background SMDs across entire rows */

/* Layer 12: Microchip processing nodes */

/* Layer 13: Floating Data Nodes */

/* Layer 14: Motherboard Rail Power Distribution Trace */
@keyframes p2-rail-energy-flow {
  0% {
    background-position: 0% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Layer 15: Voltage Regulator Modules scattered along rail */

/* Layer 16: SMD IC Chips on card backgrounds */
@keyframes p2-ic-process {

  0%,
  100% {
    box-shadow: inset 0 0 0 rgba(5, 150, 105, 0);
  }

  50% {
    box-shadow: inset 0 0 30px rgba(5, 150, 105, 0.3);
  }
}

/* Layer 17: Oscilloscope Waveform on title */
@keyframes p2-wave-scroll {
  0% {
    background-position: 0 50%;
  }

  100% {
    background-position: 200px 50%;
  }
}

/* Layer 18: Electromagnetic Field Lines around cards container */

/* Layer 19: Capacitor Bank with charge/discharge animation */

/* Layer 20: Live Datasheet Hex Address Streams on card footers */

/* Layer 21: Massive Left Gutter Hex Data Stream */

/* Layer 22: Massive Right Gutter Telemetry Data */

.p2-benefits .p2-container {
  position: relative;
  z-index: 1;
}

/* --- Light Performance Mode: Readable Text & More Animation --- */

/* Ensure child spans (like /month) scale up proportionately and are readable */

/* Enhance h4 titles for readability and add floating animation */

/* Enhance paragraph text for readability and animation */

/* Ensure datasheet text at the bottom is perfectly legible */

/* The scanning pins get a stronger opacity so they are easier to see */

/* --- EXTENDED THINKING: SMOOTH ICON HOVER ANIMATION --- */
@keyframes p2-icon-energize-smooth {
  0% {
    transform: scale(1.1) translateY(0);
    filter: drop-shadow(0 0 10px var(--p2-green));
  }

  100% {
    transform: scale(1.15) translateY(-6px);
    filter: drop-shadow(0 0 20px var(--p2-green));
  }
}

@keyframes p2-icon-energize-smooth-amber {
  0% {
    transform: scale(1.1) translateY(0);
    filter: drop-shadow(0 0 10px var(--p2-amber));
  }

  100% {
    transform: scale(1.15) translateY(-6px);
    filter: drop-shadow(0 0 20px var(--p2-amber));
  }
}

@keyframes p2-hud-ring-smooth {
  0% {
    transform: rotate(0deg) scale(1);
    border-width: 1px;
    opacity: 0.8;
  }

  50% {
    transform: rotate(180deg) scale(1.1);
    border-width: 2px;
    opacity: 1;
  }

  100% {
    transform: rotate(360deg) scale(1);
    border-width: 1px;
    opacity: 0.8;
  }
}

/* Base icon container goes into smooth overdrive on hover */
.p2-comp-card:not(.p2-comp-amber):hover .p2-comp-icon {
  animation: p2-icon-energize-smooth 1.5s infinite alternate ease-in-out;
  background: rgba(5, 150, 105, 0.15);
  box-shadow: inset 0 0 15px rgba(5, 150, 105, 0.6), 0 0 25px rgba(5, 150, 105, 0.3);
}

.p2-comp-card.p2-comp-amber:hover .p2-comp-icon {
  animation: p2-icon-energize-smooth-amber 1.5s infinite alternate ease-in-out;
  background: rgba(255, 190, 11, 0.15);
  box-shadow: inset 0 0 15px rgba(255, 190, 11, 0.6), 0 0 25px rgba(255, 190, 11, 0.3);
}

/* The dashed HUD ring spins smoothly */
.p2-comp-card:hover .p2-comp-icon::before {
  animation: p2-hud-ring-smooth 1.5s infinite linear !important;
}

/* The bottom pin glows and expands smoothly on hover */
@keyframes p2-pin-laser-smooth {
  0% {
    transform: translateX(-50%) scaleX(1);
    bottom: -8px;
    opacity: 0.6;
  }

  100% {
    transform: translateX(-50%) scaleX(1.8);
    bottom: -12px;
    opacity: 1;
    height: 3px;
  }
}

.p2-comp-card:hover .p2-comp-icon::after {
  animation: p2-pin-laser-smooth 1.5s infinite alternate ease-in-out;
}

/* --- EXTENDED THINKING: Rich Background Elements (Light Performance Only) --- */

/* 1. Crosshair Calibration Markers */

/* 2. Floating Wireframe Hexagons */

/* Trick to make an outlined hex since border doesn't follow clip-path cleanly:
   We use a pseudo-element to cut out the inside */

/* 3. Drawing Circuit Traces */

/* ═══════════════════════════════════════════════════════════════
   ECO LIGHT MODE — BENEFITS BACKGROUND (75% Capability)
   Dialed back from Performance mode, but still rich in appearance:
   - Opacities reduced to ~75% of performance values
   - Animation durations slightly increased
   - Layers 12, 13, 18-20 removed to save GPU
   - Keeps core layers 1-11, 14-17 at high-efficiency intensity
   ═══════════════════════════════════════════════════════════════ */

/* Base container */
.light-mode.eco-mode .p2-benefits {
  overflow: hidden;
  position: relative;
}

/* Eco Layer 1: PCB Substrate (reduced opacity) */
.light-mode.eco-mode .p2-benefits::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(5, 150, 105, 0.06) 1.5px, transparent 1.5px),
    linear-gradient(rgba(5, 150, 105, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 150, 105, 0.03) 1px, transparent 1px);
  background-size: 30px 30px, 60px 60px, 60px 60px;
  animation: p2-bg-grid-pan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Eco Layer 2: Sweeping Radar Beams */
.light-mode.eco-mode .p2-benefits::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(5, 150, 105, 0.01) 48%, rgba(5, 150, 105, 0.08) 50%, rgba(5, 150, 105, 0.01) 52%, transparent 58%),
    linear-gradient(90deg, transparent 42%, rgba(217, 119, 6, 0.01) 48%, rgba(217, 119, 6, 0.06) 50%, rgba(217, 119, 6, 0.01) 52%, transparent 58%);
  background-size: 100% 200%, 200% 100%;
  animation: p2-bg-data-sweep 16s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Eco Layer 3: HUD Circle (850px, medium speed) */
.light-mode.eco-mode .p2-benefits .p2-container::before {
  content: '';
  position: absolute;
  top: -25%;
  left: -8%;
  width: 850px;
  height: 850px;
  border-radius: 50%;
  border: 1px dashed rgba(5, 150, 105, 0.12);
  background:
    conic-gradient(from 0deg, transparent 0%, rgba(5, 150, 105, 0.02) 10%, transparent 20%, transparent 40%, rgba(5, 150, 105, 0.02) 50%, transparent 60%);
  box-shadow: 0 0 80px rgba(5, 150, 105, 0.06);
  animation: p2-hud-spin-slow 50s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Eco Layer 4: Amber Data Ring (650px) */
.light-mode.eco-mode .p2-benefits .p2-container::after {
  content: '';
  position: absolute;
  bottom: -35%;
  right: -2%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  border: 2px dotted rgba(217, 119, 6, 0.1);
  background:
    conic-gradient(from 180deg, transparent 0%, rgba(217, 119, 6, 0.02) 5%, transparent 10%);
  box-shadow: inset 0 0 40px rgba(217, 119, 6, 0.03);
  animation: p2-hud-spin-reverse 40s linear infinite, p2-pulse-opacity 8s infinite alternate;
  pointer-events: none;
  z-index: -1;
}

/* Eco Layer 5: Data Packets (4 streams) */
.light-mode.eco-mode .p2-benefits .p2-section-trace {
  display: block;
  width: 2px;
  height: 80px;
  background: transparent;
  box-shadow:
    0 200px 0 0 rgba(5, 150, 105, 0.3),
    30vw 500px 0 0 rgba(217, 119, 6, 0.4),
    -25vw 100px 0 0 rgba(5, 150, 105, 0.3),
    15vw 700px 0 0 rgba(5, 150, 105, 0.3);
  animation: p2-data-packet-fly 9s linear infinite;
  opacity: 0.7;
  z-index: 0;
}

/* Eco Layer 6: Floating Solder Pads */
.light-mode.eco-mode .p2-benefits .p2-rack::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(5, 150, 105, 0.1) 4px, transparent 5px),
    radial-gradient(circle at 80% 50%, rgba(217, 119, 6, 0.1) 6px, transparent 7px),
    radial-gradient(circle at 30% 80%, rgba(5, 150, 105, 0.1) 3px, transparent 4px),
    radial-gradient(circle at 90% 10%, rgba(5, 150, 105, 0.08) 8px, transparent 9px);
  animation: p2-hex-float 12s infinite alternate ease-in-out;
}

/* Eco Layer 7: Laser Scanline */
.light-mode.eco-mode .p2-benefits .p2-rack::after {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(5, 150, 105, 0.25), transparent);
  box-shadow: 0 0 8px rgba(5, 150, 105, 0.3);
  animation: p2-scanline-fast 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

/* Eco Layer 8: Binary Ticker */
.light-mode.eco-mode .p2-benefits .p2-rack-row::before {
  content: '01001011 01100101 01101100 01100101 01100010 01101001 01101000 01100001 01101110 00100000 01001101 01100101';
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  font-family: 'Fira Code', monospace;
  font-size: 0.6rem;
  color: rgba(5, 150, 105, 0.05);
  white-space: nowrap;
  letter-spacing: 4px;
  animation: p2-ticker-tape 45s linear infinite;
  pointer-events: none;
  z-index: -2;
}

/* Eco Layer 9: Scattered SMD Components (8 components) */
.light-mode.eco-mode .p2-benefits .p2-section-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(90deg, #94a3b8 2px, #334155 2px, #334155 8px, #94a3b8 8px),
    linear-gradient(90deg, #94a3b8 2px, #334155 2px, #334155 10px, #94a3b8 10px),
    linear-gradient(0deg, #d97706 2px, #334155 2px, #334155 6px, #d97706 6px),
    linear-gradient(90deg, #94a3b8 3px, #1e293b 3px, #1e293b 15px, #94a3b8 15px),
    linear-gradient(0deg, #94a3b8 2px, #334155 2px, #334155 8px, #94a3b8 8px),
    linear-gradient(90deg, #d97706 2px, #334155 2px, #334155 12px, #d97706 12px),
    linear-gradient(0deg, #94a3b8 1px, #1e293b 1px, #1e293b 10px, #94a3b8 10px),
    linear-gradient(90deg, #94a3b8 2px, #334155 2px, #334155 8px, #94a3b8 8px);
  background-size: 10px 4px, 12px 6px, 6px 8px, 18px 8px, 4px 10px, 14px 6px, 4px 12px, 10px 4px;
  background-position: 15% 20%, 85% 60%, 25% 80%, 75% 30%, 10% 50%, 90% 20%, 40% 10%, 60% 85%;
  background-repeat: no-repeat;
  opacity: 0.4;
  animation: p2-pulse-opacity 6s infinite alternate;
}

/* Eco Layer 10: CPU Core (400px) */
.light-mode.eco-mode .p2-benefits .p2-section-header::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(5, 150, 105, 0.1);
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg, rgba(5, 150, 105, 0.02) 10deg, transparent 20deg),
    radial-gradient(circle, transparent 40%, rgba(5, 150, 105, 0.03) 41%, transparent 42%);
  box-shadow: inset 0 0 35px rgba(5, 150, 105, 0.04);
  animation: p2-cpu-core-spin 30s linear infinite;
  pointer-events: none;
  z-index: -3;
}

/* Eco Layer 11: Background SMDs across rows */
.light-mode.eco-mode .p2-benefits .p2-rack-row::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(90deg, #94a3b8 2px, #334155 2px, #334155 8px, #94a3b8 8px),
    linear-gradient(0deg, #d97706 2px, #334155 2px, #334155 6px, #d97706 6px),
    linear-gradient(90deg, #94a3b8 2px, #334155 2px, #334155 10px, #94a3b8 10px),
    linear-gradient(0deg, #94a3b8 2px, #334155 2px, #334155 8px, #94a3b8 8px),
    linear-gradient(90deg, #d97706 2px, #334155 2px, #334155 12px, #d97706 12px),
    linear-gradient(0deg, #94a3b8 1px, #1e293b 1px, #1e293b 10px, #94a3b8 10px);
  background-size: 10px 4px, 6px 8px, 12px 6px, 4px 10px, 14px 6px, 4px 12px;
  background-position: 15% 10%, 25% 90%, 35% 20%, 45% 80%, 55% 15%, 75% 25%;
  background-repeat: no-repeat;
  opacity: 0.35;
}

/* Eco Layer 14: Rail Power Trace */
.light-mode.eco-mode .p2-benefits .p2-rack-rail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 20px, rgba(5, 150, 105, 0.1) 22px, transparent 24px),
    linear-gradient(90deg, transparent, rgba(5, 150, 105, 0.2), rgba(217, 119, 6, 0.15), transparent);
  background-size: 100% 100%, 200% 100%;
  animation: p2-rail-energy-flow 4.5s linear infinite;
}

/* Eco Layer 15: VRM Modules (4 modules) */
.light-mode.eco-mode .p2-benefits .p2-rack-rail::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 20px;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(0deg, #1e293b 0, #1e293b 12px, #94a3b8 12px, #94a3b8 14px),
    linear-gradient(0deg, #1e293b 0, #1e293b 12px, #d97706 12px, #d97706 14px),
    linear-gradient(0deg, #1e293b 0, #1e293b 12px, #94a3b8 12px, #94a3b8 14px),
    linear-gradient(0deg, #1e293b 0, #1e293b 12px, #d97706 12px, #d97706 14px);
  background-size: 8px 14px;
  background-position: 15% 50%, 40% 50%, 65% 50%, 85% 50%;
  background-repeat: no-repeat;
  opacity: 0.35;
}

/* Eco Layer 16: IC Chips on cards */
.light-mode.eco-mode .p2-benefits .p2-comp-card::before {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 18px;
  border: 1px solid rgba(5, 150, 105, 0.12);
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 0, transparent 3px, rgba(100, 116, 139, 0.2) 3px, rgba(100, 116, 139, 0.2) 25px, transparent 25px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.4) 0, rgba(148, 163, 184, 0.4) 2px, transparent 2px, transparent 4px);
  background-size: 28px 18px, 4px 3px;
  background-position: 0 0, 3px 0;
  background-repeat: no-repeat, repeat-x;
  animation: p2-ic-process 6s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
}

/* Eco Layer 17: Oscilloscope Waveform (faint) */
.light-mode.eco-mode .p2-benefits .p2-section-title::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  pointer-events: none;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 5px,
      rgba(5, 150, 105, 0.08) 5px, rgba(5, 150, 105, 0.08) 6px,
      transparent 6px, transparent 10px,
      rgba(5, 150, 105, 0.15) 10px, rgba(5, 150, 105, 0.15) 11px,
      transparent 11px, transparent 15px,
      rgba(5, 150, 105, 0.22) 15px, rgba(5, 150, 105, 0.22) 16px,
      transparent 16px, transparent 20px,
      rgba(5, 150, 105, 0.15) 20px, rgba(5, 150, 105, 0.15) 21px,
      transparent 21px, transparent 30px);
  background-size: 40px 20px;
  animation: p2-wave-scroll 3s linear infinite;
}

/* Eco: Ensure content stays above backgrounds */
.light-mode.eco-mode .p2-benefits .p2-container {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  .p2-overview-grid {
    grid-template-columns: 1fr;
  }

  .p2-ic-diagram {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .p2-ic-center {
    max-width: 320px;
    margin: 0 auto;
    grid-column: auto;
  }

  .p2-pins-left,
  .p2-pins-right {
    grid-column: auto;
  }

  /* Main vertical trunk only on mobile, hide horizontal split and branches */
  .p2-flowchart-branch {
    grid-column: auto;
    height: 40px;
    margin-top: -40px;
    margin-bottom: -10px;
  }

  .p2-flow-line-main {
    height: 40px;
  }

  .p2-flow-line-main::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--p2-copper);
  }

  .p2-flow-line-horizontal,
  .p2-flow-line-left,
  .p2-flow-line-right {
    display: none !important;
  }

  /* Retain vertical wire connections in the stacked view on mobile */
  .p2-pins-left .p2-pin-wire,
  .p2-pins-right .p2-pin-wire {
    display: block !important;
    bottom: -40px;
    height: 40px;
  }

  /* Hide PIN 3 wire on mobile to place the OR divider in between */
  .p2-pins-left .p2-pin-item:last-child .p2-pin-wire {
    display: none !important;
  }

  .p2-flowchart-or {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: -10px auto;
  }

  .p2-flowchart-or span {
    display: inline-block;
    padding: 6px 16px;
    background: var(--p2-bg-surface);
    border: 1.5px dashed var(--p2-copper);
    border-radius: 20px;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--p2-copper);
    box-shadow: 0 0 12px rgba(200, 117, 51, 0.25);
    letter-spacing: 1px;
    z-index: 5;
  }

  .light-mode .p2-flowchart-or span {
    background: var(--p2-bg-card);
    border-color: var(--p2-copper);
    color: var(--p2-copper);
    box-shadow: none;
  }

  /* Only PIN 7 (the absolute last card) has no vertical wire */
  .p2-pins-right .p2-pin-item:last-child .p2-pin-wire {
    display: none !important;
  }

  .p2-chips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p2-chip-module,
  .p2-chip-module:nth-child(n + 5) {
    grid-column: auto;
  }

  .p2-chip-module:last-child {
    grid-column: 1 / -1;
  }

  .p2-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 768px) {

  .p2-topbar-left span:not(.p2-topbar-div),
  .p2-topbar-right {
    display: none;
  }

  .p2-topbar-left {
    width: 100%;
    justify-content: center;
  }

  .p2-hamburger {
    display: flex;
    margin-left: 12px;
    z-index: 1010;
  }

  .p2-hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .p2-hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
  }

  .p2-hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .p2-nav-brand {
    font-size: 0.85rem;
  }

  .p2-nav-tagline {
    font-size: 0.55rem;
    letter-spacing: 0.5px;
  }

  .p2-nav-links {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: 300px;
    height: 100vh;
    flex-direction: column;
    padding: 100px 24px 40px;
    background: rgba(7, 26, 14, 0.98);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    order: initial;
    border-left: 2px solid var(--p2-border);
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.6);
    z-index: 1005;
  }

  .light-mode .p2-nav-links {
    background: rgba(240, 253, 244, 0.98);
    border-left-color: var(--p2-border-copper);
    box-shadow: -15px 0 45px rgba(13, 148, 136, 0.15);
  }

  .p2-nav-links.open {
    transform: translateX(0);
  }

  .p2-nav-link {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
  }

  .p2-nav-link:hover,
  .p2-nav-link.active {
    background: rgba(0, 255, 65, 0.06);
    color: var(--p2-green);
    border-left-color: var(--p2-green);
    padding-left: 20px;
  }

  .light-mode .p2-nav-link:hover,
  .light-mode .p2-nav-link.active {
    background: rgba(5, 150, 105, 0.08);
    color: var(--p2-green);
    border-left-color: var(--p2-green);
  }

  .p2-nav-dropdown {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .p2-dropdown-toggle {
    display: none;
  }

  .p2-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 16px;
  }

  .p2-nav-cta-wrap {
    margin-left: 0;
    margin-top: 12px;
  }

  .p2-btn-nav-enroll {
    justify-content: center;
    width: 100%;
  }

  .p2-toggle-cluster {
    margin-left: auto;
    margin-right: 8px;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 20px;
  }

  .p2-toggle-cluster .p2-switch-label {
    display: none;
  }

  .p2-theme-switch {
    margin: 0 !important;
  }

  .p2-hero {
    padding: 100px 0 60px;
  }

  .p2-hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .p2-hero-stats {
    flex-direction: column;
  }

  .p2-hstat-div {
    width: 100%;
    height: 1px;
  }

  .p2-hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .p2-boot-overlay {
    padding: 30px;
  }

  .p2-boot-line {
    font-size: 0.7rem;
  }

  .p2-rack-cards {
    grid-template-columns: 1fr;
  }

  .p2-pcb-board {
    padding: 28px 18px 42px;
  }

  .p2-module-bus {
    width: 88%;
    height: 56px;
    margin-bottom: 12px;
  }

  .p2-module-bus span::after {
    height: 16px;
  }

  .p2-chips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .p2-chip-module,
  .p2-chip-module:nth-child(n + 5) {
    grid-column: auto;
  }

  .p2-chip-module:last-child {
    grid-column: 1 / -1;
  }

  .p2-chip-tooltip {
    width: 200px;
    font-size: 0.7rem;
  }

  .p2-signal-path {
    padding-left: 50px;
  }

  .p2-node-pad {
    width: 44px;
    height: 44px;
    left: -22px;
  }

  .p2-node-content h3 {
    font-size: 1rem;
  }

  .p2-cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .p2-footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .p2-footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* Light mode mobile */
  .light-mode .p2-nav-links {
    background: rgba(240, 253, 244, 0.97);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .p2-hero-title {
    font-size: 1.8rem;
  }

  .p2-section-title {
    font-size: 1.6rem;
  }

  .p2-chips-grid {
    grid-template-columns: 1fr;
  }

  .p2-chip-module .p2-chip-name {
    max-width: 80%;
  }

  .p2-chip-coreline {
    border-radius: 12px;
  }

  .p2-chip-cpu .p2-chip-body {
    padding: 16px;
  }

  .p2-chip-cpu .p2-chip-name {
    font-size: 0.9rem;
  }

  .p2-comp-body {
    padding: 16px 14px 20px;
  }
}

/* LIGHT TURBO ONLY - Benefits & Requirements electronics base */

/* LIGHT TURBO ONLY - efficient Benefits overclock boost */

62% {
  opacity: 0.28;
}

100% {
  background-position: 150vw 0, 180px 180px, 0 260px, 240px 0;
  opacity: 0.22;
}

/* -- SMOOTH: GPU-friendly layer breathing (opacity only) -- */

/* -- SMOOTH: Subtle text opacity breathing -- */

/* DARK PERFORMANCE ONLY - Benefits element animations, no background changes */

/* DARK PERFORMANCE ONLY - Benefits SMD night PCB background */

/* DARK ECO ONLY - Benefits SMD night PCB background, 45% capability */

/* DARK TURBO ONLY - Benefits SMD night overclock background */

/* Course Modules only - SMD electronics mode polish */

@keyframes p2-lp-card-current {
  0% {
    background-position: -180% 0;
    opacity: 0.18;
  }

  50% {
    opacity: 0.72;
  }

  100% {
    background-position: 180% 0;
    opacity: 0.18;
  }
}

@keyframes p2-lp-board-route-chase {
  0% {
    background-position: -220px 0, 0 -180px, 0 0;
    opacity: 0.12;
  }

  45% {
    opacity: 0.46;
  }

  100% {
    background-position: 220px 0, 0 180px, 42px 42px;
    opacity: 0.12;
  }
}

.light-mode .p2-smd-diode {
  background: linear-gradient(90deg, #d4915c 0 8px, rgba(15, 118, 110, 0.08) 8px 45px, #d97706 45px 49px, #d4915c 49px 100%);
}

body.eco-mode #p2Modules .p2-chip-module {
  animation: p2-module-card-breathe 9s ease-in-out infinite !important;
  opacity: 1;
}

body.eco-mode #p2Modules .p2-pcb-board::before,
body.eco-mode #p2Modules .p2-smd-part,
body.eco-mode #p2Modules .p2-smd-via,
body.eco-mode #p2Modules .p2-bus-packet,
body.eco-mode #p2Modules .p2-module-footprint,
body.eco-mode #p2Modules .p2-module-smd-bank span,
body.eco-mode #p2Modules .p2-cpu-smd-status span::before {
  animation-duration: 8s !important;
  opacity: 0.55;
}

body.eco-mode #p2Modules .p2-module-bus::before,
body.eco-mode #p2Modules .p2-module-bus::after,
body.eco-mode #p2Modules .p2-module-bus span {
  animation-duration: 6.5s !important;
}

body.eco-mode #p2Modules .p2-chip-module:hover {
  transform: translateY(-3px);
}

/* LIGHT ECO ONLY - Course Modules gets the same motherboard layer at reduced capability */
.light-mode.eco-mode #p2Modules {
  overflow: hidden;
}

.light-mode.eco-mode #p2Modules .p2-container,
.light-mode.eco-mode #p2Modules .p2-section-trace {
  position: relative;
  z-index: 1;
}

.light-mode.eco-mode #p2Modules .p2-pcb-board {
  border-color: rgba(13, 148, 136, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(20, 184, 166, 0.08),
    inset 0 0 80px rgba(20, 184, 166, 0.04),
    0 22px 64px rgba(15, 23, 42, 0.07),
    0 0 24px rgba(20, 184, 166, 0.06);
}

.light-mode.eco-mode #p2Modules .p2-pcb-board::before {
  animation-duration: 8.5s !important;
  opacity: 0.42;
}

.light-mode.eco-mode #p2Modules .p2-pcb-board::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(20, 184, 166, 0.09) 25%, transparent 28% 100%),
    linear-gradient(180deg, transparent 0 34%, rgba(14, 165, 233, 0.06) 35%, transparent 38% 100%),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(20, 184, 166, 0.08) 42px 43px, transparent 43px 90px);
  background-size: 260px 100%, 100% 220px, 92px 100%;
  mix-blend-mode: multiply;
  animation: p2-lp-board-route-chase 8s linear infinite;
}

.light-mode.eco-mode #p2Modules .p2-chip-cpu {
  --p2-module-cpu-shadow-live:
    0 0 0 1px rgba(20, 184, 166, 0.14),
    0 16px 34px rgba(15, 23, 42, 0.08),
    0 0 28px rgba(20, 184, 166, 0.12);
}

.light-mode.eco-mode #p2Modules .p2-chip-cpu::before {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: 0;
  pointer-events: none;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.1), rgba(255, 255, 255, 0.5), transparent);
  display: none !important;
}

.light-mode.eco-mode #p2Modules .p2-chip-cpu .p2-chip-body {
  position: relative;
  z-index: 1;
}

.light-mode.eco-mode #p2Modules .p2-module-bus {
  filter: saturate(0.88) brightness(1.02) drop-shadow(0 0 6px rgba(20, 184, 166, 0.08));
}

.light-mode.eco-mode #p2Modules .p2-module-bus::before,
.light-mode.eco-mode #p2Modules .p2-module-bus::after,
.light-mode.eco-mode #p2Modules .p2-module-bus span,
.light-mode.eco-mode #p2Modules .p2-bus-packet,
.light-mode.eco-mode #p2Modules .p2-smd-part,
.light-mode.eco-mode #p2Modules .p2-smd-via,
.light-mode.eco-mode #p2Modules .p2-cpu-smd-status span::before,
.light-mode.eco-mode #p2Modules .p2-module-footprint,
.light-mode.eco-mode #p2Modules .p2-module-smd-bank span {
  animation-duration: 6s !important;
  opacity: 0.62;
}

.light-mode.eco-mode #p2Modules .p2-chip-module {
  --p2-module-card-filter-live: drop-shadow(0 0 10px rgba(20, 184, 166, 0.08));
  animation-duration: 1.8s, 7s !important;
}

.light-mode.eco-mode #p2Modules .p2-chip-module::before {
  opacity: 0.16;
  background: linear-gradient(100deg, transparent 0 34%, rgba(20, 184, 166, 0.08) 44%, rgba(255, 255, 255, 0.46) 50%, rgba(13, 148, 136, 0.07) 58%, transparent 70% 100%);
  background-size: 260% 100%;
  animation: p2-lp-card-current 7s linear infinite;
}

.light-mode.eco-mode #p2Modules .p2-chip-module::after {
  opacity: 0.34;
  animation-duration: 3.6s !important;
}

.light-mode.eco-mode #p2Modules .p2-module-smd-bank span {
  box-shadow: 0 0 4px rgba(20, 184, 166, 0.08);
}

/* LIGHT TURBO / OC ONLY - Course Modules foreground all-out, background EXTREME OVERCLOCK */

@media (max-width: 768px) {

  #p2Modules .p2-smd-u1,
  #p2Modules .p2-smd-r2,
  #p2Modules .p2-smd-c2,
  #p2Modules .p2-smd-d2 {
    display: none;
  }

  #p2Modules .p2-module-smd-bank {
    top: 14px;
    right: 14px;
    transform: scale(0.88);
    transform-origin: top right;
  }
}

@media (max-width: 480px) {
  #p2Modules .p2-smd-layer {
    opacity: 0.55;
  }

  #p2Modules .p2-smd-part {
    transform: rotate(var(--p2-smd-rot)) scale(0.78);
  }

  #p2Modules .p2-cpu-smd-status {
    gap: 9px;
    font-size: 0.52rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  #p2Modules .p2-pcb-board::before,
  #p2Modules .p2-pcb-board::after,
  #p2Modules .p2-pcb-board-bg,
  #p2Modules .p2-section-header::before,
  #p2Modules .p2-section-header::after,
  #p2Modules .p2-overline,
  #p2Modules .p2-overline::before,
  #p2Modules .p2-overline::after,
  #p2Modules .p2-section-title,
  #p2Modules .p2-section-title::before,
  #p2Modules .p2-section-title::after,
  #p2Modules .p2-section-sub,
  #p2Modules .p2-section-sub::before,
  #p2Modules .p2-section-sub::after,
  #p2Modules .p2-board-corners span,
  #p2Modules .p2-chip-cpu,
  #p2Modules .p2-chip-pins-top,
  #p2Modules .p2-chip-pins-bottom,
  #p2Modules .p2-chip-pins-left,
  #p2Modules .p2-chip-pins-right,
  #p2Modules .p2-module-bus::before,
  #p2Modules .p2-module-bus::after,
  #p2Modules .p2-module-bus span,
  #p2Modules .p2-module-bus span::before,
  #p2Modules .p2-bus-packet,
  #p2Modules .p2-smd-part,
  #p2Modules .p2-smd-via,
  #p2Modules .p2-cpu-smd-status span::before,
  #p2Modules .p2-chip-module,
  #p2Modules .p2-chip-module::before,
  #p2Modules .p2-chip-module::after,
  #p2Modules .p2-chip-tooltip,
  #p2Modules .p2-chip-tooltip::before,
  #p2Modules .p2-chip-tooltip::after,
  #p2Modules .p2-module-footprint,
  #p2Modules .p2-module-smd-bank span,
  #p2Modules .p2-chip-stage {
    animation: none !important;
  }
}

/* Course Modules: remove the horizontal laser rails around the header. */
#p2Modules .p2-section-header::before,
#p2Modules .p2-section-title::before {
  display: none !important;
}

/* ================= LIGHT PERFORMANCE: TIMELINE ELECTRONIC BG ================= */

/* Base Grids */

/* Sleek Glassmorphism CPUs */

/* Conic Radar Scanners */

/* Parallel Data Buses */

/* Keyframes */

/* ================= INTERACTIVE 'OVERCLOCK' STATES ================= */

/* 1. Global Section Hover - Speeds up traces and brightens grid */

/* 2. Microchip Mini-Game - Chips expand, glow, and stop when hovered */

/* ================= AMBIENT ORBS & PARTICLES ================= */

/* Floating Particle Dust via complex box-shadow */

/* ================= LIGHT ECO: STATIC ELECTRONIC BG ================= */

/* Hide heavy elements completely in eco mode */

/* ================= LIGHT TURBO (OVERCLOCK): EXTREME ELECTRONIC BG ================= */

/* Aggressive Grid */

/* Overclocked CPUs */

/* Hyper Radars */

/* Interactive Overclock Surge */

/* Overclocked Data Buses */

/* Hyper Ambient & Particles */

/* Hyper Scanner Beam */

/* High-Speed Data Packets */

/* Floating Hex Data */

/* Interactive Hover Warning & Speeds */

/* ================= DARK TURBO: SMOOTH FOREGROUND ELEMENTS ================= */

/* Section Titles — Smooth neon glow pulse */

/* Overlines — Smooth breathing letter-spacing */

/* Section Subtitles */

/* Timeline Signal Nodes — Smooth pulsing ring */

/* Timeline Signal Cards — Smooth hover lift */

/* Signal Line (Vertical) — Glowing trace */

/* Signal Pulse Dot — Brighter, smoother */

/* Month Labels */

/* Card Titles — Smooth glow */

/* Card connector lines */

/* Section trace (top decorative line) */

/* ================= DARK PERF MODE: ABYSS OF THE ELECTRONIC BG ================= */

/* Deep Abyss Grid - More visible, faster */

/* Faint Floating Chips - Now interactive and brighter */

/* Deep Radars - Faster, brighter */

/* Ambient Orbs (The Abyss Glow) - Much more active */

/* Faint Data Paths - Brighten up and add hover trace */

/* ================= MORE INTERACTIVITY & ELEMENTS ================= */
/* Particle Swarm (Data Stream) - Invisible until hovered */

/* Timeline Hover Interactivity (HYPER-DRIVE MODE) */
/* 1. Show the particle swarm and make it fly insanely fast */

/* 2. Make the radars spin aggressively and glow */

/* 3. Grid overlay shifts into high gear and reveals more */

/* 4. Ambient glows intensify and sharpen */

/* ================= DARK ECO MODE: ABYSS BG (GPU FRIENDLY) ================= */

/* Static Grid Overlay */

/* Static Floating Chips */

/* Static Positions for Chips */

/* Static Radars */

/* Static Ambient Orbs */

/* Static Data Paths */

/* ================= DARK TURBO: THE OVERCLOCKED ABYSS BG ================= */
/* Hyper-intense, heavily interactive background environment */

/* Hyper-Grid with Scanning Laser Overlay */

/* 3D Floating Data Chips - Smooth & Dynamic */

/* Overdrive Radars - Smooth and expansive */

/* Energy Paths (The missing high-speed data lines) */

/* Aggressive Ambient Glows */

/* Hyper-Speed Particle Swarm (Double layer) */

/* ================= DARK TURBO EXCLUSIVE INTERACTABLE ELEMENTS ================= */

/* 1. Interactive Power Core */

/* Core Rings */

/* 2. Interactive Data Cubes */

/* 3. Interactive Data Pillars */

/* ================= TIMELINE HOVER: THE HYPER-WARP (SMOOTH & MASSIVE) ================= */
/* 1. Grid zooms in smoothly without jumping the animation loop */

/* 2. Particles blast into overdrive with thick glow (no snapping speed) */

/* 3. Radars become scanning lasers smoothly */

/* 4. Energy paths flare up */

/* 5. Ambient Abyss glows bright green and expands smoothly */

/* ================= DARK TURBO: CREATIVE FOREGROUND OVERRIDES (REVAMPED & TURBO-CHARGED) ================= */
/* Sleek, precision high-tech interactions that explode with energy on hover */

/* 1. Signal Line Data Transfer (Sleek Comet Trail) */

/* HYPER-DRIVE: Hovering the timeline intensifies the data stream smoothly */

/* 2. Nodes: Precision Sonar Pulse + Smooth Overdrive Spin */

/* 3. Cards: Sleek Holographic Tilt & Data Matrix Reveal */

/* Subtle Data Matrix Background (Triggers on hover) */

/* Hover States for Cards */

/* TERMINAL HIGHLIGHT OVERDRIVE: Title */

/* TERMINAL OVERDRIVE: Month Label & Cursor */

/* TERMINAL OVERDRIVE: Description Text */

/* 4. Section Title: High-Tech Flicker */

/* 5. Pulse Dot: Steady Data Blink */

/* =========================================================================
   INTERACTION REFINEMENTS (SMOOTHNESS & PHYSICAL BUTTON CLICK)
   ========================================================================= */

/* Silky smooth transition base for cards and central IC */
.p2-pin-item,
.p2-ic-center {
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Ensure the cards clip the glint animation */
.p2-pin-item {
  overflow: visible;
}

/* Refined Card Hover State */
.p2-pin-item:hover {
  transform: scale(1.03) translateY(-2px) !important;
  box-shadow: 0 15px 35px rgba(0, 255, 65, 0.12), inset 0 0 15px rgba(0, 255, 65, 0.05) !important;
  border-color: var(--p2-green) !important;
}

/* Refined Central IC Hover State */
.p2-ic-center:hover {
  transform: scale(1.05) translateY(-3px) !important;
  box-shadow: 0 25px 60px rgba(0, 255, 65, 0.15), inset 0 0 20px rgba(0, 255, 65, 0.05) !important;
  border-color: var(--p2-green) !important;
}

/* 
  Physical Button 'Push' Interaction (:active state) 
  Snaps down instantly to mimic hardware buttons.
*/
.p2-pin-item:active {
  transform: scale(0.98) translateY(2px) !important;
  box-shadow: 0 2px 10px rgba(0, 255, 65, 0.2), inset 0 0 25px rgba(0, 255, 65, 0.1) !important;
  border-color: var(--p2-green) !important;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Fast snap */
}

.p2-ic-center:active {
  transform: scale(0.96) translateY(2px) !important;
  box-shadow: 0 5px 20px rgba(200, 117, 51, 0.3), inset 0 0 40px rgba(200, 117, 51, 0.2) !important;
  border-color: var(--p2-copper) !important;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Fast snap */
}

/* 
  Ambient Glint Animation on Card Hover 
  Adds "more animation" without being distracting.
*/
.p2-pin-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.05), transparent);
  transform: skewX(-20deg);
  transition: none;
  z-index: 0;
  pointer-events: none;
}

.p2-pin-item:hover::before {
  animation: p2-card-glint 2.5s infinite linear;
}

@keyframes p2-card-glint {
  0% {
    left: -100%;
  }

  25% {
    left: 200%;
  }

  100% {
    left: 200%;
  }

  /* Long pause before next glint */
}

/* Ensure card text stays above the glint */
.p2-pin-label {
  position: relative;
  z-index: 2;
}

/* =========================================================================
   SVG ICON INTEGRATION (Career Pathway Cards)
   ========================================================================= */
.p2-pin-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 6px;
  vertical-align: -0.15em;
  color: var(--p2-green);
  opacity: 0.95;
  filter: drop-shadow(0 0 5px rgba(0, 255, 65, 0.4));
  transition: all 0.3s ease;
}

.p2-icon-amber {
  color: var(--p2-amber);
  filter: drop-shadow(0 0 5px rgba(255, 200, 0, 0.4));
}

.p2-pin-item:hover .p2-pin-icon {
  transform: scale(1.1) rotate(-5deg);
  filter: drop-shadow(0 0 10px currentColor);
}

/* =========================================================================
   OVERCLOCK MODE BG OVERRIDES (LIGHT TURBO MODE)
   Scale up all background animations from Performance Mode
   ========================================================================= */

/* Hide OC traces by default, reveal in Turbo */

/* ── ACTIVATE all career background elements in OC mode (CALM IDLE) ── */
/* SVG Traces container — low opacity idle */

/* Draw traces slowly */

/* Slow idle data packets */

/* Activate SVG pads — dim */

/* Circuit nodes — dim idle */

/* Hex data nodes — dim idle */

/* Corner accents — dim */

/* Tech rings — dim, slow */

/* Scanner — slow, dim */

/* Data matrix — dim */

/* ── HOVER ESCALATION (same as before — intense) ── */

/* ── ULTRA-ACTIVE: TAP-HOLD MAXIMUM OVERDRIVE ── */

/* Hyperlane Background Pulse — calm idle */

/* Grid — calm idle (same speed as perf) */

/* Traces — calm idle (thin, slow) */

/* Rings — calm idle (slow spin) */

/* Scanner — calm idle (slow, dim) */

/* Hex nodes — calm idle (no rapid blink) */

/* Matrix — calm idle (no glitch) */

/* ── HOVER: Escalate to intense ── */

/* ── ULTRA-ACTIVE: TAP-HOLD MAX OVERDRIVE ── */

/* =========================================================================
   INTERACTIVE BACKGROUND ELEMENTS (OC MODE ONLY)
   ========================================================================= */

/* Make existing background nodes interactive */

/* Hex Node Hover */

/* Circuit Node Hover */

/* Interactive SVG Pathways */

/* New Interactive Diagnostic Ports */

/* =========================================================================
   OC-ONLY: EXTRA CIRCUIT JUNCTION NODES
   ========================================================================= */

/* Scatter positions */

/* =========================================================================
   OC-ONLY: CAPACITORS (Charging bars)
   ========================================================================= */

/* =========================================================================
   OC-ONLY: RESISTORS (Striped bands)
   ========================================================================= */

/* 19. Pin Wires — electrified */

/* =========================================================================
   OC-ONLY: MINI IC CHIP OUTLINES
   ========================================================================= */

/* =========================================================================
   OC-ONLY: LIVE DATA READOUTS
   ========================================================================= */

/* =========================================================================
   ULTRA BUTTON STYLING
   ========================================================================= */

/* Hidden by default, only show in OC mode */

/* While being held down — ACTIVE STATE */

/* =========================================================================
   CALM IDLE DEFAULTS FOR OC-ONLY ELEMENTS
   ========================================================================= */

/* Junctions — dim idle */

/* Capacitors — dim idle */

/* Resistors — dim idle */

/* IC Chips — dim idle */

/* Readouts — dim idle, no flicker */

/* Diagnostic Ports — dim idle */

/* =========================================================================
   ULTRA-ONLY: EXTREME VISUAL EFFECTS (LIGHT TURBO TAP-HOLD)
   ========================================================================= */

/* 1. Radial Energy Pulse Wave from center */

/* 2. Screen Micro-Vibration */

/* 3. Horizontal Glitch/Interference Lines */

/* 4. Vertical Electricity Arc Beam */

/* 5. Second Arc (horizontal) */

/* 6. Danger Vignette Border */

/* 7. OC Junction nodes go berserk */

/* 8. IC Chips flash warning */

/* 9. Capacitors overcharge */

/* 10. Resistors overheat */

/* 11. Diagnostic ports flash danger */

/* 12. Data readouts show CRITICAL values */

/* =========================================================================
   ULTRA-ONLY: FOREGROUND ELEMENT SHAKE & GLITCH
   (Light Turbo Tap-Hold Only)
   ========================================================================= */

/* 13. Career PIN Cards — shake & flicker */

/* Stagger cards for organic feel */

/* 14. IC Center Diagram — vibrate with danger pulse */

/* 15. Section Header Text — glitch offset */

/* 16. Section Title — chromatic aberration */

/* 17. Overline & Subtitle — rapid flicker */

/* 18. Column Headers (FURTHER STUDY / CAREER ROLES) — shake */

/* 19. Pin Wires & Flow Lines — electrified */

/* 20. Pin Numbers/Labels — glitch */

/* 21. IC Center Code/Name text — danger glitch */

/* 22. The entire container subtle shake for immersion */

/* =========================================================================
   DARK TURBO MODE BG — OC BACKGROUND OVERRIDES
   (Only applies when NOT light-mode + overclock-mode is active)
   ========================================================================= */

/* Reveal OC-only traces/elements in dark turbo */

/* ── Hyperlane Background Pulse (Dark) ── */

/* ── Grid — calm idle (Dark) ── */

/* ── SVG Traces — calm idle (Dark) ── */

/* ── Rings — calm idle (Dark, slow spin) ── */

/* ── Scanner — calm idle (Dark) ── */

/* ── Hex Nodes — calm idle (Dark, gentle float) ── */

/* ── Matrix — calm idle (Dark) ── */

/* ── OC-Only Elements (Dark Turbo) ── */

/* Junction Nodes */

/* Capacitors */

/* Resistors */

/* IC Chips */

/* Readouts */

/* Diagnostic Ports */

/* ── DARK TURBO HOVER ESCALATION ── */

/* ── DARK TURBO ULTRA TAP-HOLD ── */

/* Dark Ultra foreground glitch (mirrors light ultra) */

/* Dark Ultra foreground element shake */

/* ══════════════════════════════════════════════════
   DYNAMIC TOPBAR & NAVBAR STYLING (ECO/PERF/TURBO)
══════════════════════════════════════════════════ */

/* Reset transitions for smooth mode switching */
.p2-topbar,
.p2-nav,
.p2-nav-trace,
.p2-nav-link,
.p2-topbar-item {
  transition: all 0.4s ease-in-out;
}

/* Ensure logo remains crisp and its native color, but can glow */
.p2-nav-logo img {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  transition: filter 0.4s ease;
}

/* ── 1. LIGHT ECO ── */
.light-mode.eco-mode .p2-topbar {
  background: #e8f5e9;
  border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}

.light-mode.eco-mode .p2-topbar-item,
.light-mode.eco-mode .p2-topbar-social,
.light-mode.eco-mode .p2-topbar-wa {
  color: #2e7d32;
}

.light-mode.eco-mode .p2-topbar-item svg {
  color: #4caf50;
}

.light-mode.eco-mode .p2-topbar-div {
  background: rgba(76, 175, 80, 0.3);
}

.light-mode.eco-mode .p2-nav {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.light-mode.eco-mode .p2-nav-trace {
  display: none;
}

.light-mode.eco-mode .p2-nav-link {
  color: #333;
}

.light-mode.eco-mode .p2-nav-link:hover,
.light-mode.eco-mode .p2-nav-link.active {
  color: #2e7d32;
  background: rgba(76, 175, 80, 0.1);
}

.light-mode.eco-mode .p2-nav-brand {
  color: #2e7d32;
}

/* ── 2. DARK ECO ── */
.eco-mode:not(.light-mode) .p2-topbar {
  background: #0a1f11;
  border-bottom: 1px solid rgba(76, 175, 80, 0.1);
}

.eco-mode:not(.light-mode) .p2-topbar-item,
.eco-mode:not(.light-mode) .p2-topbar-wa {
  color: #a5d6a7;
}

.eco-mode:not(.light-mode) .p2-topbar-item svg {
  color: #4caf50;
}

.eco-mode:not(.light-mode) .p2-topbar-div {
  background: rgba(76, 175, 80, 0.2);
}

.eco-mode:not(.light-mode) .p2-nav {
  background: rgba(5, 20, 10, 0.9);
  border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}

.eco-mode:not(.light-mode) .p2-nav-trace {
  display: none;
}

.eco-mode:not(.light-mode) .p2-nav-link {
  color: #a5d6a7;
}

.eco-mode:not(.light-mode) .p2-nav-link:hover,
.eco-mode:not(.light-mode) .p2-nav-link.active {
  color: #69f0ae;
  background: rgba(105, 240, 174, 0.1);
  text-shadow: 0 0 8px rgba(105, 240, 174, 0.5);
}

.eco-mode:not(.light-mode) .p2-nav-brand {
  color: #e8f5e9;
}

/* ── 3. LIGHT PERFORMANCE ── */

/* ── 4. DARK PERFORMANCE ── */

/* ── 5. LIGHT TURBO (OVERCLOCK) ── */

/* ── 6. DARK TURBO (OVERCLOCK) ── */

/* Scanner animation for trace */

/* -- UX IMPROVEMENTS: Hide chaotic background clutter in Benefits Turbo Mode -- */

/* ================================================================
   ? OVERCLOCK ALERT OVERLAY TOGGLE BUTTON
   Only visible in overclock-mode, positioned below the section subtitle
   ================================================================ */

/* Hidden by default � only show in overclock mode */

/* State: OFF */

/* Dark mode adjustments */

/* ================================================================
   ? OVERCLOCK ALERT OFF STATE � Hide all warning/red glow elements
   When #p2Modules has .p2-oc-alerts-off class
   ================================================================ */

/* ================================================================
   LIGHT TURBO: Drastically reduce red elements even when ON
   ================================================================ */

/* Giant warning text - reduce to near invisible */

/* Blood vignette - drastically reduce */

/* Strobe flash - eliminate in light turbo */

/* Shockwave rings - reduce red */

/* ================================================================
   BENEFITS SECTION - Red gradient OFF when alerts toggled off
   Hides the ::before warning sweep, warning bands, and
   reduces the layer::after red/amber tints
   ================================================================ */

/* Hide the full-section red gradient sweep overlay */

/* Hide warning band stripes on section title and rack rows */

/* Remove the red/amber gradient tints from the layer overlay */

/* ================================================================
   ? GPU-FRIENDLY OVERCLOCK GLOW � Even when ON, reduce paint cost
   Replace expensive box-shadow animations with static, subtle glows
   and use opacity-only animations for breathing effects
   ================================================================ */

/* Reduce warn-edge to simple static border instead of animated box-shadow */

/* GPU-friendly breathing keyframe � opacity only */

.p2-nav-dropdown-mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .p2-nav-dropdown-mobile-only {
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CTA SECTION — BACKGROUND CIRCUIT REPAIR (GPU Friendly)
   ═══════════════════════════════════════════════════════════════ */
.p2-mc-circuit, .p2-oc-circuit {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.p2-mc-svg, .p2-oc-svg {
  width: 100%;
  height: 100%;
}

/* Styles to prevent SVG paths from default solid black fills */
.p2-mc-trace, .p2-oc-trace {
  fill: none !important;
  stroke: var(--p2-green) !important;
  stroke-width: 1.5px !important;
  opacity: 0.25 !important;
}

/* Central IC footprint / Gap */
.p2-mc-gap, .p2-oc-gap-core {
  fill: none !important;
  stroke: var(--p2-copper) !important;
  stroke-width: 1.5px !important;
  stroke-dasharray: 6 4 !important;
  opacity: 0.35 !important;
}

/* Debris and Sparks */
.p2-oc-debris, .p2-oc-spark, .p2-mc-spark, .p2-oc-spark-main {
  fill: none !important;
  stroke: var(--p2-green) !important;
  stroke-width: 1px !important;
  opacity: 0.3 !important;
}

/* Deactivate animated data packets to save GPU/CPU usage */
.p2-mc-packet, .p2-oc-f-pkt, .p2-oc-f-pkt-rev, .p2-oc-fixed-bridge, .p2-oc-fixed-packets {
  display: none !important;
}

/* Error/Warning rings */
.p2-mc-err, .p2-oc-warning-ring {
  fill: none !important;
  stroke: var(--p2-red) !important;
  stroke-width: 1px !important;
  opacity: 0.15 !important;
}

/* Junction nodes */
.p2-mc-junc, .p2-oc-inode-core {
  fill: var(--p2-green) !important;
  stroke: none !important;
  opacity: 0.4 !important;
}

/* Diagnostic text labels positioned on the side */
.p2-mc-label, .p2-oc-label {
  position: absolute;
  font-family: 'Fira Code', monospace;
  font-size: 0.65rem;
  color: var(--p2-text-muted);
  opacity: 0.4;
  z-index: 2;
}

.p2-mc-label-l, .p2-oc-label-left {
  left: clamp(10px, 3vw, 40px);
  top: 45%;
  transform: translateY(-50%);
}

.p2-mc-label-r, .p2-oc-label-right {
  right: clamp(10px, 3vw, 40px);
  top: 45%;
  transform: translateY(-50%);
}

/* ═══════════════════════════════════════════════════════════════
   CTA SECTION — SIMPLE & NIMBLE BACKGROUND ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Floating Particles */
.p2-cta-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--p2-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--p2-green), 0 0 16px rgba(0, 255, 65, 0.3);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.p2-ctap-1 {
  left: 12%;
  top: 25%;
  animation: p2-cta-float-particle-1 12s infinite ease-in-out;
}

.p2-ctap-2 {
  left: 82%;
  top: 20%;
  animation: p2-cta-float-particle-2 15s infinite ease-in-out 2s;
  background: var(--p2-copper);
  box-shadow: 0 0 8px var(--p2-copper), 0 0 16px rgba(200, 117, 51, 0.3);
}

.p2-ctap-3 {
  left: 15%;
  top: 70%;
  animation: p2-cta-float-particle-3 14s infinite ease-in-out 1s;
}

.p2-ctap-4 {
  left: 88%;
  top: 65%;
  animation: p2-cta-float-particle-1 18s infinite ease-in-out 3s;
}

.p2-ctap-5 {
  left: 48%;
  top: 15%;
  animation: p2-cta-float-particle-2 16s infinite ease-in-out 4s;
}

.p2-ctap-6 {
  left: 52%;
  top: 85%;
  animation: p2-cta-float-particle-3 20s infinite ease-in-out 5s;
  background: var(--p2-copper);
  box-shadow: 0 0 8px var(--p2-copper), 0 0 16px rgba(200, 117, 51, 0.3);
}

/* Subtle Horizontal Laser Scanline */
.p2-cta-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--p2-green), transparent);
  box-shadow: 0 0 8px var(--p2-green);
  opacity: 0.12;
  animation: p2-cta-scan-beam 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Float Animations (Transforms & Opacity) */
@keyframes p2-cta-float-particle-1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 0.5;
  }
  50% {
    transform: translate(25px, -30px) scale(1.2);
    opacity: 0.7;
  }
  80% {
    opacity: 0.3;
  }
}

@keyframes p2-cta-float-particle-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1.1);
    opacity: 0;
  }
  30% {
    opacity: 0.6;
  }
  60% {
    transform: translate(-30px, 25px) scale(0.8);
    opacity: 0.4;
  }
  75% {
    opacity: 0.7;
  }
}

@keyframes p2-cta-float-particle-3 {
  0%, 100% {
    transform: translate(0, 0) scale(1.2);
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    transform: translate(30px, 20px) scale(0.9);
    opacity: 0.2;
  }
  75% {
    opacity: 0.6;
  }
}

/* Scanline animation */
@keyframes p2-cta-scan-beam {
  0% {
    top: 0%;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 0%;
  }
}

/* ==========================================================================
   EXTRA GPU-FRIENDLY & PERFORMANCE OPTIMIZATIONS (PC & MOBILE)
   ========================================================================== */

/* 1. PC & Mobile Optimization: Completely hide the heavy conic-gradient radar sweep ('pusaran') in Eco Mode */
.eco-mode .p2-hero::after {
  display: none !important;
}

/* 2. PC Optimization: Hide 3 out of 5 branch traces (keeping t-main, t-b2, t-b4 visible to restore part of the PCB structure) */
.eco-mode .p2-hero-bg .p2-trace.t-b1,
.eco-mode .p2-hero-bg .p2-trace.t-b3,
.eco-mode .p2-hero-bg .p2-trace.t-b5,
.eco-mode .p2-hero-bg circle.p2-spad[cx="450"][cy="180"],
.eco-mode .p2-hero-bg circle.p2-spad[cx="1050"][cy="130"] {
  display: none !important;
}

/* 3. Mobile Optimization: Completely hide the PCB layout on mobile screen views */
@media (max-width: 768px) {
  body.eco-mode .p2-pcb-traces-svg,
  body.eco-mode .p2-pcb-grid,
  body.eco-mode .p2-pcb-substrate {
    display: none !important;
  }
}

/* 4. Force Hide HUD Rings: 100000x force hide the circular concentric rings around hero text */
.p2-hero-content::before,
.p2-hero-content::after,
body .p2-hero-content::before,
body .p2-hero-content::after,
body.eco-mode .p2-hero-content::before,
body.eco-mode .p2-hero-content::after,
body.eco-mode.light-mode .p2-hero-content::before,
body.eco-mode.light-mode .p2-hero-content::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  border: none !important;
  animation: none !important;
}