/* ============================================================
   LIVE CIRCUIT — Advanced Design System Layer  v2
   Theme: Dark (default) + Light  |  Desktop, Tablet, Mobile
   Glassmorphic · 3-D Scroll Depth · Procedural PCB Canvas
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. IBM PLEX MONO — Self-hosted (eliminates Google Fonts CLS)
   Metric-adjusted fallback (@font-face Courier New) ensures
   zero layout shift when the custom font loads.
   font-display:optional prevents any late swap — if the font
   isn't cached it falls back silently, just like Inter/Playfair.
   ──────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'IBM Plex Mono Fallback';
    src: local('Courier New');
    ascent-override: 84.00%;
    descent-override: 23.00%;
    line-gap-override: 0.00%;
    size-adjust: 104.76%;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../assets/fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../assets/fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../assets/fonts/ibm-plex-mono-v20-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: optional;
}

/* ────────────────────────────────────────────────────────────
   2. CIRCUIT COLOUR TOKENS — Dark Theme (default)
   ──────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --lc-bg:           #080B0E;
  --lc-bg-alt:       #0C1510;
  --lc-surface:      rgba(10, 16, 12, 0.72);
  --lc-surface-hi:   rgba(16, 24, 18, 0.88);
  --lc-surface-card: rgba(8, 14, 10, 0.60);
  --lc-cyan:         #4DD8E8;
  --lc-cyan-bright:  #7EEAF5;
  --lc-cyan-dim:     rgba(77, 216, 232, 0.18);
  --lc-cyan-glow:    rgba(77, 216, 232, 0.10);
  --lc-amber:        #E8A24D;
  --lc-amber-dim:    rgba(232, 162, 77, 0.18);
  --lc-copper:       rgba(201, 168, 118, 0.18);
  --lc-copper-hi:    rgba(201, 168, 118, 0.55);
  --lc-copper-rgb:   201, 168, 118;
  --lc-text-hi:      #EDF3F8;
  --lc-text-md:      #8DA0A8;
  --lc-text-lo:      #4D6170;
  --lc-label:        #4DD8E8;
  --lc-border:       rgba(201, 168, 118, 0.16);
  --lc-border-hi:    rgba(77, 216, 232, 0.55);
  --lc-border-glow:  rgba(77, 216, 232, 0.22);
  --lc-shadow:       0 2px 24px rgba(0,0,0,0.65);
  --lc-shadow-card:  0 8px 48px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.35);
  --lc-shadow-hover: 0 16px 64px rgba(0,0,0,0.65), 0 0 40px rgba(77,216,232,0.18), 0 0 80px rgba(77,216,232,0.08);
  --lc-trace-color:  #4DD8E8;
  --lc-trace-glow:   rgba(77, 216, 232, 0.45);
  --lc-node-color:   #E8A24D;
  --lc-header-bg:    rgba(8, 11, 14, 0.84);
  --lc-header-border:rgba(201, 168, 118, 0.12);
  --lc-mono:         'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
  --lc-radius-card:  4px;
  --lc-chamfer:      10px;
  /* Glass */
  --lc-glass-blur:   28px;
  --lc-glass-sat:    180%;
  --lc-glass-border-top: rgba(255,255,255,0.07);
  --lc-glass-inner:  inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.30);
  /* PCB depth */
  --lc-via-color:    rgba(201, 168, 118, 0.80);
  --lc-pad-color:    rgba(232, 162, 77, 0.50);
  --lc-silkscreen:   rgba(240, 240, 255, 0.65);
}

/* ────────────────────────────────────────────────────────────
   3. LIGHT THEME
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --lc-bg:           #F5F1EB;
  --lc-bg-alt:       #EDE8DF;
  --lc-surface:      rgba(245, 241, 235, 0.78);
  --lc-surface-hi:   rgba(255, 252, 248, 0.92);
  --lc-surface-card: rgba(255, 252, 248, 0.68);
  --lc-cyan:         #0B8A9B;
  --lc-cyan-bright:  #0DA8BE;
  --lc-cyan-dim:     rgba(11, 138, 155, 0.14);
  --lc-cyan-glow:    rgba(11, 138, 155, 0.08);
  --lc-amber:        #B06A00;
  --lc-amber-dim:    rgba(176, 106, 0, 0.14);
  --lc-copper:       rgba(140, 100, 48, 0.18);
  --lc-copper-hi:    rgba(140, 100, 48, 0.55);
  --lc-copper-rgb:   140, 100, 48;
  --lc-text-hi:      #1A2028;
  --lc-text-md:      #4A5A68;
  --lc-text-lo:      #8A9BA8;
  --lc-label:        #0B8A9B;
  --lc-border:       rgba(140, 100, 48, 0.20);
  --lc-border-hi:    rgba(11, 138, 155, 0.60);
  --lc-border-glow:  rgba(11, 138, 155, 0.18);
  --lc-shadow:       0 2px 24px rgba(30,30,30,0.12);
  --lc-shadow-card:  0 8px 40px rgba(30,30,30,0.14), 0 2px 8px rgba(30,30,30,0.08);
  --lc-shadow-hover: 0 16px 56px rgba(30,30,30,0.20), 0 0 32px rgba(11,138,155,0.15);
  --lc-trace-color:  #0B8A9B;
  --lc-trace-glow:   rgba(11, 138, 155, 0.35);
  --lc-node-color:   #B06A00;
  --lc-header-bg:    rgba(245, 241, 235, 0.90);
  --lc-header-border:rgba(140, 100, 48, 0.18);
  --lc-glass-blur:   20px;
  --lc-glass-sat:    140%;
  --lc-glass-border-top: rgba(255,255,255,0.55);
  --lc-glass-inner:  inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.06);
  --lc-via-color:    rgba(140, 100, 48, 0.75);
  --lc-pad-color:    rgba(176, 106, 0, 0.45);
  --lc-silkscreen:   rgba(30, 30, 60, 0.55);
}

/* OS-level preference */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --lc-bg:           #F5F1EB;
    --lc-bg-alt:       #EDE8DF;
    --lc-surface:      rgba(245, 241, 235, 0.78);
    --lc-surface-hi:   rgba(255, 252, 248, 0.92);
    --lc-surface-card: rgba(255, 252, 248, 0.68);
    --lc-cyan:         #0B8A9B;
    --lc-cyan-bright:  #0DA8BE;
    --lc-cyan-dim:     rgba(11, 138, 155, 0.14);
    --lc-cyan-glow:    rgba(11, 138, 155, 0.08);
    --lc-amber:        #B06A00;
    --lc-amber-dim:    rgba(176, 106, 0, 0.14);
    --lc-copper:       rgba(140, 100, 48, 0.18);
    --lc-copper-hi:    rgba(140, 100, 48, 0.55);
    --lc-copper-rgb:   140, 100, 48;
    --lc-text-hi:      #1A2028;
    --lc-text-md:      #4A5A68;
    --lc-text-lo:      #8A9BA8;
    --lc-label:        #0B8A9B;
    --lc-border:       rgba(140, 100, 48, 0.20);
    --lc-border-hi:    rgba(11, 138, 155, 0.60);
    --lc-border-glow:  rgba(11, 138, 155, 0.18);
    --lc-shadow:       0 2px 24px rgba(30,30,30,0.12);
    --lc-shadow-card:  0 8px 40px rgba(30,30,30,0.14), 0 2px 8px rgba(30,30,30,0.08);
    --lc-shadow-hover: 0 16px 56px rgba(30,30,30,0.20), 0 0 32px rgba(11,138,155,0.15);
    --lc-trace-color:  #0B8A9B;
    --lc-trace-glow:   rgba(11, 138, 155, 0.35);
    --lc-node-color:   #B06A00;
    --lc-header-bg:    rgba(245, 241, 235, 0.90);
    --lc-header-border:rgba(140, 100, 48, 0.18);
    --lc-glass-blur:   20px;
    --lc-glass-sat:    140%;
    --lc-glass-border-top: rgba(255,255,255,0.55);
    --lc-glass-inner:  inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.06);
    --lc-via-color:    rgba(140, 100, 48, 0.75);
    --lc-pad-color:    rgba(176, 106, 0, 0.45);
    --lc-silkscreen:   rgba(30, 30, 60, 0.55);
  }
}

/* ────────────────────────────────────────────────────────────
   4. THEME TOGGLE BUTTON
   ──────────────────────────────────────────────────────────── */
#lc-theme-toggle {
  position: fixed;
  top: 1.1rem;
  right: 5rem;
  z-index: 1050;
  background: var(--lc-surface-hi);
  border: 1px solid var(--lc-border);
  color: var(--lc-cyan);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
  font-family: var(--lc-mono);
  backdrop-filter: blur(var(--lc-glass-blur)) saturate(var(--lc-glass-sat));
}

#lc-theme-toggle:hover {
  background: var(--lc-cyan-dim);
  box-shadow: 0 0 18px var(--lc-trace-glow), var(--lc-glass-inner);
}

#lc-theme-toggle:focus-visible {
  outline: 2px solid var(--lc-cyan);
  outline-offset: 3px;
}

/* ────────────────────────────────────────────────────────────
   5. BODY & PAGE BACKGROUND
   ──────────────────────────────────────────────────────────── */
body {
  background-color: var(--lc-bg) !important;
  color: var(--lc-text-hi);
  transition: background-color 0.4s ease, color 0.4s ease;
}

#canvas-background {
  display: none !important;
}

#cursor-trail-canvas {
  display: none !important;
}

/* PCB procedural canvas — injected by livecircuit.js */
#lc-pcb-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.52;
}

/* Primary PCB grid texture — 5 layers */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    /* Major grid */
    linear-gradient(rgba(var(--lc-copper-rgb), 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--lc-copper-rgb), 0.12) 1px, transparent 1px),
    /* Minor grid */
    linear-gradient(rgba(var(--lc-copper-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--lc-copper-rgb), 0.055) 1px, transparent 1px),
    /* Diagonal etch marks */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 79px,
      rgba(var(--lc-copper-rgb), 0.03) 79px,
      rgba(var(--lc-copper-rgb), 0.03) 80px
    );
  background-size:
    100px 100px,
    100px 100px,
    20px 20px,
    20px 20px,
    100px 100px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, black 20%, transparent 100%);
}

[data-theme="light"] body::before {
  opacity: 0.5;
}

/* Subtle radial vignette on top of everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, transparent 40%, rgba(8,11,14,0.55) 100%);
}

[data-theme="light"] body::after {
  background: radial-gradient(ellipse 120% 80% at 50% 0%, transparent 40%, rgba(245,241,235,0.55) 100%);
}

/* ────────────────────────────────────────────────────────────
   6. KEYFRAMES
   ──────────────────────────────────────────────────────────── */
@keyframes lc-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes lc-pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes lc-solder-glow {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1.0; }
}

@keyframes lc-scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes lc-via-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--lc-trace-glow); }
  50%       { box-shadow: 0 0 14px var(--lc-trace-glow), 0 0 30px var(--lc-cyan-dim); }
}

/* ────────────────────────────────────────────────────────────
   7. HEADER
   ──────────────────────────────────────────────────────────── */
header {
  background: var(--lc-header-bg) !important;
  border-bottom: 1px solid var(--lc-header-border) !important;
  backdrop-filter: blur(var(--lc-glass-blur)) saturate(var(--lc-glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--lc-glass-blur)) saturate(var(--lc-glass-sat)) !important;
}

header.scrolled {
  background: var(--lc-header-bg) !important;
  box-shadow: 0 2px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--lc-copper-rgb), 0.08) !important;
  border-bottom-color: var(--lc-border-hi) !important;
}

.logo {
  background: linear-gradient(135deg, var(--lc-text-hi) 0%, var(--lc-cyan) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.nav-links a {
  color: var(--lc-text-md);
  font-family: var(--lc-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-links a:hover { color: var(--lc-cyan); }

.nav-links a::after {
  background: var(--lc-cyan) !important;
  height: 2px !important;
}

.nav-links .submenu {
  background: var(--lc-surface-hi) !important;
  backdrop-filter: blur(var(--lc-glass-blur)) saturate(var(--lc-glass-sat)) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
  box-shadow: var(--lc-shadow-card) !important;
}

.nav-links .submenu li a {
  color: var(--lc-text-md) !important;
  font-family: var(--lc-mono);
  font-size: 0.78rem;
}

.nav-links .submenu li a:hover {
  background: var(--lc-cyan-dim) !important;
  color: var(--lc-cyan) !important;
}

/* ────────────────────────────────────────────────────────────
   8. BUTTONS — chamfered corners, perimeter shimmer
   ──────────────────────────────────────────────────────────── */
.btn {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--lc-chamfer) 0%,
    100% 0%,
    100% calc(100% - var(--lc-chamfer)),
    calc(100% - var(--lc-chamfer)) 100%,
    0% 100%,
    0% var(--lc-chamfer)
  );
  position: relative;
  overflow: hidden;
  font-family: var(--lc-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: background-position 0.5s ease;
  pointer-events: none;
}

.btn:hover::after {
  background-position: 200% 0;
}

.btn-primary {
  background: linear-gradient(135deg, var(--lc-cyan) 0%, #2FB8CC 100%) !important;
  color: #080B0E !important;
  border: none !important;
  box-shadow: 0 0 22px var(--lc-trace-glow), 0 4px 16px rgba(0,0,0,0.3) !important;
  font-weight: 600 !important;
}

.btn-primary:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 0 40px var(--lc-trace-glow), 0 0 80px rgba(77,216,232,0.15), 0 12px 28px rgba(0,0,0,0.35) !important;
}

.btn-primary:active { transform: translateY(0) scale(0.97) !important; }

.btn-secondary {
  background: transparent !important;
  color: var(--lc-cyan) !important;
  border: 1px solid var(--lc-cyan) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: var(--lc-cyan-dim) !important;
  color: var(--lc-cyan) !important;
  box-shadow: 0 0 24px var(--lc-trace-glow), inset 0 0 16px rgba(77,216,232,0.05) !important;
  transform: translateY(-4px) !important;
}

.btn-secondary:active { transform: translateY(0) scale(0.97) !important; }

.btn:focus-visible {
  outline: 2px solid var(--lc-cyan) !important;
  outline-offset: 3px !important;
}

.cert-verify-btn,
.view-all-btn {
  border-radius: 0 !important;
  clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  font-family: var(--lc-mono) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-color: var(--lc-cyan) !important;
  color: var(--lc-cyan) !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.cert-verify-btn:hover,
.view-all-btn:hover {
  background: var(--lc-cyan-dim) !important;
  box-shadow: 0 0 18px var(--lc-trace-glow) !important;
  transform: translateY(-2px) !important;
  color: var(--lc-cyan) !important;
}

/* ────────────────────────────────────────────────────────────
   9. SECTION BOARD PANELS
   ──────────────────────────────────────────────────────────── */
section[data-board-id]::before {
  content: attr(data-board-id);
  font-family: var(--lc-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--lc-label);
  opacity: 0.55;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.6rem;
  text-align: left;
  padding-left: 0.25rem;
}

section {
  transform-style: preserve-3d;
}

.section-title {
  background: linear-gradient(
    90deg,
    var(--lc-text-hi) 0%,
    var(--lc-cyan-bright) 35%,
    var(--lc-cyan) 50%,
    var(--lc-cyan-bright) 65%,
    var(--lc-text-hi) 100%
  ) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: var(--lc-mono) !important;
  letter-spacing: 0.04em !important;
  animation: lc-shimmer 6s linear infinite;
}

.section-title::after {
  background: linear-gradient(90deg, var(--lc-cyan), var(--lc-amber)) !important;
  height: 2px !important;
  filter: none !important;
  width: 60px !important;
  border-radius: 0 !important;
  box-shadow: 0 0 8px var(--lc-trace-glow) !important;
}

.about-content {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-top-color: var(--lc-glass-border-top) !important;
  border-radius: var(--lc-radius-card) !important;
  color: var(--lc-text-md) !important;
  backdrop-filter: blur(var(--lc-glass-blur)) saturate(var(--lc-glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--lc-glass-blur)) saturate(var(--lc-glass-sat)) !important;
  box-shadow: var(--lc-shadow-card), var(--lc-glass-inner) !important;
  position: relative;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.about-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lc-cyan), transparent);
  opacity: 0.55;
  border-radius: 2px 2px 0 0;
}

.about-content:hover {
  box-shadow: var(--lc-shadow-hover), var(--lc-glass-inner) !important;
  border-color: var(--lc-border-glow) !important;
}

/* ────────────────────────────────────────────────────────────
   10. GLASS MIXIN — shared glassmorphic card base
   ──────────────────────────────────────────────────────────── */
.project-card,
.certification-card,
.skill-group,
.publication-card,
.stat-card,
.goal-card,
.education-item,
.testimonial-slideshow-container {
  backdrop-filter: blur(var(--lc-glass-blur)) saturate(var(--lc-glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--lc-glass-blur)) saturate(var(--lc-glass-sat)) !important;
  box-shadow: var(--lc-shadow-card), var(--lc-glass-inner) !important;
  border-top: 1px solid var(--lc-glass-border-top) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              border-color 0.28s ease,
              box-shadow 0.28s ease !important;
}

/* Specular top-edge shine on all glass cards */
.project-card::before,
.certification-card::before,
.stat-card::before,
.goal-card::before,
.publication-card::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  pointer-events: none;
  z-index: 2;
}

/* ────────────────────────────────────────────────────────────
   10B. IMPACT CARDS — Social Impact Statistics
   ──────────────────────────────────────────────────────────── */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.impact-card {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
  padding: 1.8rem !important;
  box-shadow: var(--lc-shadow-card), var(--lc-glass-inner) !important;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease !important;
  text-align: center;
}

.impact-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: var(--lc-border-hi) !important;
  box-shadow: var(--lc-shadow-hover), var(--lc-glass-inner) !important;
}

.impact-stat {
  font-family: var(--lc-mono) !important;
  font-size: 2.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--lc-cyan) 0%, var(--lc-cyan-bright) 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  margin-bottom: 0.8rem;
  line-height: 1;
}

.impact-card h3 {
  color: var(--lc-text-hi) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.8rem !important;
}

.impact-card p {
  color: var(--lc-text-md) !important;
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
}

/* ────────────────────────────────────────────────────────────
   11. PROJECT CARDS
   ──────────────────────────────────────────────────────────── */
.project-card {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
  cursor: crosshair;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Corner bracket overlays — PCB style */
.project-card::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 18px; height: 18px;
  border-bottom: 2px solid var(--lc-copper-hi);
  border-right: 2px solid var(--lc-copper-hi);
  pointer-events: none;
  z-index: 3;
  transition: border-color 0.25s ease;
}

.project-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: var(--lc-border-hi) !important;
  box-shadow: var(--lc-shadow-hover), var(--lc-glass-inner) !important;
}

.project-card:hover::after {
  border-color: var(--lc-cyan) !important;
}

.project-card:hover .glow { opacity: 0 !important; }

.project-badge {
  border-radius: 0 !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
}

.project-badge.open-source {
  background: var(--lc-cyan-dim) !important;
  color: var(--lc-cyan) !important;
  border: 1px solid var(--lc-border-hi) !important;
}

.project-badge.commercial {
  background: var(--lc-amber-dim) !important;
  color: var(--lc-amber) !important;
  border: 1px solid rgba(232,162,77,0.45) !important;
}

.project-icon { color: var(--lc-cyan); opacity: 0.85; }
.project-card:hover .project-icon { transform: scale(1.12) !important; opacity: 1; }

.project-card h3 {
  color: var(--lc-text-hi) !important;
  font-family: var(--lc-mono) !important;
  font-size: 1rem !important;
  letter-spacing: 0.03em !important;
}

.project-card p {
  color: var(--lc-text-md) !important;
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
}

/* ────────────────────────────────────────────────────────────
   12. CERTIFICATIONS
   ────────────────��─────────────────────────────────────────── */
.certification-card {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
  box-shadow: var(--lc-shadow-card), var(--lc-glass-inner) !important;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* corner brackets via JS — override ::before to not conflict with glass mixin */
.certification-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: var(--lc-border-hi) !important;
  box-shadow: var(--lc-shadow-hover), var(--lc-glass-inner) !important;
}

.cert-header { border-bottom: 1px solid var(--lc-border) !important; }
.cert-title { color: var(--lc-text-hi) !important; font-size: 1rem !important; }

.cert-issuer {
  color: var(--lc-text-md) !important;
  font-family: var(--lc-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.cert-date {
  color: var(--lc-text-lo) !important;
  font-family: var(--lc-mono);
  font-size: 0.76rem;
}

/* ────────────────────────────────────────────────────────────
   13. SKILL GROUPS
   ──────────────────────────────────────────────────────────── */
.skill-group {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
}

.skill-group:hover {
  border-color: var(--lc-border-hi) !important;
  box-shadow: 0 0 28px var(--lc-trace-glow), var(--lc-shadow-card), var(--lc-glass-inner) !important;
  transform: translateY(-4px) !important;
}

.skill-group-header {
  color: var(--lc-cyan) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.skill-tag {
  border-radius: 0 !important;
  clip-path: polygon(4px 0%, 100% 0%, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0% 100%, 0% 4px);
  background: var(--lc-surface-hi) !important;
  border: 1px solid var(--lc-border) !important;
  color: var(--lc-text-md) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s ease !important;
}

.skill-tag:hover {
  background: var(--lc-cyan-dim) !important;
  border-color: var(--lc-border-hi) !important;
  color: var(--lc-cyan) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 0 12px var(--lc-trace-glow) !important;
}

/* ────────────────────────────────────────────────────────────
   14. PUBLICATIONS
   ──────────────────────────────────────────────────────────── */
.publication-card {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
  box-shadow: var(--lc-shadow-card), var(--lc-glass-inner) !important;
}

.publication-card:hover {
  border-color: var(--lc-border-hi) !important;
  box-shadow: var(--lc-shadow-hover), var(--lc-glass-inner) !important;
  transform: translateY(-8px) scale(1.01) !important;
}

.pub-badge {
  border-radius: 0 !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.12em !important;
  background: var(--lc-cyan-dim) !important;
  color: var(--lc-cyan) !important;
  border: 1px solid var(--lc-border-hi) !important;
}

.pub-title { color: var(--lc-text-hi) !important; }

.pub-meta {
  color: var(--lc-label) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.04em !important;
}

.pub-desc { color: var(--lc-text-md) !important; }

.pub-link {
  border-radius: 0 !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.06em !important;
  background: var(--lc-surface-hi) !important;
  border: 1px solid var(--lc-border) !important;
  color: var(--lc-text-md) !important;
}

.pub-link:hover {
  background: var(--lc-cyan-dim) !important;
  border-color: var(--lc-border-hi) !important;
  color: var(--lc-cyan) !important;
}

/* ────────────────────────────────────────────────────────────
   15. GITHUB STAT CARDS
   ──────────────────────────────────────────────────────────── */
.stat-card {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
  box-shadow: var(--lc-shadow-card), var(--lc-glass-inner) !important;
}

.stat-card:hover {
  border-color: var(--lc-border-hi) !important;
  box-shadow: var(--lc-shadow-hover), var(--lc-glass-inner) !important;
  transform: translateY(-8px) scale(1.02) !important;
}

.stat-card-icon {
  background: linear-gradient(135deg, var(--lc-cyan), var(--lc-text-hi)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.stat-card-number {
  background: linear-gradient(135deg, var(--lc-text-hi), var(--lc-cyan)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.stat-card-label {
  color: var(--lc-text-md) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
}

/* ────────────────────────────────────────────────────────────
   16. EDUCATION TIMELINE
   ──────────────────────────────────────────────────────────── */
.education-item {
  background: var(--lc-surface-card) !important;
  border-left: 3px solid var(--lc-cyan) !important;
  border-radius: var(--lc-radius-card) !important;
  box-shadow: var(--lc-shadow), var(--lc-glass-inner) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.education-item:hover {
  box-shadow: var(--lc-shadow-hover), var(--lc-glass-inner) !important;
  transform: translateX(4px) !important;
}

.education-level { color: var(--lc-text-hi) !important; }

.education-institution {
  color: var(--lc-cyan) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.85rem !important;
  font-style: normal !important;
  letter-spacing: 0.03em !important;
}

.education-years {
  color: var(--lc-text-lo) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.78rem !important;
}

.education-tag {
  border-radius: 0 !important;
  clip-path: polygon(4px 0%, 100% 0%, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0% 100%, 0% 4px);
  font-family: var(--lc-mono) !important;
  font-size: 0.72rem !important;
  color: var(--lc-amber) !important;
  border-color: rgba(232,162,77,0.35) !important;
  background: var(--lc-amber-dim) !important;
}

.dot.ticked {
  background: var(--lc-cyan) !important;
  box-shadow: 0 0 8px var(--lc-trace-glow), 0 0 20px var(--lc-cyan-dim) !important;
  animation: lc-via-pulse 2.5s ease-in-out infinite;
}

.dot.dimming { background: var(--lc-amber) !important; }

/* ────────────────────────────────────────���───────────────────
   17. GOAL CARDS
   ──────────────────────────────────────────────���───────────── */
.goal-card {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
}

.goal-card::before {
  background: linear-gradient(90deg, var(--lc-cyan), var(--lc-amber)) !important;
  border-radius: 0 !important;
  height: 2px !important;
  box-shadow: 0 0 8px var(--lc-trace-glow) !important;
}

.goal-card:hover {
  border-color: var(--lc-border-hi) !important;
  box-shadow: var(--lc-shadow-hover), var(--lc-glass-inner) !important;
  transform: translateY(-6px) !important;
}

.goal-icon {
  background: linear-gradient(135deg, var(--lc-cyan), #2ca8b8) !important;
  border-radius: 0 !important;
  clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  box-shadow: 0 4px 18px var(--lc-trace-glow) !important;
}

.goal-card h3 { color: var(--lc-text-hi) !important; }
.goal-card p { color: var(--lc-text-md) !important; }

/* ────────────────────────────────────────────────────────────
   18. HERO SECTION — layered rings + spotlight
   ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
}

/* Spotlight radial behind hero content */
.hero::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 80vh;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(77, 216, 232, 0.06) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

.hero h1 {
  background: linear-gradient(
    135deg,
    var(--lc-text-hi) 0%,
    var(--lc-cyan-bright) 40%,
    var(--lc-cyan) 60%,
    var(--lc-text-hi) 100%
  ) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
  animation: lc-shimmer 8s linear infinite;
}

.hero p { color: var(--lc-text-md) !important; }

/* Avatar with layered PCB-style rings */
.hero-avatar {
  border: 2px solid var(--lc-copper-hi) !important;
  box-shadow:
    0 0 0 8px rgba(77, 216, 232, 0.06),
    0 0 0 16px rgba(77, 216, 232, 0.03),
    0 0 40px var(--lc-trace-glow),
    0 0 80px rgba(77,216,232,0.08),
    0 0 6px var(--lc-copper) !important;
  position: relative;
}

.hero-avatar:hover {
  box-shadow:
    0 0 0 8px rgba(77, 216, 232, 0.10),
    0 0 0 20px rgba(77, 216, 232, 0.05),
    0 0 60px var(--lc-trace-glow),
    0 0 120px rgba(77,216,232,0.12),
    0 0 8px var(--lc-copper-hi) !important;
  transform: scale(1.04) !important;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1) !important;
}

/* Hero pulse ring (added via ::after on wrapper via JS, or static) */
.hero-avatar-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(77, 216, 232, 0.35);
  animation: lc-pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}

.badge {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: 0 !important;
  clip-path: polygon(5px 0%, 100% 0%, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0% 100%, 0% 5px);
  color: var(--lc-text-md) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
}

.badge:hover {
  border-color: var(--lc-border-hi) !important;
  color: var(--lc-cyan) !important;
  box-shadow: 0 0 10px var(--lc-trace-glow) !important;
}

/* ────────────────────────────────────────────────────────────
   19. CONTACT FORM
   ──────────────────────────────────────────────────────────── */
.form-group input,
.form-group textarea {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
  color: var(--lc-text-hi) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.9rem !important;
  backdrop-filter: blur(16px) saturate(var(--lc-glass-sat)) !important;
  transition: all 0.2s ease !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--lc-text-lo) !important;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--lc-border-hi) !important;
  background: var(--lc-surface-hi) !important;
  box-shadow: 0 0 0 3px var(--lc-cyan-glow), 0 0 24px var(--lc-trace-glow) !important;
}

.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
  border-color: rgba(77, 216, 232, 0.45) !important;
}

/* ────────────────────────────────────────────────────────────
   20. CIRCUIT DIVIDERS
   ──────────────────────────────────────────────────────────── */
.circuit-divider {
  color: var(--lc-cyan) !important;
  opacity: 0.5;
  filter: drop-shadow(0 0 6px var(--lc-trace-glow));
}

.circuit-divider.drawn { opacity: 0.75; }

.circuit-path {
  transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ────────────────────────────────────────────────────────────
   21. SCROLL TRACE LINE
   ──────────────────────────────────────────────────────────── */
#lc-trace {
  position: fixed;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 998;
  pointer-events: none;
}

#lc-trace-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--lc-trace-color) 20%, var(--lc-trace-color) 80%, transparent);
  box-shadow: 0 0 8px var(--lc-trace-glow), 0 0 20px rgba(77,216,232,0.15);
  height: 0%;
  transition: height 0.12s linear;
  opacity: 0.85;
}

#lc-trace-line::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: var(--lc-trace-color);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--lc-trace-color), 0 0 30px var(--lc-trace-glow);
  animation: lc-solder-glow 1.8s ease-in-out infinite;
}

.lc-trace-node {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--lc-copper-hi);
  background: var(--lc-bg);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Via hole detail on nodes */
.lc-trace-node::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--lc-bg);
  opacity: 0.8;
}

.lc-trace-node.lc-node--active {
  background: var(--lc-node-color);
  border-color: var(--lc-node-color);
  box-shadow: 0 0 12px var(--lc-amber-dim), 0 0 24px rgba(232,162,77,0.25);
  animation: lc-via-pulse 2s ease-in-out infinite;
}

/* ────────────────────────────────────────────────────���───────
   22. TESTIMONIALS
   ──────────────────────────────────────────────────────────── */
.testimonial-slideshow-container {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
}

.testimonial-slide blockquote {
  border-left: 2px solid var(--lc-cyan) !important;
  color: var(--lc-text-md) !important;
}

.testimonial-author-info .name {
  color: var(--lc-text-hi) !important;
  font-family: var(--lc-mono) !important;
}

.testimonial-author-info .title {
  color: var(--lc-label) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.06em !important;
}

.testimonial-nav-btn {
  background: var(--lc-surface-hi) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: 0 !important;
}

.testimonial-nav-btn:hover {
  background: var(--lc-cyan-dim) !important;
  border-color: var(--lc-border-hi) !important;
}

.testimonial-dot {
  background: var(--lc-border) !important;
  border-radius: 0 !important;
  width: 10px !important;
  height: 2px !important;
}

.testimonial-dot:hover,
.testimonial-dot.active { background: var(--lc-cyan) !important; }

/* ────────────────────────────────────────────────────────────
   23. FOOTER
   ──────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--lc-border) !important;
  background: linear-gradient(180deg, transparent 0%, var(--lc-bg-alt) 100%) !important;
  backdrop-filter: blur(12px) !important;
}

footer::before {
  background: linear-gradient(90deg, transparent, var(--lc-cyan), transparent) !important;
  opacity: 0.25 !important;
}

.footer-logo {
  background: linear-gradient(135deg, var(--lc-text-hi), var(--lc-cyan)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.footer-tagline {
  color: var(--lc-label) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.14em !important;
}

.footer-bio,
.footer-text,
.footer-built-with { color: var(--lc-text-lo) !important; }

.footer-col-title {
  color: var(--lc-label) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  border-bottom-color: var(--lc-border) !important;
}

.footer-links a { color: var(--lc-text-lo) !important; }
.footer-links a:hover { color: var(--lc-cyan) !important; }
.footer-links a i { color: var(--lc-copper-hi) !important; }

.footer-socials a {
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: 0 !important;
  clip-path: polygon(5px 0%, 100% 0%, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0% 100%, 0% 5px);
  color: var(--lc-text-lo) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
}

.footer-socials a:hover {
  background: var(--lc-cyan-dim) !important;
  border-color: var(--lc-border-hi) !important;
  color: var(--lc-cyan) !important;
  box-shadow: 0 0 12px var(--lc-trace-glow) !important;
}

.footer-status {
  border-color: var(--lc-border) !important;
  background: var(--lc-surface-card) !important;
  border-radius: 0 !important;
}

.footer-email-cta {
  border-radius: 0 !important;
  clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  background: linear-gradient(135deg, var(--lc-cyan), #2ca8b8) !important;
  color: #080B0E !important;
  box-shadow: 0 0 20px var(--lc-trace-glow) !important;
}

.footer-divider {
  background: linear-gradient(90deg, transparent, var(--lc-border), transparent) !important;
}

.footer-music-btn {
  border-color: var(--lc-border) !important;
  border-radius: 0 !important;
  color: var(--lc-text-lo) !important;
}

.footer-music-btn:hover,
.footer-music-btn.active {
  border-color: var(--lc-border-hi) !important;
  background: var(--lc-cyan-dim) !important;
  color: var(--lc-cyan) !important;
}

/* ────────────────────────────────────────────────────────────
   24. SEARCH OVERLAY
   ──────────────────────────────────────────────────────────── */
.search-container {
  background: rgba(8, 11, 14, 0.96) !important;
  backdrop-filter: blur(var(--lc-glass-blur)) saturate(var(--lc-glass-sat)) !important;
}

[data-theme="light"] .search-container {
  background: rgba(245, 241, 235, 0.97) !important;
}

.search-container #search-box {
  background: var(--lc-surface-hi) !important;
  border-color: var(--lc-border) !important;
  color: var(--lc-cyan) !important;
  font-family: var(--lc-mono) !important;
}

.search-container #search-box:focus {
  border-color: var(--lc-border-hi) !important;
  box-shadow: 0 0 24px var(--lc-trace-glow) !important;
}

.search-container #search-results {
  background: var(--lc-surface) !important;
  border-color: var(--lc-border) !important;
}

.search-result-title {
  color: var(--lc-cyan) !important;
  font-family: var(--lc-mono) !important;
  font-size: 0.9rem !important;
}

.search-result-item.terminal-item:hover,
.search-result-item.terminal-item.focused {
  background: var(--lc-cyan-dim) !important;
}

/* ────────────────────────────────────────────────────────────
   25. ACCESSIBILITY PANEL
   ──────────────────────────────────────────────────────────── */
#accessibility-settings-btn {
  border-radius: 0 !important;
  clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
  background: var(--lc-surface-card) !important;
  border: 1px solid var(--lc-border) !important;
  color: var(--lc-cyan) !important;
  backdrop-filter: blur(12px) !important;
}

#accessibility-settings-btn:hover {
  background: var(--lc-cyan-dim) !important;
  box-shadow: 0 0 20px var(--lc-trace-glow) !important;
}

#accessibility-panel {
  background: var(--lc-surface-hi) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius-card) !important;
  backdrop-filter: blur(var(--lc-glass-blur)) !important;
}

/* ────────────────────────────────────────────────────────────
   26. MOBILE NAVIGATION
   ───────────────────────────────────────────────��──────────── */
.mobile-nav {
  background: rgba(8, 11, 14, 0.97) !important;
  backdrop-filter: blur(var(--lc-glass-blur)) !important;
}

[data-theme="light"] .mobile-nav {
  background: rgba(245, 241, 235, 0.97) !important;
}

.mobile-nav-links a {
  color: var(--lc-text-md) !important;
  font-family: var(--lc-mono) !important;
  letter-spacing: 0.08em !important;
}

.mobile-nav-links a:hover { color: var(--lc-cyan) !important; }

/* ────────────────────────────────────────────────────────���───
   27. REDUCED MOTION
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #lc-trace-line {
    height: 100% !important;
    transition: none !important;
  }
  .lc-trace-node {
    background: var(--lc-node-color) !important;
    border-color: var(--lc-node-color) !important;
    transition: none !important;
    animation: none !important;
  }
  .section-title,
  .hero h1 {
    animation: none !important;
    background-size: 100% auto !important;
  }
  .dot.ticked {
    animation: none !important;
  }
  section {
    transition: none !important;
  }
}

/* ============================================================
   28. DESKTOP (≥1200px) — max information density
   ============================================================ */
@media (min-width: 1200px) {
  #lc-trace {
    display: flex;
    flex-direction: column;
    align-items: center;
    left: max(20px, calc((100vw - 1200px) / 2 - 36px));
  }

  #lc-theme-toggle {
    right: 5.5rem;
    top: 1.15rem;
  }

  section {
    padding: 7rem 1rem;
  }

  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .certifications-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

/* ============================================================
   29. TABLET (768px – 1199px) — 2-col, no trace
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
  #lc-trace { display: none; }

  #lc-theme-toggle {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    right: 4.5rem;
    top: 1.1rem;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  .certifications-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .goals-container {
    grid-template-columns: repeat(2, 1fr);
  }

  section { padding: 5rem 1.25rem; }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  section[data-board-id]::before { font-size: 0.6rem; }

  .btn { --lc-chamfer: 8px; }
}

/* ============================================================
   30. MOBILE (< 768px) — single column, touch-optimized
   ============================================================ */
@media (max-width: 767px) {
  #lc-trace { display: none; }

  #lc-theme-toggle {
    position: fixed;
    top: 0.95rem;
    right: 3.75rem;
    width: 34px;
    height: 34px;
    font-size: 0.82rem;
    z-index: 1060;
  }

  .btn { --lc-chamfer: 6px; }

  .projects-grid,
  .certifications-grid,
  .skills-grid,
  .goals-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .project-card {
    padding: 1.75rem 1.5rem !important;
  }

  section[data-board-id]::before { display: none; }

  .section-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 2.5rem !important;
  }

  section { padding: 4rem 1rem; }

  .hero { padding: 7rem 1rem 3rem !important; }
  .hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .hero p {
    font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
    margin-bottom: 2rem !important;
  }

  .hero-avatar {
    width: 120px !important;
    height: 120px !important;
  }

  .hero-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    justify-items: stretch;
  }

  .badge {
    text-align: center;
    padding: 0.5rem 0.6rem !important;
    font-size: 0.68rem !important;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: 0.95rem 1.25rem !important;
  }

  .about-content {
    padding: 1.5rem !important;
    font-size: 1rem !important;
  }

  .publications-grid { grid-template-columns: 1fr !important; }

  .github-stats-dashboard {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .stat-card { padding: 1.5rem 1rem !important; }
  .stat-card-number { font-size: 1.85rem !important; }

  .education-container { gap: 1.25rem; }
  .education-item {
    padding: 1.25rem !important;
    gap: 1rem !important;
  }

  .contact-form-wrapper { margin: 1rem auto !important; }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .footer-top { padding: 3rem 1.25rem 2rem !important; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem !important;
    padding: 1.25rem 1rem 2rem !important;
  }

  .mobile-nav-links a { font-size: 1.6rem !important; }

  #accessibility-settings-btn {
    bottom: 18px !important;
    left: 18px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.1rem !important;
  }

  .search-container { padding: 8vh 1rem 1rem !important; }
  .search-container #search-box { font-size: 1rem !important; }

  /* Disable PCB scroll parallax on mobile */
  section {
    transition: none !important;
  }
}

/* ============================================================
   31. SMALL MOBILE (< 420px) — tightest layout
   ============================================================ */
@media (max-width: 420px) {
  .hero-badges { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(1.7rem, 10vw, 2.4rem) !important; }
  .badge { font-size: 0.65rem !important; }
  .github-stats-dashboard { grid-template-columns: 1fr 1fr; }
  .stat-card-number { font-size: 1.6rem !important; }
  .project-icon { font-size: 1.8rem; }
}

/* ────────────────────────────────────────────────────────────
   32. LIGHT THEME global body overrides
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] body {
  background-color: var(--lc-bg) !important;
  color: var(--lc-text-hi) !important;
}

[data-theme="light"] header {
  background: var(--lc-header-bg) !important;
  border-bottom-color: var(--lc-header-border) !important;
}

[data-theme="light"] .mobile-nav {
  background: rgba(245, 241, 235, 0.98) !important;
}

[data-theme="light"] p,
[data-theme="light"] .pub-desc,
[data-theme="light"] .project-card p {
  color: var(--lc-text-md) !important;
}

[data-theme="light"] a { color: var(--lc-cyan); }
[data-theme="light"] a:hover { color: var(--lc-amber); }

/* ────────────────────────────────────────────────────────────
   33. SCROLLBAR
   ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--lc-bg); }
::-webkit-scrollbar-thumb {
  background: var(--lc-copper);
  border-radius: 0;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--lc-copper-hi); }