/* =================================================================
   Sreeharinath Peetla — v14 Parallax Final + Resume-Accurate Stylesheet
   Reference: Binjan-style split-screen (cream + mustard), Poppins display
   + Inter body + Caveat signature, brush-stroke accent, color-coded icons.

   v14 CHANGES (from v13):
     • FIXED: badge text no longer rotates (only the dashed ring spins)
     • FIXED: tilt + parallax no longer fight over style.transform —
       both compose via CSS custom properties (--px, --py, --tiltX, --tiltY)
     • NEW: parallel word-by-word text entrance (data-split + .w spans)
     • NEW: wave dividers between ALL sections (scroll parallax transitions)
     • NEW: section heads drift on scroll (subtle parallax layer)

   v13 FEATURES (kept):
     • Scroll progress bar (top) + floating Resume pill
     • Multi-layer hero parallax (scroll + mouse-follow depth)
     • Animated gradient mesh + floating blobs + code-snippet tags
     • Marquee text bg, SVG circular progress rings, 3D tilt, magnetic buttons

   Performance rules (enforced):
     • Parallax uses transform: translate3d() ONLY (GPU compositing layer)
     • All scroll listeners use { passive: true } + rAF throttling
     • Parallax elements are IO-gated — off-screen transforms are skipped
     • will-change: transform is set ONLY on parallax elements
     • NO backdrop-filter · NO sticky + blur combos
     • prefers-reduced-motion: reduce → all parallax disabled
   ================================================================= */

/* ---------- Fonts — Poppins display + Inter body + Caveat signature + Space Mono ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Caveat:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

:root {
  /* Split-screen palette (from reference image) */
  --cream:        #FDFBF7;
  --cream-2:      #F5F1E8;
  --mustard:      #F4B942;
  --mustard-deep: #E5A730;
  --mustard-soft: #FAE2A8;
  --navy:         #1A2332;
  --navy-2:       #2C3E50;
  --slate:        #6B7280;
  --slate-2:      #9CA3AF;
  --coral:        #E85D4A;
  --coral-soft:   #FCE4DE;
  --teal:         #3D7A7A;
  --teal-soft:    #D5E8E8;
  --line:         rgba(26, 35, 50, 0.10);
  --line-cream:   rgba(26, 35, 50, 0.08);
  --shadow-sm:    0 4px 20px rgba(26, 35, 50, 0.06);
  --shadow-md:    0 10px 40px rgba(26, 35, 50, 0.10);
  --shadow-lg:    0 24px 60px rgba(26, 35, 50, 0.14);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --script: 'Caveat', 'Brush Script MT', cursive;
  --mono: 'Space Mono', 'SF Mono', Menlo, Consolas, monospace;

  --max-w: 1320px;
  --gutter: clamp(20px, 5vw, 64px);

  /* v13 — refined text color tokens for premium contrast */
  --ink-900: #0E1726;   /* deepest navy — for hero headlines */
  --ink-700: #1A2332;   /* default navy body */
  --ink-500: #2C3E50;   /* secondary text */
  --ink-400: #4A5A6E;   /* tertiary text */
  --ink-300: #6B7280;   /* muted / slate */
  --ink-200: #9CA3AF;   /* disabled / placeholder */
  --accent-coral: #E85D4A;
  --accent-mustard: #E5A730;
  --accent-teal: #3D7A7A;
  --on-mustard: #1A2332;
  --on-navy:    #FDFBF7;
}

body {
  font-family: var(--font);
  color: var(--ink-700);
  background: var(--cream);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { font-family: var(--display); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* =================================================================
   v13 — SCROLL PROGRESS BAR
   ================================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--coral) 0%, var(--mustard) 50%, var(--teal) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.1s linear;
  box-shadow: 0 0 8px rgba(244, 185, 66, 0.5);
}

/* =================================================================
   v13 — FLOATING RESUME PILL (always visible)
   Hidden on large screens (where nav has the Resume CTA).
   On mobile, the floating pill stays visible bottom-right above the
   IJP mobile bar.
   ================================================================= */
.resume-float {
  position: fixed;
  right: 18px;
  bottom: 88px;  /* above the IJP mobile bar (which is bottom: 12px) */
  z-index: 95;
  display: none; /* shown only on mobile via media query */
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--ink-900);
  color: var(--mustard);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 28px rgba(14, 23, 38, 0.35), 0 0 0 1px rgba(244, 185, 66, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  will-change: transform;
}
.resume-float svg { width: 16px; height: 16px; stroke: var(--mustard); }
.resume-float:hover {
  background: var(--coral);
  color: var(--on-navy);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(232, 93, 74, 0.4);
}
.resume-float:hover svg { stroke: var(--on-navy); }
.resume-float-pulse {
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(232, 93, 74, 0.5);
  animation: hero-pulse 2.4s ease-out infinite;
}
@media (max-width: 880px) {
  .resume-float { display: inline-flex; }
}

/* =================================================================
   TOP NAV — v13 with always-visible Resume CTA + actions group
   ================================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.nav.scrolled {
  background: rgba(253, 251, 247, 0.96);
  box-shadow: 0 1px 0 var(--line);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.nav-logo-mark {
  width: 32px; height: 32px;
  background: var(--mustard);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy);
  font-weight: 900;
  font-size: 14px;
  transition: transform 0.3s ease;
}
.nav-logo:hover .nav-logo-mark { transform: rotate(-12deg); }
.nav-menu {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-menu a {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.78;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.nav-menu a:hover { opacity: 1; color: var(--coral); }
.nav-cta {
  padding: 10px 20px;
  background: var(--navy);
  color: var(--cream) !important;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  opacity: 1 !important;
  border: 1.5px solid var(--mustard);
}
.nav-cta svg { width: 16px; height: 16px; stroke: var(--mustard); }
.nav-cta:hover {
  background: var(--coral);
  border-color: var(--coral);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 93, 74, 0.4);
}
.nav-cta:hover svg { stroke: var(--cream); }

/* v13 — actions group holds the mobile Resume icon + hamburger */
.nav-actions {
  display: none;
  align-items: center;
  gap: 8px;
}
.nav-cta-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--navy);
  color: var(--mustard);
  border-radius: 999px;
  border: 1.5px solid var(--mustard);
  transition: background 0.15s ease, transform 0.15s ease;
}
.nav-cta-mobile svg { width: 18px; height: 18px; stroke: var(--mustard); }
.nav-cta-mobile:hover { background: var(--coral); transform: translateY(-1px); }
.nav-cta-mobile:hover svg { stroke: var(--cream); }

.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-menu { display: none; }
  .nav-actions { display: inline-flex; }
  .nav-toggle {
    display: inline-flex;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    color: var(--navy);
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 999px;
  }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-menu.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 76px; left: 16px; right: 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 24px;
    gap: 16px;
    box-shadow: var(--shadow-md);
  }
  .nav-menu.open .nav-cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    width: 100%;
    color: var(--cream) !important;
    opacity: 1;
    background: var(--navy);
  }
  .nav-menu.open .nav-cta svg { stroke: var(--mustard); }
}

/* =================================================================
   HERO — v13 multi-layer parallax (scroll + mouse-follow)
   Layer stack (back → front):
     1. Gradient mesh background
     2. Animated floating blobs (mustard + coral + teal)
     3. Grid pattern overlay
     4. Brush stroke swirl (slow scroll parallax + mouse)
     5. Photo (medium scroll parallax + mouse-follow + tilt)
     6. Badge (reverse scroll parallax + mouse-follow + tilt)
     7. Code-snippet decorative tags (fastest parallax)
   ================================================================= */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 100vh;
  padding-top: 88px;
  background: var(--cream);
  overflow: visible;
}

/* Layer 1: animated gradient mesh */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 30%, rgba(244, 185, 66, 0.10) 0%, transparent 35%),
    radial-gradient(circle at 88% 70%, rgba(232, 93, 74, 0.08) 0%, transparent 38%),
    radial-gradient(circle at 60% 20%, rgba(61, 122, 122, 0.06) 0%, transparent 30%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  pointer-events: none;
}

/* Layer 2: floating blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
  animation: blob-float 18s ease-in-out infinite;
}
.blob-mustard {
  width: 360px; height: 360px;
  background: var(--mustard);
  top: -80px; left: 18%;
  animation-delay: 0s;
}
.blob-coral {
  width: 280px; height: 280px;
  background: var(--coral);
  bottom: -60px; left: 8%;
  opacity: 0.42;
  animation-delay: -6s;
}
.blob-teal {
  width: 320px; height: 320px;
  background: var(--teal);
  top: 20%; right: 18%;
  opacity: 0.35;
  animation-delay: -12s;
}
@keyframes blob-float {
  0%, 100% { border-radius: 50% 50% 50% 50%; }
  33%      { border-radius: 40% 60% 60% 40%; }
  66%      { border-radius: 60% 40% 40% 60%; }
}

/* Layer 3: grid pattern */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(26, 35, 50, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 35, 50, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px) var(--gutter);
  position: relative;
  z-index: 4;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent-teal);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-tag .pulse {
  width: 8px; height: 8px;
  background: var(--accent-coral);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(232, 93, 74, 0.5);
  animation: hero-pulse 2.4s ease-out infinite;
}
@keyframes hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 93, 74, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(232, 93, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 93, 74, 0); }
}

/* Hero headline — with animated gradient accent */
.hero-title {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink-900);
  margin-bottom: 28px;
}
.hero-title .accent {
  color: var(--ink-900);
  background: linear-gradient(transparent 62%, var(--mustard-soft) 62%);
  padding: 0 4px;
  position: relative;
}
/* v13 — subtle animated gradient sweep on the accent */
.hero-title .accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 38%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--mustard-deep), transparent);
  opacity: 0.5;
  transform: translateX(-100%);
  animation: accent-sweep 4s ease-in-out infinite;
}
@keyframes accent-sweep {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  50%      { transform: translateX(100%); opacity: 0.6; }
}
.hero-title .accent-coral {
  color: var(--accent-coral);
  background: linear-gradient(135deg, var(--coral) 0%, var(--mustard-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink-400);
  max-width: 560px;
  margin-bottom: 32px;
  line-height: 1.65;
}
.hero-desc strong { color: var(--ink-700); font-weight: 600; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-bottom: 32px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-300);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .ic { color: var(--accent-mustard); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 48px;
}

/* ---------- Buttons — v13 with shine sweep + magnetic ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  will-change: transform;
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
}
.btn svg { width: 18px; height: 18px; }

/* Shine sweep — animates on hover across the button */
.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.6s ease;
}
.btn:hover .btn-shine { left: 130%; }

/* PRIMARY — navy bg, cream text. */
.btn-primary {
  background: var(--ink-900);
  color: var(--on-navy);
  border-color: var(--ink-900);
}
.btn-primary:hover {
  background: var(--accent-coral);
  border-color: var(--accent-coral);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* GOLD — mustard bg, navy text. */
.btn-gold {
  background: var(--mustard);
  color: var(--ink-900);
  border-color: var(--mustard-deep);
  box-shadow: 0 6px 18px rgba(244, 185, 66, 0.35);
}
.btn-gold:hover {
  background: var(--mustard-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(244, 185, 66, 0.5);
}
/* CRITICAL FIX — on mustard-background sections, a mustard button would be invisible.
   Auto-promote to navy bg + mustard text. */
.section.mustard .btn-gold,
.footer .btn-gold {
  background: var(--ink-900);
  color: var(--mustard);
  border-color: var(--mustard);
  box-shadow: 0 6px 18px rgba(14, 23, 38, 0.35);
}
.section.mustard .btn-gold:hover,
.footer .btn-gold:hover {
  background: var(--accent-coral);
  color: var(--on-navy);
  border-color: var(--accent-coral);
  box-shadow: 0 10px 28px rgba(232, 93, 74, 0.5);
}

/* GHOST — transparent bg, navy outline + navy text on cream. */
.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn-ghost:hover {
  background: var(--ink-900);
  color: var(--on-navy);
  transform: translateY(-2px);
}
.section.mustard .btn-ghost,
.footer .btn-ghost {
  color: var(--ink-900);
  border-color: var(--ink-900);
  background: rgba(26, 35, 50, 0.04);
}
.section.mustard .btn-ghost:hover,
.footer .btn-ghost:hover {
  background: var(--ink-900);
  color: var(--mustard);
}

/* v13 — Hero stat rings (SVG circular progress) */
.hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.stat-ring {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring-bg {
  fill: none;
  stroke: rgba(26, 35, 50, 0.08);
  stroke-width: 8;
}
.ring-fg {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ring-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
}
.hero-stat-num {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  line-height: 1;
}
.hero-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin-top: 4px;
}

/* ----- Right column: photo centered + brush stroke + badge ----- */
.hero-right {
  position: relative;
  background: var(--mustard);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
}

/* Brush stroke — organic teal swirl BEHIND photo */
.hero-brush {
  position: absolute;
  inset: -8% -4%;
  z-index: 1;
  pointer-events: none;
  color: var(--accent-teal);
  opacity: 0.85;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.hero-brush svg { width: 100%; height: 100%; object-fit: contain; }

/* Photo — centered, premium shadow, parallax + tilt (composed, no conflicts) */
.hero-photo,
.hero-photo.reveal,
.hero-photo.reveal.revealed {
  /* higher specificity than .reveal.revealed — parallax transform always wins,
     the reveal still fades the photo in via opacity */
  transform: perspective(900px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.hero-photo {
  position: relative;
  z-index: 2;
  width: clamp(240px, 26vw, 360px);
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -15px rgba(14, 23, 38, 0.45),
              0 18px 36px -18px rgba(14, 23, 38, 0.35);
  background: var(--cream-2);
  will-change: transform;
  transition: box-shadow 0.3s ease;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-photo-frame {
  position: absolute;
  inset: 12px;
  border: 1.5px solid rgba(253, 251, 247, 0.35);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}

/* v16.1 — CENTER-LOCK PARALLAX RETURN
   Added by main.js when the cursor leaves the window: the drifted
   --px/--py values ease back to 0 instead of snapping. Removed after
   the return trip so cursor-following stays 1:1 instant. */
.pxy-return {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Badge — circular seal, parallax floats opposite */
.hero-badge {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 4vw, 56px);
  bottom: clamp(16px, 4vw, 56px);
  width: 132px;
  height: 132px;
  background: var(--cream);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 14px 32px rgba(14, 23, 38, 0.28),
              0 2px 8px rgba(14, 23, 38, 0.14);
  padding: 8px;
  /* v14 FIX — badge content stays readable; only the ::before ring spins.
     Parallax + tilt compose via custom properties (no transform fights). */
  transform: perspective(900px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
/* Slow rotation ring outside the badge (decorative dashed ring) */
.hero-badge::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1.5px dashed rgba(26, 35, 50, 0.2);
  border-radius: 50%;
  animation: badge-ring-spin 20s linear infinite;
}
@keyframes badge-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes badge-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hero-badge-num {
  font-size: 44px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.04em;
}
.hero-badge-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate);
  margin-top: 4px;
}
.hero-badge-cert {
  font-size: 7px;
  font-family: var(--mono);
  color: var(--coral);
  margin-top: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* v14 — Floating code-snippet tags (parallax vars flow through keyframes) */
.hero-code-tag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--mono);
  font-size: 11px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(14, 23, 38, 0.18);
  border: 1px solid rgba(26, 35, 50, 0.1);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
  pointer-events: none;
}
.tag-prefix { color: var(--coral); font-weight: 700; }
.tag-cmd { color: var(--ink-700); }
.hero-code-tag.tag-1 {
  top: 14%; left: 4%;
  animation: float-tag-1 6s ease-in-out infinite;
}
.hero-code-tag.tag-2 {
  top: 60%; left: 2%;
  animation: float-tag-2 7s ease-in-out infinite;
  animation-delay: -2s;
}
.hero-code-tag.tag-3 {
  top: 80%; right: 8%;
  animation: float-tag-3 8s ease-in-out infinite;
  animation-delay: -4s;
}
@keyframes float-tag-1 {
  0%, 100% { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
  50%      { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 10px), 0); }
}
@keyframes float-tag-2 {
  0%, 100% { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
  50%      { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + 12px), 0); }
}
@keyframes float-tag-3 {
  0%, 100% { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
  50%      { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 8px), 0); }
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  font-size: 10px;
  font-family: var(--mono);
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.scroll-cue-text { opacity: 0.7; }
.scroll-cue-mouse {
  width: 22px; height: 36px;
  border: 1.5px solid var(--navy);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  opacity: 0.5;
}
.scroll-cue-wheel {
  width: 3px; height: 6px;
  background: var(--navy);
  border-radius: 2px;
  animation: scroll-cue-wheel 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  /* v14 FIX — 76px (was 96px) lifts the description clear of the fixed
     floating Resume pill (top edge ≈ viewport height − 129px) on phones */
  .hero-left { padding-top: 76px; padding-bottom: 32px; }
  .hero-right { padding: 48px 24px; min-height: 520px; }
  .hero-stats { gap: 20px; justify-content: center; }
  .stat-ring { width: 96px; height: 96px; }
  .hero-stat-num { font-size: 30px; }
  .hero-badge { width: 104px; height: 104px; right: 24px; bottom: 24px; }
  .hero-badge-num { font-size: 36px; }
  .hero-code-tag.tag-1 { top: 8%; left: 8%; font-size: 10px; }
  .hero-code-tag.tag-2 { top: 50%; left: 4%; font-size: 10px; }
  .hero-code-tag.tag-3 { top: 78%; right: 8%; font-size: 10px; }
  .hero-scroll-cue { display: none; }
  .hero-blob { filter: blur(40px); }
  .blob-mustard { width: 240px; height: 240px; }
  .blob-coral { width: 200px; height: 200px; }
  .blob-teal { width: 220px; height: 220px; }
}

/* =================================================================
   v13 — WAVE DIVIDER (cream → mustard)
   ================================================================= */
.wave-divider {
  position: relative;
  width: 100%;
  height: 80px;
  margin-top: -1px;
  pointer-events: none;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
/* v14 — mirrored variant for alternating section transitions */
.wave-divider.wave-flip svg { transform: scaleX(-1); }
.wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}
.wave-divider path {
  animation: wave-shift 12s ease-in-out infinite;
  transform-origin: center;
}
@keyframes wave-shift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(20px); }
}

/* =================================================================
   SECTION BASE
   ================================================================= */
.section {
  padding: clamp(72px, 9vw, 128px) 0;
  position: relative;
}
.section.cream  { background: var(--cream); }
.section.cream2 { background: var(--cream-2); }
.section.mustard {
  background: var(--mustard);
  color: var(--ink-900);
}
.section.mustard .section-label { color: var(--ink-900); opacity: 0.55; }
.section.mustard .section-sub   { color: var(--ink-700); opacity: 0.72; }
.section.mustard .section-title { color: var(--ink-900); }

.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section.mustard .section-head { max-width: 640px; }
.section-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-teal);
  text-transform: uppercase;
  margin-bottom: 14px;
  position: relative;
  padding-left: 28px;
}
.section-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--accent-teal);
}
.section.mustard .section-label::before { background: var(--ink-900); opacity: 0.5; }
.section-title {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink-900);
  margin-bottom: 18px;
}
.section-sub {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--ink-400);
  max-width: 620px;
  line-height: 1.65;
}
.section.mustard .section-sub { color: var(--ink-700); opacity: 0.78; }

/* =================================================================
   v13 — MARQUEE BACKGROUND (in experience section)
   ================================================================= */
.marquee-bg {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  opacity: 0.08;
}
.marquee-bg span {
  font-family: var(--display);
  font-size: clamp(40px, 8vw, 88px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  animation: marquee-scroll 40s linear infinite;
  display: inline-block;
}
.marquee-bg span:nth-child(2) {
  animation-duration: 50s;
  animation-direction: reverse;
  margin-left: -10%;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* =================================================================
   PIPELINE (CI/CD)
   ================================================================= */
.pipeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 32px 0;
}
.pipeline-track::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
/* v13 — animated flow line */
.pipeline-track::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  height: 2px;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--mustard-deep), transparent);
  z-index: 0;
  animation: pipeline-flow 4s ease-in-out infinite;
}
@keyframes pipeline-flow {
  0%   { left: -30%; }
  100% { left: 100%; }
}
.pipeline-stage {
  position: relative;
  z-index: 1;
  text-align: center;
  background: var(--cream);
  padding: 16px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pipeline-stage:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--mustard);
}
.pipeline-stage:nth-child(1) .stage-icon { background: var(--teal-soft); color: var(--teal); }
.pipeline-stage:nth-child(2) .stage-icon { background: var(--mustard-soft); color: var(--mustard-deep); }
.pipeline-stage:nth-child(3) .stage-icon { background: var(--coral-soft); color: var(--coral); }
.pipeline-stage:nth-child(4) .stage-icon { background: var(--teal-soft); color: var(--teal); }
.pipeline-stage:nth-child(5) .stage-icon { background: var(--mustard-soft); color: var(--mustard-deep); }
.pipeline-stage:nth-child(6) .stage-icon { background: var(--coral-soft); color: var(--coral); }
.pipeline-stage:nth-child(7) .stage-icon { background: var(--teal-soft); color: var(--teal); }
.stage-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  transition: transform 0.2s ease;
}
.pipeline-stage:hover .stage-icon { transform: scale(1.1) rotate(-8deg); }
.stage-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.stage-time { font-family: var(--mono); font-size: 11px; color: var(--slate); }

@media (max-width: 880px) {
  .pipeline-track { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pipeline-track::before, .pipeline-track::after { display: none; }
}

/* =================================================================
   SKILLS — color-coded zones (teal, yellow, coral)
   ================================================================= */
.skills-zones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.skill-zone {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  transform-style: preserve-3d;
}
.skill-zone:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.skill-zone-head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.zone-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: transform 0.3s ease;
}
.skill-zone:hover .zone-icon { transform: rotate(-12deg); }
.zone-aws  .zone-icon { background: var(--teal-soft); color: var(--teal); }
.zone-k8s  .zone-icon { background: var(--mustard-soft); color: var(--mustard-deep); }
.zone-iac  .zone-icon { background: var(--coral-soft); color: var(--coral); }
.zone-ci   .zone-icon { background: var(--teal-soft); color: var(--teal); }
.zone-title { font-size: 20px; font-weight: 700; color: var(--navy); }
.zone-sub   { font-family: var(--mono); font-size: 12px; color: var(--slate); }

.sticky-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.flip-card {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 12px;
  font-size: 12px;
  border: 1px solid var(--line);
  transition: background 0.15s ease, transform 0.2s ease;
}
.flip-card:hover {
  background: var(--mustard-soft);
  transform: translateY(-2px) rotate(-1deg);
}
.flip-card-name { font-weight: 600; color: var(--navy); display: block; margin-bottom: 4px; font-size: 13px; }
.flip-card-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--navy);
  color: var(--cream);
  letter-spacing: 0.06em;
}
.flip-card-tag.adv { background: var(--teal); }
.flip-card-body { font-size: 11px; color: var(--slate); line-height: 1.5; margin-top: 6px; }

@media (max-width: 880px) {
  .skills-zones { grid-template-columns: 1fr; }
  .sticky-notes { grid-template-columns: repeat(2, 1fr); }
}

/* =================================================================
   TECH TICKER — v15 compact dual-row marquee
   (replaces the broken .tech-matrix grid that stacked 28 full-width
   chips into ~1700px; this renders in ~150px)
   ================================================================= */
.tech-ticker-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin: 72px 0 22px;
}
.tech-ticker-head .section-title { margin-bottom: 0; }
.tech-ticker-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 340px;
  margin: 0 0 4px;
  text-align: right;
}
.tech-ticker-sub strong { color: var(--navy); }
.mono-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--teal);
  white-space: nowrap;
}

.tech-ticker {
  --tt-gap: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding: 8px 0 6px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.tech-track {
  display: flex;
  gap: var(--tt-gap);
  width: max-content;
  animation: tt-scroll var(--dur, 48s) linear infinite;
  will-change: transform;
}
.tech-track.reverse { animation-name: tt-scroll-rev; }
.tech-ticker:hover .tech-track,
.tech-ticker:focus-within .tech-track { animation-play-state: paused; }
@keyframes tt-scroll {
  to { transform: translateX(calc(-50% - var(--tt-gap) / 2)); }
}
@keyframes tt-scroll-rev {
  from { transform: translateX(calc(-50% - var(--tt-gap) / 2)); }
  to   { transform: translateX(0); }
}

.tech-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  cursor: default;
}
/* alternating handcrafted tilt, like pins on a board */
.tech-track .tech-chip:nth-child(odd)  { --tilt: -1.3deg; }
.tech-track .tech-chip:nth-child(even) { --tilt: 1.1deg; }
.tech-chip:hover {
  transform: rotate(0deg) translateY(-3px) scale(1.05);
  border-color: var(--mustard);
  background: var(--mustard-soft);
  box-shadow: 0 10px 20px rgba(26, 35, 50, 0.12);
  z-index: 2;
}
.tech-chip-name { font-weight: 600; font-size: 13px; color: var(--navy); }
.tech-chip-cat {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(26, 35, 50, 0.07);
  border-radius: 999px;
  padding: 2px 7px;
}

@media (prefers-reduced-motion: reduce) {
  .tech-track { animation: none; }
  .tech-ticker {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 880px) {
  .tech-ticker-head { flex-direction: column; align-items: flex-start; margin-top: 56px; }
  .tech-ticker-sub { text-align: left; margin: 0; max-width: 300px; }
  .tech-ticker { gap: 12px; }
  .tech-chip { padding: 7px 12px; }
  .tech-chip-name { font-size: 12px; }
}

/* =================================================================
   EXPERIENCE TIMELINE
   ================================================================= */
.xp-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.xp-list::before {
  content: '';
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  background: rgba(26, 35, 50, 0.18);
  background-image: repeating-linear-gradient(to bottom, rgba(26,35,50,0.3) 0 6px, transparent 6px 14px);
}
.xp-item {
  position: relative;
  padding-left: 40px;
  background: rgba(253, 251, 247, 0.4);
  border-radius: var(--r-md);
  padding: 20px 24px 20px 56px;
  transition: transform 0.25s ease, background 0.25s ease;
  transform-style: preserve-3d;
}
.xp-item:hover {
  transform: translateY(-3px);
  background: rgba(253, 251, 247, 0.7);
}
.xp-item::before {
  content: '';
  position: absolute;
  left: 0; top: 28px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cream);
  border: 4px solid var(--navy);
  transition: transform 0.3s ease;
}
.xp-item:hover::before { transform: scale(1.3); }
.xp-item:nth-child(1)::before { border-color: var(--teal); }
.xp-item:nth-child(2)::before { border-color: var(--coral); }

.xp-period {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--navy);
  opacity: 0.72;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.xp-role {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.xp-company {
  font-size: 14px;
  color: var(--navy);
  opacity: 0.72;
  margin-bottom: 16px;
}
.xp-highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.xp-highlights li {
  font-size: 14px;
  color: var(--navy);
  opacity: 0.85;
  padding-left: 20px;
  position: relative;
  line-height: 1.55;
}
.xp-highlights li::before {
  content: '';
  position: absolute;
  left: 4px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.xp-toggle {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--navy);
  opacity: 0.72;
  padding: 6px 12px;
  border: 1px solid rgba(26,35,50,0.2);
  border-radius: 999px;
  transition: background 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}
.xp-toggle:hover { background: var(--navy); color: var(--cream); opacity: 1; }
.xp-more { margin-top: 12px; }
.xp-more[hidden] { display: none; }

/* =================================================================
   PROJECTS — v13 with 3D tilt
   ================================================================= */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  perspective: 1200px;
}
.project-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(244, 185, 66, 0.08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--mustard);
}
.project-card:hover::before { opacity: 1; }
.project-card::after {
  content: '';
  position: absolute;
  top: -50%; right: -50%;
  width: 100px; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.project-card:hover::after {
  opacity: 1;
  animation: card-shine 1.2s ease-out;
}
@keyframes card-shine {
  0%   { right: -50%; }
  100% { right: 110%; }
}
.project-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: relative;
  z-index: 1;
}
.project-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--mustard-soft);
  color: var(--mustard-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  transition: transform 0.3s ease;
}
.project-card:hover .project-icon { transform: scale(1.08) rotate(-6deg); }
.project-card:nth-child(2) .project-icon { background: var(--teal-soft); color: var(--teal); }
.project-card:nth-child(3) .project-icon { background: var(--coral-soft); color: var(--coral); }
.project-card:nth-child(4) .project-icon { background: var(--teal-soft); color: var(--teal); }
.project-card:nth-child(5) .project-icon { background: var(--mustard-soft); color: var(--mustard-deep); }
.project-card:nth-child(6) .project-icon { background: var(--coral-soft); color: var(--coral); }
.project-holo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cream-2);
}
.project-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.project-desc {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.project-stack {
  display: flex; flex-wrap: wrap; gap: 6px;
  position: relative;
  z-index: 1;
}
.stack-chip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--navy);
  border: 1px solid var(--line);
  transition: background 0.15s ease, transform 0.15s ease;
}
.stack-chip:hover {
  background: var(--mustard-soft);
  transform: translateY(-2px);
}
.project-whatido-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.project-whatido ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  z-index: 1;
}
.project-whatido li {
  font-size: 13px;
  color: var(--navy);
  opacity: 0.85;
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.project-whatido li::before {
  content: '→';
  position: absolute;
  left: 0; top: 0;
  color: var(--mustard-deep);
  font-weight: 700;
}
.project-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.project-metric { text-align: center; }
.project-metric-num { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.project-metric-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); margin-top: 2px; }

@media (max-width: 880px) {
  .projects-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   CONTACT
   ================================================================= */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: start;
}

.ijp-banner {
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: 24px 28px 24px 32px;
  margin-bottom: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  box-shadow: var(--shadow-md);
  border: 1.5px solid rgba(244, 185, 66, 0.35);
  position: relative;
  overflow: hidden;
}
.ijp-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--mustard);
}
.ijp-banner::after {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 200px; height: 200%;
  background: radial-gradient(circle, rgba(244, 185, 66, 0.18), transparent 60%);
  pointer-events: none;
}
.ijp-banner-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mustard);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.ijp-banner-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(232, 93, 74, 0.5);
  animation: hero-pulse 2.4s ease-out infinite;
}
.ijp-banner-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; color: var(--cream); position: relative; z-index: 1; }
.ijp-banner-sub   { font-size: 13px; color: var(--cream); opacity: 0.78; position: relative; z-index: 1; }
.ijp-banner-cta {
  background: var(--mustard);
  color: var(--navy);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(244, 185, 66, 0.35);
  position: relative;
  z-index: 1;
}
.ijp-banner-cta:hover { background: var(--mustard-deep); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(244, 185, 66, 0.5); }

.handwritten-note {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 32px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 15px;
  color: var(--ink-700);
  line-height: 1.7;
  position: relative;
}
.handwritten-note::before {
  content: '';
  position: absolute;
  top: -8px; left: 28px;
  width: 60px; height: 16px;
  background: var(--mustard-soft);
  transform: rotate(-2deg);
  border-radius: 4px;
  opacity: 0.6;
}
.handwritten-note p { margin-bottom: 14px; }
.handwritten-note strong { color: var(--accent-coral); font-weight: 600; }
.handwritten-note .signature {
  font-family: var(--script);
  font-size: 32px;
  font-weight: 600;
  color: var(--accent-mustard);
  margin-top: 18px;
  letter-spacing: 0;
  line-height: 1.1;
}

.contact-channels {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.contact-channel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.contact-channel:hover {
  transform: translateY(-3px);
  border-color: var(--mustard);
  box-shadow: var(--shadow-sm);
}
.channel-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--mustard-soft);
  color: var(--mustard-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.contact-channel:hover .channel-icon { transform: rotate(-12deg) scale(1.1); }
.contact-channel:nth-child(2) .channel-icon { background: var(--teal-soft); color: var(--teal); }
.contact-channel:nth-child(3) .channel-icon { background: var(--coral-soft); color: var(--coral); }
.contact-channel:nth-child(4) .channel-icon { background: var(--teal-soft); color: var(--teal); }
.contact-channel:nth-child(5) .channel-icon { background: var(--coral-soft); color: var(--coral); }
.contact-channel:nth-child(6) .channel-icon { background: var(--mustard-soft); color: var(--mustard-deep); }
.channel-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); }
.channel-value { font-size: 13px; color: var(--navy); font-weight: 500; word-break: break-all; }

/* form card */
.form-card {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 32px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.form-title { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.form-sub { font-family: var(--mono); font-size: 12px; color: var(--slate); margin-bottom: 24px; }

.contact-mode {
  display: flex; gap: 6px;
  background: var(--cream-2);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
}
.contact-mode button {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.contact-mode button:hover:not([aria-pressed="true"]) { transform: translateY(-1px); }
.contact-mode button[aria-pressed="true"] { background: var(--navy); color: var(--cream); }
.contact-mode button svg { width: 14px; height: 14px; }
.contact-mode-hint { display: flex; gap: 8px; font-size: 12px; color: var(--slate); margin-bottom: 20px; padding: 10px 12px; background: var(--cream-2); border-radius: var(--r-sm); }
.contact-mode-hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--teal); }
.contact-mode-hint b { color: var(--navy); }

.form-row { margin-bottom: 16px; }
.form-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.form-label .req { color: var(--coral); }
.form-input, .form-select, .form-textarea, .form-file {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--navy);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus, .form-file:focus {
  outline: none;
  border-color: var(--mustard-deep);
  box-shadow: 0 0 0 3px var(--mustard-soft);
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-file { padding: 10px; }
.upload-hint { font-size: 11px; color: var(--slate); margin-top: 4px; }

.word-count { display: block; text-align: right; font-size: 11px; color: var(--slate); margin-top: 4px; }

.subscribe-check {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--slate);
}
.subscribe-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subscribe-box {
  width: 20px; height: 20px;
  border: 1.5px solid var(--navy);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
}
.subscribe-check:hover .subscribe-box { transform: scale(1.1); }
.subscribe-check input:checked + .subscribe-box { background: var(--mustard); border-color: var(--mustard-deep); }
.subscribe-box svg { width: 12px; height: 12px; color: var(--navy); stroke-width: 3; }
.subscribe-label em { font-style: normal; }

.turnstile-wrap { margin-bottom: 16px; min-height: 0; }
.contact-trust { font-size: 11px; color: var(--slate); margin-bottom: 16px; }

.form-status { margin-top: 12px; font-size: 13px; }
.form-status.success { color: var(--teal); font-weight: 600; }
.form-status.error { color: var(--coral); font-weight: 600; }

.form-card .btn-primary { width: 100%; justify-content: center; }

@media (max-width: 880px) {
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-channels { grid-template-columns: 1fr; }
  .ijp-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .ijp-banner-cta { justify-content: center; }
  .form-row.split { grid-template-columns: 1fr; }
}

/* =================================================================
   IJP MOBILE STICKY BAR
   ================================================================= */
.ijp-mobile-bar {
  display: none;
  position: fixed;
  left: 12px; right: 80px; bottom: 12px;
  z-index: 90;
  background: var(--navy);
  color: var(--cream);
  border-radius: 999px;
  padding: 8px 8px 8px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 8px 28px rgba(26, 35, 50, 0.32);
  border: 1.5px solid rgba(244, 185, 66, 0.4);
}
.ijp-mobile-bar-text {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
}
.ijp-mobile-bar-text .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(232, 93, 74, 0.5);
  animation: hero-pulse 2.4s ease-out infinite;
}
.ijp-mobile-bar a {
  background: var(--mustard);
  color: var(--navy);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ijp-mobile-bar a:hover { background: var(--mustard-deep); }
@media (max-width: 880px) {
  .ijp-mobile-bar { display: flex; }
  .footer { padding-bottom: 80px; }
}

/* =================================================================
   FOOTER
   ================================================================= */
.footer {
  background: var(--mustard);
  color: var(--ink-900);
  padding: clamp(64px, 8vw, 96px) 0 32px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}
.footer-cta {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
  z-index: 2;
}
.footer-cta-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-900);
  opacity: 0.72;
  margin-bottom: 12px;
}
.footer-cta h2 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  color: var(--ink-900);
}
.footer-cta h2 .accent {
  background: linear-gradient(135deg, var(--coral) 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-cta p { font-size: 16px; opacity: 0.78; margin-bottom: 28px; color: var(--ink-700); }
.footer-cta .hero-actions { justify-content: center; }
.footer-cta .btn-ghost { color: var(--ink-900); border-color: var(--ink-900); background: rgba(26, 35, 50, 0.04); }
.footer-cta .btn-ghost:hover { background: var(--ink-900); color: var(--mustard); }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(26, 35, 50, 0.16);
}
.footer-brand-desc { font-size: 13px; opacity: 0.78; line-height: 1.6; margin-top: 12px; }
.footer-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  color: var(--navy);
  opacity: 0.72;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 13px; opacity: 0.85; transition: opacity 0.15s ease, color 0.15s ease, padding-left 0.15s ease; }
.footer-col a:hover { opacity: 1; color: var(--coral); padding-left: 4px; }

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(26, 35, 50, 0.16);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px;
  opacity: 0.78;
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* =================================================================
   REVEAL ANIMATIONS — scroll-triggered via IntersectionObserver
   ================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal.d5 { transition-delay: 0.40s; }

/* v14 — Section heads that ALSO parallax: compose reveal + parallax
   (reveal slides in, then parallax drift continues on scroll). */
.section-head[data-parallax].reveal {
  transform: translateY(20px) translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.section-head[data-parallax].reveal.revealed {
  transform: translateY(0) translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}

/* =================================================================
   v14 — PARALLEL TEXT ENTER (word-by-word staggered entrance)
   JS splits [data-split] text into .w word wrappers, each containing
   an inner .wi span. Words rise in parallel with a per-word delay.
   Triggered by the same .revealed class as the reveal system.
   ================================================================= */
[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;   /* keeps descenders (y, g, p) visible */
  margin-bottom: -0.08em;
}
[data-split] .w .wi {
  display: inline-block;
  transform: translateY(115%) rotate(2deg);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
  transition-delay: calc(var(--wi, 0) * 45ms);
  will-change: transform, opacity;
}
.revealed[data-split] .w .wi,
[data-split].revealed .w .wi,
.reveal.revealed [data-split] .w .wi {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}
/* hero title enters a touch livelier */
.hero-title[data-split] .w .wi {
  transition-duration: 0.8s, 0.55s;
  transition-delay: calc(var(--wi, 0) * 60ms);
}
/* v14 — words inside highlight/gradient accent spans rise WITHOUT a mask:
   this removes the .w padding compensation inside .accent, restoring the
   original background-highlight geometry and leaving descenders unclipped. */
.hero-title .accent .w,
.hero-title .accent-coral .w {
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
}
/* v14 — gradient-clipped accent spans keep their gradient after splitting
   (each word carries its own clipped background; parent's transparent
   text-fill-color is overridden) */
.accent-coral .w .wi,
.footer-cta h2 .accent .w .wi {
  background: linear-gradient(135deg, var(--coral) 0%, var(--mustard-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.footer-cta h2 .accent .w .wi {
  /* background-IMAGE only — the background shorthand would reset
     background-clip back to border-box and break the gradient text */
  background-image: linear-gradient(135deg, var(--coral) 0%, #fff 100%);
}

/* =================================================================
   v14 — EDUCATION TIMELINE ENTRY (compact, same card family)
   ================================================================= */
.xp-item.xp-edu { padding-top: 20px; }
.xp-item.xp-edu .xp-role { font-size: 17px; }
.xp-item.xp-edu .xp-company { font-size: 13px; }

/* =================================================================
   v13 PARALLAX UTILITY CLASSES
   --- JS writes --py custom property on [data-parallax] elements.
   ================================================================= */
.parallax {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
}
.parallax-slow    { --py-rate: -0.08; }
.parallax-med     { --py-rate: -0.16; }
.parallax-fast    { --py-rate: -0.24; }
.parallax-reverse { --py-rate:  0.16; }

/* Decorative SVG shape that sits behind section content */
.section-shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  color: var(--mustard-soft);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.section-shape svg { width: 100%; height: 100%; }
.section > .container { position: relative; z-index: 1; }

/* =================================================================
   ACCESSIBILITY / REDUCED MOTION / PRINT
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  [data-split] .w .wi { transform: none; opacity: 1; transition: none; }
  .section-head[data-parallax].reveal,
  .section-head[data-parallax].reveal.revealed { transform: none; }
  .parallax,
  .hero-brush,
  .hero-photo,
  .hero-badge,
  .hero-blob,
  .hero-code-tag,
  .section-shape,
  .wave-divider { transform: none !important; will-change: auto !important; }
  .hero-blob, .hero-code-tag, .marquee-bg span, .pipeline-track::after,
  .wave-divider path, .hero-badge, .hero-badge::before { animation: none !important; }
}

@media print {
  .nav, .hero-scroll-cue, .hero-badge, .section-shape, .hero-blob,
  .hero-grid, .hero-mesh, .hero-code-tag, .scroll-progress, .resume-float,
  .marquee-bg, .wave-divider { display: none; }
  .hero { min-height: auto; }
  body { background: #fff; }
  .section { padding: 24px 0; }
  .reveal { opacity: 1; transform: none; }
  [data-split] .w .wi { transform: none; opacity: 1; }
}

/* =================================================================
   UTIL
   ================================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* v13 — disable hover transforms on touch devices */
@media (pointer: coarse) {
  [data-tilt] { transform: none !important; }
  [data-magnetic] { transform: none !important; }
  .hero-photo, .hero-badge { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) !important; }
}

/* =================================================================
   v17 — PREMIUM HYBRID LAYER (Dark Ops Hero + Before→After Proof)
   Appended override layer — cascade wins over v14 base rules.
   Sections below the hero stay light (hybrid design).

   Performance rules (inherited & enforced):
     • transform: translate3d() only for motion (GPU compositing)
     • NO backdrop-filter
     • prefers-reduced-motion disables particles, glow, blink
   ================================================================= */

/* ---------- v17 tokens ---------- */
:root {
  --hero-bg:    #0A0F1E;
  --hero-bg-2:  #0C1326;
  --term-bg:    #0B1224;
  --glass:      rgba(255, 255, 255, 0.05);
  --glass-line: rgba(255, 255, 255, 0.14);
  --hero-text:  #F4F7FF;
  --hero-dim:   rgba(228, 235, 250, 0.82);
  --cyan:       #6FD7FF;
  --ok-green:   #7CE38B;
}

/* =================================================================
   NAV — dark glass over dark hero + premium dark bar when scrolled
   ================================================================= */
.nav:not(.scrolled) .nav-logo { color: var(--hero-text); }
.nav:not(.scrolled) .nav-menu a { color: rgba(232, 237, 255, 0.82); }
.nav:not(.scrolled) .nav-menu a:hover { color: var(--mustard); opacity: 1; }
.nav:not(.scrolled) .nav-cta {
  background: var(--mustard);
  border-color: var(--mustard);
  color: var(--ink-900) !important;
}
.nav:not(.scrolled) .nav-cta svg { stroke: var(--ink-900); }
.nav:not(.scrolled) .nav-cta:hover {
  background: var(--cream);
  border-color: var(--cream);
}
.nav:not(.scrolled) .nav-cta:hover svg { stroke: var(--ink-900); }

/* Scrolled = premium dark bar (works over both dark hero and light sections) */
.nav.scrolled {
  background: rgba(10, 15, 30, 0.95);
  box-shadow: 0 1px 0 rgba(244, 185, 66, 0.22), 0 10px 34px rgba(0, 0, 0, 0.38);
}
.nav.scrolled .nav-logo { color: var(--hero-text); }
.nav.scrolled .nav-menu a { color: rgba(232, 237, 255, 0.78); }
.nav.scrolled .nav-menu a:hover { color: var(--mustard); opacity: 1; }

@media (max-width: 880px) {
  .nav:not(.scrolled) .nav-toggle {
    background: var(--glass);
    border-color: var(--glass-line);
    color: var(--hero-text);
  }
  .nav:not(.scrolled) .nav-cta-mobile { background: var(--glass); }
  .nav-menu.open {
    background: #0E1526;
    border-color: rgba(255, 255, 255, 0.12);
  }
  .nav-menu.open a { color: rgba(232, 237, 255, 0.88); }
}

/* =================================================================
   HERO — dark premium base
   ================================================================= */
.hero-dark {
  background: var(--hero-bg);
  color: var(--hero-text);
}
.hero-dark .hero-mesh {
  background:
    radial-gradient(circle at 14% 22%, rgba(244, 185, 66, 0.13) 0%, transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(111, 215, 255, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 65% 10%, rgba(232, 93, 74, 0.07) 0%, transparent 30%),
    linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-bg-2) 100%);
}
.hero-dark .hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}
.hero-dark .hero-blob { opacity: 0.2; filter: blur(80px); }
.hero-dark .hero-right { background: transparent; }

/* particle constellation canvas */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* cursor glow (fine pointers only) */
.hero-glow {
  position: absolute;
  top: 0; left: 0;
  width: 620px; height: 620px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(244, 185, 66, 0.13) 0%,
    rgba(111, 215, 255, 0.06) 40%,
    transparent 68%);
  will-change: transform;
  transition: opacity 0.4s ease;
}
@media (pointer: coarse) { .hero-glow { display: none; } }

/* ---------- hero left: typography & copy ---------- */
.hero-dark .hero-tag {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--hero-text);
}
.hero-whoami {
  margin: 20px 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--cyan);
}
.hero-dark .hero-title {
  color: var(--hero-text);
  font-size: clamp(40px, 5.1vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-dark .hl-num {
  color: var(--mustard);
  font-weight: 900;
  text-shadow: 0 0 34px rgba(244, 185, 66, 0.35);
}
.hero-line-dim {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.52em;
  font-weight: 600;
  color: rgba(232, 237, 255, 0.68);
  letter-spacing: -0.01em;
}
.hero-dark .hero-desc {
  color: var(--hero-dim);
  max-width: 580px;
}
.hero-dark .hero-desc strong { color: var(--hero-text); }

/* ---------- hero buttons on dark ---------- */
.hero-dark .btn-primary {
  background: var(--hero-text);
  border-color: var(--hero-text);
  color: var(--hero-bg);
}
.hero-dark .btn-primary svg { stroke: var(--hero-bg); }
.hero-dark .btn-primary:hover {
  background: var(--mustard);
  border-color: var(--mustard);
  color: var(--ink-900);
}
.hero-dark .btn-primary:hover svg { stroke: var(--ink-900); }
.hero-dark .btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: var(--hero-text);
}
.hero-dark .btn-ghost svg { stroke: var(--hero-text); }
.hero-dark .btn-ghost:hover {
  border-color: var(--mustard);
  color: var(--mustard);
}
.hero-dark .btn-ghost:hover svg { stroke: var(--mustard); }

/* ---------- status bar ---------- */
.hero-status {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 10px 20px;
  background: rgba(61, 220, 132, 0.06);
  border: 1px solid rgba(61, 220, 132, 0.26);
  border-radius: 999px;
  width: fit-content;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3DDC84;
  box-shadow: 0 0 10px rgba(61, 220, 132, 0.8);
  animation: hero-pulse 2.2s ease-out infinite;
}
.status-text { color: var(--ok-green); font-weight: 700; }
.status-uptime { color: rgba(232, 237, 255, 0.55); }

/* ---------- metric strip ---------- */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.hm {
  padding: 18px 12px 16px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.hm:first-child { border-left: none; }
.hm-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--hero-text);
}
.hm-lbl {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(232, 237, 255, 0.5);
}

/* ---------- hero right: photo, badge, terminal ---------- */
.hero-dark .hero-photo {
  background: #10182C;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.65),
              0 0 70px rgba(244, 185, 66, 0.1);
  /* v17: lift photo so the terminal only kisses its bottom corner */
  margin-bottom: 64px;
}
.hero-dark .hero-photo-frame {
  inset: 10px;
  border: 1.5px solid rgba(244, 185, 66, 0.38);
}
.hero-dark .hero-badge {
  background: #10182C;
  border: 1px solid rgba(244, 185, 66, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.hero-dark .hero-badge::before { border-color: rgba(244, 185, 66, 0.32); }
.hero-dark .hero-badge-num { color: var(--mustard); }
.hero-dark .hero-badge-lbl { color: rgba(232, 237, 255, 0.75); }
.hero-dark .hero-badge-cert { color: rgba(232, 237, 255, 0.5); }

/* ---------- live terminal window ---------- */
.hero-terminal,
.hero-terminal.reveal,
.hero-terminal.reveal.revealed {
  /* higher specificity than .reveal — parallax transform composes here */
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.hero-terminal {
  position: absolute;
  left: -20px;
  bottom: 22px;
  z-index: 3;
  width: min(430px, 86%);
  background: var(--term-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(244, 185, 66, 0.07);
  overflow: hidden;
  will-change: transform;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.term-dot { width: 11px; height: 11px; border-radius: 50%; }
.t-red { background: #FF5F57; }
.t-yellow { background: #FEBC2E; }
.t-green { background: #28C840; }
.term-title {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(232, 237, 255, 0.55);
}
.term-body {
  height: 168px;
  padding: 14px 16px 18px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.78;
  color: rgba(200, 212, 235, 0.9);
}
.term-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.term-line.term-cmd .tp {
  color: var(--mustard);
  margin-right: 9px;
  font-weight: 700;
}
.term-line.term-out { color: rgba(160, 175, 205, 0.78); }
.term-line.term-ok { color: var(--ok-green); }
.term-cursor {
  display: inline-block;
  width: 7px; height: 14px;
  margin-left: 3px;
  background: var(--mustard);
  vertical-align: -2px;
  animation: term-blink 0.9s step-end infinite;
}
@keyframes term-blink { 50% { opacity: 0; } }

/* ---------- scroll cue on dark ---------- */
.hero-dark .scroll-cue-text { color: rgba(232, 237, 255, 0.5); }
.hero-dark .scroll-cue-mouse { border-color: rgba(255, 255, 255, 0.35); }
.hero-dark .scroll-cue-wheel { background: rgba(255, 255, 255, 0.65); }

/* ---------- dark hero → light section transition ---------- */
.hero-dark + .wave-divider { background: var(--hero-bg); }

/* =================================================================
   PROJECTS — Before → After comparison + impact chips (light bg)
   ================================================================= */
.project-ba {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.project-ba::after {
  content: '→';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  z-index: 2;
  box-shadow: var(--shadow-sm);
}
.ba-col { padding: 16px 18px 14px; }
.ba-before {
  background: rgba(232, 93, 74, 0.05);
  border-right: 1px dashed rgba(232, 93, 74, 0.32);
}
.ba-after { background: rgba(61, 122, 122, 0.06); }
.ba-col-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 10px;
}
.ba-before .ba-col-label { color: var(--coral); }
.ba-after .ba-col-label { color: var(--teal); }
.ba-col ul { list-style: none; }
.ba-col li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-500);
}
.ba-col li:last-child { margin-bottom: 0; }
.ba-before li::before,
.ba-after li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  font-size: 12px;
}
.ba-before li::before { content: '✗'; color: var(--coral); }
.ba-after li::before { content: '✓'; color: var(--teal); }

.project-impact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.impact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: var(--ink-900);
  color: #EDF2FF;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.impact-chip b {
  color: var(--mustard);
  font-size: 13px;
  font-weight: 700;
}

/* =================================================================
   v17 RESPONSIVE
   ================================================================= */
@media (max-width: 1024px) {
  .hero-metrics { grid-template-columns: repeat(2, 1fr); }
  .hm { border-left: none; border-top: none; }
  .hm:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.08); }
  .hm:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

@media (max-width: 880px) {
  .hero-terminal,
  .hero-terminal.reveal,
  .hero-terminal.reveal.revealed {
    position: static;
    width: 100%;
    max-width: 430px;
    margin: 22px auto 12px;
    transform: none;
  }
  .hero-dark .hero-right { flex-direction: column; }
  .hero-dark .hero-photo { width: min(290px, 70vw); }
  .hero-dark .hero-badge {
    width: 108px;
    height: 108px;
    right: 4%;
    bottom: auto;
    top: 10px;
  }
  .hero-dark .hero-badge-num { font-size: 34px; }
  .term-body { height: 150px; }
  .hero-status { margin-left: auto; margin-right: auto; }
  .hero-whoami { font-size: 12px; }
}

@media (max-width: 480px) {
  .hero-metrics { grid-template-columns: repeat(2, 1fr); }
  .hm-num { font-size: 24px; }
  .hero-dark .hero-title { font-size: clamp(34px, 10.5vw, 44px); }
  .project-ba::after { transform: translate(-50%, -50%) rotate(90deg); }
}

/* mobile: before/after stacks vertically */
@media (max-width: 640px) {
  .project-ba { grid-template-columns: 1fr; }
  .ba-before {
    border-right: none;
    border-bottom: 1px dashed rgba(232, 93, 74, 0.32);
  }
}

/* =================================================================
   v17 ACCESSIBILITY / REDUCED MOTION / PRINT
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-particles,
  .hero-glow { display: none; }
  .term-cursor,
  .status-dot { animation: none; }
  .hero-glow { opacity: 0; }
}

@media print {
  .hero-particles,
  .hero-glow,
  .hero-terminal { display: none; }
  .hero-dark { background: #fff; color: var(--ink-900); }
}


/* =================================================================
   v18 — PREMIUM POLISH LAYER (Design tokens · Type hierarchy · Depth · Motion)
   Appended override layer — cascade wins over v14/v17 rules.

   Recruiter-feedback pass #2:
     1. Consistent spacing scale + stronger typography hierarchy
     2. Visual depth: layered elevation, glass blur, gold glow
     3. Positioning-statement hero headline (one powerful line)
     4. Metric badges on every project card (impact scannable in 3s)
     5. Micro-interactions: card glow, reveal blur-in, button feedback
   Performance rules kept: transform-only motion, blur limited to
   nav bar + small glass panels, prefers-reduced-motion disables all.
   ================================================================= */

/* ---------- v18 tokens ---------- */
:root {
  /* 8pt spacing scale */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px;

  /* Elevation system — layered, never a single flat shadow */
  --elev-1: 0 1px 2px rgba(14,23,38,.05), 0 3px 10px rgba(14,23,38,.05);
  --elev-2: 0 4px 14px rgba(14,23,38,.07), 0 16px 36px rgba(14,23,38,.09);
  --elev-3: 0 10px 30px rgba(14,23,38,.11), 0 30px 70px rgba(14,23,38,.14);

  /* Gold glow family */
  --glow-gold-sm: 0 6px 20px rgba(228,167,48,.22);
  --glow-gold-md: 0 12px 36px rgba(228,167,48,.32);
  --ring-focus: 0 0 0 3px rgba(244,185,66,.55);

  /* Darker gold that passes contrast on cream/white cards */
  --gold-ink: #A8720E;
}

/* =================================================================
   GLOBAL — rhythm, hierarchy, focus
   ================================================================= */
body { line-height: 1.7; }
section[id] { scroll-margin-top: 88px; }

.btn:focus-visible,
.nav-menu a:focus-visible,
.nav-cta:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

/* =================================================================
   NAV — glass blur + depth + link underline grow
   ================================================================= */
.nav-menu a:not(.nav-cta) { position: relative; }
.nav-menu a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--mustard);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-menu a:not(.nav-cta):hover::after { width: calc(100% - 4px); }

.nav.scrolled {
  background: rgba(10, 15, 30, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(244, 185, 66, 0.22),
              0 18px 44px rgba(0, 0, 0, 0.30);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .nav.scrolled { background: rgba(10, 15, 30, 0.97); }
}

/* =================================================================
   HERO — positioning statement headline + aurora depth
   ================================================================= */
/* gold aurora wash behind the headline column */
.hero-dark .hero-left::before {
  content: '';
  position: absolute;
  top: -8%;
  left: -10%;
  width: 62%;
  height: 68%;
  background: radial-gradient(closest-side, rgba(244, 185, 66, 0.13), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
  z-index: -1;
}

.hero-dark .hero-tag {
  background: rgba(244, 185, 66, 0.08);
  border-color: rgba(244, 185, 66, 0.30);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
}
.hero-whoami { margin: 18px 0 12px; }
.hero-dark .hero-title {
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.hero-dark .hero-desc {
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 560px;
}

/* the payoff phrase — gold gradient + glow (split-text safe) */
.hero-line-gold {
  background: linear-gradient(100deg, #F4B942 0%, #FFDD8A 48%, #E5A730 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(244, 185, 66, 0.55))
          drop-shadow(0 10px 46px rgba(244, 185, 66, 0.30));
}
.hero-line-gold .w .wi {
  background: linear-gradient(100deg, #F4B942 0%, #FFDD8A 48%, #E5A730 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* glass panels: status bar + metric strip */
.hero-status {
  background: rgba(61, 220, 132, 0.05);
  border-color: rgba(61, 220, 132, 0.24);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hero-metrics {
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hm { padding: 20px 14px 18px; transition: background 0.3s ease; }
.hm:hover { background: rgba(244, 185, 66, 0.07); }
.hm-num {
  background: linear-gradient(180deg, #FFFFFF 20%, #B9CBF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* terminal: one more layer of gold bloom */
.hero-terminal {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(244, 185, 66, 0.08),
              0 0 90px rgba(244, 185, 66, 0.07);
}

/* =================================================================
   MOTION — reveal blur-in + springier rise (existing IO contract)
   ================================================================= */
.reveal {
  transform: translateY(26px) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 0.65s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.65s ease;
}
.reveal.revealed {
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* =================================================================
   PROJECTS — metric badges, impact lines, hover glow
   ================================================================= */
.projects-grid { gap: 28px; }
.project-card {
  gap: 18px;
  padding: 30px 30px 28px;
  border-radius: 20px;
  box-shadow: var(--elev-1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
.project-card:hover {
  transform: translateY(-8px);
  border-color: rgba(228, 167, 48, 0.55);
  box-shadow: var(--elev-3),
              0 0 0 1px rgba(228, 167, 48, 0.30),
              0 24px 60px rgba(228, 167, 48, 0.20);
}
.project-card::before {
  background: linear-gradient(140deg, rgba(244, 185, 66, 0.16) 0%, transparent 52%);
}
.project-title {
  font-size: clamp(20px, 1.6vw, 23px);
  font-weight: 800;
  letter-spacing: -0.022em;
}

/* dark metric badge — the scannable number on every card */
.project-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 10px 16px 9px;
  background: linear-gradient(160deg, #182338 0%, #0E1726 100%);
  border: 1px solid rgba(244, 185, 66, 0.30);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(14, 23, 38, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.project-card:hover .project-metric {
  transform: translateY(-2px);
  border-color: rgba(244, 185, 66, 0.58);
  box-shadow: 0 14px 34px rgba(14, 23, 38, 0.30),
              0 0 26px rgba(228, 167, 48, 0.22);
}
.pm-num {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mustard);
}
.pm-lbl {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(237, 242, 255, 0.62);
  white-space: nowrap;
}

/* one-line impact story under each title */
.project-impact-line {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-500);
  position: relative;
  z-index: 1;
}
.project-impact-line b {
  color: var(--gold-ink);
  font-weight: 800;
}

/* chips get tactile feedback */
.project-stack { margin-top: 2px; }
.stack-chip {
  transition: background 0.2s ease, transform 0.2s ease,
              box-shadow 0.2s ease, border-color 0.2s ease;
}
.stack-chip:hover {
  background: var(--mustard-soft);
  border-color: rgba(228, 167, 48, 0.45);
  box-shadow: var(--glow-gold-sm);
}
.impact-chip {
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.impact-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 185, 66, 0.45);
  box-shadow: 0 6px 18px rgba(228, 167, 48, 0.28);
}

/* =================================================================
   BUTTONS — press feedback + gold hover glow
   ================================================================= */
.btn:active {
  transform: translateY(1px) scale(0.965);
  transition-duration: 0.08s;
}
.hero-dark .btn-primary:hover { box-shadow: var(--glow-gold-md); }
.hero-dark .btn-gold:hover {
  box-shadow: 0 10px 34px rgba(244, 185, 66, 0.55);
}

/* =================================================================
   ABOUT — positioning pull-quote (brand identity)
   ================================================================= */
.position-quote {
  position: relative;
  max-width: 780px;
  padding: 24px 30px 22px 60px;
  margin-bottom: clamp(28px, 4vw, 44px);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-left: 4px solid var(--mustard);
  border-radius: 16px;
  box-shadow: var(--elev-1);
  font-family: var(--display);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.position-quote::before {
  content: '\201C';
  position: absolute;
  left: 16px;
  top: 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 54px;
  line-height: 1;
  color: var(--mustard);
}
.position-quote .pq-who {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

/* =================================================================
   SECTION RHYTHM — consistent head spacing + label refinement
   ================================================================= */
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-sub { line-height: 1.7; }
.section-label::before {
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
}
.section-title { letter-spacing: -0.04em; }

/* =================================================================
   v18 RESPONSIVE
   ================================================================= */
@media (max-width: 880px) {
  .hero-dark .hero-title {
    font-size: clamp(30px, 6.2vw, 40px);
    line-height: 1.16;
  }
  .hero-dark .hero-left::before { display: none; }
  .project-metric { padding: 8px 13px 7px; }
  .pm-num { font-size: 20px; }
  .pm-lbl { font-size: 8.5px; }
  .position-quote {
    padding: 20px 22px 18px 48px;
    font-size: 16.5px;
  }
  .position-quote::before { font-size: 42px; left: 12px; top: 14px; }
}

@media (max-width: 640px) {
  /* statement flows naturally on small screens */
  .hero-title br { display: none; }
  .hero-dark .hero-title {
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.18;
  }
}

@media (max-width: 480px) {
  .project-card { padding: 24px 20px 22px; }
  .project-head { gap: 10px; }
  .pm-num { font-size: 18px; }
  .hm-num { font-size: 22px; }
  .hm { padding: 16px 10px 14px; }
}

/* =================================================================
   v18 ACCESSIBILITY / REDUCED MOTION / PRINT
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.revealed {
    filter: none;
    transform: none;
  }
  .nav.scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(10, 15, 30, 0.98);
  }
  .hero-metrics,
  .hero-status {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hm:hover,
  .project-card:hover,
  .project-metric,
  .impact-chip:hover { transform: none; box-shadow: none; }
}

@media print {
  .reveal,
  .reveal.revealed { opacity: 1; transform: none; filter: none; }
  .hero-metrics,
  .hero-status,
  .nav.scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* =================================================================
   v19 — THE "9.8" PASS
   1. Hero: unforgettable one-liner + signature identity line
   2. Depth: glass layers, gradient washes, 3-level glow hierarchy
   3. Projects: stat rows (speed ↑ / cost ↓ / reliability ↑) on
      every card + aggregate proof strip
   4. Micro-interactions: CTA glow, stat pop, stagger reveals
   5. Brand: "the 2 a.m. engineer" signature system
   Layered above v18. PHP untouched — presentation only.
   ================================================================= */

/* ---------- v19 tokens: glow hierarchy ---------- */
:root {
  --glow-l1: 0 0 22px rgba(244, 185, 66, 0.10);   /* ambient   */
  --glow-l2: 0 8px 28px rgba(244, 185, 66, 0.24);  /* component */
  --glow-l3: 0 14px 44px rgba(244, 185, 66, 0.45); /* focal     */
  --stat-up:   #1E9E6A;   /* ↑ on light cards */
  --stat-up-h: #3DDC84;   /* ↑ on dark glass  */
}

/* =================================================================
   1 · HERO — killer line, signature, deeper atmosphere
   ================================================================= */
.hero-dark .hero-mesh {
  background:
    radial-gradient(circle at 14% 22%, rgba(244, 185, 66, 0.14) 0%, transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(111, 215, 255, 0.11) 0%, transparent 40%),
    radial-gradient(circle at 65% 10%, rgba(232, 93, 74, 0.07) 0%, transparent 30%),
    radial-gradient(circle at 28% 92%, rgba(99, 102, 241, 0.10) 0%, transparent 44%),
    linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-bg-2) 100%);
  box-shadow: inset 0 -170px 220px -80px rgba(4, 8, 18, 0.92);
}

/* signature identity line — the personal brand mark */
.hero-signature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 20px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
}
.hero-signature .sig-rule {
  flex-shrink: 0;
  width: 38px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mustard), rgba(244, 185, 66, 0));
  box-shadow: 0 0 14px rgba(244, 185, 66, 0.55);
}
.hero-signature .sig-name {
  color: #EDF2FF;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.hero-signature .sig-tag {
  color: var(--mustard);
  font-style: italic;
  text-shadow: 0 0 18px rgba(244, 185, 66, 0.40);
}

/* direction arrows on the hero metric strip — scan in 0.5s */
.hero-dark .hm { position: relative; }
.hero-dark .hm-num { display: inline-block; }
.hm-dir {
  display: inline-block;
  margin-right: 7px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  vertical-align: 0.30em;
  color: var(--mustard);
  text-shadow: 0 0 14px rgba(244, 185, 66, 0.50);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hm-dir.up { color: var(--stat-up-h); text-shadow: 0 0 14px rgba(61, 220, 132, 0.50); }
.hm:hover .hm-dir { transform: scale(1.22); }

/* terminal + badge become true glass over the particle field */
.hero-terminal {
  background: rgba(13, 20, 37, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
.hero-terminal:hover {
  border-color: rgba(244, 185, 66, 0.28);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(244, 185, 66, 0.16),
              0 0 110px rgba(244, 185, 66, 0.12);
}
.hero-dark .hero-badge {
  background: rgba(16, 24, 44, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* CTA glow hierarchy — gold button is the focal point */
.hero-dark .btn-gold {
  box-shadow: 0 6px 24px rgba(244, 185, 66, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.hero-dark .btn-gold:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 46px rgba(244, 185, 66, 0.58),
              0 0 78px rgba(244, 185, 66, 0.24),
              inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.hero-dark .btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--glow-l2), 0 12px 32px rgba(0, 0, 0, 0.35);
}
.hero-dark .btn-ghost:hover { transform: translateY(-2px); }
.nav-cta:hover { box-shadow: 0 8px 26px rgba(244, 185, 66, 0.35); }

/* section-label dash draws itself after the head reveals */
.section-label::before {
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.section-head:not(.revealed) .section-label::before { width: 0; }

/* subtle gradient washes give light sections atmosphere */
#about {
  background-image:
    radial-gradient(640px 320px at 6% 0%, rgba(244, 185, 66, 0.07), transparent 62%),
    radial-gradient(520px 280px at 96% 18%, rgba(47, 164, 160, 0.06), transparent 62%);
}
#projects {
  background-image:
    radial-gradient(720px 340px at 92% 0%, rgba(232, 93, 74, 0.055), transparent 62%),
    radial-gradient(560px 300px at 4% 26%, rgba(244, 185, 66, 0.06), transparent 62%);
}
#skills {
  background-image:
    radial-gradient(620px 320px at 90% 12%, rgba(244, 185, 66, 0.06), transparent 62%),
    radial-gradient(500px 260px at 6% 44%, rgba(99, 102, 241, 0.05), transparent 62%);
}

/* =================================================================
   2 · PROJECTS — proven, not explained
   ================================================================= */
#projects .section-head { margin-bottom: 26px; }

/* aggregate proof strip — the section-level scoreboard */
.proof-strip {
  position: relative;
  display: grid;
  grid-template-columns: 118px repeat(4, 1fr);
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(120deg, #131C31 0%, #0E1726 58%, #101B33 100%);
  border: 1px solid rgba(244, 185, 66, 0.26);
  box-shadow: 0 22px 54px rgba(14, 23, 38, 0.26),
              0 0 0 1px rgba(244, 185, 66, 0.05),
              inset 0 1px 0 rgba(255, 255, 255, 0.09);
  margin-bottom: clamp(28px, 4vw, 42px);
}
.proof-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(244, 185, 66, 0.13), transparent 42%),
    radial-gradient(circle at 90% 100%, rgba(111, 215, 255, 0.10), transparent 46%);
  pointer-events: none;
}
.proof-strip .ps-cell {
  position: relative;
  z-index: 1;
  padding: 18px 12px 15px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.25s ease;
}
.proof-strip .ps-cell:first-child { border-left: none; }
.proof-strip .ps-cell:hover { background: rgba(244, 185, 66, 0.06); }
.ps-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(244, 185, 66, 0.08);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mustard);
}
.ps-head .ps-hi { opacity: 0.55; }
.ps-k {
  display: block;
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--mustard);
  text-shadow: 0 0 22px rgba(244, 185, 66, 0.35);
}
.ps-k .dir { font-size: 0.72em; margin-right: 2px; }
.ps-v {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(237, 242, 255, 0.62);
}

/* per-card stat rows — speed ↑ / cost ↓ / reliability ↑ */
.pm-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 23, 38, 0.05) 0%, rgba(14, 23, 38, 0.02) 100%);
  border: 1px solid rgba(14, 23, 38, 0.07);
}
.pm-row .pm-stat {
  position: relative;
  padding: 13px 6px 11px;
  text-align: center;
  transition: background 0.25s ease;
}
.pm-row .pm-stat + .pm-stat { border-left: 1px solid rgba(14, 23, 38, 0.08); }
.pm-row .pm-stat:hover { background: rgba(244, 185, 66, 0.10); }
.pm-row .ps-arrow {
  display: inline-block;
  margin-right: 4px;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1;
  vertical-align: 0.12em;
  color: var(--stat-up);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pm-row .ps-arrow.down { color: var(--gold-ink); }
.pm-row .ps-arrow.ok   { color: #0E8A6D; }
.pm-row .pm-stat:hover .ps-arrow { transform: scale(1.3); }
.pm-row .ps-val {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-900);
}
.pm-row .ps-lbl {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--ink-500);
}

/* stat cells cascade in as each card reveals */
.pm-row .pm-stat {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease;
}
.project-card.revealed .pm-stat { opacity: 1; transform: translateY(0); }
.project-card.revealed .pm-stat:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s; }
.project-card.revealed .pm-stat:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s; }
.proof-strip .ps-cell {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease;
}
.proof-strip.revealed .ps-cell { opacity: 1; transform: translateY(0); }
.proof-strip.revealed .ps-cell:nth-child(3) { transition-delay: 0.08s, 0.08s, 0s; }
.proof-strip.revealed .ps-cell:nth-child(4) { transition-delay: 0.16s, 0.16s, 0s; }
.proof-strip.revealed .ps-cell:nth-child(5) { transition-delay: 0.24s, 0.24s, 0s; }

/* card glass edge + gold ring glow on hover */
.project-card {
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.project-card:hover {
  box-shadow: var(--elev-3),
              0 0 0 1px rgba(228, 167, 48, 0.38),
              0 24px 58px rgba(228, 167, 48, 0.20),
              inset 0 1px 0 #FFFFFF;
}

/* about quote gets the same glass edge */
.position-quote {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFDF6 100%);
  box-shadow: var(--elev-1), inset 0 1px 0 #FFFFFF;
}

/* =================================================================
   3 · FOOTER — signature sign-off
   ================================================================= */
.footer-signature {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(14, 23, 38, 0.18);
}
.footer-signature .fs-script {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--gold-ink);
}
.footer-signature .fs-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(14, 23, 38, 0.60);
}

/* =================================================================
   v19 RESPONSIVE
   ================================================================= */
@media (max-width: 1024px) {
  .proof-strip { grid-template-columns: 96px repeat(4, 1fr); }
}
@media (max-width: 880px) {
  .proof-strip { grid-template-columns: repeat(2, 1fr); }
  .proof-strip .ps-head {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 10px;
    padding: 10px 12px;
  }
  .proof-strip .ps-cell { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .proof-strip .ps-cell:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.07); }
  .hero-signature { font-size: 12px; }
}
@media (max-width: 640px) {
  .pm-row .ps-val { font-size: 16px; }
  .pm-row .ps-lbl { font-size: 8.5px; }
  .pm-row .pm-stat { padding: 11px 4px 9px; }
  .hero-signature { gap: 9px; }
  .hero-signature .sig-rule { width: 26px; }
}
@media (max-width: 480px) {
  .proof-strip .ps-cell { padding: 14px 8px 12px; }
  .ps-k { font-size: 18px; }
  .footer-signature .fs-script { font-size: 22px; }
}

/* =================================================================
   v19 ACCESSIBILITY / REDUCED MOTION / PRINT
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hm-dir, .pm-row .ps-arrow { transition: none; }
  .pm-row .pm-stat, .proof-strip .ps-cell {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-terminal { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--term-bg); }
  .hero-dark .hero-badge { -webkit-backdrop-filter: none; backdrop-filter: none; background: #10182C; }
  .section-label::before { transition: none; }
  .section-head:not(.revealed) .section-label::before { width: 24px; }
}
@media print {
  .pm-row .pm-stat, .proof-strip .ps-cell { opacity: 1 !important; transform: none !important; }
  .hero-terminal, .hero-dark .hero-badge { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .section-head:not(.revealed) .section-label::before { width: 24px; }
}

/* =================================================================
   v19.1 — hard horizontal guard (no sideways scroll on any device;
   decorative parallax shapes can never widen the page)
   ================================================================= */
html { overflow-x: hidden; overflow-x: clip; }

/* =================================================================
   v20 — ENTERPRISE FINAL · dynamic color background layer
   Scroll-linked hue drift on section washes + breathing gradients
   + living hero aurora. All GPU-cheap (background/filter only),
   reduced-motion safe, no layout thrash. Parallax itself was already
   comprehensive (7-layer mouse + scroll since v16.1) — this layer
   adds the color dimension.
   ================================================================= */

/* ---------- living hero aurora: slow hue + brightness drift ---------- */
@keyframes v20-aurora-drift {
  0%   { filter: hue-rotate(0deg)   saturate(1.00); }
  50%  { filter: hue-rotate(9deg)   saturate(1.08); }
  100% { filter: hue-rotate(0deg)   saturate(1.00); }
}
.hero-dark .hero-mesh {
  animation: v20-aurora-drift 16s ease-in-out infinite;
}

/* ---------- scroll-linked washes: hue follows the journey ----------
   Each light section owns a --wash-h hue that JS lerps on scroll.
   Fallback values = the static v19 hues if JS never runs. */
#about {
  --wash-a: 40;    /* gold  */
  --wash-b: 172;   /* teal  */
  background-image:
    radial-gradient(640px 320px at 6% 0%,  hsla(var(--wash-a, 40),  88%, 55%, 0.07), transparent 62%),
    radial-gradient(520px 280px at 96% 18%, hsla(var(--wash-b, 172), 45%, 40%, 0.06), transparent 62%);
  background-repeat: no-repeat;
}
#projects {
  --wash-a: 6;     /* coral */
  --wash-b: 42;    /* gold  */
  background-image:
    radial-gradient(720px 340px at 92% 0%,  hsla(var(--wash-a, 6),  72%, 55%, 0.055), transparent 62%),
    radial-gradient(560px 300px at 4% 26%,  hsla(var(--wash-b, 42), 88%, 55%, 0.06), transparent 62%);
  background-repeat: no-repeat;
}
#skills {
  --wash-a: 42;    /* gold  */
  --wash-b: 235;   /* indigo */
  background-image:
    radial-gradient(620px 320px at 90% 12%, hsla(var(--wash-a, 42),  88%, 55%, 0.06), transparent 62%),
    radial-gradient(500px 260px at 6% 44%,  hsla(var(--wash-b, 235), 60%, 60%, 0.05), transparent 62%);
  background-repeat: no-repeat;
}

/* ---------- breathing: both wash layers drift position very slowly ----------
   Keyframes carry TWO positions (one per background-image layer). */
@keyframes v20-breathe {
  0%, 100% { background-position: 0% 0%, 100% 0%; }
  50%      { background-position: 26px -20px, calc(100% - 30px) 22px; }
}
#about, #projects, #skills {
  animation: v20-breathe 22s ease-in-out infinite;
  background-position: 0% 0%, 100% 0%;
}

/* ---------- proof strip gets a slow specular sheen ---------- */
@keyframes v20-sheen {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  60%  { transform: translateX(240%)  skewX(-18deg); }
  100% { transform: translateX(240%)  skewX(-18deg); }
}
.proof-strip { position: relative; }
.proof-strip .ps-sheen {
  position: absolute;
  top: 0; left: 0;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  pointer-events: none;
  z-index: 2;
  animation: v20-sheen 9s ease-in-out infinite;
}

/* ---------- parallax companion: soften blob edges on dark ---------- */
.hero-dark .hero-blob {
  animation: v20-blob-breathe 12s ease-in-out infinite;
}
@keyframes v20-blob-breathe {
  0%, 100% { opacity: 0.20; }
  50%      { opacity: 0.30; }
}

/* ---------- v20 RESPONSIVE / A11Y / PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-dark .hero-mesh,
  #about, #projects, #skills,
  .hero-dark .hero-blob,
  .proof-strip .ps-sheen {
    animation: none !important;
  }
}
@media print {
  #about, #projects, #skills { background-image: none !important; animation: none !important; }
  .proof-strip .ps-sheen { display: none !important; }
}

/* =================================================================
   v21 — THE 10/10 PASS · global pass
   1. Dynamic accent: --accent-h registered via @property so the whole
      UI (progress bar, labels, spotlights, nav glow, selection) morphs
      hue as the visitor travels hero → contact. JS AccentDirector
      retargets it per section; the transition does the easing.
   2. Living hero: infra-topology canvas mask + floating glass status
      chips (new depth layers between mesh and content) + animated gold
      sweep on the killer lines.
   3. Micro-interactions: cursor spotlight on cards / proof strip /
      terminal, aura on the gold CTA, nav letterspacing + glow.
   4. Scroll choreography: --vel (scroll velocity) feeds hero grid
      intensity; custom scrollbar + selection in brand accent.
   All effects are paint/composite-only, reduced-motion + print safe.
   ================================================================= */

/* ---------- 1. dynamic accent property (animatable custom prop) ---------- */
@property --accent-h {
  syntax: '<number>';
  inherits: true;
  initial-value: 42;
}
html {
  --accent-h: 42;
  transition: --accent-h 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* v21: velocity-reactive hero grid + brand scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #E5A730 #10182B;
}

/* ---------- 2. scroll progress bar becomes the accent beacon ---------- */
.scroll-progress { height: 4px; }
.scroll-progress-fill {
  background: linear-gradient(90deg,
    hsl(calc(var(--accent-h) - 26) 82% 50%) 0%,
    hsl(var(--accent-h) 90% 58%) 45%,
    hsl(calc(var(--accent-h) + 38) 74% 55%) 100%);
  box-shadow:
    0 0 14px hsla(var(--accent-h), 92%, 62%, 0.60),
    0 0 4px  hsla(var(--accent-h), 92%, 70%, 0.85);
}

/* ---------- 3. section labels pick up the journey hue ---------- */
.section-label { color: hsl(var(--accent-h) 48% 36%); }
.section.mustard .section-label { color: hsl(var(--accent-h) 42% 26%); opacity: 0.78; }

/* ---------- 4. brand scrollbar + selection ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #10182B; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E5A730 0%, #C98F1F 55%, #3D7A7A 100%);
  border-radius: 8px;
  border: 2px solid #10182B;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #F4B942 0%, #E5A730 55%, #4E9090 100%);
}
::selection {
  background: hsla(var(--accent-h), 88%, 55%, 0.32);
  color: inherit;
}

/* ---------- 5. living hero: infra-topology canvas ---------- */
.hero-infra {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 84% 88% at 58% 46%, #000 40%, transparent 86%);
  mask-image: radial-gradient(ellipse 84% 88% at 58% 46%, #000 40%, transparent 86%);
}

/* ---------- 6. floating glass status chips (new depth layers) ----------
   Wrapper .hf carries the parallax translate (--px/--py from the v14
   engine, now inertia-eased); the inner .hf-i bobs on its own clock. */
.hero-floats {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hf {
  position: absolute;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.hf-1 { top: 16%; left: 5%; }
.hf-2 { top: 8%;  right: 21%; }
.hf-3 { bottom: 17%; right: 7%; }
.hf-4 { bottom: 9%; left: 13%; }
.hf-i {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(226, 234, 255, 0.78);
  padding: 7px 11px 6px;
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(19, 28, 48, 0.62) 0%, rgba(11, 18, 33, 0.50) 100%);
  border: 1px solid rgba(244, 185, 66, 0.26);
  box-shadow:
    0 8px 22px rgba(4, 8, 18, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: v21-bob 9s ease-in-out infinite;
}
@supports (backdrop-filter: blur(6px)) {
  .hf-i {
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }
}
.hf-i::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3DDC97;
  box-shadow: 0 0 8px rgba(61, 220, 151, 0.9);
  animation: v21-dot 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
.hf-2 .hf-i::before { background: #F4B942; box-shadow: 0 0 8px rgba(244, 185, 66, 0.9); }
.hf-3 .hf-i::before { background: #7EE0FF; box-shadow: 0 0 8px rgba(126, 224, 255, 0.9); }
.hf-4 .hf-i::before { background: #E85D4A; box-shadow: 0 0 8px rgba(232, 93, 74, 0.9); }
.hf-1 .hf-i { animation-duration: 8.5s;  animation-delay: -2.1s; }
.hf-2 .hf-i { animation-duration: 10.5s; animation-delay: -5.4s; }
.hf-3 .hf-i { animation-duration: 9.5s;  animation-delay: -3.8s; }
.hf-4 .hf-i { animation-duration: 11.5s; animation-delay: -7.2s; }
@keyframes v21-bob {
  0%, 100% { transform: translate3d(0, -6px, 0) rotate(-1.2deg); }
  50%      { transform: translate3d(0, 7px, 0) rotate(1.4deg); }
}
@keyframes v21-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ---------- 7. killer lines: animated gold sweep ---------- */
.hero-line-gold,
.hero-line-gold .w .wi {
  background: linear-gradient(100deg,
    #E5A730 0%, #F4B942 30%, #FFE9A8 50%, #F4B942 70%, #E5A730 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: v21-gold-sweep 6.5s ease-in-out infinite;
}
@keyframes v21-gold-sweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero-title { transform-origin: 50% 62%; }

/* ---------- 8. micro-interactions (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {

  /* card spotlight — extends the existing ::before overlay */
  .project-card::before {
    background:
      radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%),
        hsla(var(--accent-h), 88%, 62%, 0.14), transparent 46%),
      linear-gradient(140deg, rgba(244, 185, 66, 0.16) 0%, transparent 52%);
    opacity: 0;
  }
  .project-card:hover::before { opacity: 1; }

  /* proof strip spotlight — extends the existing washes */
  .proof-strip::before {
    background:
      radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%),
        hsla(var(--accent-h), 90%, 62%, 0.10), transparent 48%),
      radial-gradient(circle at 10% 0%, rgba(244, 185, 66, 0.13), transparent 42%),
      radial-gradient(circle at 90% 100%, rgba(111, 215, 255, 0.10), transparent 46%);
  }

  /* gold CTA: light follows the cursor */
  .btn-gold { position: relative; }
  .btn-gold::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 35%),
      rgba(255, 240, 190, 0.35), transparent 62%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
  }
  .btn-gold:hover::after { opacity: 1; }

  /* terminal: cyan sheen tracks the pointer */
  .hero-terminal::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
      rgba(126, 224, 255, 0.10), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .hero-terminal:hover::after { opacity: 1; }

  /* nav links breathe on hover */
  .nav-menu a {
    transition:
      opacity 0.2s ease,
      color 0.2s ease,
      letter-spacing 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      text-shadow 0.35s ease;
  }
  .nav-menu a:hover {
    letter-spacing: 0.05em;
    text-shadow: 0 0 16px hsla(var(--accent-h), 92%, 62%, 0.5);
  }
}

/* ---------- 9. scroll-velocity-reactive hero grid ---------- */
.hero-dark .hero-grid {
  opacity: calc(0.5 + var(--vel, 0) * 0.5);
  transition: opacity 0.18s linear;
}

/* ---------- 10. photo + terminal glass blend (VLM polish pass) ----------
   Soften the photo's rectangular read so it speaks the same glass
   language as the chips / terminal; lift terminal output contrast. */
.hero-dark .hero-photo {
  border-radius: 26px;
  border: 1px solid rgba(244, 185, 66, 0.24);
  box-shadow:
    0 40px 90px -20px rgba(0, 0, 0, 0.65),
    0 0 70px rgba(244, 185, 66, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.hero-dark .hero-photo-frame {
  border-radius: 17px;
  border: 1.5px solid rgba(244, 185, 66, 0.34);
}
.hero-dark .hero-photo img {
  border-radius: 25px;
}
.term-line.term-out { color: rgba(178, 192, 222, 0.92); }

/* ---------- v21 RESPONSIVE / A11Y / PRINT ---------- */
@media (max-width: 720px) {
  .hero-floats { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { transition: none !important; }
  .hero-line-gold,
  .hero-line-gold .w .wi,
  .hf-i,
  .hf-i::before { animation: none !important; }
  .hero-dark .hero-grid { opacity: 0.55; transition: none; }
  .hero-infra { opacity: 0.85; }
  .nav-menu a,
  .btn-gold::after,
  .hero-terminal::after,
  .project-card::before { transition: none !important; }
}
@media print {
  .hero-infra,
  .hero-floats { display: none !important; }
}

/* ============================================================================
   v3 ENTERPRISE FORM/UI LAYER — appended 2026-09-02
   1. Professional button state machine (idle / loading / success / error)
   2. Inline field-level validation UI
   3. Status banner with icon (success / warning / error)
   4. JD file pill (selected-file display + remove)
   5. Label hints + accessibility polish
   These rules live AFTER the base styles so equal-specificity conflicts
   resolve in favor of the newer, refined states.
   ============================================================================ */

/* ---------- 1. Button state machine ---------- */
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(253, 251, 247, 0.35);
  border-top-color: #FDFBF7;
  border-radius: 50%;
  flex-shrink: 0;
  animation: btnSpin 0.7s linear infinite;
}
.btn-primary .btn-spinner {
  border-color: rgba(253, 251, 247, 0.30);
  border-top-color: #FDFBF7;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Loading: swap the send icon for the spinner, lock the button */
.btn.is-loading {
  cursor: progress;
  transform: none !important;
  pointer-events: none;
}
.btn.is-loading .btn-icon { display: none; }
.btn.is-loading .btn-spinner { display: inline-block; }
.btn.is-loading { opacity: 0.92; }

/* Success: calm teal confirmation */
.btn.is-success {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #FDFBF7 !important;
  pointer-events: none;
  transform: none !important;
  box-shadow: 0 6px 18px rgba(61, 122, 122, 0.35) !important;
}
.btn.is-success .btn-icon { display: none; }
.btn.is-success .btn-shine { display: none; }

/* Error: coral nudge — clickable so the user can retry immediately */
.btn.is-error {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #FDFBF7 !important;
  box-shadow: 0 6px 18px rgba(232, 93, 74, 0.35) !important;
}
.btn.is-error .btn-icon { display: inline-block; }

/* Disabled (incl. during flight) — the old build had NO disabled style,
   so a mid-send button looked fully interactive and invited double submits */
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none !important;
  box-shadow: none !important;
}
.btn:disabled .btn-shine { display: none; }
.btn:focus-visible {
  outline: 3px solid var(--mustard);
  outline-offset: 3px;
}

/* ---------- 2. Inline field-level validation ---------- */
.field-error {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--coral);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fieldErrorIn 0.22s ease both;
}
.field-error::before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--coral-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E85D4A' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
}
@keyframes fieldErrorIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-input.field-invalid,
.form-select.field-invalid,
.form-textarea.field-invalid,
.form-file.field-invalid {
  border-color: var(--coral) !important;
  background: rgba(232, 93, 74, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(232, 93, 74, 0.12);
}
.form-input.field-invalid:focus,
.form-textarea.field-invalid:focus {
  box-shadow: 0 0 0 3px rgba(232, 93, 74, 0.20);
}

/* ---------- 3. Status banner ---------- */
.form-status {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
}
.form-status.show { display: flex; animation: fieldErrorIn 0.25s ease both; }
.form-status svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-status.success {
  background: var(--teal-soft);
  border-color: rgba(61, 122, 122, 0.25);
  color: var(--teal);
}
.form-status.warning {
  background: var(--mustard-soft);
  border-color: rgba(229, 167, 48, 0.4);
  color: #8A6414;
}
.form-status.warning svg { color: var(--mustard-deep); }
.form-status.error {
  background: var(--coral-soft);
  border-color: rgba(232, 93, 74, 0.3);
  color: #B23B2C;
}
.form-status .status-ref {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0.85;
  white-space: nowrap;
}

/* ---------- 4. JD file pill ---------- */
.jd-file-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--teal-soft);
  border: 1px solid rgba(61, 122, 122, 0.3);
  border-radius: 999px;
  font-size: 12.5px;
  animation: fieldErrorIn 0.25s ease both;
}
.jd-file-pill[hidden] { display: none; }
.jd-file-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--teal);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jd-file-name {
  flex: 1;
  min-width: 0;
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jd-file-clear {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(26, 35, 50, 0.08);
  color: var(--navy);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.jd-file-clear:hover {
  background: var(--coral);
  color: #fff;
  transform: scale(1.08);
}
.jd-file-clear:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* ---------- 5. Label hints ---------- */
.form-label .label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--slate-2);
  margin-left: 6px;
  font-size: 11px;
}

/* ---------- 6. Small-screen alignment safety ---------- */
@media (max-width: 560px) {
  .form-status.show { align-items: flex-start; }
  .form-status { font-size: 13px; }
  .jd-file-pill { flex-wrap: wrap; }
  .jd-file-name { flex-basis: calc(100% - 60px); }
}

/* ---------- 7. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.2s; }
  .field-error, .form-status.show, .jd-file-pill { animation: none; }
  .btn, .btn:disabled, .jd-file-clear { transition: none !important; }
}

/* ---------- 8. JD file input — branded picker (was native "Choose File") ----------
   The VLM review flagged the OS-default file button as the one element
   breaking the design language. ::file-selector-button styles the native
   control directly (Chrome/Edge/Firefox) with a -webkit- fallback for
   older Safari — no DOM changes, full keyboard/mobile accessibility. */
.form-file {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1.5px dashed rgba(26, 35, 50, 0.28);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  line-height: 1;
}
.form-file:hover {
  border-color: var(--mustard-deep);
  background: rgba(244, 185, 66, 0.07);
}
.form-file:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.28);
  outline: none;
}
.form-file::file-selector-button {
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--cream);
  border-radius: 999px;
  padding: 9px 18px;
  margin-right: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.form-file::file-selector-button:hover {
  background: var(--accent-coral);
  border-color: var(--accent-coral);
  transform: translateY(-1px);
}
.form-file::file-selector-button:active {
  transform: translateY(0);
}
/* Older Safari/WebKit */
.form-file::-webkit-file-upload-button {
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--cream);
  border-radius: 999px;
  padding: 9px 18px;
  margin-right: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.form-file::-webkit-file-upload-button:hover {
  background: var(--accent-coral);
  border-color: var(--accent-coral);
}
/* Filename text next to the picker button */
.form-file::before {
  content: 'PDF / DOC / DOCX';
  font-size: 11.5px;
  color: var(--slate);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---------- 9. Floating resume pill — smooth fade when form is in view ---- */
.resume-float {
  transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.resume-float, .ijp-mobile-bar {
  transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.2s ease, background 0.2s ease;
}