/* ============================================================================
   TOP 1% / FAANG-LEVEL AESTHETIC — DESIGN SYSTEM ENGINE
   Featuring: Plus Jakarta Sans & Inter Typography
   ============================================================================ */
/* ─── §0 · OFFICIAL ATLASSIAN TYPOGRAPHY ─── */
@font-face {
  font-family: 'Atlassian Sans';
  src: url('../assets/fonts/AtlassianSans.v3.ttf') format('truetype');
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: 'Atlassian Mono';
  src: url('../assets/fonts/AtlassianMono.v2.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600&family=DM+Serif+Display:ital@0;1&display=swap');

/* ─── §1 · DARK MODE (ATLASSIAN DEEP SPACE) ─── */
:root {
  --bg-1: #101214 !important;
  /* Atlassian Deep Space */
  --bg-2: #1D2125 !important;
  /* Atlassian Surface */
  --bg-3: #22272B !important;
  /* Atlassian Elevated Surface */
  --bg-4: #2C333A !important;
  --bg-5: #353F47 !important;

  --text-primary: #FFFFFF !important;
  --text-secondary: #B3B9C4 !important;
  /* Atlassian Slate 400 */
  --text-muted: #8993A4 !important;
  /* Atlassian Slate 500 */
  --text-ghost: #626F84 !important;

  --primary-blue: #579DFF !important;
  /* Atlassian Blue 400 (Dark Optimized) */
  --accent-cyan: #00E5FF !important;
  /* K8s / Cloud */
  --accent-indigo: #e2e8f0 !important;
  --accent-indigo-hi: #ffffff !important;
  --accent-amber: #FFAB00 !important;
  /* Atlassian Amber */
  --accent-green: #36B37E !important;
  /* Atlassian Green */
  --accent-violet: #8777D9 !important;
  /* Atlassian Purple */

  --border: rgba(255, 255, 255, 0.08) !important;
  --border-hover: rgba(255, 255, 255, 0.15) !important;
  --border-glass: rgba(255, 255, 255, 0.12) !important;
  /* Sharp Edge Reflection */

  --card-spec: inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
  --card-spec-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.4) !important;

  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.6) !important;

  --radius-atlassian: 3px !important;
  --radius-btn: 3px !important;

  --shadow-atlassian: rgba(0, 0, 0, 0.4) 0px 4px 8px -2px, rgba(0, 0, 0, 0.3) 0px 0px 1px !important;

  /* Atlassian Elevation Tokens (ADS) */
  --elevation-sunken: inset 0 1px 1px rgba(0, 0, 0, 0.1) !important;
  --elevation-raised: 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31) !important;
  --elevation-overlay: 0 8px 16px -4px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31) !important;

  /* Radiant Elevation Tokens */
  --glow-primary: rgba(76, 154, 255, 0.15) !important;
  --glow-cyan: rgba(0, 229, 255, 0.15) !important;
  --glow-violet: rgba(135, 119, 217, 0.15) !important;

  /* TYPOGRAPHY */
  --font-display: 'DM Serif Display', serif !important;
  --font-heading: 'DM Serif Display', serif !important;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif !important;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace !important;
}

html.light {
  --bg-1: #FFFFFF !important;
  --bg-2: #F4F5F7 !important;
  --bg-3: #EBECF0 !important;
  --bg-4: #DFE1E6 !important;
  --bg-5: #C1C7D0 !important;

  --text-primary: #172B4D !important;
  --text-secondary: #42526E !important;
  --text-muted: #5E6C84 !important;
  --text-ghost: #7A869A !important;

  --primary-blue: #0052CC !important;
  --accent-cyan: #008DA6 !important;
  --accent-indigo: #091E42 !important;
  --accent-indigo-hi: #091E42 !important;
  --accent-amber: #FF8B00 !important;
  --accent-green: #00875A !important;
  --accent-violet: #5243AA !important;

  --border: rgba(9, 30, 66, 0.08) !important;
  --border-hover: rgba(9, 30, 66, 0.16) !important;
  --border-glass: rgba(9, 30, 66, 0.12) !important;

  --card-spec: inset 0 1px 0 0 rgba(9, 30, 66, 0.04) !important;
  --card-spec-hover: inset 0 1px 0 0 rgba(9, 30, 66, 0.08), 0 8px 16px rgba(9, 30, 66, 0.1) !important;

  --shadow-1: 0 4px 12px rgba(9, 30, 66, 0.08) !important;
  --shadow-2: 0 12px 32px rgba(9, 30, 66, 0.12) !important;

  --elevation-sunken: inset 0 1px 1px rgba(9, 30, 66, 0.05) !important;
  --elevation-raised: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31) !important;
  --elevation-overlay: 0 8px 16px -4px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31) !important;

  --glow-primary: rgba(0, 82, 204, 0.08) !important;
  --glow-cyan: rgba(0, 141, 166, 0.08) !important;
  --glow-violet: rgba(82, 67, 170, 0.08) !important;
}

/* ─── §12 · GLOBAL GEOMETRY NORMALIZATION ─── */
* {
  --radius-pill: 3px !important;
  --radius-atlassian: 3px !important;
  --radius-btn: 3px !important;
}

[style*="border-radius: 999px"],
[style*="border-radius:999px"],
.pill,
.rounded-full {
  border-radius: 3px !important;
}

/* ─── §13 · SECTION BACKGROUND ENFORCEMENT ─── */
html.dark #hero,
html.dark .hero-section,
html.dark #contact,
html.dark .contact-section {
  background: #000000 !important;
  background-image: none !important;
}

html.dark #hero::before,
html.dark .contact-section::before {
  display: none !important;
}

html.light {
  --bg-1: #FFFFFF !important;
  /* Pure Atlassian White */
  --bg-2: #F4F5F7 !important;
  /* Atlassian Surface */
  --bg-3: #EBECF0 !important;
  /* Subtle Background Tint */

  --text-primary: #172B4D !important;
  /* Atlassian Ink (Slate) */
  --text-secondary: #42526E !important;
  --text-muted: #6B778C !important;

  --primary-blue: #0065FF !important;
  /* Atlassian Blue 500 */
  --accent-cyan: #00B8D9 !important;
  --accent-indigo: #091E42 !important;
  --accent-indigo-hi: #172B4D !important;
  --accent-amber: #FFAB00 !important;
  --accent-green: #36B37E !important;
  --accent-violet: #6554C0 !important;

  --border: rgba(9, 30, 66, 0.08) !important;
  --border-hover: rgba(9, 30, 66, 0.15) !important;

  --card-spec: inset 0 0 0 1px rgba(9, 30, 66, 0.05), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  --card-spec-hover: inset 0 0 0 1px rgba(9, 30, 66, 0.12), 0 12px 40px rgba(0, 0, 0, 0.05) !important;

  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.06) !important;
  --shadow-atlassian: rgba(9, 30, 66, 0.15) 0px 4px 12px 0px,
    rgba(9, 30, 66, 0.31) 0px 0px 1px 0px !important;

  /* Radiant Elevation Tokens (Light Mode) */
  --glow-primary: rgba(0, 101, 255, 0.12) !important;
  --glow-cyan: rgba(0, 184, 217, 0.12) !important;
  --glow-violet: rgba(101, 84, 192, 0.12) !important;
}

html.light body,
html.light .section {
  background-color: var(--bg-1) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

/* ─── §3 · DYNAMIC BACKGROUND ENGINE ─── */
body {
  background-image: none !important;
  background-color: var(--bg-1) !important;
  /* Atlassian Deep Space */
  background: var(--bg-1) !important;
}

/* Animated Grid Layer */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 80%);
  animation: grid-scroll 25s linear infinite;
}

html.light body::after {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
}

@keyframes grid-scroll {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 50px;
  }
}

/* Ambient Radial Mesh & Network Canvas */
#bg-canvas {
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
  mix-blend-mode: screen !important;
  display: block !important;
}

html.light #bg-canvas {
  mix-blend-mode: multiply !important;
  opacity: 0.4 !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(circle at 50% 10%, rgba(76, 154, 255, 0.05) 0%, transparent 50%) !important;
  animation: none !important;
}

html.light body::before {
  background: radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 0.02) 0%, transparent 60%) !important;
}

/* Vercel-Style SVG Noise (Tactile Feeling) */
#vercel-noise {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E') !important;
  opacity: 0.04 !important;
  mix-blend-mode: overlay !important;
}

html.light #vercel-noise {
  opacity: 0.03 !important;
  mix-blend-mode: multiply !important;
}

/* Animated Dark Mode Gradient Orbs */
.hero-title-elite {
  font-family: var(--font-display) !important;
  font-size: 4.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

.hero-btns .btn-atl {
  height: 40px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  border-radius: 3px !important;
}

/* Enforce Solid Black for Hero & Contact in Dark Mode */
#hero,
#contact {
  background-color: #000000 !important;
  background-image: none !important;
}

#hero .hero-orb-1,
#hero .hero-orb-2,
#hero .hero-orb-3,
#contact .engineering-stamp {
  display: none !important;
  /* Remove background visuals/gradients as requested */
}

/* Elite Dark Mode Visibility: Restore blueprint but keep background black */
.hero-visual-blueprint {
  opacity: 1 !important; /* Set to 100% for dark mode */
  filter: brightness(0.7) contrast(1.2);
  mix-blend-mode: screen;
}

html.light #hero,
html.light #contact {
  background-color: var(--bg-1) !important;
  background-image: none !important;
}

html.light #hero .hero-visual-blueprint {
  opacity: 0.4 !important; /* Adjust light mode visibility here */
  filter: none;
  mix-blend-mode: normal;
}

.hero-orb-1 {
  width: 45vw;
  height: 45vw;
  background: rgba(34, 211, 238, 0.18) !important;
  top: -10%;
  left: -5%;
}

.hero-orb-2 {
  width: 55vw;
  height: 55vw;
  background: rgba(139, 92, 246, 0.15) !important;
  bottom: -15%;
  right: -15%;
  animation-delay: -5s !important;
}

.hero-orb-3 {
  width: 35vw;
  height: 35vw;
  background: rgba(99, 102, 241, 0.12) !important;
  top: 40%;
  left: -10%;
  animation-delay: -12s !important;
}

html.light .hero-orb-1,
html.light .hero-orb-2,
html.light .hero-orb-3 {
  display: none !important;
}

@keyframes floatOrb {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(4vw, -6vw) scale(1.05);
  }

  66% {
    transform: translate(-3vw, 4vw) scale(0.95);
  }

  100% {
    transform: translate(-6vw, -2vw) scale(1.02);
  }
}

/* ─── §3.5 · IMMERSIVE TRANSPARENCY ─── */
.section {
  background-color: rgba(9, 30, 66, 0.2) !important;
  /* Maximized visibility for 3D background */
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  position: relative;
  z-index: 1;
}

/* Specific overrides for sections with explicit bg colors */
#how-i-think,
.s-alt,
#recognition,
#testimonials,
.section:nth-of-type(even) {
  background-color: var(--ds-background-subtle) !important;
}

html.light .section {
  background-color: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(8px);
}

/* ─── §4 · HIGH-PERFORMANCE SCROLL REVEAL (SPRING PHYSICS) ─── */
.aos, .choreographed {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.aos.on, .choreographed.on {
  opacity: 1 !important;
  transform: none !important;
}

/* ─── §5 · TYPOGRAPHY PHYSICS ─── */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-family: var(--font-body) !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.5em;
}

h1 {
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}

p,
li {
  font-family: var(--font-body) !important;
  letter-spacing: normal !important;
  margin-bottom: 1em;
}

.nav-link,
.btn-resume,
.btn-cmdk,
.cmdk-item,
.ac-h h4,
.sk h4,
.proj h4 {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* Specific Header Colors */
.hero h1 .line2 {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* ─── §6 · DYNAMIC COMPONENTS & MICRO-INTERACTIONS ─── */
/* Navbar: Elite Glassmorphism */
@media (min-width: 1024px) {
  .nav {
    background: rgb(255, 255, 255) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000 !important;
    height: 68px !important;
    font-family: "Charlie Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  }
}

/* Specular Highlight Utility */
.nav::after,
.sk::after,
.proj::after,
.cert::after,
.rec-card::after,
.ac::after,
.tl-card::after,
.tcrd::after,
#sre-terminal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
  pointer-events: none;
  z-index: 10;
}

.community-visual-blueprint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../assets/img/graph.webp') no-repeat center;
  background-size: cover;
  opacity: 0.1;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}



.annotation-right-mark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../assets/img/right mark circle.webp') no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-left: 6px;
}

.annotation-arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../assets/img/arrow.svg') no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-left: 4px;
  transition: transform 0.3s var(--ease-premium);
}

.annotation-arrow-nav {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('../assets/img/navigation arrow.png') no-repeat center;
  background-size: contain;
  vertical-align: middle;
}


html.light .nav::after,
html.light .sk::after,
html.light .proj::after,
html.light .cert::after,
html.light .ac::after,
html.light #sre-terminal::after {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
}

html.light .nav {
  background: rgba(255, 255, 255, 0.85) !important;
}

.nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

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

/* Hero Terminal: Animated Gradient Border */
.h-term {
  border-radius: 12px !important;
  background: var(--bg-2) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  position: relative !important;
  z-index: 1 !important;
  border: none !important;
  /* using pseudo-element for animated border */
}

.h-term::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.2), rgba(139, 92, 246, 0.3), rgba(34, 211, 238, 0.2));
  background-size: 200% auto;
  animation: shine-border 4s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}

html.light .h-term {
  box-shadow: var(--shadow-2), var(--card-spec) !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html.light .h-term::after {
  display: none !important;
}

html.light .term-line {
  color: #3f3f46 !important;
}

html.light .tc-blue {
  color: #2563eb !important;
}

html.light .tc-green {
  color: #16a34a !important;
}

.h-term::before {
  display: none !important;
}

.h-term-bar {
  background: var(--bg-3) !important;
  border-bottom: 1px solid var(--border) !important;
}

@keyframes shine-border {
  to {
    background-position: 200% center;
  }
}

/* Universal Card Base & Deep Hover Physics (Atlassian Super-Ellipse) */
.sk,
.proj,
.cert,
.rec-card,
.ac,
.tl-card,
.tcrd,
#sre-terminal {
  background: var(--bg-2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-atlassian) !important;
  box-shadow: var(--shadow-atlassian) !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

html.light .sk,
html.light .proj,
html.light .cert,
html.light .rec-card,
html.light .ac,
html.light .tl-card,
html.light .tcrd,
html.light #sre-terminal {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(9, 30, 66, 0.08) !important;
}

.sk:hover,
.proj:hover,
.cert:hover,
.rec-card:hover,
.ac:hover,
.tl-card:hover,
.tcrd:hover {
  transform: translateY(-4px) scale(1.005) !important;
  border-color: var(--primary-blue) !important;
  background: var(--bg-3) !important;
  box-shadow: var(--shadow-atlassian), 0 0 30px var(--glow-primary) !important;
}

html.light .sk:hover,
html.light .proj:hover,
html.light .cert:hover,
html.light .rec-card:hover,
html.light .ac:hover,
html.light .tl-card:hover,
html.light .tcrd:hover {
  background: #ffffff !important;
  border-color: var(--primary-blue) !important;
  box-shadow: var(--shadow-atlassian), 0 12px 24px var(--glow-primary) !important;
}

.sk::after,
.proj::after,
.cert-top,
.ac::after,
.spk-stat::before,
.sk::before,
.proj::before,
.cert::before,
.rec-card::before,
.ac::before,
.tl-card::before {
  display: none !important;
}

/* Projects Bento & Icons */
.proj {
  padding: 32px !important;
  border-radius: 16px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-1) !important;
  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;
  position: relative;
  overflow: hidden;
}

.proj:hover {
  background: var(--bg-3) !important;
  border-color: var(--accent-indigo) !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

html.light .proj {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

html.light .proj:hover {
  background: #fafafa !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

/* About Cards Layout Upgrade */
.about-cards {
  gap: 24px !important;
  /* Increased gap for Atlassian breathing room */
}

.ac {
  padding: 32px !important;
  /* Premium padding */
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 120px !important;
}

.ac-h {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
}

.ac-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.light .ac-icon {
  background: rgba(9, 30, 66, 0.04) !important;
  border: 1px solid rgba(9, 30, 66, 0.08) !important;
}

html.light .ac {
  background: #ffffff !important;
  opacity: 1 !important;
}

/* ─── §7 · COMMAND PALETTE (CMD+K) ─── */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.cmdk-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.cmdk-container {
  width: 100%;
  max-width: 600px;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-atlassian) !important;
  box-shadow: var(--shadow-atlassian), 0 24px 48px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  overflow: hidden;
  transform: scale(0.98) translateY(10px);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cmdk-overlay.active .cmdk-container {
  transform: scale(1) translateY(0);
}

.cmdk-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cmdk-header i {
  color: var(--primary-blue);
  font-size: 1.2rem;
}

.cmdk-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-family: var(--font-body);
  outline: none;
}

.cmdk-input::placeholder {
  color: var(--text-muted);
}

.cmdk-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
  list-style: none;
  margin: 0;
}

.cmdk-item {
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-secondary);
}

.cmdk-item i {
  width: 24px;
  font-size: 1.1rem;
}

.cmdk-item .cmd-label {
  flex: 1;
  margin-left: 12px;
  font-weight: 500;
}

.cmdk-item .cmd-kbd {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-glass);
}

.cmdk-item:hover,
.cmdk-item.selected {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.cmdk-item.selected {
  background: rgba(0, 101, 255, 0.1) !important;
  color: var(--primary-blue) !important;
}

.cmdk-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-glass);
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cmdk-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cmdk-footer kbd {
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border-glass);
}

html.light .cmdk-container {
  background: #ffffff !important;
  box-shadow: var(--shadow-atlassian), 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

html.light .cmdk-item:hover,
html.light .cmdk-item.selected {
  background: rgba(0, 0, 0, 0.03);
}

html.light .cmdk-item.selected {
  background: rgba(0, 101, 255, 0.05) !important;
}

/* ─── §8 · CHAOS MONKEY PHYSICS ─── */
.chaos-active {
  --primary-blue: #FF3B30 !important;
  /* Critical Red */
  --accent-cyan: #FF3B30 !important;
  --glow-primary: rgba(255, 59, 48, 0.3) !important;
  filter: grayscale(0.2) contrast(1.1);
}

.chaos-active .sk,
.chaos-active .proj,
.chaos-active .ac,
.chaos-active .nav,
.chaos-active #sre-terminal {
  animation: chaos-shake 0.15s infinite ease-in-out !important;
  border-color: #FF3B30 !important;
}

@keyframes chaos-shake {
  0% {
    transform: translate(1px, 1px);
  }

  25% {
    transform: translate(-1px, -1px);
  }

  50% {
    transform: translate(-1px, 1px);
  }

  75% {
    transform: translate(1px, -1px);
  }

  100% {
    transform: translate(1px, 1px);
  }
}

.chaos-active .telemetry-hud-elite {
  background: rgba(255, 59, 48, 0.2) !important;
  border-color: #FF3B30 !important;
}

.ac p {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.proj-ico {
  font-size: 1.6rem !important;
  color: var(--text-primary) !important;
  filter: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.proj:hover .proj-ico {
  transform: scale(1.1) !important;
}

.proj h4 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  color: var(--text-primary) !important;
}

/* Skills Section */
.sk {
  padding: 32px !important;
  border-radius: 16px !important;
}

.sk-icon {
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}

.sk:hover .sk-icon {
  background: var(--bg-4) !important;
  transform: scale(1.08) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.2) !important;
}

html.light .sk:hover .sk-icon {
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.skill-tag,
.tag {
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
}

.skill-tag:hover,
.tag:hover {
  background: var(--text-primary) !important;
  color: var(--bg-1) !important;
  border-color: var(--text-primary) !important;
  transform: translateY(-1px) !important;
}

html.light .skill-tag,
html.light .tag {
  background: #ffffff !important;
  color: #52525b !important;
}

html.light .skill-tag:hover,
html.light .tag:hover {
  background: var(--ds-text) !important;
  color: #ffffff !important;
}

/* Decommissioned legacy Google-style overrides for Atlassian Sync */
.btn-legacy-decommissioned {
  display: none;
}

/* ─── Hero Button Internal Alignment (No Stacking) ─── */
.btn i,
.btn span,
.btn svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn i {
  font-size: 18px !important;
  margin-right: 2px !important;
  /* Micro-adjustment for visual balance */
}

:root[data-theme="google"] body .btn-primary,
.btn-primary {
  /* Color from Google Snippet: rgb(26, 115, 232) */
  background-color: rgb(26, 115, 232) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border-color: rgb(26, 115, 232) !important;
}

:root[data-theme="google"] body .btn-primary:hover,
.btn-primary:hover {
  background-color: rgb(23, 103, 210) !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px rgba(60, 64, 67, 0.15) !important;
  transform: translateY(-1px) !important;
}

.btn-primary i,
.btn-primary span {
  color: #FFFFFF !important;
}

.btn-resume {
  /* Inherit Atlassian Styles */
}

/* Layout Hardening for Hero Action Groups */
.hero-btns,
.h-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

@media (min-width: 1024px) {
  .hero-btns,
  .h-actions {
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 600px) {

  .hero-btns,
  .h-actions {
    /* Grid handled in design-system.css */
  }

  .btn {
    width: auto !important;
  }
}

/* NPX Block Sync */
.npx-block {
  height: 40px !important;
  border-radius: 3px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Pulsing Status Badge */
.h-badge {
  background: rgba(34, 211, 238, 0.05) !important;
  border: 1px solid rgba(34, 211, 238, 0.2) !important;
  color: var(--accent-cyan) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

.sdot {
  background: var(--accent-cyan) !important;
  box-shadow: 0 0 12px var(--accent-cyan) !important;
  animation: pulse-dot 2s infinite !important;
}

@keyframes pulse-dot {

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

  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

html.light .h-badge {
  background: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light .sdot {
  background: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
  animation: none !important;
}

/* ── 15. Elite 2.0 Career Cards (Work History) ── */
.timeline {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  max-width: 900px;
  margin: 0 auto;
}

.tl-item {
  position: relative;
  width: 100%;
}

/* Card Base */
.tl-card {
  position: relative !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
}

/* Dark Mode Gloss */
:root:not(.light) .tl-card {
  background: rgba(10, 10, 15, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Light Mode Depth */
html.light .tl-card {
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

.tl-card:hover {
  transform: translateY(-5px) scale(1.005) !important;
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Terminal Indicator */
.tl-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-cyan);
  opacity: 0.6;
}

/* Header Grid */
.tl-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.tl-title {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.tl-company {
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
  color: var(--accent-cyan) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tl-meta {
  text-align: right;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

.tl-period {
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  background: var(--bg-3) !important;
  padding: 5px 14px !important;
  border-radius: 30px !important;
  border: 1px solid var(--border) !important;
}

.tl-location {
  font-size: 0.65rem !important;
  color: var(--text-muted) !important;
  margin-top: 6px !important;
  letter-spacing: 0.01em;
}

/* Summary Box */
.tl-summary {
  font-size: 0.92rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.65 !important;
  margin-bottom: 28px !important;
}

/* Performance Log (Grid) */
.tl-impact-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.tl-impact-item {
  background: var(--bg-3) !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}

.tl-impact-item:hover {
  background: var(--bg-4) !important;
  border-color: var(--border-hover) !important;
}

.tl-impact-tag {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  color: var(--accent-cyan) !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 6px !important;
  opacity: 0.8;
}

.tl-impact-val {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
}

/* Tech Stack Chips - HARDENED ELITE 3.1 */
.tl-tech-stack,
.proj-tech,
.exp-tech-chips,
.tags,
.skill-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding: 0 !important;
  list-style: none !important;
  clear: both !important;
}

.tl-tech-chip,
.skill-tag,
.proj-tech span,
.exp-tech-chips span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  padding: 6px 14px !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.tl-tech-chip:hover,
.skill-tag:hover {
  border-color: var(--accent-indigo-hi) !important;
  color: var(--accent-indigo-hi) !important;
  transform: translateY(-2px) !important;
  background: var(--bg-2) !important;
}

.proj-tech span:hover {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  transform: translateY(-2px) !important;
}

html.light .tl-tech-chip {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

html.light .tl-location {
  background: rgba(2, 132, 199, 0.05) !important;
  color: #0284c7 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}

/* ── 16. Unified Writing Cards ── */
.article-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}

.article-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--accent-cyan) !important;
  box-shadow: var(--card-spec-hover) !important;
}

html.light .article-card {
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

/* Responsive Grid and Pipeline Fixes */
.pipeline-stages {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.pipe-stage {
  border-radius: 8px !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pipe-stage:hover {
  transform: translateY(-3px) !important;
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.15) !important;
}

html.light .pipe-stage:hover {
  border-color: #09090b !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.obs-metric,
.obs-chart-card,
.feat-proj,
.pipeline-wrap {
  border-radius: 12px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--card-spec) !important;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}

.obs-metric:hover {
  transform: translateY(-2px) !important;
  border-color: var(--border-hover) !important;
  box-shadow: var(--card-spec-hover) !important;
}

.obs-val {
  color: var(--text-primary) !important;
}

.obs-lbl {
  color: var(--text-muted) !important;
}

/* Structural Fixes */
.section {
  padding: 120px 0 !important;
  border: none !important;
}

@media (max-width: 768px) {
  .section {
    padding: 60px 0 !important;
  }
}

/* ─── §X · OBSERVABILITY DASHBOARD WIDGETS ─── */
.infra-bg {
  background: var(--bg-1);
  background-image: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.05) 0%, transparent 60%);
}

.infra-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.infra-widget {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.infra-widget:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15);
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.widget-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.widget-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.05em;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.green {
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

.widget-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.metric-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.metric-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.glow-val {
  color: var(--accent-cyan);
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
}

.widget-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: right;
}

/* Terraform Terminal Style */
.term-bg {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  gap: 4px;
}
.term-line {
  color: var(--text-secondary);
}
.term-line .prompt {
  color: var(--accent-indigo-hi);
  margin-right: 6px;
}
.term-line.success {
  color: #10B981;
}
.term-line.highlight {
  color: var(--text-primary);
  font-weight: 600;
}
.term-line.summary {
  color: #F59E0B;
  margin-top: 4px;
}

/* Mini Chart */
.mini-chart {
  margin-top: 8px;
  height: 40px;
  width: 100%;
}
.mini-chart svg {
  width: 100%;
  height: 100%;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
}

/* CI/CD Pipeline */
.pipeline-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 12px;
}
.pipe-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
}
.pipe-node i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
}
.pipe-node.active i {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border-color: rgba(16, 185, 129, 0.3);
}
.pipe-node.argocd i {
  background: rgba(249, 115, 22, 0.1);
  color: #F97316;
  border-color: rgba(249, 115, 22, 0.3);
}
.pipe-line {
  flex-grow: 1;
  height: 2px;
  background: rgba(255,255,255,0.05);
  margin: 0 4px;
  position: relative;
  top: -8px;
}
.pipe-line.active {
  background: #10B981;
}

.commit-info {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
  padding: 8px;
  border-radius: 4px;
  margin-top: auto;
}
.commit-info .hash {
  color: var(--accent-indigo-hi);
}

@media (max-width: 480px) {
  .section {
    padding: 64px 0 !important;
  }
}

.hero {
  padding: 180px 0 120px !important;
}

.pw img {
  border-radius: 16px !important;
  filter: none !important;
  box-shadow: var(--shadow-2) !important;
  border: 1px solid var(--border) !important;
}

html.light .pw img {
  box-shadow: var(--shadow-1) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html.light [style*="color: var(--accent-indigo)"],
html.light [style*="color:var(--accent-indigo)"] {
  color: #09090b !important;
}

/* ─── §16 · APEX-TIER COLLABORATION CTA ─── */
.cta {
  background: var(--bg-1) !important;
  border-top: 1px solid var(--border) !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 140px 0 !important;
  overflow: hidden !important;
}

/* Subtle background glow for the CTA area */
.cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vw;
  background: radial-gradient(circle, rgba(76, 154, 255, 0.04) 0%, transparent 70%) !important;
  z-index: -1;
  pointer-events: none;
}

.cta-hero-visual {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 48px;
  perspective: 1000px;
  animation: ctaHeroFloat 6s ease-in-out infinite !important;
}

.cta-badge-ring {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 8px;
  background: linear-gradient(135deg, var(--border-glass), transparent) !important;
  box-shadow: var(--shadow-atlassian), 0 20px 40px rgba(0, 0, 0, 0.4) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--bg-2);
  filter: contrast(1.1) brightness(1.1);
}

.cta-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, var(--glow-primary) 0%, transparent 70%) !important;
  opacity: 0.8;
  z-index: -1;
}

.cta-verified-badge {
  position: absolute;
  bottom: -10px;
  right: -20px;
  background: var(--bg-2) !important;
  color: var(--accent-green) !important;
  padding: 6px 12px;
  border-radius: 50px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  border: 1px solid var(--border-glass);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.cta-verified-badge i {
  font-size: 0.8rem;
}

@keyframes ctaHeroFloat {

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

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

html.light .cta-badge-ring {
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(9, 30, 66, 0.08) !important;
}

html.light .cta-verified-badge {
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(9, 30, 66, 0.1) !important;
}

/* CTA Signals (Glassmorphic Chips) */
.cta [style*="display:flex"][style*="margin-bottom: 32px"] span {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.cta [style*="display:flex"][style*="margin-bottom: 32px"] span:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-3px);
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Fix for nested pill/skeleton backgrounds in chips */
.cta [style*="display:flex"][style*="margin-bottom: 32px"] span .gsap-counter,
.cta [style*="display:flex"][style*="margin-bottom: 32px"] span .ds-skeleton {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  color: inherit !important;
  display: inline !important;
}

html.light .cta [style*="display:flex"][style*="margin-bottom: 32px"] span {
  background: rgba(9, 30, 66, 0.04) !important;
  border: 1px solid rgba(9, 30, 66, 0.08) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 2px 4px rgba(9, 30, 66, 0.05) !important;
}

html.light .cta [style*="display:flex"][style*="margin-bottom: 32px"] span:hover {
  background: rgba(9, 30, 66, 0.08) !important;
  box-shadow: 0 4px 12px rgba(9, 30, 66, 0.1) !important;
}

/* ─── §17 · ELITE SYSTEM VISUALS (HERO & PROJECTS) ─── */

/* Hero Blueprint (Negative Space Filler) */
.hero-visual-blueprint {
  position: absolute;
  top: 10%;
  right: -5%;
  width: 60vw;
  max-width: 900px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  filter: none;
  animation: blueprintFloat 12s ease-in-out infinite alternate;
}

.blueprint-img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes blueprintFloat {
  0% {
    transform: translate(0, 0) rotate(-2deg);
  }

  100% {
    transform: translate(-20px, 30px) rotate(2deg);
  }
}

/* Projects Architecture Visual (Header Banner) */
.projects-architecture-visual {
  position: relative;
  width: 100%;
  height: 280px;
  margin: 40px 0 100px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: var(--bg-2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 1;
}

.architecture-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: saturate(1.0) contrast(1.1);
  transition: opacity 0.8s ease;
}

.projects-architecture-visual:hover .architecture-img {
  opacity: 0.6;
}

/* Education Visual Blueprint (Watermark) */
.edu-visual-blueprint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image: url('../assets/img/education.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% auto;
  opacity: 0.08;
  mask-image: radial-gradient(circle at center, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 85%);
  animation: eduFloat 20s ease-in-out infinite alternate;
}

/* Specific adjustments for Education section relative positioning */
#education {
  position: relative;
  overflow: hidden;
}

#education .container {
  position: relative;
  z-index: 2;
}

@keyframes eduFloat {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  50% {
    transform: translate(-48%, -52%) scale(1.05) rotate(1deg);
  }

  100% {
    transform: translate(-52%, -48%) scale(1.02) rotate(-1deg);
  }
}

@media (max-width: 768px) {
  .edu-visual-blueprint {
    background-size: 140% auto;
    opacity: 0.06;
  }
}

/* Skills Visual Blueprint (Vertical Totem) */
.skills-visual-blueprint {
  position: absolute;
  top: 0;
  right: -5%;
  width: 400px;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image: url('../assets/img/skills.svg');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  opacity: 0.08;
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  animation: skillsFloat 25s ease-in-out infinite alternate;
}

#skills {
  position: relative;
  overflow: hidden;
}

#skills .container {
  position: relative;
  z-index: 2;
}

@keyframes skillsFloat {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
  }

  50% {
    transform: translateY(-30px) rotate(1deg) translateX(-10px);
  }

  100% {
    transform: translateY(10px) rotate(-1deg) translateX(5px);
  }
}

@media (max-width: 1200px) {
  .skills-visual-blueprint {
    right: -15%;
    width: 300px;
  }
}

@media (max-width: 768px) {
  .skills-visual-blueprint {
    right: -25%;
    opacity: 0.05;
    background-size: 150% auto;
  }
}

/* Community Visual Blueprint (Growth Graph) */
.community-visual-blueprint {
  position: absolute;
  bottom: -5%;
  right: -5%;
  width: 800px;
  height: 600px;
  z-index: 0;
  pointer-events: none;
  background-image: url('../assets/img/graph.webp');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  opacity: 0.18;
  filter: contrast(1.2) brightness(1.1) saturate(1.1);
  mask-image: radial-gradient(circle at 70% 70%, black 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at 70% 70%, black 20%, transparent 90%);
  animation: communityFloat 20s ease-in-out infinite alternate;
}

.community-engagement-atl {
  position: relative;
  overflow: hidden;
}

.community-engagement-atl .container {
  position: relative;
  z-index: 2;
}

@keyframes communityFloat {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  100% {
    transform: translate(-40px, -30px) scale(1.1) rotate(-1.5deg);
  }
}

@media (max-width: 1200px) {
  .community-visual-blueprint {
    width: 450px;
    right: -10%;
  }
}

@media (max-width: 768px) {
  .community-visual-blueprint {
    width: 100%;
    right: 0;
    bottom: 0;
    opacity: 0.08;
    mask-image: linear-gradient(to top, black, transparent 70%);
  }
}



.arch-glass-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--bg-1) 95%);
  pointer-events: none;
}

.projects-architecture-visual::after {
  content: "PLATFORM ARCHITECTURE · OVERVIEW";
  position: absolute;
  bottom: 20px;
  left: 30px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 2px;
  font-weight: 700;
}

/* Performance Metrics (Apex Footer) */
.cta [style*="text-align:center"][style*="padding-top: 40px"] {
  border-top: 1px solid var(--border) !important;
  margin-top: 80px !important;
  padding-top: 60px !important;
  gap: 24px !important;
}

.cta [style*="text-align:center"][style*="padding-top: 40px"] span {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.cta [style*="text-align:center"][style*="padding-top: 40px"] span:hover {
  opacity: 1;
  color: var(--text-primary) !important;
}

/* Engineering in Public */
.eip-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 24px;
  background: rgba(245, 158, 11, 0.05) !important;
  color: var(--accent-amber) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-family: var(--font-mono) !important;
  text-decoration: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.05) !important;
}

.eip-btn:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: var(--accent-amber) !important;
  box-shadow: 0 8px 16px rgba(245, 158, 11, 0.2), inset 0 0 0 1px rgba(245, 158, 11, 0.3) !important;
  transform: translateY(-2px) !important;
}

html.light .eip-btn {
  background: rgba(217, 119, 6, 0.05) !important;
  color: var(--accent-amber) !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.05) !important;
}

html.light .eip-btn:hover {
  background: rgba(217, 119, 6, 0.10) !important;
  border-color: var(--accent-amber) !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.15), inset 0 0 0 1px rgba(217, 119, 6, 0.2) !important;
  transform: translateY(-2px) !important;
}

.eip {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--border) !important;
}

.eip-box {
  background: var(--bg-1) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-2) !important;
}

html.light .eip-box {
  box-shadow: var(--card-spec-hover) !important;
}

.eip-prompt {
  background: var(--bg-3) !important;
  border-bottom: 1px solid var(--border) !important;
}

.eip-out {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
}

html.light .h-sub {
  color: #52525b !important;
}

html.light .s-alt {
  background: linear-gradient(180deg, #f4f4f5 0%, transparent 100%) !important;
}

.tcrd {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}

.tcrd:hover {
  background: var(--bg-3) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--card-spec-hover) !important;
}

/* ─── §7 · JS SPATIAL EFFECTS & SPOTLIGHT TRACKERS ─── */
.sk,
.proj,
.cert,
.obs-metric,
.tl-card,
.feat-proj {
  position: relative !important;
  overflow: hidden !important;
}

.sk::before,
.proj::before,
.cert::before,
.obs-metric::before,
.tl-card::before,
.feat-proj::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(255, 255, 255, 0.06), transparent 40%) !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease-out !important;
  border-radius: inherit !important;
}

html.light .sk::before,
html.light .proj::before,
html.light .cert::before,
html.light .obs-metric::before,
html.light .tl-card::before,
html.light .feat-proj::before {
  background: radial-gradient(600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(0, 0, 0, 0.05), transparent 40%) !important;
}

.sk:hover::before,
.proj:hover::before,
.cert:hover::before,
.obs-metric:hover::before,
.tl-card:hover::before,
.feat-proj:hover::before {
  opacity: 1 !important;
}

/* Ensure contents of cards sit above the spotlight */
.sk>*,
.proj>*,
.cert>*,
.obs-metric>*,
.tl-card>*,
.feat-proj>* {
  position: relative !important;
  z-index: 1 !important;
}

/* ─── §8 · APEX 0.1% GOD MODE STYLES ─── */
/* #boot-loader {
  position: fixed; inset: 0; z-index: 99999; background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
  overflow: hidden;
}

.boot-term {
  width: 500px; max-width: 90%; 
  background: #0a0a0c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  font-family: var(--font-mono) !important;
  color: #a1a1aa; font-size: 0.75rem;
}

.boot-header {
  background: #1c1c1f;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.boot-header .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.1); }
.boot-title { font-size: 0.65rem; color: #71717a; margin-left: 10px; opacity: 0.8; }

#boot-log {
  padding: 15px;
  height: 200px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: none;
}
#boot-log::-webkit-scrollbar { display: none; }

.boot-line { opacity: 0.8; border-left: 2px solid transparent; padding-left: 8px; }
.boot-line.ok { border-left-color: var(--accent-green); color: #fff; }
.boot-line.info { color: var(--text-muted); }

#boot-text { padding: 0 15px 10px; font-weight: 600; color: var(--accent-cyan); }

.boot-bar-wrap { width: 100%; height: 3px; background: rgba(255,255,255,0.05); }
#boot-bar { height: 100%; width: 0%; background: var(--accent-cyan); transition: width 0.05s linear; } */

/* Hero Tech Matrix Background */
.hero-matrix {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: 40px 40px;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(34, 211, 238, 0.05) 1px, transparent 0);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, transparent 90%);
  pointer-events: none;
}

#telemetry-hud {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  z-index: 99999 !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  display: flex !important;
  gap: 16px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  color: var(--text-secondary) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--shadow-2) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

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

.hud-lbl {
  color: var(--text-muted);
}

.hud-val {
  color: var(--accent-cyan);
  font-weight: 700;
}

/* ── Light Mode UI Restrictions ── */
html.light * {
  cursor: auto !important;
}

html.light a,
html.light button,
html.light .btn-primary,
html.light .btn-amber,
html.light .pipe-stage,
html.light .nav-link,
html.light .nav-cmd,
html.light .soc,
html.light .ac {
  cursor: pointer !important;
}

html.light #cursor-dot,
html.light #cursor-ring {
  display: none !important;
}

/* ── SYSTEM LOGS ── */
.sys-logs-container {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent-indigo);
  border-radius: 8px;
  padding: 12px;
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--font-mono);
  box-shadow: var(--shadow-2);
}

.sys-log-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
}

.sys-log-item:last-child {
  border-bottom: none;
}

.sys-log-item:hover {
  background: var(--accent-indigo-lo);
  color: var(--text-primary);
  transform: translateX(4px);
  border-color: transparent;
}

.sys-log-src {
  color: var(--accent-indigo-hi);
  font-weight: 600;
  width: 90px;
  flex-shrink: 0;
}

html.light .sys-log-src {
  color: var(--accent-indigo);
}

.sys-log-time {
  opacity: 0.5;
  width: 70px;
  flex-shrink: 0;
  text-align: right;
}

.sys-log-action {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sys-log-arrow {
  opacity: 0;
  transform: translateX(-10px);
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  color: var(--accent-cyan);
}

.sys-log-item:hover .sys-log-arrow {
  opacity: 1;
  transform: translateX(0);
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* ─── §9 · HOW I THINK / SRE MINDSET ENHANCEMENTS ─── */
.thinking-top-wrap {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 60px;
  position: relative;
}

.thinking-visual-container {
  flex: 0 0 320px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thinking-visual-bulb {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(87, 157, 255, 0.25));
  animation: thinkingFloat 6s ease-in-out infinite;
  z-index: 2;
}

/* Subtle background blueprint for the bulb */
.thinking-visual-container::before {
  content: '';
  position: absolute;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(87, 157, 255, 0.08) 0%, transparent 70%);
  z-index: 1;
}

@keyframes thinkingFloat {

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

  50% {
    transform: translateY(-20px) rotate(3deg);
  }
}

.thinking-top-wrap .section-header {
  margin-bottom: 0;
  text-align: left;
  flex: 1;
}

.thinking-top-wrap .section-header .s-desc {
  max-width: 100%;
}

@media (max-width: 992px) {
  .thinking-top-wrap {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .thinking-top-wrap .section-header {
    text-align: center;
  }

  .thinking-visual-container {
    flex: 0 0 auto;
    width: 200px;
  }
}

/* ─── §9.1 · WRITING SECTION ENHANCEMENTS ─── */
.writing-top-wrap {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 80px;
  margin-bottom: 60px;
  position: relative;
}

.writing-visual-notes {
  width: 100%;
  height: auto;
  max-width: 320px;
  filter: drop-shadow(0 0 25px rgba(99, 102, 241, 0.2));
  animation: writingFloat 8s ease-in-out infinite;
  z-index: 2;
}

@keyframes writingFloat {

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

  50% {
    transform: translateY(-15px) scale(1.02);
  }
}

.writing-top-wrap .section-header {
  margin-bottom: 0;
  text-align: left;
  flex: 1;
}

/* Compass Component Style for Article Cards */
.article-card {
  border-radius: 3px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-2) !important;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  padding: 24px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--accent-indigo) !important;
  border-color: var(--accent-indigo) !important;
}

.article-card .article-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  background: var(--bg-3);
  border-radius: 3px;
  color: var(--accent-indigo-hi);
  margin-bottom: 4px;
  width: fit-content;
}

.article-card .article-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
}

.article-card .article-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  opacity: 0.8;
}

@media (max-width: 992px) {
  .writing-top-wrap {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .writing-top-wrap .section-header {
    text-align: center;
  }

  .writing-visual-notes {
    max-width: 220px;
  }
}

/* ─── §10 · GLOBAL ATLASSIAN ELITE OVERRIDES ─── */
.btn-atl,
.btn,
.btn-primary,
.btn-outline,
.btn-atl-primary,
.btn-atl-secondary,
.btn-atl-ghost {
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.2, 1, 0.3, 1) !important;
}

.btn-atl-primary {
  background: var(--primary-blue) !important;
  box-shadow: var(--elevation-raised);
}

.btn-atl-primary:hover {
  background: #0052CC !important;
  /* Atlassian Primary Hover */
  box-shadow: var(--elevation-overlay);
  transform: translateY(-2px);
}

.cert,
.proj,
.article-card,
.tcrd,
.coll-card {
  border-radius: var(--radius-atlassian) !important;
  box-shadow: var(--elevation-raised);
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.cert:hover,
.proj:hover,
.article-card:hover,
.tcrd:hover,
.coll-card:hover {
  box-shadow: var(--elevation-overlay);
  transform: translateY(-4px);
}

/* ─── §9.2 · ABOUT SECTION ENHANCEMENTS ─── */
.about-top-wrap {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 60px;
}

.about-visual-container {
  flex: 0 0 320px;
  opacity: 0.8;
}

.about-visual-dev {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(54, 179, 126, 0.15));
  /* Atlassian Green Glow */
  animation: writingFloat 7s ease-in-out infinite;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
}

.ac {
  border-radius: var(--radius-atlassian) !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  padding: 24px !important;
  box-shadow: var(--elevation-raised);
}

.ac:hover {
  box-shadow: var(--elevation-overlay);
  transform: translateY(-4px);
}

/* ─── §9.3 · SKILLS MATRIX ENHANCEMENTS ─── */
.sk {
  border-radius: var(--radius-atlassian) !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  padding: 32px !important;
  position: relative;
  overflow: hidden;
}

.sk h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 16px;
}

.skill-tag {
  border-radius: 3px !important;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 4px 10px;
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  transition: all 0.2s ease;
}

.skill-tag:hover {
  border-color: var(--primary-blue) !important;
  color: var(--text-primary) !important;
  background: rgba(87, 157, 255, 0.1) !important;
}

/* ─── §9.4 · EXPERIENCE / ACTIVITY STREAM ENHANCEMENTS ─── */
.activity-item {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: 3px !important;
  background: var(--ds-surface, #FFFFFF) !important;
  border: 1px solid #DFE1E6 !important;
  margin-bottom: 16px;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-theme .activity-item {
  background: var(--ds-surface, #22272B) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.activity-item:hover {
  border-color: var(--ds-border-brand, #4C9AFF) !important;
  box-shadow: 0 4px 8px rgba(9, 30, 66, 0.08);
  transform: translateY(-2px);
}

.activity-header {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 12px;
  width: 100%;
}

.activity-header .timestamp {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ds-text-subtle, #6B778C);
  white-space: nowrap;
}

.activity-main-text {
  margin: 0 !important;
  color: var(--ds-text, #172B4D);
  flex: 1;
}

.activity-header *:empty {
  display: none !important;
}

.activity-details-wrapper {
  background: var(--ds-background-subtle, #F4F5F7) !important;
  border-left: 3px solid var(--ds-border-brand, #0052CC) !important;
}

.dark-theme .activity-details-wrapper {
  background: var(--ds-surface-sunken, #1D2125) !important;
}

.dark-theme .activity-content .actor {
  color: var(--ds-text, #FFFFFF) !important;
}

.dark-theme .activity-summary-para {
  color: var(--ds-text-subtle, #9FADBC) !important;
}

.dark-theme .activity-bullets li {
  color: var(--ds-text-subtle, #9FADBC) !important;
}

.dark-theme .highlights-label {
  color: var(--ds-text, #FFFFFF) !important;
}

.activity-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-indigo);
  color: var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.activity-content p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.activity-content .actor {
  font-weight: 600;
  color: var(--primary-blue);
}

.activity-content .timestamp {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

/* ─── §9.5 · CERTIFICATION VAULT ENHANCEMENTS ─── */
.cert {
  border-radius: 3px !important;
  padding: 24px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.cert-head {
  display: flex;
  gap: 16px;
  align-items: center;
}

.cert-ico {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
}

.cert-name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.cert-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}

.cert-status.certified {
  background: rgba(54, 179, 126, 0.1);
  color: var(--accent-green);
}

.cert-status.pursuing {
  background: rgba(255, 171, 0, 0.1);
  color: var(--accent-amber);
}

/* ─── §9.6 · WORKING PRINCIPLES ENHANCEMENTS ─── */
.coll-card {
  padding: 32px !important;
  border-radius: 3px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.coll-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
  color: var(--primary-blue);
  margin-bottom: 8px;
}

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

.coll-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.coll-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.phi-grid .tcrd {
  border-radius: 3px !important;
  border: 1px solid var(--border) !important;
  padding: 24px !important;
  background: var(--bg-3) !important;
}

.phi-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ─── §9.7 · CONTACT & CTA ENHANCEMENTS ─── */
.cta {
  padding: 100px 0 !important;
  background: var(--bg-1) !important;
  border-top: 1px solid var(--border) !important;
}

.cta-verified-badge {
  background: rgba(54, 179, 126, 0.1) !important;
  color: var(--accent-green) !important;
  border: 1px solid rgba(54, 179, 126, 0.2) !important;
  border-radius: 3px !important;
  padding: 6px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
}

.cta-btns .btn {
  padding: 14px 28px !important;
}

/* ─── §9.8 · ATLASSIAN FOOTER ENHANCEMENTS ─── */
.atlassian-footer {
  background: var(--bg-1) !important;
  border-top: 1px solid var(--border) !important;
  padding: 80px 0 40px 0 !important;
  color: var(--text-secondary) !important;
}

.footer-product-logo {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  color: var(--text-primary) !important;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.product-version {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--primary-blue);
}

.footer-title {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  color: var(--text-muted) !important;
  margin-bottom: 24px !important;
  text-transform: uppercase;
}

.atlassian-links li a {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--text-secondary) !important;
  transition: color 0.2s ease !important;
}

.atlassian-links li a:hover {
  color: var(--primary-blue) !important;
}

.social-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  padding: 0 !important;
  list-style: none !important;
  margin-top: 20px !important;
}

.social-row li {
  margin: 0 !important;
}

.social-row li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.social-row li a:hover {
  color: var(--primary-blue) !important;
  text-decoration: underline !important;
}

@media (max-width: 600px) {
  .social-row {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    margin-top: 30px !important;
  }

  .social-row li {
    width: 100% !important;
    max-width: 280px !important;
  }

  .social-row li a {
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
  }

  .social-row li a i {
    font-size: 1.1rem !important;
    width: 24px !important;
    text-align: center !important;
  }
}

/* ─── §9.10 · ABOUT HIGHLIGHTS MOBILE FIX ─── */
@media (max-width: 768px) {
  .about-hl {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .ahl {
    padding: 20px 12px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .ahl-v {
    font-size: 1.1rem !important;
    margin: 8px 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
  }

  .ahl-l {
    font-size: 0.6rem !important;
  }
}

/* ─── §9.9 · EDUCATION & GEOMETRY POLISH ─── */
.edu-card {
  border-radius: 3px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-2) !important;
  transition: all 0.3s cubic-bezier(0.15, 1, 0.3, 1) !important;
  box-shadow: var(--elevation-raised) !important;
}

.edu-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--elevation-overlay) !important;
  border-color: var(--primary-blue) !important;
}

.edu-status {
  border-radius: 3px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  letter-spacing: 0.05em !important;
}

.edu-status.completed {
  background: rgba(54, 179, 126, 0.1) !important;
  color: var(--accent-green) !important;
}

.edu-status.ongoing {
  background: rgba(255, 171, 0, 0.1) !important;
  color: var(--accent-amber) !important;
}

.edu-icon-atl {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  opacity: 0.4;
  pointer-events: none;
}

.btn {
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px !important;
}

color: var(--primary-blue) !important;
}

/* ─── §11 · FINAL POLISH & RESPONSIVENESS ─── */
@media (max-width: 991px) {
  .about-top-wrap {
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }

  .about-visual-container {
    flex: 0 0 auto;
    width: 200px;
    margin: 0 auto;
  }

  .s-title {
    font-size: 2rem !important;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 2.5rem !important;
  }

  .about-top-wrap .section-header {
    text-align: center;
  }

  .about-top-wrap .ads-breadcrumbs {
    justify-content: center;
  }

  .atlassian-footer .footer-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 40px !important;
  }

  .brand-col {
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .social-row {
    justify-content: center !important;
  }

  .atlassian-links {
    padding: 0 !important;
    list-style: none !important;
  }
}

/* ─── §13 · CHAOS MODE ─── */
body.chaos-active {
  animation: chaosShake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
  filter: hue-rotate(90deg) contrast(1.2);
}

@keyframes chaosShake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

/* Chaos Glitch & Red Alert Overlays */
body.chaos-active::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(239, 68, 68, 0.1);
  z-index: 999;
  pointer-events: none;
  animation: alarmPulse 1s infinite alternate;
}

@keyframes alarmPulse {
  from {
    opacity: 0.1;
  }

  to {
    opacity: 0.3;
  }
}

.glitch-text {
  text-shadow: 2px 0 #ff0000, -2px 0 #00ff00;
  animation: glitchLines 0.2s infinite;
}

@keyframes glitchLines {
  0% {
    clip-path: inset(10% 0 30% 0);
  }

  20% {
    clip-path: inset(50% 0 10% 0);
  }

  40% {
    clip-path: inset(80% 0 5% 0);
  }

  60% {
    clip-path: inset(20% 0 60% 0);
  }

  80% {
    clip-path: inset(40% 0 20% 0);
  }

  100% {
    clip-path: inset(10% 0 30% 0);
  }
}

/* Error Budget Burning Effect */
.eb-burning {
  box-shadow: 0 0 20px #ef4444, 0 0 40px #ef4444;
  animation: ebBurn 0.5s ease-in-out infinite alternate;
}

@keyframes ebBurn {
  from {
    transform: scaleY(1);
    filter: brightness(1.2);
  }

  to {
    transform: scaleY(1.3);
    filter: brightness(2);
  }
}

/* Odometer-like number animation class */
.odo-num {
  font-variant-numeric: tabular-nums;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  overflow-x: hidden !important;
}

/* ─── PROJECT IMPACT CHIPS ─── */
.proj-impact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 10px 0 12px !important;
}

.impact-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #10B981 !important;
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

html.light .impact-chip {
  background: rgba(5, 150, 105, 0.06) !important;
  border-color: rgba(5, 150, 105, 0.20) !important;
  color: #059669 !important;
}

/* ─── HERO AVAILABILITY BADGE ─── */
.hero-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #10B981;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
  animation: badgeFadeIn 0.8s ease both;
  animation-delay: 0.2s;
}

.hero-status-badge .status-dot {
  width: 7px;
  height: 7px;
  background: #10B981;
  border-radius: 50%;
  animation: statusPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  #sre-status-dock {
    flex-direction: column !important;
    text-align: center !important;
    padding: 16px !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #sre-status-dock span[style*="width:1px"] {
    display: none !important;
  }

  #density-toggle {
    width: 100% !important;
    padding: 8px !important;
    background: rgba(52, 168, 83, 0.05) !important;
    border-radius: 4px !important;
  }
}

/* ─── §13.1 · MOBILE CONTROL PLANE FIXES ─── */
@media (max-width: 768px) {
  .control-plane-metrics {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 32px 0 !important;
  }

  .metric-item {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
  }

  .typed-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 16px !important;
    min-height: 120px !important;
  }

  .expertise-tags {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 10px !important;
    width: 100% !important;
  }

  .skill-tag {
    font-size: 0.65rem !important;
    padding: 4px 10px !important;
  }

  .h-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 40px !important;
  }

  .h-stat {
    padding: 24px 12px !important;
    border-radius: 8px !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    text-align: center !important;
  }

  .h-stat .sv {
    font-size: 1.6rem !important;
    margin-bottom: 4px !important;
  }

  .h-stat .sl {
    font-size: 0.6rem !important;
    letter-spacing: 0.05em !important;
  }

  .hero-action-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .btn-atl {
    width: 100% !important;
    justify-content: center !important;
  }
}

@keyframes statusPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
}

@keyframes badgeFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

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

html.light .hero-status-badge {
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.20);
  color: #059669;
}

html.light .hero-status-badge .status-dot {
  background: #059669;
}

/* ─── §14 · ARCHITECTURE & PIPELINE ANIMATIONS ─── */

/* SVG Data Packet Flow */
@keyframes dataFlow {
  to {
    stroke-dashoffset: -20;
  }
}

.flow-path {
  stroke-dasharray: 4 6;
  animation: dataFlow 1s linear infinite;
  stroke: var(--accent-cyan);
  opacity: 0.6;
}

.node-pulse {
  animation: nodePulse 2s ease-in-out infinite;
}

@keyframes nodePulse {

  0%,
  100% {
    filter: drop-shadow(0 0 2px var(--accent-cyan));
    opacity: 0.8;
  }

  50% {
    filter: drop-shadow(0 0 8px var(--accent-cyan));
    opacity: 1;
  }
}

/* Pipeline Stage Sequential Lighting */
.pipe-stage {
  opacity: 0.4;
  transform: scale(0.95);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pipe-stage.active {
  opacity: 1;
  transform: scale(1.05);
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.25) !important;
}

.pipe-stage.pass {
  opacity: 1;
  transform: scale(1);
  border-color: var(--accent-green) !important;
}

.pipe-arrow {
  opacity: 0.2;
  transition: opacity 0.6s ease;
}

.pipe-arrow.active {
  opacity: 1;
  color: var(--accent-cyan);
}

/* Pipeline Detail Panel Polish */
.pipe-detail {
  margin-top: 30px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 120px;
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.pipe-detail::before {
  content: "TERMINAL OUTPUT";
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 0.6rem;
  color: var(--text-ghost);
  letter-spacing: 1px;
}

.detail-log-line {
  margin-bottom: 4px;
  animation: logFadeIn 0.3s ease-out both;
}

@keyframes logFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── §15 · GLOBAL MICRO-INTERACTIONS & NUANCES ─── */

::selection {
  background: var(--accent-cyan);
  color: #000;
}

/* CRT Style Glow for Code */
pre,
code {
  position: relative;
}

pre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0.1;
}

/* Handled in §9 Modern SaaS Buttons */

/* Scroll Snap for Sections (Elite Feel) */
@media (min-width: 1100px) {
  /* Only apply if user doesn't find it annoying, otherwise skip */
  /* html { scroll-snap-type: y proximity; } */
  /* .section { scroll-snap-align: start; } */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-1);
}

::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

/* ══ Section 16: Philosophy & Collaboration HUD ══ */
.phi-grid,
.coll-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  margin-top: 48px !important;
}

.phi-card,
.coll-card {
  position: relative !important;
  padding: 32px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  height: 100% !important;
}

.phi-card:hover,
.coll-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--accent-indigo) !important;
  box-shadow: 0 12px 40px -12px rgba(99, 102, 241, 0.25) !important;
}

.phi-icon,
.coll-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-3) !important;
  border-radius: 12px !important;
  font-size: 1.25rem !important;
  color: var(--accent-indigo) !important;
  margin-bottom: 8px !important;
}

.phi-label,
.coll-label {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}

.phi-title,
.coll-title {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  line-height: 1.2 !important;
}

.phi-desc,
.coll-desc {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Accent Variations */
.phi-card[data-accent="amber"]:hover {
  border-color: var(--accent-amber) !important;
  box-shadow: 0 12px 40px -12px rgba(245, 158, 11, 0.25) !important;
}

.phi-card[data-accent="amber"] .phi-icon {
  color: var(--accent-amber) !important;
}

.coll-card[data-accent="amber"]:hover {
  border-color: var(--accent-amber) !important;
  box-shadow: 0 12px 40px -12px rgba(245, 158, 11, 0.25) !important;
}

.coll-card[data-accent="amber"] .coll-icon {
  color: var(--accent-amber) !important;
}

.coll-card[data-accent="emerald"]:hover {
  border-color: var(--accent-emerald) !important;
  box-shadow: 0 12px 40px -12px rgba(16, 185, 129, 0.25) !important;
}

.coll-card[data-accent="emerald"] .coll-icon {
  color: var(--accent-emerald) !important;
}

/* Light Mode Refinements */
html.light .phi-card,
html.light .coll-card {
  background: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

html.light .phi-icon,
html.light .coll-icon {
  background: #f8fafc !important;
}

/* ─── §30 · PREMIUM ANNOTATION ENGINE (ATLASSIAN CRAFTSMANSHIP) ─── */
.annotation-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-image: url('../assets/img/right mark circle.webp');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
  vertical-align: middle;
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.annotation-arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url('../assets/img/arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 6px;
  transition: transform 0.3s var(--ease-premium);
}

.btn:hover .annotation-arrow,
.sk:hover .annotation-arrow {
  transform: translateX(3px);
}

.engineering-stamp {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 120px;
  height: 120px;
  background-image: url('../assets/img/AT22PN.webp');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}

html.light .engineering-stamp {
  opacity: 0.03;
  mix-blend-mode: multiply;
}

.nav-arrow-indicator {
  width: 10px;
  height: 10px;
  background-image: url('../assets/img/navigation arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  opacity: 0.3;
  margin-left: auto;
  transition: transform 0.3s var(--ease-premium), opacity 0.3s var(--ease-premium);
}

.mega-link:hover .nav-arrow-indicator {
  opacity: 1;
  transform: translateX(3px);
}

/* ─── §31 · BLUEPRINT & CRAFTSMANSHIP ENGINE ─── */
.blueprint-bg {
  position: relative;
  overflow: hidden;
}

.blueprint-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.blueprint-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 160px 160px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* Technical Measurement Markers */
.section-header {
  position: relative;
}

.section-header::before {
  content: 'REF_SYS: ATLASSIAN_ADS_v3.2';
  position: absolute;
  top: -30px;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--primary-blue);
  opacity: 0.3;
  letter-spacing: 0.2em;
}

.section-header .s-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--primary-blue);
  opacity: 0.5;
}

.section-header .s-title::before {
  content: 'DIM_8px_GRID';
  position: absolute;
  bottom: -22px;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--primary-blue);
  opacity: 0.3;
}

/* Enhanced Cards with Engineering Stamps */
.rec-card,
.coll-card,
.event-item {
  position: relative;
  overflow: hidden;
}

.rec-card::before,
.coll-card::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  background: url('../assets/img/AT22PN.webp') no-repeat center;
  background-size: contain;
  opacity: 0.03;
  filter: grayscale(1);
  pointer-events: none;
}

/* ─── §32 · GESTURAL ANNOTATION ENGINE (ADS v3.1) ─── */
.at-bg-mark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  /* Slightly higher for dark mode visibility */
  filter: invert(1) brightness(1.5);
  /* Invert to white for black backgrounds */
  transition: opacity 0.3s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

html.light .at-bg-mark {
  opacity: 0.035;
  filter: brightness(0.2);
  /* Back to dark for white backgrounds */
}

/* Hero: North Star (Precision & Navigation) */
.at-mark-hero {
  top: 8%;
  right: 5%;
  width: 420px;
  height: 420px;
  background-image: url('../assets/img/AT1381G.svg');
  transform: rotate(15deg);
}

/* About: Blueprint Scribble (Engineering Journey) */
.at-mark-about {
  bottom: 10%;
  left: 2%;
  width: 350px;
  height: 350px;
  background-image: url('../assets/img/AT137IC.svg');
  opacity: 0.04;
}

/* Experience/Impact: Impact Star (Performance & SRE) */
.at-mark-experience {
  top: 50%;
  right: 2%;
  width: 300px;
  height: 300px;
  background-image: url('../assets/img/AT12TTB.svg');
  transform: translateY(-50%) rotate(-10deg);
}

/* Projects: Integration Loop (Connectivity & Systems) */
.at-mark-projects {
  bottom: 5%;
  right: 3%;
  width: 380px;
  height: 380px;
  background-image: url('../assets/img/AT12TPQ.svg');
  opacity: 0.04;
}

/* Education: Academic Seal (Foundational Depth) */


.at-underline-sketch {
  position: relative;
  display: inline-block;
}

.at-underline-sketch::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 14px;
  background: url('../assets/img/AT12TTB.svg') no-repeat center;
  background-size: contain;
  opacity: 0.5;
  filter: invert(1) brightness(1.5);
  /* Visible on dark background */
  pointer-events: none;
  z-index: -1;
}

html.light .at-underline-sketch::after {
  filter: brightness(0) saturate(100%) invert(32%) sepia(91%) architecture(158%) saturate(1633%) hue-rotate(201deg) brightness(92%) contrast(101%);
  opacity: 0.3;
}

/* ─── §33 · FINAL RESPONSIVE VERIFICATION & FOOTER STACKING ─── */
@media (max-width: 480px) {
  .hero-status-badge {
    padding: 10px !important;
    font-size: 0.65rem !important;
  }

  .at-bg-mark {
    transform: scale(0.6) !important;
    opacity: 0.03 !important;
  }

  .about-hl {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .atlassian-footer .footer-container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 32px !important;
  }

  .social-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .sc-left,
  .sc-right {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .desktop-only,
  #recruiter-trigger-global,
  .recruiter-btn-atlassian,
  .atlassian-user-profile {
    display: none !important;
  }
}

.hero-title-elite {
  position: relative;
  z-index: 1;
}

.ac,
.phi-card,
.coll-card {
  position: relative !important;
  overflow: hidden !important;
}

/* ─── §34 · ATLAISSIAN ELITE BULB VISUAL (PHILOSOPHY) ─── */
.at-bulb-visual {
  position: absolute;
  left: -120px;
  top: 15%;
  width: 320px;
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
  filter: drop-shadow(0 0 20px rgba(245, 205, 71, 0.2)) grayscale(0.5);
  transition: opacity 0.8s var(--ease-premium), filter 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
  animation: atBulbFloat 6s ease-in-out infinite;
}

#how-i-think:hover .at-bulb-visual {
  opacity: 0.4;
  filter: drop-shadow(0 0 40px rgba(245, 205, 71, 0.4)) grayscale(0);
}

@keyframes atBulbFloat {

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

  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

html.light .at-bulb-visual {
  opacity: 0.1;
  filter: drop-shadow(0 0 15px rgba(245, 205, 71, 0.15)) contrast(0.8);
}

@media (max-width: 1200px) {
  .at-bulb-visual {
    left: -80px;
    width: 240px;
  }
}

@media (max-width: 992px) {
  .at-bulb-visual {
    display: none;
    /* Hide on smaller screens to prioritize text space */
  }
}

/* ============================================================================
   ELITE NAVBAR REBALANCING — v2.0
   Mathematical centering and premium utility grouping.
   ============================================================================ */

.nav-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

.nav-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.nav-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Recruiter Button: Deep Space Upgrade */
.recruiter-btn-elite,
.recruiter-btn-atlassian {
  background: #000000 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.recruiter-btn-elite:hover,
.recruiter-btn-atlassian:hover {
  background: #111111 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-2px) !important;
}

.recruiter-btn-elite,
.recruiter-btn-atlassian,
.mob-recruiter-pill {
  white-space: nowrap !important;
}

.recruiter-btn-elite i,
.recruiter-btn-atlassian i {
  font-size: 0.85rem !important;
  opacity: 0.9 !important;
}

/* Vertical Divider Style */
.atlassian-v-divider {
  width: 1px !important;
  height: 24px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  margin: 0 4px !important;
}

html.light .atlassian-v-divider {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Ensure Profile Block remains sleek on the left */
.nav-left .atlassian-user-profile {
  transition: transform 0.3s var(--ease) !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
}

.nav-left .atlassian-user-profile:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  transform: translateX(4px) !important;
}

html.light .nav-left .atlassian-user-profile:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Mobile Adjustments for Grid */
@media (max-width: 767px) {
  .nav-inner {
    display: flex !important;
    justify-content: space-between !important;
  }

  .nav-center {
    display: none !important;
  }
}

/* ══ HERO POLISH: MATHEMATICAL ALIGNMENT ══ */
.typed-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: auto !important;
  /* Allow height to be determined by children */
  margin-bottom: 24px !important;
}

.expertise-tags {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.skill-tag {
  margin: 0 !important;
  /* Reset margins to ensure flex alignment works */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ══ ABOUT SECTION: ENTERPRISE GRID ARCHITECTURE (ADS PARITY) ══ */
#about {
  padding-top: 100px !important;
  /* Increased breathing room */
  padding-bottom: 100px !important;
}

.about-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 64px !important;
  align-items: start !important;
}

/* Typography Refinement (ADS Tokens) */
#about .s-title {
  font-size: 42px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #172B4D !important;
  /* N800 */
  line-height: 1.2 !important;
  margin-bottom: 24px !important;
}

#about .about-text p {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #42526E !important;
  /* N500 */
  margin-bottom: 24px !important;
}

#about .about-text b,
#about .about-text strong {
  color: #172B4D !important;
  /* N800 Emphasis */
  font-weight: 700 !important;
}

/* About Cards Refactor (.ac) */
.about-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.ac {
  background: #FFFFFF !important;
  border: 1px solid #DFE1E6 !important;
  /* N30 */
  border-radius: 3px !important;
  padding: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.15, 0, 0.5, 1) !important;
  box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31) !important;
}

.ac:hover {
  background: rgba(0, 82, 204, 0.04) !important;
  border-color: #0052CC !important;
  /* Brand Blue */
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px -6px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31) !important;
}

.system-status-chip {
  margin: 0 !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 3px !important;
  background: rgba(54, 179, 126, 0.1) !important;
  color: #36B37E !important;
  border: 1px solid rgba(54, 179, 126, 0.2) !important;
}

/* Fix for fracturing text bug on SRE card */
.ac p {
  margin: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: #42526E !important;
  word-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

.ac-h {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
}

.ac-h h4 {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #172B4D !important;
  letter-spacing: -0.01em !important;
}

.ac-icon {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px !important;
  font-size: 1.1rem !important;
}

/* Icon Tints (ADS Palette) */
.aci-b {
  background: #E6F0FF !important;
  color: #0052CC !important;
}

/* Blue */
.aci-g {
  background: #E3FCEF !important;
  color: #00875A !important;
}

/* Green */
.aci-p {
  background: #EAE6FF !important;
  color: #403294 !important;
}

/* Purple */
.aci-a {
  background: #FFF0B3 !important;
  color: #FF8B00 !important;
}

/* Yellow/Amber */
}
}

/* ══ SKILLS BENTO GRID: PRODUCTION POLISH ══ */
#skills {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* Watermark Polish */
.sk-watermark {
  opacity: 0.04 !important;
  /* Extremely subtle architectural watermark */
  font-size: 8rem !important;
  position: absolute !important;
  right: -20px !important;
  bottom: -20px !important;
  color: #091E42 !important;
  pointer-events: none !important;
  transition: transform 0.6s var(--ease) !important;
}

.focus-card:hover .sk-watermark {
  transform: scale(1.1) rotate(-5deg) !important;
}

/* Tech Tag Contrast Fix (ADS Parity) */
.skill-tag {
  background: #F4F5F7 !important;
  /* N20 */
  color: #42526E !important;
  /* N500 */
  border: 1px solid #DFE1E6 !important;
  /* N30 */
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  transition: all 0.2s ease !important;
}

.skill-tag:hover {
  background: #EBECF0 !important;
  /* N30 */
  color: #172B4D !important;
  /* N800 */
  border-color: #C1C7D0 !important;
}

/* Card Geometry Alignment */
.focus-card {
  background: #FFFFFF !important;
  border: 1px solid #DFE1E6 !important;
  border-radius: 3px !important;
  padding: 32px !important;
  box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.15, 0, 0.5, 1) !important;
}

.focus-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px -6px rgba(9, 30, 66, 0.25) !important;
  border-color: #4C9AFF !important;
  /* Subtle blue border on hover */
}

/* Heading Tightness */
.focus-card h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #172B4D !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
}

.sk-tagline {
  color: #42526E !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

/* Lozenge Margin Fix */
.ads-lozenge {
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;
}

/* Responsive Collapse */
@media (max-width: 991px) {
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ══ SRE MOBILE VIEWPORT CALIBRATION OVERRIDES ══ */
@media (max-width: 768px) {

  /* Task 2: Compact SRE Telemetry HUD */
  #sre-status-dock {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    margin-bottom: 12px !important;
    width: auto !important;
    line-height: 1.2 !important;
  }

  #sre-status-dock span {
    font-size: 0.62rem !important;
    padding: 1px 3px !important;
  }

  #sre-status-dock span[style*="margin: 0 8px"] {
    margin: 0 3px !important;
  }

  /* Task 3: Strict Purge of Background Isometric Shapes */
  .hero-visual-blueprint {
    display: none !important;
  }

  /* Task 4: Hero Vertical Rhythm & Headline Tightening */
  #hero {
    padding-top: 3.5rem !important;
    padding-bottom: 2rem !important;
  }

  .hero-title-elite {
    font-size: 2.2rem !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }

  .hero-subtitle {
    font-size: 1.2rem !important;
    margin-bottom: 16px !important;
  }

  .h-name {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .h-photo {
    padding-bottom: 0 !important;
  }
}

/* ─── §XI · ULTRA-PREMIUM FAANG BRANDING & VISUAL RESTRAINT OVERRIDES ─── */

/* 1. Global Spacing & Layout Silence (Whitespace as a Premium Asset) */
:root {
  --font-display: 'DM Serif Display', serif;
  --font-heading: 'DM Serif Display', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'Atlassian Mono', 'Roboto Mono', 'Fira Code', monospace;
  
  /* Mathematical Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 64px;
  --space-section: 120px; /* Spacious, breathing Vercel-style layouts */
  
  /* Strictly Unified Card Tokens (Design Token Discipline) */
  --card-border: 1px solid rgba(255, 255, 255, 0.04) !important;
  --card-border-hover: 1px solid rgba(24, 104, 219, 0.25) !important;
  --card-bg: rgba(13, 17, 23, 0.7) !important;
  --card-radius: 8px !important;
  --card-blur: blur(16px) !important;
  --card-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.05) !important;
  --card-shadow-hover: 0 16px 48px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(24, 104, 219, 0.15) !important;
}

html.light {
  /* Unified Light Mode Card Tokens */
  --card-border: 1px solid rgba(9, 30, 66, 0.08) !important;
  --card-border-hover: 1px solid rgba(0, 82, 204, 0.3) !important;
  --card-bg: rgba(255, 255, 255, 0.85) !important;
  --card-shadow: 0 4px 20px -2px rgba(9, 30, 66, 0.06), 0 0 1px rgba(9, 30, 66, 0.1) !important;
  --card-shadow-hover: 0 16px 40px -4px rgba(9, 30, 66, 0.12), 0 0 0 1px rgba(0, 82, 204, 0.15) !important;
}

body {
  font-family: var(--font-body) !important;
  line-height: 1.625 !important; /* Perfect Linear-style leading */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-1) !important; /* Adaptive background color! */
}

/* Enforce Generous Section Paddings */
.section {
  padding: var(--space-section) 0 !important;
}

/* 2. Strict Typography Hierarchy (Dominant Hierarchy & Restraint) */
.section-header {
  margin-bottom: 64px !important;
  text-align: left;
}

.section-header .s-title {
  font-family: var(--font-display) !important;
  font-size: 2.75rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  margin-top: 10px !important;
  margin-bottom: 16px !important;
  color: var(--text-primary) !important;
  text-shadow: none !important; /* Remove cheesy glows from titles */
}

.section-header .s-desc {
  font-family: var(--font-body) !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  max-width: 600px !important; /* Controlled line length for readability */
  line-height: 1.625 !important;
  letter-spacing: -0.01em !important;
  margin-top: 0 !important;
}

/* Standardize Body Prose Spacing & Container Width Constraint */
.about-text p {
  max-width: 660px !important;
  line-height: 1.7 !important;
  font-size: 1.0625rem !important;
  color: var(--text-secondary) !important;
  margin-bottom: 24px !important;
  letter-spacing: -0.01em !important;
}

/* 3. Design System Card Consistency */
.ac, .phi-card, .comm-metric-card, .infra-widget, .proj.focus-card {
  border: var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  background: var(--card-bg) !important;
  backdrop-filter: var(--card-blur) !important;
  -webkit-backdrop-filter: var(--card-blur) !important;
  box-shadow: var(--card-shadow) !important;
  transition: transform 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) !important;
  padding: 28px !important; /* Uniform spacious card padding */
}

/* Subtle, Physics-Based Hover Elevation changes */
.ac:hover, .phi-card:hover, .comm-metric-card:hover, .infra-widget:hover, .proj.focus-card:hover {
  transform: translateY(-4px) !important;
  border: var(--card-border-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* 4. Visual Noise Reduction (15% Less Clutter) */
.hero-photo-glow, 
.liquid-orb, 
.parallax-container {
  opacity: 0.15 !important; /* Strongly reduce floating gradient intensities */
  filter: blur(80px) !important;
}

.at-bg-mark {
  opacity: 0.02 !important; /* Barely visible layout watermarks */
}

/* 5. Mobile Hierarchy & Spacing Calibration */
@media (max-width: 768px) {
  :root {
    --space-section: 64px;
  }
  
  .section {
    padding: var(--space-section) 0 !important;
  }

  .section-header {
    margin-bottom: 32px !important;
  }

  .section-header .s-title {
    font-size: 1.85rem !important; /* Calmer, tighter mobile header */
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  .section-header .s-desc {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Compact padding inside cards on mobile to maximize touch targets */
  .ac, .phi-card, .comm-metric-card, .infra-widget, .proj.focus-card {
    padding: 20px !important;
  }

  .about-text p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
}

/* 6. Globally Neutralize AOS (Eliminate Layout Shifts & Stutter) */
.aos, 
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* 7. High-Tech SRE Systems Bento Telemetry Grid & Interactive Lightbox */
.community-collage-container {
  margin-top: 64px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 1;
}

/* Premium Cybernetic HUD Grid Background underneath bento items */
.community-collage-container::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-image: 
    radial-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
  background-position: center top;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}

.collage-grid {
  position: relative;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 24px;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: 2;
}

/* SRE Systems Dashboard Bento Cards */
.collage-card {
  position: relative;
  cursor: pointer;
  z-index: 1;
  box-sizing: border-box;
  overflow: visible;
}

/* Bento Card Placements */
.collage-card.card-1 { grid-column: span 2; grid-row: span 1; --card-glow: rgba(87, 157, 255, 0.35); }
.collage-card.card-2 { grid-column: span 1; grid-row: span 2; --card-glow: rgba(135, 119, 217, 0.35); }
.collage-card.card-7 { grid-column: span 1; grid-row: span 1; --card-glow: rgba(0, 229, 255, 0.35); }
.collage-card.card-8 { grid-column: span 1; grid-row: span 1; --card-glow: rgba(135, 119, 217, 0.35); }
.collage-card.card-3 { grid-column: span 1; grid-row: span 2; --card-glow: rgba(255, 171, 0, 0.35); }
.collage-card.card-6 { grid-column: span 2; grid-row: span 1; --card-glow: rgba(54, 179, 126, 0.35); }
.collage-card.card-9 { grid-column: span 1; grid-row: span 1; --card-glow: rgba(255, 171, 0, 0.45); }
.collage-card.card-5 { grid-column: span 1; grid-row: span 1; --card-glow: rgba(255, 171, 0, 0.35); }
.collage-card.card-4 { grid-column: span 2; grid-row: span 1; --card-glow: rgba(87, 157, 255, 0.35); }

/* Inner container holds the visual glossy card and takes the transformations/animations */
.collage-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px; /* High-tech industrial design is cleaner with smaller radii */
  overflow: hidden;
  background: rgba(10, 14, 23, 0.85); /* Deep slate-black cyber console */
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 
    0 12px 32px -8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  transition: 
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
    border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

/* Cyber Scanline effect on Hover */
.collage-card:hover .collage-img-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 229, 255, 0.08) 50%,
    rgba(0, 229, 255, 0.12) 52%,
    rgba(0, 229, 255, 0.08) 54%,
    transparent 54%
  );
  background-size: 100% 24px;
  animation: scanlineAnimation 4s linear infinite;
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
}

@keyframes scanlineAnimation {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Cursor Spotlight reflection effect on inner card (follows pointer) */
.collage-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.08),
    transparent 70%
  );
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Rainbow holographic glint/sheen overlay (moves dynamically with mouse tilt) */
.collage-card-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 100, 100, 0.02) 30%,
    rgba(100, 200, 255, 0.03) 48%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(100, 200, 255, 0.03) 52%,
    rgba(255, 100, 100, 0.02) 70%,
    transparent 100%
  );
  background-size: 200% 200%;
  background-position: var(--glare-pos, 50% 50%);
  mix-blend-mode: color-dodge;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, background-position 0.15s ease;
}

.collage-card:hover .collage-card-inner::before,
.collage-card:hover .collage-card-inner::after {
  opacity: 1;
}

/* Telemetry Header at the top of bento cards */
.telemetry-header {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: rgba(8, 10, 17, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono), monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  z-index: 5;
  box-sizing: border-box;
}

.telemetry-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.telemetry-dot {
  width: 5px;
  height: 5px;
  background-color: var(--accent-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-green);
  display: inline-block;
}

.telemetry-dot.pulse {
  animation: pulseRadarDot 2s infinite ease-in-out;
}

.telemetry-node {
  color: var(--text-secondary);
}

.telemetry-protocol {
  font-weight: 700;
  color: var(--primary-blue);
  font-size: 0.54rem;
  background: rgba(87, 157, 255, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(87, 157, 255, 0.12);
  text-transform: uppercase;
}

.collage-img-wrapper {
  width: 100%;
  height: calc(100% - 100px); /* 100px = 34px header + 66px footer strip */
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.collage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.collage-card:hover .collage-img {
  transform: scale(1.04);
}

.collage-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.collage-verified-stamp {
  position: absolute;
  top: 46px; /* Positioned right under the telemetry header */
  right: 12px;
  z-index: 5;
  background: rgba(8, 10, 17, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  color: #00e5ff !important;
  font-family: var(--font-mono), monospace;
  font-size: 0.54rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

/* SRE Telemetry radar pulse dot */
@keyframes pulseRadarDot {
  0% { transform: scale(1); opacity: 0.7; box-shadow: 0 0 4px var(--accent-green); }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px var(--accent-green), 0 0 0 3px rgba(54, 179, 126, 0.25); }
  100% { transform: scale(1); opacity: 0.7; box-shadow: 0 0 4px var(--accent-green); }
}

@keyframes pulseRadarDotLight {
  0% { transform: scale(1); opacity: 0.7; box-shadow: 0 0 3px #00875A; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 8px #00875A, 0 0 0 3px rgba(0, 135, 90, 0.2); }
  100% { transform: scale(1); opacity: 0.7; box-shadow: 0 0 3px #00875A; }
}

.collage-verified-stamp::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #00e5ff;
  border-radius: 50%;
  box-shadow: 0 0 6px #00e5ff;
  animation: pulseCyanDot 2s infinite ease-in-out;
}

@keyframes pulseCyanDot {
  0% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #00e5ff; }
  100% { transform: scale(1); opacity: 0.6; }
}

html.light .collage-verified-stamp::before {
  background-color: #008DA6;
  box-shadow: 0 0 6px #008DA6;
}

.collage-meta-strip {
  height: 66px;
  padding: 8px 14px; /* Shrunk vertical padding to give text vertical headroom */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Shift elements up to prevent clipping at the baseline */
  background: rgba(8, 10, 17, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  z-index: 5;
}

/* Subtle diagnostics overlay on card footer */
.collage-meta-strip::after {
  content: 'SYS_STATUS: 200 // LOAD: NORMAL';
  position: absolute;
  bottom: 6px;
  right: 14px;
  font-family: var(--font-mono), monospace;
  font-size: 0.44rem;
  color: rgba(255, 255, 255, 0.12);
  letter-spacing: 0.05em;
  pointer-events: none;
}

html.light .collage-meta-strip::after {
  color: rgba(9, 30, 66, 0.2);
}

.collage-tag {
  display: block;
  font-family: var(--font-mono), monospace;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--primary-blue);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.collage-title {
  font-family: var(--font-heading), sans-serif;
  font-size: 0.74rem !important; /* Slightly tighter text sizing for flawless visual clearance */
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover dynamic elevation fallback (overridden by 3D Tilt JS when pointer is fine) */
.collage-card:hover .collage-card-inner {
  animation-play-state: paused !important;
  box-shadow: 
    0 24px 64px -12px rgba(0, 0, 0, 0.8),
    0 0 1px 2px var(--card-glow, rgba(87, 157, 255, 0.4)),
    0 0 32px 0 var(--card-glow, rgba(87, 157, 255, 0.15)),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
  border-color: var(--card-glow, rgba(87, 157, 255, 0.4));
}

/* Premium Light Theme overrides */
html.light .collage-card-inner {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(9, 30, 66, 0.08);
  box-shadow: 
    0 12px 32px -8px rgba(9, 30, 66, 0.08),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
}

html.light .telemetry-header {
  background: rgba(244, 245, 247, 0.9);
  border-bottom: 1px solid rgba(9, 30, 66, 0.05);
}

html.light .collage-meta-strip {
  background: rgba(244, 245, 247, 0.92);
  border-top: 1px solid rgba(9, 30, 66, 0.05);
}

html.light .collage-card-inner::before {
  background: radial-gradient(
    280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.45),
    transparent 70%
  );
}

html.light .collage-card-inner::after {
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(0, 82, 204, 0.015) 30%,
    rgba(0, 135, 90, 0.02) 48%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(0, 135, 90, 0.02) 52%,
    rgba(0, 82, 204, 0.015) 70%,
    transparent 100%
  );
}

html.light .collage-verified-stamp {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 141, 166, 0.3) !important;
  color: #008da6 !important;
  box-shadow: 0 4px 10px rgba(9, 30, 66, 0.05);
}

html.light .collage-tag {
  color: #0052CC !important;
}

html.light .collage-title {
  color: #172B4D !important;
}

html.light .collage-card:hover .collage-card-inner {
  box-shadow: 
    0 24px 48px -12px rgba(9, 30, 66, 0.2),
    0 0 0 2px var(--card-glow, var(--primary-blue)),
    0 0 24px 0 var(--card-glow, rgba(0, 82, 204, 0.15)),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
  border-color: var(--card-glow, var(--primary-blue));
}

/* Screen Inspection Lightbox Modal styling */
.collage-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.collage-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 5, 8, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 1;
  transition: opacity 0.35s ease;
}

html.light .lightbox-backdrop {
  background: rgba(244, 245, 247, 0.94);
}

.lightbox-content-wrapper {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 90%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #0d111c;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  transform: scale(0.96) translateY(15px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

html.light .lightbox-content-wrapper {
  background: #FFFFFF;
  border: 1px solid rgba(9, 30, 66, 0.12);
  box-shadow: 
    0 24px 60px rgba(9, 30, 66, 0.16),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
}

.collage-lightbox.active .lightbox-content-wrapper {
  transform: scale(1) translateY(0);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
  padding: 0 !important;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  transform: scale(1.08) rotate(90deg);
}

html.light .lightbox-close {
  background: rgba(9, 30, 66, 0.04);
  border: 1px solid rgba(9, 30, 66, 0.08);
}

html.light .lightbox-close:hover {
  background: rgba(9, 30, 66, 0.08);
  color: var(--text-primary);
}

.lightbox-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.lightbox-img-frame {
  width: 100%;
  height: auto;
  max-height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #05070c;
  overflow: hidden;
  position: relative;
}

html.light .lightbox-img-frame {
  background: #F4F5F7;
}

.lightbox-img-frame img {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.lightbox-meta {
  padding: 24px 36px;
  background: rgba(13, 17, 28, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 5;
  overflow: hidden;
}

html.light .lightbox-meta {
  background: #FFFFFF;
  border-top: 1px solid rgba(9, 30, 66, 0.08);
}

.lightbox-meta > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.collage-lightbox.active .lightbox-meta > * {
  opacity: 1;
  transform: translateY(0);
}

.collage-lightbox.active .lightbox-tag {
  transition-delay: 0.1s;
}

.collage-lightbox.active .lightbox-caption {
  transition-delay: 0.18s;
}

.lightbox-tag {
  display: inline-block;
  font-family: var(--font-mono), monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-blue);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

html.light .lightbox-tag {
  color: #0052CC !important;
}

.lightbox-caption {
  font-family: var(--font-body), sans-serif;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
}

html.light .lightbox-caption {
  color: #42526E !important;
}

/* 8. Fully Fluid Responsive Collapsing Layouts */
@media (max-width: 1024px) {
  .collage-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 360px;
    gap: 28px;
    height: auto;
    max-width: 100%;
    padding: 0 16px;
  }
  
  .collage-card {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 1 !important;
  }
  
  .collage-card-inner {
    transform: none !important;
    animation: none !important;
  }
  
  .collage-card.card-1 { grid-column: span 2; aspect-ratio: 16 / 9; height: 320px !important; }
  .collage-card.card-2 { grid-column: span 1; }
  .collage-card.card-3 { grid-column: span 1; }
  .collage-card.card-4 { grid-column: span 2; aspect-ratio: 16 / 9; height: 300px !important; }
  .collage-card.card-5 { grid-column: span 2; aspect-ratio: 16 / 9; height: 320px !important; }
  .collage-card.card-6 { grid-column: span 2; aspect-ratio: 16 / 9; height: 300px !important; }
  .collage-card.card-9 { grid-column: span 2; aspect-ratio: 16 / 9; height: 300px !important; }
}

@media (max-width: 768px) {
  .collage-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    gap: 12px;
    padding: 0 12px;
  }
  
  /* Reset Specific Card Heights from the 1024px query to allow grid-row mapping */
  .collage-card,
  .collage-card.card-1,
  .collage-card.card-2,
  .collage-card.card-3,
  .collage-card.card-5,
  .collage-card.card-6,
  .collage-card.card-7,
  .collage-card.card-8,
  .collage-card.card-9 {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }
  
  .collage-card-inner {
    transform: none !important;
    animation: none !important;
  }
  
  /* Bento Grid Card Placements for Mobile Collage */
  .collage-card.card-1 { grid-column: span 2 !important; grid-row: span 1 !important; }
  .collage-card.card-2 { grid-column: span 1 !important; grid-row: span 2 !important; }
  .collage-card.card-3 { grid-column: span 1 !important; grid-row: span 2 !important; }
  .collage-card.card-9 { grid-column: span 1 !important; grid-row: span 1 !important; }
  .collage-card.card-6 { grid-column: span 2 !important; grid-row: span 1 !important; }
  .collage-card.card-5 { grid-column: span 1 !important; grid-row: span 1 !important; }
  .collage-card.card-7 { grid-column: span 1 !important; grid-row: span 1 !important; }
  .collage-card.card-8 { grid-column: span 1 !important; grid-row: span 1 !important; }

  .collage-card:hover .collage-card-inner {
    transform: scale(1.02) translateY(-4px) !important;
  }
}

/* ==========================================================================
   ELITE CREDENTIALS UPGRADE
   ========================================================================== */
.certs-grid .cert {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid var(--border) !important;
}

.certs-grid .cert:hover {
  transform: translateY(-5px) scale(1.02) !important;
  border-color: var(--cert-color) !important;
  box-shadow: 0 10px 30px -10px var(--cert-color), 0 0 0 1px var(--cert-color) inset !important;
}

.certs-grid .cert .cert-name {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.02em !important;
  transition: color 0.3s ease !important;
}

.certs-grid .cert:hover .cert-name {
  color: var(--cert-color) !important;
}

.certs-grid .cert .cert-top {
  height: 3px !important;
  background: var(--cert-color) !important;
  opacity: 0.7 !important;
  transition: opacity 0.3s ease, height 0.3s ease !important;
}

.certs-grid .cert:hover .cert-top {
  opacity: 1 !important;
  height: 4px !important;
}

.certs-grid .cert .cert-link {
  transition: color 0.3s ease, letter-spacing 0.3s ease !important;
}

.certs-grid .cert:hover .cert-link:not(.cert-link-none) {
  letter-spacing: 0.03em !important;
  color: var(--cert-color) !important;
}