/* ============================================================================
   ELITE UPGRADE — v1.0
   Pure CSS/styling enhancements. Zero JS changes. Zero logic changes.
   Zero JSON structure changes. Purely additive visual layer.

    Strategy:
    · Physical Grain — body overlay for tactile depth
    · Inner Highlights — 1px top-edge card lighting
    · Light Sweeps — mouse-driven glossy reflections
    · Weighted Motion — Expo-style easing
    · Skill category colors — per-category icon & tag tinting via :nth-child
   · CTA hierarchy — Book a Call becomes visually dominant
   · Ticker visibility — bump from muted to secondary
   · Chip hover glows — per chip color class
   · Timeline — stronger pulse for first (current) role
   · Section watermarks — fractionally more visible
   · About s-label — eyebrow via dedicated `.s-label-about` class
   · Hero terminal — crisper top gradient bar
   · Ambient background — slightly more vivid glow fields
   · Card border hover — stronger glow on dark mode
   · EIP section — richer terminal prompt styling
   ============================================================================ */

/* --- VOLUMETRIC LIGHTING --- */
body::before {
  content: "";
  position: fixed;
  top: -20%;
  left: 20%;
  width: 100vw; height: 100vh;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, transparent 60%);
  filter: blur(100px);
  z-index: -2;
  pointer-events: none;
  opacity: 1;
  transform: translateZ(0); /* Force GPU Acceleration */
  will-change: transform, opacity;
}

/* --- HARDWARE TEXTURE (GRAIN + SCANLINES) --- */
body::after {
  content: "";
  position: fixed; 
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9999;
  /* Multiple backgrounds: Grain SVG + Scanline gradient */
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 2px);
  background-size: 200px 200px, 100% 2px;
  opacity: 0.05; 
  pointer-events: none;
  animation: noise 0.2s infinite;
  transform: translateZ(0); /* Force GPU Acceleration */
  will-change: transform, opacity;
}

@keyframes noise {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  33% { transform: translate(5%,-10%) }
  45% { transform: translate(-15%,0) }
  60% { transform: translate(10%,10%) }
  75% { transform: translate(0,-15%) }
  85% { transform: translate(15%,5%) }
  100% { transform: translate(5%,0) }
}

html.light body::after { opacity: 0.015; }

/* --- PREMIUM CARD SURFACES (ATLASSIAN ENTERPRISE STANDARD) --- */
.bento-card, .focus-card, .proj-card, .glass-card, .terminal-block-static, .post-mortem-report, .uses-card, .skills-matrix .bento-card, .obs-metric, .obs-chart-card, .obs-side-panel {
  position: relative;
  /* 1. The Enterprise Radius: Exactly 8px, no more. */
  border-radius: 8px !important; 
  
  /* 2. The Surface: Subtle glass, mostly solid */
  /* 2. Liquid Glass: Deep refraction and saturation */
  background: rgba(var(--bg-1-rgb), 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  
  /* Light-leak Gradient for Physical Depth */
  background-image: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 60%
  ) !important;
  
  /* 3. The Edge: A crisp 1px border */
  border: 1px solid rgba(137, 147, 164, 0.2) !important;
  
  /* 4. Elevation Shadow: Soft, professional ambient depth */
  box-shadow: 
    0 4px 12px -4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.03) !important;
  
  /* GPU Layer Promotion */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, box-shadow;
  
  /* 5. The Interaction Physics: Pronounced Spring (Overshoot) */
  transition: 
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
    box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
    border-color 0.3s ease,
    background-color 0.3s ease !important;
}

/* Semi-Transparent State Layer for Physical Feedback */
.bento-card::before, .focus-card::before, .proj-card::before, .glass-card::before, .obs-metric::before, .obs-chart-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(var(--accent-primary-rgb), 0);
  transition: background 0.1s ease;
  pointer-events: none;
  z-index: 2;
}

.bento-card:active::before, .focus-card:active::before, .proj-card:active::before, .glass-card:active::before, .obs-metric:active::before, .obs-chart-card:active::before {
  background: rgba(var(--accent-primary-rgb), 0.08); /* Physical compression feedback */
}

/* --- THE PREMIUM LIFT (SPRING HOVER) --- */
.bento-card:hover, .focus-card:hover, .proj-card:hover, .glass-card:hover, .obs-metric:hover, .obs-chart-card:hover, .tl-card:hover {
  /* 1. The Spring Lift: Moves the card 8 pixels closer with slight scaling */
  transform: translateY(-8px) scale(1.02) translateZ(0) !important;

  /* 2. Enhanced Elevation Shadow */
  box-shadow: 
    0 20px 40px -12px rgba(9, 30, 66, 0.35),
    0 0 0 1px rgba(0, 82, 204, 0.15) !important;

  /* 3. The Activation */
  border-color: rgba(0, 82, 204, 0.5) !important; 
}

/* --- TYPOGRAPHIC TENSION (ATLASSIAN REFINEMENTS) --- */
.proj-card h4, .bento-card h3, .glass-card h3, .obs-metric .obs-lbl, .tl-card .tl-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}

.proj-card p, .bento-card p, .glass-card p, .obs-metric .obs-state, .tl-card .tl-desc, .editorial-prose {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important; /* Exactly 14px equivalent */
  color: var(--ds-text-subtle) !important;
  line-height: 1.6 !important;
  opacity: 0.85;
}

/* Light Sweep Reflective Layer */
.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(255,255,255,0.06),
    transparent 40%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.glass-card:hover::after { opacity: 1; }

html.light .glass-card {
  box-shadow: 
    0 4px 20px rgba(0,0,0,0.04),
    inset 0 1px 0 0 rgba(255,255,255,0.8) !important;
}
html.light .glass-card::after {
  background: radial-gradient(
    600px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(255,255,255,0.4),
    transparent 40%
  );
}


/* ─── §0 · ABOUT SECTION — EYEBROW LABEL ──────────────────────────────── */
/*
  The About section-header is missing the s-label eyebrow that every other
  section has. We patch it via ::before on the section-header in that section.
*/



/* ─── §1 · HERO — LINE1 HIERARCHY ─────────────────────────────────────── */
/*
  line1 ("DevOps &") is full-white text same weight as line2 gradient.
  Dimming it creates a clear primary/secondary hierarchy:
  line1 = context label, line2 = the actual power statement.
*/
.hero h1 .line1 {
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: -0.035em;
  opacity: 0.72;
  display: block;
}

/* Make line2 ("Cloud Engineer") the visual centrepiece */
.hero h1 .line2 {
  filter: drop-shadow(0 0 40px rgba(99,102,241,0.28)) !important;
  letter-spacing: -0.055em;
}
html.light .hero h1 .line2 {
  filter: drop-shadow(0 0 20px rgba(67,56,202,0.16)) !important;
}


/* ─── §2 · HERO — STAT CARD ENHANCEMENT ───────────────────────────────── */
/*
  The counter values (14+, 3+, 20+) need more visual weight.
  Currently they feel similar in size/presence to the labels.
*/
.h-stat .sv {
  font-size: 2.2rem !important;
  text-shadow: 0 0 24px rgba(99,102,241,0.55) !important;
  letter-spacing: -0.04em;
}
html.light .h-stat .sv {
  text-shadow: none !important;
  color: var(--accent-indigo) !important;
}

/* Separator line above label for extra structure */
.h-stat .sl {
  border-top: 1px solid var(--border);
  padding-top: 5px;
  margin-top: 4px;
  letter-spacing: 0.14em;
  font-size: 0.65rem !important;
}


/* ─── §3 · HERO — TERMINAL TOP GRADIENT ───────────────────────────────── */
/*
  The h-term has a top accent line. Increase its vibrancy.
*/
.h-term::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99,102,241,0.90) 20%,
    rgba(34,211,238,1.00) 48%,
    rgba(139,92,246,0.90) 78%,
    transparent 100%
  ) !important;
  height: 1.5px !important;
}

/* Hero terminal body — tighten line spacing for authentic terminal feel */
.h-term-body .term-line {
  font-size: 0.8125rem;
  line-height: 1.9;
}

/* ─── §4 · HERO — CHIP HOVER GLOWS PER COLOR ──────────────────────────── */
/*
  Each chip class (chip-g, chip-c, chip-a, chip-p, chip-b) gets a
  matching color glow on hover instead of the generic cyan border.
*/
.chip-g:hover {
  border-color: rgba(99,102,241,0.55) !important;
  color: var(--accent-indigo-hi) !important;
  box-shadow: 0 0 14px rgba(99,102,241,0.22), 0 4px 12px rgba(0,0,0,0.24) !important;
}
.chip-c:hover {
  border-color: rgba(34,211,238,0.55) !important;
  color: var(--accent-cyan) !important;
  box-shadow: 0 0 14px rgba(34,211,238,0.18), 0 4px 12px rgba(0,0,0,0.24) !important;
}
.chip-a:hover {
  border-color: rgba(245,158,11,0.55) !important;
  color: var(--accent-amber) !important;
  box-shadow: 0 0 14px rgba(245,158,11,0.18), 0 4px 12px rgba(0,0,0,0.24) !important;
}
.chip-p:hover {
  border-color: rgba(139,92,246,0.55) !important;
  color: var(--accent-violet) !important;
  box-shadow: 0 0 14px rgba(139,92,246,0.22), 0 4px 12px rgba(0,0,0,0.24) !important;
}
.chip-b:hover {
  border-color: rgba(34,211,238,0.45) !important;
  color: var(--accent-cyan) !important;
  box-shadow: 0 0 14px rgba(34,211,238,0.16), 0 4px 12px rgba(0,0,0,0.24) !important;
}


/* ─── §5 · TICKER — VISIBILITY BUMP ───────────────────────────────────── */
/*
  Ticker items are at text-muted (too faint). Bump to text-secondary
  so they read as a genuine credential signal, not decorative noise.
*/
.ti {
  color: var(--text-secondary) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
}
.skill-tag,
.tl-tech span,
.proj-tech span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--ds-surface-discovery, rgba(159, 143, 239, 0.1)) !important;
  color: var(--ds-status-discovery, #9F8FEF) !important;
  border: 1px solid rgba(159, 143, 239, 0.2) !important;
}
.ticker-band:hover .ti {
  color: var(--text-primary) !important;
}
/* Ticker dot — slightly more vivid */
.tdot {
  opacity: 0.5 !important;
  box-shadow: 0 0 6px var(--accent-indigo) !important;
}


/* ─── §6 · SKILLS — PER-CATEGORY ICON COLORS ──────────────────────────── */
/*
  All skill category icons are currently indigo.
  Differentiate them by domain so the grid reads as a visual map.

  Order: 1-Cloud  2-Containers  3-IaC  4-CI/CD  5-Observability  6-AI  7-Programming
*/

/* Containers & Orchestration — Cyan (Index 1) */
.skills-grid .sk:nth-child(1) .sk-icon {
  background: var(--accent-cyan-lo) !important;
  color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan-bd) !important;
}
.skills-grid .sk:nth-child(1):hover .sk-icon {
  background: var(--accent-cyan-md) !important;
  box-shadow: 0 0 16px rgba(34,211,238,0.20) !important;
}

/* Cloud Platforms — Blue (Index 2) */
.skills-grid .sk:nth-child(2) .sk-icon {
  background: rgba(96,165,250,0.10) !important;
  color: #60A5FA !important;
  border-color: rgba(96,165,250,0.26) !important;
}
.skills-grid .sk:nth-child(2):hover .sk-icon {
  background: rgba(96,165,250,0.18) !important;
  box-shadow: 0 0 16px rgba(96,165,250,0.22) !important;
}
html.light .skills-grid .sk:nth-child(2) .sk-icon {
  background: rgba(37,99,235,0.08) !important;
  color: #2563EB !important;
  border-color: rgba(37,99,235,0.20) !important;
}

/* Infrastructure as Code — Violet (Index 3) */
.skills-grid .sk:nth-child(3) .sk-icon {
  background: var(--accent-violet-lo) !important;
  color: var(--accent-violet) !important;
  border-color: var(--accent-violet-bd) !important;
}
.skills-grid .sk:nth-child(3):hover .sk-icon {
  background: rgba(139,92,246,0.18) !important;
  box-shadow: 0 0 16px rgba(139,92,246,0.22) !important;
}

/* AI/ML Ops — Deep Purple (Index 4) */
.skills-grid .sk:nth-child(4) .sk-icon {
  background: rgba(168,85,247,0.09) !important;
  color: #A855F7 !important;
  border-color: rgba(168,85,247,0.26) !important;
}
.skills-grid .sk:nth-child(4):hover .sk-icon {
  background: rgba(168,85,247,0.16) !important;
  box-shadow: 0 0 16px rgba(168,85,247,0.22) !important;
}

/* Monitoring & Observability — Green (Index 5) */
.skills-grid .sk:nth-child(5) .sk-icon {
  background: rgba(16,185,129,0.09) !important;
  color: #10B981 !important;
  border-color: rgba(16,185,129,0.26) !important;
}
.skills-grid .sk:nth-child(5):hover .sk-icon {
  background: rgba(16,185,129,0.16) !important;
  box-shadow: 0 0 16px rgba(16,185,129,0.20) !important;
}

/* CI/CD — Amber (Index 6) */
.skills-grid .sk:nth-child(6) .sk-icon {
  background: var(--accent-amber-lo) !important;
  color: var(--accent-amber) !important;
  border-color: var(--accent-amber-bd) !important;
}
.skills-grid .sk:nth-child(6):hover .sk-icon {
  background: rgba(245,158,11,0.16) !important;
  box-shadow: 0 0 16px rgba(245,158,11,0.20) !important;
}




/* ─── §8 · SKILLS — PER-CATEGORY TOP ACCENT BAR ───────────────────────── */
/*
  Each skill card's ::after pseudo shows a top gradient bar on hover.
  Override per card so it matches the category's color identity.
*/
.skills-grid .sk:nth-child(1)::after {
  background: linear-gradient(90deg, #60A5FA, var(--accent-cyan)) !important;
}
.skills-grid .sk:nth-child(2)::after {
  background: linear-gradient(90deg, var(--accent-cyan), #60A5FA) !important;
}
.skills-grid .sk:nth-child(3)::after {
  background: linear-gradient(90deg, var(--accent-violet), var(--accent-indigo)) !important;
}
.skills-grid .sk:nth-child(4)::after {
  background: linear-gradient(90deg, var(--accent-amber), #F87171) !important;
}
.skills-grid .sk:nth-child(5)::after {
  background: linear-gradient(90deg, #10B981, var(--accent-cyan)) !important;
}
.skills-grid .sk:nth-child(6)::after {
  background: linear-gradient(90deg, #A855F7, var(--accent-indigo)) !important;
}
.skills-grid .sk:nth-child(7)::after {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-indigo)) !important;
}


/* ─── §9 · SKILLS — CARD HOVER COLOR PER CATEGORY ─────────────────────── */
/*
  On hover each card currently glows indigo. Match the glow to category.
*/
.skills-grid .sk:nth-child(1):hover {
  box-shadow: 0 0 0 1px rgba(96,165,250,0.18), 0 0 24px rgba(96,165,250,0.10), var(--card-spec-hover) !important;
  border-color: rgba(96,165,250,0.30) !important;
}
.skills-grid .sk:nth-child(2):hover {
  box-shadow: 0 0 0 1px rgba(34,211,238,0.18), 0 0 24px rgba(34,211,238,0.09), var(--card-spec-hover) !important;
  border-color: rgba(34,211,238,0.28) !important;
}
.skills-grid .sk:nth-child(3):hover {
  box-shadow: 0 0 0 1px rgba(139,92,246,0.18), 0 0 24px rgba(139,92,246,0.10), var(--card-spec-hover) !important;
  border-color: rgba(139,92,246,0.28) !important;
}
.skills-grid .sk:nth-child(4):hover {
  box-shadow: 0 0 0 1px rgba(245,158,11,0.18), 0 0 24px rgba(245,158,11,0.10), var(--card-spec-hover) !important;
  border-color: rgba(245,158,11,0.28) !important;
}
.skills-grid .sk:nth-child(5):hover {
  box-shadow: 0 0 0 1px rgba(16,185,129,0.18), 0 0 24px rgba(16,185,129,0.10), var(--card-spec-hover) !important;
  border-color: rgba(16,185,129,0.28) !important;
}
.skills-grid .sk:nth-child(6):hover {
  box-shadow: 0 0 0 1px rgba(168,85,247,0.18), 0 0 24px rgba(168,85,247,0.10), var(--card-spec-hover) !important;
  border-color: rgba(168,85,247,0.28) !important;
}
.skills-grid .sk:nth-child(7):hover {
  box-shadow: 0 0 0 1px rgba(34,211,238,0.16), 0 0 24px rgba(34,211,238,0.08), var(--card-spec-hover) !important;
  border-color: rgba(34,211,238,0.24) !important;
}

/* ─── §9b · SKILLS — ENHANCED SPATIAL STYLING ─────────────────────────── */

.sk {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease) !important;
  perspective: 1000px;
}

/* 3D tilt interaction */
.sk:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-1deg) !important;
}

/* Radar Scan Animation */
.sk::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.04), transparent);
  z-index: 1;
  pointer-events: none;
  animation: skRadarScan 8s linear infinite;
}

@keyframes skRadarScan {
  0% { top: -100%; }
  100% { top: 100%; }
}

.sk-watermark {
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 8rem;
  opacity: 0.03;
  color: var(--text-primary);
  z-index: 0;
  pointer-events: none;
  transform: rotate(-15deg);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.sk:hover .sk-watermark {
  opacity: 0.08;
  transform: rotate(0deg) scale(1.1);
}

.sk-tagline {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
  opacity: 0.8;
  margin-top: 8px;
  margin-bottom: 20px;
  max-width: 90%;
  z-index: 5 !important;
}

html.light .sk-tagline {
  color: #475569 !important;
  opacity: 1 !important;
}

.sk-foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5 !important;
}

.sk-stat-pill {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--bg-3);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

html.light .sk-stat-pill {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

.sk-stat-pulse {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent-green);
  letter-spacing: 1px;
}

html.light .sk-stat-pulse {
  color: #10B981 !important;
}

.sk-stat-pulse .pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-green);
  animation: sdotPulse 2s ease-in-out infinite;
}

/* Staggered Tag Entry (for AOS) */
.sk.on .skill-tag {
  animation: skTagPop 0.4s var(--ease) both;
}

.sk.on .skill-tag:nth-child(1) { animation-delay: 0.1s; }
.sk.on .skill-tag:nth-child(2) { animation-delay: 0.15s; }
.sk.on .skill-tag:nth-child(3) { animation-delay: 0.2s; }
.sk.on .skill-tag:nth-child(4) { animation-delay: 0.25s; }
.sk.on .skill-tag:nth-child(5) { animation-delay: 0.3s; }
.sk.on .skill-tag:nth-child(6) { animation-delay: 0.35s; }
.sk.on .skill-tag:nth-child(7) { animation-delay: 0.4s; }
.sk.on .skill-tag:nth-child(8) { animation-delay: 0.45s; }

@keyframes skTagPop {
  from { opacity: 0; transform: translateY(4px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ─── §10 · EXPERIENCE TIMELINE — CURRENT ROLE PULSE ──────────────────── */
/*
  The first item in the timeline should read as "current/active."
  Enhanced pulsing dot + slightly stronger card presence.
*/
@keyframes currentRolePulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(99,102,241,0.40),
      0 0 16px rgba(99,102,241,0.30);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(99,102,241,0.10),
      0 0 28px rgba(99,102,241,0.20);
  }
}
.timeline .tl-item:first-child .tl-dot {
  animation: currentRolePulse 2.2s ease-in-out infinite !important;
  width: 15px !important;
  height: 15px !important;
}


/* ─── §11 · PROJECTS — FEATURED FIRST-CHILD BENTO CARD ────────────────── */
/*
  First project card spans 2 columns → feels like a hero product tile.
  On tablet/mobile falls back to 1-col naturally.
*/
@media (min-width: 768px) {
  .proj-bento .proj:first-child {
    grid-column: span 2;
  }
  /* Featured card gets bigger emoji icon and larger title */
  .proj-bento .proj:first-child .proj-ico {
    font-size: 2.4rem !important;
  }
  .proj-bento .proj:first-child h4 {
    font-size: 1.15rem !important;
    letter-spacing: -0.018em !important;
  }
  /* Featured card gets stronger top gradient bar */
  .proj-bento .proj:first-child::after {
    height: 2px !important;
    background: linear-gradient(90deg, var(--accent-indigo), var(--accent-cyan), var(--accent-violet)) !important;
    opacity: 1 !important;
  }
  /* Stronger glow on featured card hover */
  .proj-bento .proj:first-child:hover {
    box-shadow:
      0 0 0 1px rgba(99,102,241,0.24),
      0 0 32px rgba(99,102,241,0.14),
      0 24px 56px rgba(0,0,0,0.40),
      var(--card-spec-hover) !important;
  }
}

@media (min-width: 1100px) {
  /* 3-col grid: first card spans 2, leaves 1 col for 2nd card */
  .proj-bento .proj:first-child {
    grid-column: span 2;
  }
}


/* ─── §12 · CTA SECTION — VISUAL HIERARCHY UPGRADE ────────────────────── */
/*
  "Book a Call" should be the dominant CTA. "Call Me" is wrong as primary
  for an engineering audience. Promote btn-amber (Book a Call) visually
  and add a terminal command eyebrow above the CTA block.
*/

/* Make Book a Call (btn-amber) look like the primary action */
.cta .btn-amber {
  background: linear-gradient(135deg, rgba(245,158,11,0.20), rgba(245,158,11,0.10)) !important;
  border-color: rgba(245,158,11,0.50) !important;
  color: var(--accent-amber) !important;
  padding: 11px 24px !important;
  font-size: 0.875rem !important;
  box-shadow: 0 0 20px rgba(245,158,11,0.14), var(--card-spec) !important;
}
.cta .btn-amber:hover {
  background: linear-gradient(135deg, rgba(245,158,11,0.30), rgba(245,158,11,0.16)) !important;
  border-color: rgba(245,158,11,0.72) !important;
  box-shadow: 0 0 30px rgba(245,158,11,0.24), 0 8px 24px rgba(0,0,0,0.30), var(--card-spec-hover) !important;
}



/* CTA social icons — more colorful on hover */
.socials .soc:nth-child(1):hover { /* GitHub */
  color: #E6EDF3 !important;
  border-color: rgba(230,237,243,0.30) !important;
}
.socials .soc:nth-child(2):hover { /* LinkedIn */
  color: #0A66C2 !important;
  border-color: rgba(10,102,194,0.40) !important;
  box-shadow: 0 0 14px rgba(10,102,194,0.20) !important;
}
.socials .soc:nth-child(3):hover { /* Medium */
  color: #fff !important;
  border-color: rgba(255,255,255,0.30) !important;
}


/* ─── §13 · ABOUT SECTION — LEFT-BORDER ACCENT ON TEXT CARDS ──────────── */
/*
  The about-cards (.ac) already have a left border that reveals on hover.
  Make it always slightly visible (opacity: 0.2) so the DevOps pipeline
  metaphor reads even at rest.
*/
.ac::after {
  opacity: 0.18 !important;
}
.ac:hover::after {
  opacity: 1 !important;
}


/* ─── §14 · ABOUT — HIGHLIGHT STAT CARDS ──────────────────────────────── */
/*
  The 2×2 stats grid (.ahl) needs the stat values to feel more impactful.
*/
.ahl-v {
  text-shadow: 0 0 20px rgba(99,102,241,0.45) !important;
}
html.light .ahl-v {
  text-shadow: none !important;
}
.ahl-i {
  font-size: 1.4rem !important;
  margin-bottom: 8px !important;
}


/* ─── §15 · EDUCATION — TIMELINE DOT COLOUR ───────────────────────────── */
/*
  Education dots pulse indigo by default. Make first (current/latest)
  institution pulse cyan for visual variation.
*/
.edu-timeline .edu-item:first-child .edu-dot {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 4px rgba(34,211,238,0.14), 0 0 20px rgba(34,211,238,0.28) !important;
  animation: eduDotCyan 3s ease-in-out infinite !important;
}
@keyframes eduDotCyan {
  0%,100% { box-shadow: 0 0 0 4px rgba(34,211,238,0.14), 0 0 20px rgba(34,211,238,0.28) }
  50%      { box-shadow: 0 0 0 8px rgba(34,211,238,0.06), 0 0 32px rgba(34,211,238,0.16) }
}


/* ─── §16 · CERTIFICATIONS — STRONGER TOP BAR ─────────────────────────── */
/*
  The cert-top bar (coloured 2px horizontal line) is opacity:0 at rest.
  Show it faintly at rest so cards feel categorised even without hover.
*/
.cert-top {
  opacity: 0.22 !important;
}
.cert:hover .cert-top {
  opacity: 1 !important;
}


/* ─── §17 · SECTION NUMBER WATERMARKS — FRACTIONALLY MORE VISIBLE ──────── */
/*
  The ghost number watermarks behind section titles (01, 02, ...) are at
  opacity ~0.052. Nudging to ~0.07 makes them feel intentional, not accidental.
*/
.section-header[data-num]::before {
  -webkit-text-stroke: 1px rgba(99,102,241,0.07) !important;
}
html.light .section-header[data-num]::before {
  -webkit-text-stroke: 1px rgba(67,56,202,0.08) !important;
}

/* Firefox fallback */
@supports not (-webkit-text-stroke: 1px transparent) {
  .section-header[data-num]::before {
    color: rgba(99,102,241,0.07) !important;
  }
  html.light .section-header[data-num]::before {
    color: rgba(67,56,202,0.08) !important;
  }
}


/* ─── §18 · EIP SECTION — TERMINAL PROMPT ENHANCEMENT ─────────────────── */
/*
  The "Engineering in Public" terminal box is a great concept.
  Enhance the prompt styling to feel more like a real terminal.
*/

/* Make the prompt bar more opaque/dramatic */
.eip-box {
  box-shadow: var(--shadow-2), var(--glow), var(--card-spec) !important;
}
html.light .eip-box {
  box-shadow: var(--shadow-2), var(--glow) !important;
}

/* ── Pulsing cursor in EIP prompt ── */
.eip-prompt [style*="animation:cblink"] {
  font-size: 0.9em;
}


/* ─── §19 · FOOTER — CHMOD STYLING ENHANCEMENT ─────────────────────────── */
/*
  The footer has `chmod +x life.sh` — good. Make `chmod +x` pop more.
*/
.footer [style*="color:var(--g)"] {
  letter-spacing: 0.02em;
}


/* ─── §20 · PIPELINE SECTION — DARKER STAGING AREA ────────────────────── */
/*
  The pipeline case study (DevSecOps mega-project) is buried visually.
  Give the pipeline-stages container a stronger dark surface presence.
*/
.pipeline-stages {
  background: rgba(3,5,9,0.60) !important;
  border: 1px solid var(--border-hover) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
html.light .pipeline-stages {
  background: rgba(238,242,255,0.80) !important;
  border-color: var(--border) !important;
}

/* Pipeline stage active/pass state — stronger glow */
.pipe-stage.stage-pass {
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease) !important;
}
.pipe-stage.stage-pass:hover {
  background: rgba(99,102,241,0.12) !important;
  border-color: var(--accent-indigo-bd) !important;
  box-shadow: 0 0 18px rgba(99,102,241,0.18) !important;
}

/* Pipeline arrow chevrons — more visible */
.pipe-arrow {
  color: var(--accent-indigo) !important;
  opacity: 0.6 !important;
}


/* ─── §21 · BODY AMBIENT BACKGROUND — SLIGHTLY MORE VIVID ─────────────── */
/*
  The ambient glow behind the page is at rgba 0.14 for the top indigo field.
  Bump to 0.18 for dark mode for a more "deep space" feel.
*/
body {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -10%,  rgba(99,102,241,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 96% 90%,   rgba(34,211,238,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 2%  80%,   rgba(139,92,246,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 30% 25% at 80% 15%,   rgba(99,102,241,0.06) 0%, transparent 50%) !important;
}
html.light body {
  background-image:
    radial-gradient(ellipse 65% 45% at 50% -8%,   rgba(67,56,202,0.09) 0%, transparent 58%),
    radial-gradient(ellipse 38% 30% at 96% 92%,   rgba(14,116,144,0.05) 0%, transparent 52%),
    radial-gradient(ellipse 32% 28% at 2%  75%,   rgba(109,40,217,0.04) 0%, transparent 50%) !important;
}

/* Breathing body::before — more vivid pulses */
body::before {
  background:
    radial-gradient(ellipse 60% 44% at 50% -10%, rgba(99,102,241,0.14) 0%, transparent 56%),
    radial-gradient(ellipse 38% 32% at 88% 96%,  rgba(34,211,238,0.09) 0%, transparent 52%),
    radial-gradient(ellipse 28% 24% at 14% 92%,  rgba(139,92,246,0.07) 0%, transparent 50%) !important;
}


/* ─── §22 · HERO ORB — SLIGHTLY MORE VIVID ─────────────────────────────── */
.hero-orb-1 {
  background: radial-gradient(circle, rgba(99,102,241,0.11) 0%, rgba(99,102,241,0.015) 42%, transparent 65%) !important;
}
.hero-orb-2 {
  background: radial-gradient(circle, rgba(34,211,238,0.07) 0%, transparent 65%) !important;
}





/* ─── §24 · ARTICLE CARDS — ENHANCED WRITING SECTION ──────────────────── */
/*
  Article cards look good but the writing section can feel more editorial.
  Add a subtle left-side gradient for a magazine/publication feel.
*/
.article-card {
  border-left: 2px solid transparent !important;
  border-image: linear-gradient(180deg, var(--accent-violet), transparent) 1 !important;
  transition: background var(--d-card) var(--ease-std),
              border-color var(--d-card) var(--ease-std),
              transform var(--d-hover) var(--ease-in),
              box-shadow var(--d-card) var(--ease) !important;
}
.article-card:hover {
  border-image: linear-gradient(180deg, var(--accent-indigo), var(--accent-violet)) 1 !important;
}


/* ─── §25 · TESTIMONIAL CARDS — STRONGER QUOTE MARK ───────────────────── */
/*
  The decorative quotation mark on tcrd::after is at opacity 0.07.
  Nudge it to 0.10 for a more editorial feel.
*/
.tcrd::after {
  opacity: 0.10 !important;
  font-size: 5rem !important;
}


/* ─── §26 · NAV — ACTIVE LINK ACCENT ──────────────────────────────────── */
/*
  Active nav link currently just changes colour. Add a subtle underline
  indicator (pipeline-style dot) that feels intentional.
*/
.nav-links a.nav-link.active {
  color: var(--accent-indigo-hi) !important;
  background: var(--accent-indigo-lo) !important;
  position: relative;
}

/* ─── §27 · DISABLE LEGACY 2D GRID FOR 3D ENGINE ──────────────────────────── */
body::after {
  display: none !important;
}
html.light body::after {
  display: none !important;
}

/* ─── §28 · RESPONSIVE MOBILITY FIXES ──────────────────────────── */
@media (max-width: 768px) {
  /* Stop horizontal scrolling */
  body {
    overflow-x: hidden !important;
    width: 100vw;
  }
  
  /* Container paddings */
  .container {
    padding: 0 16px !important;
  }
  
  /* Hero section */
  .hero {
    padding: 120px 0 60px !important;
  }
  .hero h1 {
    font-size: clamp(2.5rem, 8vw, 4rem) !important;
    line-height: 1.1 !important;
  }
  .h-sub {
    font-size: 1rem !important;
    max-width: 100% !important;
  }
  
  /* Grid gaps and sizing */
  .skills-grid, .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .skills-grid .sk {
    padding: 24px !important;
  }
  
  /* Disable heavy animations visually */
  .hero-orb-1, .hero-orb-2, .hero-orb-3 {
    display: none !important;
  }
  
  .glass-card::before, .h-term::before {
    display: none !important; /* Disable spotlight on mobile */
  }
  
  /* Radar specific */
  .radar-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Projects Mega Project span fix */
  .proj-bento .proj:first-child {
    grid-column: span 1 !important;
  }
}
.nav-links a.nav-link.active::after,
.nav-links a.nav-pill.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-indigo);
  box-shadow: 0 0 10px rgba(99,102,241,0.6);
}

.nav-links a.nav-pill.active {
  border-color: var(--accent-indigo) !important;
  color: var(--text-primary) !important;
  background: rgba(99, 102, 241, 0.1) !important;
}


/* ─── §27 · SCROLL PROGRESS BAR — THICKER + MORE VIVID ─────────────────── */
/*
  The scroll progress bar at #sp is 2px. Nudge to 2.5px and increase glow.
*/
#sp {
  height: 2.5px !important;
  box-shadow:
    0 0 12px rgba(99,102,241,0.70),
    0 0 36px rgba(99,102,241,0.28) !important;
}


/* ─── §28 · REDUCED MOTION — PRESERVE ALL NEW ANIMATIONS ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .skills-grid .sk:nth-child(1) .sk-icon,
  .skills-grid .sk:nth-child(2) .sk-icon,
  .skills-grid .sk:nth-child(3) .sk-icon,
  .skills-grid .sk:nth-child(4) .sk-icon,
  .skills-grid .sk:nth-child(5) .sk-icon,
  .skills-grid .sk:nth-child(6) .sk-icon,
  .skills-grid .sk:nth-child(7) .sk-icon {
    transition: none !important;
  }
  .timeline .tl-item:first-child .tl-dot {
    animation: none !important;
  }
  .edu-timeline .edu-item:first-child .edu-dot {
    animation: none !important;
  }
}


/* ─── §29 · LIGHT MODE — ENSURE ALL UPGRADES DEGRADE GRACEFULLY ───────── */
html.light .skills-grid .sk:nth-child(n) .skill-tag:nth-child(-n+3) {
  /* Override: core tags in light mode use slightly bolder border */
  font-weight: 600 !important;
}
html.light .h-stat .sv {
  text-shadow: none !important;
}
html.light #sp {
  box-shadow:
    0 0 8px rgba(67,56,202,0.40),
    0 0 20px rgba(67,56,202,0.16) !important;
}


/* ─── §30 · NAVBAR GLASSMORPHISM — ELITE POLISH ──────────────────────── */
.nav {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav.scrolled {
    background: rgba(10, 10, 12, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
    transform: translateX(-50%) !important;
}

html.light .nav.scrolled {
    background: rgba(255, 255, 255, 0.75) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
    transform: translateX(-50%) !important;
}

/* Nav Link Hover States */
.nav-link {
    position: relative;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.nav-link:hover {
    color: var(--text-primary) !important;
    opacity: 1 !important;
}

/* ─── §31 · TELEMETRY HUD — UNIFIED STYLING ─────────────────────────── */
#telemetry-hud {
    display: flex; /* Overriding potential inline none */
    gap: 12px !important;
    padding: 10px 14px !important;
    background: rgba(15, 15, 20, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 
        0 10px 40px rgba(0,0,0,0.4),
        inset 0 1px 1px rgba(255,255,255,0.05) !important;
}

html.light #telemetry-hud {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05) !important;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-lbl {
    font-size: 0.6rem !important;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.hud-val {
    font-size: 0.75rem !important;
    color: var(--accent-indigo-hi);
    font-weight: 600;
}

html.light .hud-val {
    color: var(--accent-indigo) !important;
}

/* ─── END OF ELITE.CSS ─────────────────────────────────────────────────── */

/* ─── §X · PREMIUM CONIC BORDER GLOW (LINEAR STYLE) ─── */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Base card enhancement for Bento experience */
.bento-card, .proj, .sk {
  position: relative !important;
  background: var(--bg-2) !important;
  z-index: 1;
}

.bento-card::after, .proj::after, .sk::after {
  content: '' !important;
  position: absolute !important;
  inset: -1.5px !important;
  background: conic-gradient(from var(--angle), transparent 70%, var(--accent-cyan), var(--accent-violet), var(--accent-cyan)) !important;
  border-radius: inherit !important;
  z-index: -1 !important;
  animation: rotate-glow 4s linear infinite !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

.bento-card:hover::after, .proj:hover::after, .sk:hover::after {
  opacity: 1 !important;
}

@keyframes rotate-glow {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

/* ─── §14 · SRE TERMINAL CLI (Liquid Glass + Phosphor) ──────────────────── */
.terminal-overlay {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 900px;
  height: 60vh;
  background: var(--bg-surface-2);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--trace-border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 40px rgba(0, 82, 204, 0.15);
  overflow: hidden;
}

.terminal-overlay.active { top: 0; }

.terminal-header {
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 20px;
}

.terminal-controls { display: flex; gap: 8px; }
.terminal-controls .control { width: 12px; height: 12px; border-radius: 50%; }
.control.red { background: #FF5F56; }
.control.yellow { background: #FFBD2E; }
.control.green { background: #27C93F; }

.terminal-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.terminal-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.terminal-output-line { margin-bottom: 4px; white-space: pre-wrap; }

.terminal-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.terminal-prompt { color: #00A3BF; font-weight: 700; }

#terminal-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  flex: 1;
  caret-color: transparent; /* Custom caret below */
  text-shadow: none;
}

.terminal-caret {
  width: 8px;
  height: 18px;
  background: #0052CC;
  animation: terminal-blink 1s step-end infinite;
  box-shadow: 0 0 10px #0052CC;
}

@keyframes terminal-blink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* CRT Scanline Effect */
.terminal-body::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.1) 50.2%,
    rgba(18, 16, 16, 0) 50.4%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 2;
}

/* Light Theme Terminal Tuning */
html.light .terminal-overlay {
    background: #FFFFFF !important;
    box-shadow: 0 40px 100px rgba(0,0,0,0.1), 0 0 20px rgba(0, 0, 0, 0.05) !important;
}

html.light .terminal-header {
    background: rgba(0, 0, 0, 0.03);
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

html.light .terminal-body::after {
    opacity: 0.1;
}

html.light .terminal-caret {
    background: var(--accent-indigo);
    box-shadow: none;
}

/* ─── §X · CHAOS ENGINEERING & GLITCH INTERACTIVES ──────────────────── */
.chaos-trigger {
  margin-top: 16px;
  padding: 8px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #EF4444;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease);
  cursor: pointer;
}

.chaos-trigger:hover {
  background: #EF4444;
  color: #fff;
  border-color: #EF4444;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}

.chaos-trigger i {
  font-size: 0.9rem;
}

/* SRE Glitch State */
body.chaos-glitch {
  overflow-x: hidden;
  animation: glitch-shake 0.3s infinite;
}

body.chaos-glitch #app-content {
  filter: hue-rotate(90deg) contrast(1.2);
}

body.chaos-glitch .glass-card {
  animation: glitch-flicker 0.2s infinite;
}

@keyframes glitch-shake {
  0% { transform: translate(0,0) }
  25% { transform: translate(2px, -2px) }
  50% { transform: translate(-2px, 2px) }
  75% { transform: translate(2px, 2px) }
  100% { transform: translate(0,0) }
}

@keyframes glitch-flicker {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.005); }
  100% { opacity: 1; transform: scale(1); }
}

/* ─── §X · GRAVITY OVERRIDE ────────────────────────────────────────── */
.zero-g-active .bento-card,
.zero-g-active .project-card,
.zero-g-active .sk,
.zero-g-active .tl-card {
  pointer-events: none;
}

/* Internal Report Card Styling */
.article-card.internal-report {
  border-left: 2px solid var(--accent-red);
  background: rgba(239, 68, 68, 0.02);
}

.article-card.internal-report:hover {
  background: rgba(239, 68, 68, 0.05);
  border-left-color: var(--accent-red-hi);
}

.article-card.internal-report .article-med-icon {
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
}

.article-card.internal-report .article-tag {
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
}


/* --- TIER-0 TACTILE FEEDBACK --- */
.btn-primary, .btn-resume, .btn-outline, .nav-link, .btn-recruiter {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The physical "click" compression */
.btn-primary:active, 
.btn-resume:active, 
.btn-recruiter:active,
.btn-outline:active {
  transform: scale(0.94) !important;
  opacity: 0.8;
}

/* For the ⌘K button */
#cmd-trigger:active {
  transform: scale(0.90) !important;
  background: var(--text-primary);
  color: var(--bg-base);
}
/* ─── TERMINAL MOBILE ADAPTATION ─── */
@media (max-width: 767px) {
  .terminal-overlay {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    top: -100% !important;
  }

  .terminal-overlay.active {
    top: 0 !important;
  }

  .terminal-header {
    padding: 16px 20px !important;
    gap: 12px !important;
  }

  .terminal-title {
    font-size: 0.6rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .terminal-body {
    padding: 16px !important;
    font-size: 0.8rem !important;
  }

  .terminal-prompt {
    font-size: 0.75rem !important;
  }

  #terminal-input {
    font-size: 0.8rem !important;
  }
}