/* =========================
   styles.css
========================= */

:root {
  /* Base colors */
  --bg: #06070f;
  --deep: 0;
  --deepBg: #05060b;
  --glass: rgba(255, 255, 255, 0.08);
  --glass2: rgba(255, 255, 255, 0.06);
  --muted: rgba(255, 255, 255, 0.64);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
  --stroke: rgba(255, 255, 255, 0.14);
  --text: rgba(255, 255, 255, 0.92);

  /* Accents */
  --accent: #8899ff;
  --accent2: #6b85ff;

  /* Radii */
  --r1: 22px;
  --r2: 16px;
  --rimReveal: clamp(110px, 13vh, 160px);

  /* Typography */
  --font:
    "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Layout + controls */
  --cscroll-fill: var(--accent2);
  --cscroll-glow: color-mix(in srgb, var(--accent2) 55%, transparent);
  --cscroll-hit: 22px;
  --cscroll-pad: 10px;
  --cscroll-rail: 6px;
  --cscroll-track: rgba(255, 255, 255, 0.12);
  --navH: 92px;
  --pill-w: 0px;
  --pill-x: 0px;

  /* Other */
  --contact-red: rgba(255, 90, 20, 1);
  --hot: #4b69ff;
  --hot2: #ff5a14;
  --hotGlow: rgba(75, 105, 255, 0.22);
  --hotStroke: rgba(75, 105, 255, 0.28);
  --planetSize: clamp(1400px, 150vw, 2400px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navH) + 12px);
}

section[id] {
  scroll-margin-top: calc(var(--navH) + 24px);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  /* clip instead of hidden — same visual result but does NOT create a new
     scroll container, so position:sticky keeps working throughout the page */
  overflow-x: clip;
  overscroll-behavior-y: none; /* prevent pull-to-refresh on mobile */
}

/* ── Atmospheric background layer — fixed so it never creates scroll seams ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 25%  20%, rgba(155, 140, 255, 0.055) 0%, transparent 65%),
    radial-gradient(ellipse 70% 45% at 75%  55%, rgba(68,  240, 177, 0.035) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50%  85%, rgba(75,  105, 255, 0.045) 0%, transparent 65%);
}




/* =========================
   Custom Page Scrollbar (progress rail)
========================= */

/* Native scrollbar hidden — crRail handles navigation */
html {
  scrollbar-width: none;
}
::-webkit-scrollbar {
  width: 0;
  display: none;
}


a {
  text-decoration: none;
  color: inherit;
}

button,
input {
  font-family: inherit;
}

/* Background layers (clean baseline) */

/* overlay tint should be BEHIND the net */

.bgOverlay {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
}

/* =========================
   HERO (Parth-style full bleed)
========================= */

#hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  min-height: 100svh;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  background: #000;
  overflow: hidden;
}

/* Make the hero share the same grain as the rest of the page (removes the seam) */

#hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
  content: "";
}

/* Smooth hero -> page blend — sits above heroCanvas (z:1), below heroContent (z:3) */

#hero::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 2;
  /* Gentler fade — lets more particles breathe at the lower edge,
     so the hero field flows into the showcase canvas rather than cutting hard. */
  height: clamp(340px, 48vh, 580px);
  background: linear-gradient(
    to bottom,
    rgba(6, 7, 17, 0)    0%,
    rgba(6, 7, 17, 0.12) 34%,
    rgba(6, 7, 17, 0.46) 58%,
    rgba(6, 7, 17, 0.82) 78%,
    #060711               100%
  );
  pointer-events: none;
  content: "";
}

.heroInner {
  position: relative;
  z-index: 3;
  max-width: 980px;
  padding: 110px 18px 0;
  text-align: center;
}

/* Disable CSS stars – use canvas stars only */

@keyframes starDrift {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(24px);
  }
}

/* grain stays on top */

/* deep dark layer (above Vanta, below grain) */

.bgDeep {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      1200px 700px at 20% 10%,
      rgba(122, 168, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      1000px 620px at 80% 25%,
      rgba(155, 140, 255, 0.1),
      transparent 62%
    ),
    radial-gradient(
      900px 600px at 55% 85%,
      rgba(75, 105, 255, 0.05),
      transparent 62%
    ),
    radial-gradient(
      700px 500px at 35% 70%,
      rgba(105, 96, 255, 0.045),
      transparent 64%
    ),
    linear-gradient(var(--deepBg), var(--deepBg));
  opacity: var(--deep);
  pointer-events: none;
  transition: opacity 120ms linear;
}

body[data-bg="stars"] {
  background: #000;
  --bg: #000;
  --deepBg: #000;
}

body[data-bg="stars"] #hero {
  background: transparent;
}

body[data-bg="stars"] .bgDeep {
  display: none !important;
}

/* Fade Vanta net away as deep layer fades in */

#bg canvas {
  opacity: calc(1 - (var(--deep) * 0.92));
  transition: opacity 120ms linear;
}

/* Optional: make the grain slightly stronger on deep */

.bgNoise {
  position: fixed;
  inset: -35%;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  opacity: calc(0.08 + (var(--deep) * 0.03));
  pointer-events: none;
  transform: rotate(10deg);
}

/* Light theme: deep layer becomes a clean, bright base with subtle color glow */

[data-theme="light"] {
  --bg: #ffffff;
  --deepBg: #ffffff;
  --glass: rgba(255, 255, 255, 0.95);
  --glass2: rgba(255, 255, 255, 0.80);
  --muted: rgba(8, 9, 12, 0.50);
  --shadow: 0 8px 40px rgba(8, 9, 12, 0.08), 0 2px 8px rgba(8, 9, 12, 0.05);
  --stroke: rgba(8, 9, 12, 0.10);
  --text: rgba(8, 9, 12, 0.92);
}

[data-theme="light"] .bgDeep {
  display: block;
  background:
    radial-gradient(1400px 400px at 50% 100%, rgba(75, 105, 255, 0.05), transparent 70%),
    #ffffff;
}

/* Light theme: don't fade the net out as aggressively */

[data-theme="light"] .bgNoise {
  opacity: 0.05;
}

[data-theme="light"] #bg canvas {
  opacity: 0.06;
  mix-blend-mode: multiply;
  filter: contrast(1.2) saturate(0.4);
}

/* ==========================================================
   LIGHT MODE – comprehensive overrides
   Clean, cool-white palette that echoes the dark mode's
   cobalt-blue accent, with warm orange CTAs for contrast.
   ========================================================== */

/* FIX: body[data-bg="stars"] sets --bg:#000 with higher specificity.
   Re-assert light vars on html+body together to win the cascade. */
html[data-theme="light"] body,
html[data-theme="light"] body[data-bg="stars"] {
  background: #ffffff;
  --bg: #ffffff;
  --deepBg: #ffffff;
}

/* Show bgDeep even when body carries data-bg="stars" (which normally hides it) */
html[data-theme="light"] body[data-bg="stars"] .bgDeep {
  display: block !important;
  background:
    radial-gradient(1400px 400px at 50% 100%, rgba(75, 105, 255, 0.05), transparent 70%),
    #ffffff;
}

/* Stars canvas: disabled */
[data-theme="light"] .bgStars {
  display: none;
}

/* --- Header / Nav --- */

[data-theme="light"] .topbar {
  border-bottom-color: rgba(12, 10, 8, 0.05) !important;
}

[data-theme="light"] .pillNav {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(12, 10, 8, 0.09);
  box-shadow: 0 4px 20px rgba(12, 10, 8, 0.08);
}

[data-theme="light"] .pillActive {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(12, 10, 8, 0.12);
  box-shadow: 0 2px 12px rgba(12, 10, 8, 0.08);
}

[data-theme="light"] .topIconBtn,
[data-theme="light"] .topActionBtn {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(12, 10, 8, 0.09);
  box-shadow: 0 4px 16px rgba(12, 10, 8, 0.06);
}

[data-theme="light"] .topIconBtn:hover,
[data-theme="light"] .topActionBtn:hover {
  border-color: rgba(75, 105, 255, 0.35);
  background: rgba(255, 255, 255, 0.98);
}

[data-theme="light"] .resumeBtn {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(12, 10, 8, 0.09);
  color: rgba(12, 10, 8, 0.75);
}

/* --- Hero --- */

/* Planet disk stays dark — just soften the rim and swap the outer glow to
   a deep-rose so it sits nicely against the cream background */
[data-theme="light"] .heroEarth::before {
  box-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.55),
    0 -18px 70px rgba(75, 105, 255, 0.18),
    0 -90px 320px rgba(60, 90, 220, 0.12);
}

/* Pull the base radial glow back: less orange, more deep-rose, much dimmer */
[data-theme="light"] .heroEarth::after {
  background: radial-gradient(
    closest-side at 50% 78%,
    rgba(75, 105, 255, 0.18),
    rgba(75, 105, 255, 0.07) 42%,
    transparent 72%
  );
  opacity: 0.7;
}

/* Aurora: keep but tone down so it doesn't clash with the light page */
[data-theme="light"] .heroEarth .earthAurora {
  opacity: 0.30;
}

/* Hero chips/pills */
[data-theme="light"] .heroNewChip {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(12, 10, 8, 0.10);
  color: rgba(12, 10, 8, 0.78);
}

[data-theme="light"] .heroNewChip .newText,
[data-theme="light"] .heroNewChip .chipArrow {
  color: rgba(12, 10, 8, 0.78);
}

[data-theme="light"] .heroMailPill {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(12, 10, 8, 0.10);
  color: rgba(12, 10, 8, 0.78);
}

[data-theme="light"] .heroCtaBtn {
  background: rgba(12, 10, 8, 0.88);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="light"] .heroCtaBtn:hover {
  background: rgba(12, 10, 8, 0.96);
}

[data-theme="light"] .heroHelloLine {
  color: rgba(12, 10, 8, 0.70);
}

[data-theme="light"] .heroRolePill {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(12, 10, 8, 0.10);
  color: rgba(12, 10, 8, 0.70);
}

[data-theme="light"] .heroScrollCue {
  color: rgba(12, 10, 8, 0.45);
}

[data-theme="light"] .heroScrollCue .line {
  background: rgba(12, 10, 8, 0.25);
}

[data-theme="light"] .heroSpaceTitle,
[data-theme="light"] .heroTitle {
  color: rgba(12, 10, 8, 0.92);
}

[data-theme="light"] .heroTitle .fxWord {
  color: rgba(12, 10, 8, 0.92) !important;
}

[data-theme="light"] .heroHello {
  color: rgba(12, 10, 8, 0.70);
}

/* --- Career section --- */

[data-theme="light"] .careerGrid {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(12, 10, 8, 0.07);
  box-shadow: 0 4px 24px rgba(12, 10, 8, 0.05);
}

[data-theme="light"] .careerGrid::before {
  background: radial-gradient(
    640px 240px at 50% 0%,
    rgba(75, 105, 255, 0.05),
    transparent 62%
  );
}

[data-theme="light"] .careerLine {
  background: rgba(12, 10, 8, 0.12);
}

[data-theme="light"] .careerRightItem {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(12, 10, 8, 0.07);
}

[data-theme="light"] .careerRightItem.active {
  background: #ffffff;
  border-color: rgba(75, 105, 255, 0.20);
  box-shadow:
    inset 3px 0 0 rgba(75, 105, 255, 0.40),
    0 2px 10px rgba(12, 10, 8, 0.05);
}

[data-theme="light"] .careerRole {
  color: rgba(12, 10, 8, 0.90);
  text-shadow: none;
}

[data-theme="light"] .careerSub {
  color: rgba(55, 80, 200, 0.75);
}

[data-theme="light"] .careerYear {
  color: rgba(8, 9, 12, 0.82);
}

[data-theme="light"] .careerYear.active {
  text-shadow: none;
}

[data-theme="light"] .careerDesc {
  color: rgba(8, 9, 12, 0.62);
}

[data-theme="light"] .careerRightItem.active .careerDesc {
  color: rgba(8, 9, 12, 0.78);
}

/* --- Work section --- */

[data-theme="light"] .workHead .p {
  color: rgba(8, 9, 12, 0.50);
}

[data-theme="light"] .workTotalBadge {
  background: rgba(75, 105, 255, 0.10);
  border-color: rgba(75, 105, 255, 0.20);
  color: rgba(55, 80, 200, 0.85);
}

/* --- Scrollbar --- */

[data-theme="light"] .cScrollTrack {
  background: rgba(12, 10, 8, 0.10);
}

[data-theme="light"] .cScrollFill,
[data-theme="light"] .cScrollThumb {
  background: var(--hot);
  box-shadow: 0 0 12px color-mix(in srgb, var(--hot) 45%, transparent);
}

/* --- Skills section: keep dark so sphere renders properly --- */

[data-theme="light"] #tech {
  background: #0c0d18;
  border-radius: 20px;
  margin-inline: 12px;
}

[data-theme="light"] #tech .techKicker {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] #tech .techTitle {
  color: rgba(255, 255, 255, 0.92);
}

/* secLabel inside dark tech section must keep dark-mode colors */
[data-theme="light"] #tech .secNum {
  color: var(--hot);
  opacity: 0.88;
}

[data-theme="light"] #tech .secLabelLine {
  background: linear-gradient(90deg, rgba(75, 105, 255, 0.50), rgba(255, 255, 255, 0.06));
}

[data-theme="light"] #tech .secCategory {
  background: linear-gradient(110deg, #9b8cff 0%, #c8c0ff 45%, #44f0b1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Section heading: full-strength black --- */

[data-theme="light"] .sectionTitle,
[data-theme="light"] .techTitle {
  background: linear-gradient(120deg, #6a5acd 0%, #4b69ff 50%, #00b894 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: none;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
  color: rgba(8, 9, 12, 0.92);
}

/* Gradient words stay transparent for clip to work */
[data-theme="light"] .sectionTitle .gradWord,
[data-theme="light"] h2 .gradWord {
  color: transparent;
}

/* Section label system in light mode */
[data-theme="light"] .secCategory {
  background: linear-gradient(110deg, #6a5acd 0%, #4b69ff 45%, #00b894 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="light"] .secLabelLine {
  background: linear-gradient(90deg, rgba(75, 105, 255, 0.45), rgba(8, 9, 12, 0.08));
}

/* --- Kicker labels / muted labels --- */

[data-theme="light"] .sectionKicker,
[data-theme="light"] .roleSmall,
[data-theme="light"] .workKicker,
[data-theme="light"] .techKicker {
  color: rgba(8, 9, 12, 0.45);
}

/* --- Project cards in light mode — see card block below --- */

/* --- Ask me section --- */

[data-theme="light"] .askOuter,
[data-theme="light"] .askWrap {
  background: #ffffff;
  border: 1px solid rgba(8, 9, 12, 0.10);
  box-shadow: 0 4px 24px rgba(8, 9, 12, 0.07);
}

[data-theme="light"] .askInput,
[data-theme="light"] .askInputWrap {
  background: rgba(8, 9, 12, 0.04);
  border-color: rgba(8, 9, 12, 0.10);
  color: rgba(8, 9, 12, 0.92);
}

[data-theme="light"] .askInput::placeholder {
  color: rgba(8, 9, 12, 0.35);
}

[data-theme="light"] .askBubble {
  background: rgba(8, 9, 12, 0.06);
  color: rgba(8, 9, 12, 0.88);
}

/* --- Stats modal --- */

[data-theme=”light”] .statsInner {
  background: rgba(252, 252, 255, 0.98);
  border-color: rgba(8, 9, 12, 0.10);
  box-shadow: 0 40px 120px rgba(8, 9, 12, 0.12), 0 1px 0 rgba(8, 9, 12, 0.06);
}

[data-theme=”light”] .statsH1,
[data-theme=”light”] .statsH2 {
  color: rgba(8, 9, 12, 0.90);
}

[data-theme=”light”] .statsLead,
[data-theme=”light”] .statsLead2 {
  color: rgba(8, 9, 12, 0.52);
}

[data-theme=”light”] .statsCard {
  background: rgba(8, 9, 12, 0.03);
  border-color: rgba(8, 9, 12, 0.08);
}

[data-theme=”light”] .statsCardTop {
  color: rgba(8, 9, 12, 0.78);
}

[data-theme=”light”] .statsBigNumber {
  color: #4b69ff;
}

[data-theme=”light”] .statsBigNumber.hot {
  color: #4b69ff;
}

[data-theme=”light”] .statsSubText {
  color: rgba(8, 9, 12, 0.48);
}

[data-theme=”light”] .statsHeatWrap {
  background: rgba(8, 9, 12, 0.04);
  border-color: rgba(8, 9, 12, 0.08);
}

[data-theme=”light”] .statsHeatFoot {
  color: rgba(8, 9, 12, 0.45);
}

[data-theme=”light”] .statsClose {
  color: rgba(8, 9, 12, 0.78);
  background: rgba(8, 9, 12, 0.06);
  border-color: rgba(8, 9, 12, 0.10);
}

[data-theme=”light”] .statsLoveBtn {
  color: rgba(8, 9, 12, 0.82);
  background: rgba(75, 105, 255, 0.10);
  border-color: rgba(75, 105, 255, 0.18);
}

/* --- Contact sheet: keep dark for contrast --- */

/* --- Topbar icon hover: cobalt ring instead of lavender --- */

[data-theme=”light”] .topIconBtn:hover {
  border-color: rgba(75, 105, 255, 0.30);
  background: rgba(255, 255, 255, 0.98);
}

/* --- secNum stays cobalt in all light sections --- */

[data-theme=”light”] .secNum {
  opacity: 1;
}

/* --- Ask section --- */

[data-theme=”light”] .askSub {
  color: rgba(8, 9, 12, 0.58);
}

/* --- About section --- */

/* --- Hero marquee and scroll cue --- */


/* --- Misc glass elements --- */

[data-theme=”light”] .heroNewChip .newBadge {
  /* Keep the red “New” badge as-is — it works in both modes */
}

/* =============================================================
   LIGHT MODE – Phase 2 Polish Pass
   Fixes: career dim items, footer icons, tags, page background,
   section depth, about cards, project cards, ask section.
   ============================================================= */

/* Page body: off-white instead of stark white — panels float above it */
html[data-theme=”light”] body,
html[data-theme=”light”] body[data-bg=”stars”] {
  background: #f6f7fc;
  --bg: #f6f7fc;
  --deepBg: #f6f7fc;
}

[data-theme=”light”] .bgDeep {
  background:
    radial-gradient(1400px 400px at 50% 100%, rgba(75, 105, 255, 0.07), transparent 70%),
    radial-gradient(900px 300px at 78% 28%, rgba(110, 135, 255, 0.04), transparent 60%),
    #f6f7fc;
}

html[data-theme=”light”] body[data-bg=”stars”] .bgDeep {
  background:
    radial-gradient(1400px 400px at 50% 100%, rgba(75, 105, 255, 0.07), transparent 70%),
    radial-gradient(900px 300px at 78% 28%, rgba(110, 135, 255, 0.04), transparent 60%),
    #f6f7fc !important;
}

[data-theme=”light”] .careerGrid {
  background: #ffffff;
  border-color: rgba(8, 9, 12, 0.07);
  box-shadow:
    0 6px 32px rgba(8, 9, 12, 0.07),
    0 2px 8px rgba(8, 9, 12, 0.04);
}

/* Career: dim items need a higher opacity floor on white (0.28 = near-invisible) */
[data-theme=”light”] .careerYear.dim {
  opacity: 0.50;
}

[data-theme=”light”] .careerRightItem.dim {
  opacity: 0.50;
}

[data-theme=”light”] .careerItemBtn.dim .careerRole,
[data-theme=”light”] .careerItemBtn.dim .careerSub {
  opacity: 0.55;
}

/* Career timeline line: base opacity:0.35 makes it near-invisible in light mode */
[data-theme=”light”] .careerLine {
  background: rgba(8, 9, 12, 0.16);
  opacity: 0.70;
}

/* Footer icons: glass2 resolves to near-white on the off-white bg */
[data-theme=”light”] .footerIcon {
  color: rgba(8, 9, 12, 0.65);
  background: #ffffff;
  border-color: rgba(8, 9, 12, 0.10);
  box-shadow: 0 2px 10px rgba(8, 9, 12, 0.06);
}

[data-theme=”light”] .footerIcon:hover {
  color: rgba(8, 9, 12, 0.90);
  background: #ffffff;
  border-color: rgba(75, 105, 255, 0.32);
  box-shadow: 0 4px 16px rgba(75, 105, 255, 0.10);
}

/* Footer bar */
[data-theme=”light”] .footerBar {
  color: rgba(8, 9, 12, 0.45);
  border-top-color: rgba(8, 9, 12, 0.07);
}

/* Tags / filter chips: glass2 = white on white */
[data-theme=”light”] .tag {
  color: rgba(8, 9, 12, 0.60);
  background: #ffffff;
  border-color: rgba(8, 9, 12, 0.11);
}

[data-theme=”light”] .tag:hover {
  background: rgba(75, 105, 255, 0.07);
  border-color: rgba(75, 105, 255, 0.22);
  color: rgba(55, 80, 200, 0.90);
}

/* Project cards: explicit white on off-white page */
[data-theme=”light”] .projectCard {
  background: #ffffff;
  border-color: rgba(8, 9, 12, 0.09);
  box-shadow:
    0 4px 24px rgba(8, 9, 12, 0.07),
    0 1px 4px rgba(8, 9, 12, 0.03);
}

/* Project card names / descriptions */
[data-theme=”light”] .cardName {
  color: rgba(8, 9, 12, 0.90);
}

[data-theme=”light”] .cardDesc {
  color: rgba(8, 9, 12, 0.56);
}

/* Ask section: white card on off-white page */
[data-theme=”light”] .askOuter,
[data-theme=”light”] .askWrap {
  background: #ffffff;
  border-color: rgba(8, 9, 12, 0.08);
  box-shadow: 0 6px 32px rgba(8, 9, 12, 0.06);
}

/* Ask: differentiated AI vs user bubbles */
[data-theme=”light”] .askBubble--ai {
  background: rgba(75, 105, 255, 0.07);
  border: 1px solid rgba(75, 105, 255, 0.14);
  color: rgba(8, 9, 12, 0.88);
}

[data-theme=”light”] .askBubble--user {
  background: rgba(8, 9, 12, 0.05);
  border: 1px solid rgba(8, 9, 12, 0.09);
  color: rgba(8, 9, 12, 0.88);
}

/* Ask input: slight elevation on off-white */
[data-theme=”light”] .askInputWrap {
  background: rgba(8, 9, 12, 0.03);
  border-color: rgba(8, 9, 12, 0.10);
}

/* Social rail on desktop */
[data-theme=”light”] .socialRail {
  color: rgba(8, 9, 12, 0.50);
}

[data-theme=”light”] .socialRailLink,
[data-theme=”light”] .socialRailBtn {
  color: rgba(8, 9, 12, 0.55);
  background: #ffffff;
  border-color: rgba(8, 9, 12, 0.10);
}

[data-theme=”light”] .socialRailLink:hover,
[data-theme=”light”] .socialRailBtn:hover {
  color: rgba(8, 9, 12, 0.90);
  border-color: rgba(75, 105, 255, 0.30);
}

/* Global stars canvas — disabled */

.bgStars {
  display: none;
}

/* =========================
   Header (pill nav like ref)
========================= */

/* left icon (theme) */

.topIconBtn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  background: color-mix(in srgb, var(--glass2) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.topIconBtn:hover {
  background: color-mix(in srgb, var(--glass) 85%, transparent);
  border-color: rgba(155, 140, 255, 0.45);
  transform: translateY(-1px);
}

.topIconBtn:active {
  transform: translateY(0px);
}

/* center pill nav */

.pillTrack {
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  pointer-events: none;
}

/* Make anchor jumps land below the fixed header */
:where(section[id], main[id]) {
  scroll-margin-top: calc(var(--navH) + 24px);
}

.pillActive {
  position: absolute;
  top: 0;
  bottom: 0;

  /* Keep layout stable (no left animation). We move with transform instead. */
  left: 0;
  width: var(--pill-w);
  transform: translate3d(var(--pill-x), 0, 0);

  background: color-mix(in srgb, var(--glass) 90%, transparent);
  opacity: 0;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  border-radius: 999px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(155, 140, 255, 0.12) inset;

  will-change: transform, width;
  transition:
    transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1),
    width 260ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 180ms ease;
}

.pillNav[data-ready="1"] .pillActive {
  opacity: 1;
}

.pillLink {
  position: relative;
  z-index: 2;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  border-radius: 999px;
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.pillLink:hover {
  color: color-mix(in srgb, var(--text) 88%, transparent);
}

.pillLink.isActive {
  color: color-mix(in srgb, var(--text) 95%, transparent);
}

/* right action button (Stats) */

.topActionBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  height: 46px;
  padding: 0 16px;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  background: color-mix(in srgb, var(--glass2) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.topActionBtn:hover {
  background: color-mix(in srgb, var(--glass) 85%, transparent);
  border-color: rgba(155, 140, 255, 0.45);
  transform: translateY(-1px);
}

.topActionBtn:active {
  transform: translateY(0px);
}

.topActionIcon {
  font-size: 14px;
  opacity: 0.9;
}

/* make sure sections don't jump under the fixed header */

.section,
.story,
.wrap > section {
  scroll-margin-top: calc(var(--navH) + 24px);
}

/* give the page breathing room so the fixed header doesn't overlap the very top */

.themeBtn:active {
  transform: translateY(0);
}

/* Rails */

.socialRail {
  position: fixed;
  bottom: 22px;
  left: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sIcon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-weight: 800;
  text-transform: lowercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--glass2) 80%, transparent);
  border: 1px solid var(--stroke);
  border-radius: 14px;
}

.sIcon:hover {
  color: var(--text);
  transform: translateY(-2px);
}

.resumeBtn {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 60;
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--muted);
  background: color-mix(in srgb, var(--glass2) 82%, transparent);
  border: 1px solid var(--stroke);
  border-radius: 999px;
}

.resumeBtn:hover {
  color: var(--text);
  transform: translateY(-2px);
}

.resumeMark {
  margin-left: 6px;
  opacity: 0.8;
}

/* Make hero full-bleed even inside .wrap */

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  color: var(--text);
  background: var(--glass2);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn.primary {
  font-weight: 900;
  color: #071021;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 88%, #fff 0%),
    color-mix(in srgb, var(--accent2) 70%, #fff 0%)
  );
  border-color: transparent;
}

.btn.tiny {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 12px;
}

/* Reveal baseline */

.r {
  opacity: 0;
  transform: translateY(18px);
}

html.noReveal .r,
.r.noReveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Headings */

.kicker {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
}

.h2 {
  margin: 10px 0 10px;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.04em;
}

.p {
  max-width: 70ch;
  margin: 0;
  line-height: 1.65;
  color: var(--muted);
}

/* Story */

.story {
  position: relative;
  min-height: 100svh;
  padding: 12px 0 10px;
  overflow: visible !important;
}

.storyGrid {
  display: grid;
  align-items: center;
  gap: 18px;
  grid-template-columns: 1fr minmax(300px, 520px) 1fr;
  min-height: calc(100svh - 110px);
  overflow: visible !important;
}

.storyLeft,
.storyRight {
  position: relative;
  z-index: 5;
  min-height: 520px;
}

.storyCenter {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: visible !important;
}

.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.eyebrow {
  display: inline-flex;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
  background: var(--glass2);
  border: 1px solid var(--stroke);
  border-radius: 999px;
}

.heroName {
  margin: 14px 0 0;
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: -0.06em;
}

.heroLine {
  display: block;
}

.glow {
  color: transparent;
  background: linear-gradient(135deg, var(--hot), var(--hot2));
  -webkit-background-clip: text;
  background-clip: text;
}

.roleSmall {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.roleBig {
  margin-top: 10px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.roleTop {
  display: block;
  color: color-mix(in srgb, var(--text) 65%, transparent);
}

.roleBottom {
  display: block;
  color: var(--text);
}

.heroCtas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.heroStats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.stat {
  min-width: 130px;
  padding: 12px 14px;
  background: var(--glass2);
  border: 1px solid var(--stroke);
  border-radius: 16px;
}

.statNum {
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.statLab {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.aboutHeadline {
  max-width: 20ch;
  margin: 8px 0 10px;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.aboutText {
  position: relative;
  max-width: 44ch;
  max-height: 280px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  overflow: hidden;
}

/* Fade-out so it ends cleanly */

.aboutText::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 72px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 0%, transparent),
    color-mix(in srgb, var(--bg) 85%, transparent)
  );
  pointer-events: none;
  content: "";
}

.aboutText p {
  margin-bottom: 14px;
}

/* Mobile tweak */

@media (max-width: 1040px) {
  .aboutText {
    font-size: 16px;
    max-height: 240px;
  }
}

.whatBig {
  font-size: clamp(52px, 7vw, 92px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  opacity: 0.92;
}

.sceneDoCards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.doCard {
  position: relative;
  padding: 18px;
  background: color-mix(in srgb, var(--glass2) 70%, transparent);
  border: 1px dashed color-mix(in srgb, var(--stroke) 82%, transparent);
  border-radius: var(--r1);
  box-shadow: var(--shadow);
}

.doTitle {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.doSub {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.doList {
  margin: 14px 0 0 18px;
  line-height: 1.7;
  color: var(--muted);
}

.miniBtn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  color: var(--text);
  background: var(--glass2);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  cursor: pointer;
}

.miniBtn:hover {
  transform: translateY(-1px);
}

/* Avatar stage */

.avatarStage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(700px, 46vw);
  max-width: 100%;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible !important;
  aspect-ratio: 1 / 1;
}

.avatarStage::before {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: radial-gradient(
    circle at 50% 55%,
    rgba(120, 120, 255, 0.16),
    transparent 60%
  );
  filter: blur(20px);
  pointer-events: none;
  content: "";
}

.avatarImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.95;
  object-fit: cover;
}

.threeMount {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#threeMount {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible !important;
}

#threeMount canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  width: 160% !important;
  height: 160% !important;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Scroll hint */

.scrollHint {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--muted);
  opacity: 0.9;
}

/* =========================
   HERO (video-style)
========================= */

.heroSpaceInner {
  z-index: 2;
  width: min(980px, 92vw);
  padding-top: calc(var(--navH) + 42px);
  padding-bottom: 40px;
  text-align: center;
}

.heroStars {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.95;
  pointer-events: none;
}

.heroNewRow {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.heroNewChip .dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 99px;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

.heroNewChip .muted {
  color: rgba(255, 255, 255, 0.62);
}

.heroSpaceLead {
  max-width: 70ch;
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* Italic emphasis word (Parth-style) */

.heroTitle .fxWord {
  font-family: ui-serif, "Georgia", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.92) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-style: italic;
}

/* New chip = badge + text + arrow (closer to reference) */

.heroNewChip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.heroNewChip .newBadge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(75, 105, 255, 0.92);
  border-radius: 999px;
}

.heroNewChip .newText {
  font-weight: 650;
  color: rgba(255, 255, 255, 0.82);
}

.heroNewChip .chipArrow {
  font-size: 18px;
  opacity: 0.8;
  transform: translateY(-1px);
}

/* Hello + red pill stacked like reference */

.heroHelloRow {
  display: grid;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 18px;
}

.heroHelloLine {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

.heroRolePill {
  justify-self: center;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(75, 105, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

/* CTA row like reference (pill + icon dot) */

.heroCtaBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.heroCtaBtn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.ctaDot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.heroMailPill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.heroMailPill:hover {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
}

.mailIcon {
  opacity: 0.9;
}

/* Small tweak: keep title spacing tight like ref */

.heroSpaceTitle {
  margin: 0 0 16px;
  margin-bottom: 10px;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.heroHello {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
}

.skillWrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.skillLabel {
  color: rgba(255, 255, 255, 0.55);
}

/* the red animated skill box */

.skillPill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: rgba(220, 224, 255, 0.95);
  background: rgba(75, 105, 255, 0.14);
  border: 1px solid rgba(75, 105, 255, 0.34);
  border-radius: 10px;
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(75, 105, 255, 0.18);
  transform: translateY(0);
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    filter 260ms ease;
}

.skillPill.isOut {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(6px);
}

.heroConnectRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.heroConnectBtn {
  padding-right: 18px;
  padding-left: 18px;
}

.heroMail {
  padding-bottom: 2px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.heroMail:hover {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.32);
}

/* scroll cue like the video */

.heroScrollCue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  transform: translateX(-50%);
}

.heroScrollCue .line {
  width: 62px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.heroScrollCue .txt {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Mobile tuning */

@media (max-width: 760px) {
  .heroSpace {
    padding: 38px 0 28px;
  }

  .heroSpaceLead {
    font-size: 14px;
  }

  .heroNewChip {
    font-size: 12px;
  }
}

.scrollLine {
  width: 52px;
  height: 1px;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
}

.scrollText {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Sections */

.section {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 11vh, 128px) 0 0;
  contain: layout style; /* limit repaint scope to this section */
}

.centerHead {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
}

/* Work */

.workHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.workHeadText {
  max-width: 60ch;
  margin-bottom: 18px;
}

.workHead .kicker {
  margin-bottom: 8px;
}

.workHead .sectionTitle {
  margin-bottom: 10px;
}

.workHead .p {
  margin-top: 6px;
  opacity: 0.72;
}

/* ── Narrative bridge strip — sits between heading block and search ──
   Frames the projects as proof-from-trajectory before utility appears.
   Same monospace language as the section eye labels (abtEye, secCategory)
   so it reads as part of the same labelling system, not a new element. */
.workNarrBridge {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(520px, 88%);
  margin: 16px auto 4px;
}

.workNarrLine {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155, 140, 255, 0.22), transparent);
}

.workNarrPhrase {
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(155, 140, 255, 0.40);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Total project count badge in subtitle */
.workTotalBadge {
  display: inline-block;
  padding: 2px 9px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: color-mix(in srgb, var(--glass) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  border-radius: 999px;
  vertical-align: middle;
}

/* Show More button */
.workShowMoreWrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.workShowMoreBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--text);
  background: color-mix(in srgb, var(--glass) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 90%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.workShowMoreBtn:hover {
  background: color-mix(in srgb, var(--glass) 100%, transparent);
  border-color: rgba(75, 105, 255, 0.4);
  transform: translateY(-1px);
}

.workShowMoreBtn svg {
  transition: transform 300ms ease;
  flex-shrink: 0;
}

/* ===== Projects: minimal search + hidden tags ===== */

.workControls {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.searchBar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--glass) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: visible;
}

/* ==============================
   Search bar (reference style)
   Apply by adding: class="searchBar searchNeo"
============================== */

.searchBar.searchNeo {
  gap: 12px;
  margin-top: 22px;
  padding: 16px 18px;
  background: color-mix(in srgb, #000 46%, var(--bg));
  border: 1px solid color-mix(in srgb, #7aa8ff 40%, transparent);
  border-radius: 999px;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
}

/* Stronger glowing rim like the reference */

.searchBar.searchNeo::after {
  position: absolute;
  inset: 0;
  opacity: 0.95;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #7aa8ff 70%, transparent),
    0 0 0 1px color-mix(in srgb, #7aa8ff 40%, transparent),
    0 0 34px color-mix(in srgb, #7aa8ff 22%, transparent);
  pointer-events: none;
  content: "";
}

.searchBar.searchNeo:focus-within {
  border-color: color-mix(in srgb, #7aa8ff 72%, transparent);
}

.searchBar.searchNeo:focus-within::after {
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #7aa8ff 85%, transparent),
    0 0 0 1px color-mix(in srgb, #7aa8ff 55%, transparent),
    0 0 46px color-mix(in srgb, #7aa8ff 28%, transparent);
}

/* Light theme: keep it readable (white-ish pill, same outline vibe) */

[data-theme="light"] .searchBar.searchNeo {
  background: color-mix(in srgb, #fff 74%, var(--bg));
  border-color: color-mix(in srgb, #5f8cff 38%, transparent);
  box-shadow:
    0 22px 70px rgba(16, 26, 60, 0.22),
    inset 0 0 0 1px rgba(10, 18, 40, 0.04);
}

[data-theme="light"] .searchBar.searchNeo::after {
  box-shadow:
    0 0 0 1px color-mix(in srgb, #5f8cff 48%, transparent),
    0 0 32px color-mix(in srgb, #5f8cff 16%, transparent);
}

.searchBar.searchNeo input {
  font-size: 16px;
}

.searchBar.searchNeo .searchIcon {
  opacity: 0.85;
}

/* Buttons inside the Neo search bar: a bit cleaner */

.searchBar.searchNeo .iconBtn,
.searchBar.searchNeo .iconBtn--ghost,
.searchBar.searchNeo #clearSearch,
.searchBar.searchNeo .askSendBtn {
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
}

.searchBar.searchNeo #clearSearch {
  background: color-mix(in srgb, var(--glass2) 82%, transparent);
  border-color: color-mix(in srgb, var(--stroke) 55%, transparent);
}

.searchBar.searchNeo .askSendBtn {
  min-width: auto;
  padding: 0 16px;
}

.searchBar::before {
  position: absolute;
  inset: -1px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(155, 140, 255, 0.55),
    rgba(68, 240, 177, 0.45),
    rgba(155, 140, 255, 0.55)
  );
  background-size: 220% 100%;
  opacity: 0.95;
  filter: blur(0px) drop-shadow(0 0 14px rgba(155, 140, 255, 0.22))
    drop-shadow(0 0 18px rgba(68, 240, 177, 0.14));
  border-radius: inherit;
  pointer-events: none;
  animation: searchBorderShift 4.5s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  content: "";
  mask-composite: exclude;
}

.searchBar:focus-within {
  border-color: transparent;
}

.searchBar:focus-within::before {
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(155, 140, 255, 0.3))
    drop-shadow(0 0 22px rgba(68, 240, 177, 0.18));
}

.searchBar input {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
}

.searchBar input::placeholder {
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}

@keyframes searchBorderShift {
  0% {
    background-position: 0% 50%;
  }

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

.searchIcon {
  display: inline-flex;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

/* Clear (x) button – cleaner */

#clearSearch {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  background: color-mix(in srgb, var(--glass2) 90%, transparent);
  opacity: 0.9;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  border-radius: 12px;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease;
}

#clearSearch:hover {
  opacity: 1;
  border-color: rgba(160, 140, 255, 0.45);
  transform: translateY(-1px);
}

#clearSearch:active {
  transform: translateY(0px);
}

#clearSearch[hidden] {
  display: none !important;
}

/* Icon buttons (works for both .iconBtn and .iconBtn--ghost) */

.iconBtn,
.iconBtn--ghost {
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
}

.iconBtn:hover,
.iconBtn--ghost:hover {
  transform: translateY(-1px);
}

.iconBtn:active,
.iconBtn--ghost:active {
  transform: translateY(0);
}

.tagsDrawer {
  padding: 10px;
  background: color-mix(in srgb, var(--glass) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  border-radius: var(--r1);
}

.tagsBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tagsBar button {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  cursor: pointer;
}

.tagsBar button.active {
  color: var(--text);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 45%, transparent),
    color-mix(in srgb, var(--accent2) 28%, transparent)
  );
}

/* ===== Projects: rail layout ===== */

/* Remove the big panel look around cards */

.railWrap,
.railViewport {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Horizontal rail */

/* hide scrollbar */

.workGrid.rail::-webkit-scrollbar {
  height: 0;
}

/* show arrows when you hover the rail area */

.railWrap:hover .railArrow,
.railWrap:focus-within .railArrow {
  opacity: 1;
}

/* ===== Project cards — horizontal showcase ===== */

.projectCard {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(75, 105, 255, 0.14);
  background: #07080d;
  cursor: pointer;
  transition:
    border-color 300ms ease,
    box-shadow 300ms ease,
    transform 200ms ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .projectCard:hover {
    border-color: rgba(75, 105, 255, 0.42);
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.52),
      0 0 0 1px rgba(75, 105, 255, 0.08);
    transform: translateY(-2px);
  }
}

/* ── Left panel: screenshot ── */

.cardLeft {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}

.cardImgWrap {
  position: absolute;
  inset: 20px 0 0 20px;
  border-radius: 12px 0 0 0;
  overflow: hidden;
  box-shadow:
    -6px -6px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.cardImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 520ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (hover: hover) and (pointer: fine) {
  .projectCard:hover .cardImg {
    transform: scale(1.04);
  }
}

/* Hover overlay on left panel */
.cardOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 4;
}

@media (hover: hover) and (pointer: fine) {
  .projectCard:hover .cardOverlay {
    opacity: 1;
  }
}

.overlayLabel {
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* Spinning "VISIT PROJECT" circular badge */
.visitBadge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  text-decoration: none;
  z-index: 5;
  transition: transform 300ms ease;
}

.visitBadge:hover {
  transform: scale(1.1);
}

.visitRing {
  position: absolute;
  inset: 0;
  animation: visitSpin 14s linear infinite;
  overflow: visible;
}

.visitText {
  fill: rgba(255, 255, 255, 0.62);
  font-size: 10.5px;
  letter-spacing: 2.8px;
  font-weight: 650;
  font-family: inherit;
}

@keyframes visitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.visitArrow {
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

/* ── Right panel: text content ── */

.cardRight {
  display: flex;
  flex-direction: column;
  padding: 28px 32px 26px;
  border-left: 1px solid rgba(75, 105, 255, 0.1);
}

.cardRightTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cardAccentLine {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  flex-shrink: 0;
}

.cardNumRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cardNum {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pBadge {
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(75, 105, 255, 0.65);
  border: 1px solid rgba(107, 133, 255, 0.30);
  border-radius: 999px;
}

.cardTitle {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 10px;
}

.cardDesc {
  display: -webkit-box;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 14px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.cardHighlights {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cardHighlightItem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

.highlightPlus {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  flex-shrink: 0;
}

.cardBottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.projectCard .tagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.projectCard .tagRow .tag {
  padding: 4px 10px;
  font-size: 11px;
}

.cardLinks {
  display: flex;
  gap: 10px;
}

.cardLink {
  padding: 9px 20px;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  text-decoration: none;
  transition:
    background 180ms ease,
    border-color 180ms ease;
  white-space: nowrap;
}

.cardLink:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
}

.cardLink.live {
  background: rgba(255, 90, 20, 0.82);
  border-color: transparent;
  color: white;
}

.cardLink.live:hover {
  background: rgba(255, 90, 20, 1);
}

/* ── Responsive ── */

@media (max-width: 860px) {
  .projectCard {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .cardLeft {
    height: 260px;
    min-height: unset;
  }

  .cardImgWrap {
    inset: 14px 0 0 14px;
  }

  .cardRight {
    border-left: none;
    border-top: 1px solid rgba(75, 105, 255, 0.1);
    padding: 22px 22px 20px;
  }
}

@media (max-width: 480px) {
  .cardLeft {
    height: 200px;
  }

  .cardTitle {
    font-size: 18px;
  }

  .cardRight {
    padding: 18px;
  }

  .visitBadge {
    width: 68px;
    height: 68px;
  }
}

/* ── Light mode ── */

[data-theme="light"] .projectCard {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(12, 10, 8, 0.1);
  box-shadow: 0 4px 24px rgba(12, 10, 8, 0.07);
}

[data-theme="light"] .projectCard:hover {
  border-color: rgba(75, 105, 255, 0.4);
  box-shadow: 0 16px 60px rgba(12, 10, 8, 0.1);
}

[data-theme="light"] .cardRight {
  border-left-color: rgba(12, 10, 8, 0.08);
}

[data-theme="light"] .cardLink {
  color: rgba(12, 10, 8, 0.8);
  background: rgba(12, 10, 8, 0.05);
  border-color: rgba(12, 10, 8, 0.14);
}

[data-theme="light"] .cardLink:hover {
  background: rgba(12, 10, 8, 0.09);
}

[data-theme="light"] .visitText {
  fill: rgba(12, 10, 8, 0.55);
}

.empty {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
}

.emptyTitle {
  font-weight: 900;
  color: var(--text);
}

.emptyText {
  margin-top: 6px;
}

.tag {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  background: var(--glass2);
  border: 1px solid var(--stroke);
  border-radius: 999px;
}

/* =========================
   Contact (footer-style panel)
========================= */

.contactPanel {
  margin-top: 18px;
  background: rgba(8, 9, 12, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 34px;
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  backdrop-filter: blur(10px);
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

.contactPanelInner {
  display: grid;
  gap: 34px;
  grid-template-columns: 1.15fr 1.85fr;
  padding: 34px;
}

.contactBrand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 260px;
}

.contactLogo {
  width: 110px;
  margin-bottom: 18px;
  font-size: 52px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.05em;
}

.contactLogo img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.95) contrast(1.05);
  transition:
    transform 220ms ease,
    filter 220ms ease;
}

.contactLogo img:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.contactBrandText {
  max-width: 44ch;
  margin: 0;
  line-height: 1.6;
  color: var(--muted);
}

.contactQuick {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.contactPill {
  display: grid;
  gap: 6px;
  min-width: 260px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
}

.contactPill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.contactPillTop {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.contactPillBot {
  font-weight: 850;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--text) 92%, transparent);
}

.contactCols {
  display: grid;
  align-content: start;
  gap: 40px;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  padding: 10px 6px;
}

.contactColTitle {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
}

.contactLink {
  display: block;
  padding: 8px 0;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.62);
}

.contactLink:hover {
  color: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

.contactHint {
  font-size: 12px;
  color: var(--muted);
}

.contactBottomRight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Page footer OUTSIDE the contact panel */

.siteFooter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 6px 10px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
}

.siteFooterRight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.siteFooterIcons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Responsive */

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

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

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

  .contactPanelInner {
    padding: 22px;
  }

  .contactLogo {
    font-size: 40px;
  }
}

/* Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding-top: 18px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
}

.footerRight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.mutedSmall {
  color: var(--muted);
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

/* =========================
   CAREER (match reference)
========================= */

#career {
  /* Reduced from 80px — less dead space between the last timeline entry
     and the bridge, so the terminal node sits closer to the transition. */
  padding-bottom: 52px;
  position: relative;
  /* overflow visible so comet can fly in from outside section bounds */
}

/* .careerX removed — new mpCareer section is full-screen, needs no padding */

/* ================================================
   Unified Section Heading System
   Small eyebrow row: [01] [───]
   Large title below: [Category Name]
================================================ */

/* ── Signal label — column layout so number sits above big title ── */
.secLabel {
  display: flex;
  flex-direction: column;
  align-items: center;    /* horizontally center children */
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}

/* ── Eyebrow row: number + line on one line ── */
.secEyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.secNum {
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(155, 140, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

.secLabelLine {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(155, 140, 255, 0.5), rgba(68, 240, 177, 0.15), transparent);
  border-radius: 1px;
}

.secCategory {
  font-family: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: none;
  line-height: 1.05;
  color: transparent;
  background: linear-gradient(
    110deg,
    #9b8cff 0%,
    #c8c0ff 28%,
    #7eb4ff 55%,
    #44f0b1 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: secTitleSweep 9s ease-in-out infinite alternate;
}

@keyframes secTitleSweep {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

/* No blinking cursor on the promoted title */
.secCategory::after {
  content: none;
}

/* ── Light-sweep animation for section titles ── */
@keyframes sigSweep {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

/* ── Per-section heading containers ── */

/* .careerHead / .careerTitle removed — embedded in new mpCareer sticky section */

/* Big section title (Projects, Ask) */

/* ── Signal main heading — hidden, replaced by promoted .secCategory ── */
.sectionTitle {
  display: none;
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 18px; /* space for descenders + ::after accent bar */
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: -0.055em;
  color: transparent;
  /* Wide gradient so the sweep has room to travel */
  background: linear-gradient(
    110deg,
    #9b8cff 0%,
    #c8c0ff 18%,
    #7eb4ff 36%,
    #44f0b1 52%,
    #9b8cff 68%,
    #c8c0ff 84%,
    #9b8cff 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sigSweep 8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 36px rgba(155, 140, 255, 0.20));
}

/* Ghost outline echo — subtle depth */
.sectionTitle::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(155, 140, 255, 0.11);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  pointer-events: none;
  z-index: -1;
  transform: translate(3px, 5px);
}

/* Accent bar — extends under title on reveal */
.sectionTitle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, #9b8cff 0%, #44f0b1 55%, transparent 100%);
  border-radius: 1px;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

/* Scroll-reveal — blur-in for cinematic feel */
.sectionTitle.sig-hidden {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px) drop-shadow(0 0 0px rgba(155, 140, 255, 0));
}
.sectionTitle.sig-visible {
  opacity: 1;
  transform: translateY(0);
  filter: drop-shadow(0 0 36px rgba(155, 140, 255, 0.20));
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s ease;
}
.sectionTitle.sig-visible::after {
  width: 72px;
}

/* Limit width of Projects header text (matches Career section) */

.workHead > div:first-child {
  max-width: 60ch;
}

.gradWord {
  color: inherit;
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
}

.careerAccent {
  color: transparent;
  background: linear-gradient(135deg, var(--hot), var(--hot2));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ============================================================
   MP CAREER — full-screen sticky scroll section
   ============================================================ */

/* ── Scroll wrapper: height set by JS → (N + 0.5) * window.innerHeight ── */
/* Break out of the max-width .wrap container to span the full viewport */
.mpCareerWrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ── Sticky frame — stays pinned while wrapper scrolls past ── */
.mpCareerSticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #080912;
}

/* ── Full-bleed background photo layer ── */
.mpCareerBg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mpCareerBgSlide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
}
.mpCareerBgSlide.mp-active { opacity: 1; }

/* ── Dark gradient overlay (left-heavy for text legibility) ── */
.mpCareerOverlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(8, 9, 18, 0.90) 0%,
    rgba(8, 9, 18, 0.65) 35%,
    rgba(8, 9, 18, 0.38) 62%,
    rgba(8, 9, 18, 0.65) 100%
  );
}

/* ── Vertical grid lines ── */
.mpCareerGrid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
}
.mpCareerGridLine {
  border-right: 1px solid rgba(255, 255, 255, 0.055);
}
.mpCareerGridLine:last-child { border-right: none; }

/* ── Left description panel ── */
.mpCareerLeft {
  position: absolute;
  top: 0;
  left: 0;
  width: 28%;
  height: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px 48px 48px;
  box-sizing: border-box;
}

.mpCareerLabel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}

.mpCareerLabelNum {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(155, 140, 255, 0.55);
}

.mpCareerLabelDash {
  display: block;
  width: 36px;
  height: 1px;
  background: rgba(155, 140, 255, 0.35);
  border-radius: 1px;
  flex-shrink: 0;
}

.mpCareerLabelText {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
}

.mpCareerDesc {
  position: relative;
  min-height: 130px;
}

.mpCareerDescItem {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.52);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  max-width: 32ch;
}
.mpCareerDescItem.mp-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Card stage ── */
.mpCareerStage {
  position: absolute;
  top: 0;
  left: 0;          /* full width — left panel overlays on top via z-index */
  right: 10%;
  height: 100%;
  z-index: 5;       /* below left panel (z-index: 10) so text stays on top */
  display: flex;
  align-items: center;
  overflow: hidden;
}

.mpCareerTrack {
  display: flex;
  gap: 200px;       /* wide enough that only the centred card is visible */
  align-items: center;
  flex-shrink: 0;
  will-change: transform;
}

/* ── Portrait card ── */
.mpCareerCard {
  flex: 0 0 360px;
  height: min(68svh, 490px);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  opacity: 0.38;
  transform: scale(0.88);
  transition:
    opacity  0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}
.mpCareerCard.mp-active {
  opacity: 1;
  transform: scale(1);
}

/* Photo (top 48%) */
.mpCareerCardPhoto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background-size: cover;
  background-position: center;
}

/* White body (bottom 52%) — more room for skills chips */
.mpCareerCardBody {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: #ffffff;
  padding: 20px 20px 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Color accent bar top of body */
.mpCareerCardBody::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #9b8cff 0%, #44f0b1 100%);
}

.mpCareerCardTop {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mpCareerCardRole {
  margin: 0;
  font-size: clamp(11px, 1.0vw, 14px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #080912;
  line-height: 1.3;
}

/* Skill chips */
.mpCareerCardSkills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mpCareerCardSkill {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(8, 9, 18, 0.62);
  background: rgba(155, 140, 255, 0.09);
  border: 1px solid rgba(155, 140, 255, 0.24);
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  line-height: 1;
}


.mpCareerCardMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.mpCareerCardCategory,
.mpCareerCardLocation {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(8, 9, 18, 0.40);
}

.mpCareerCardYear {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #9b8cff;
  margin-top: 3px;
}

/* ── Right sidebar strip ── */
.mpCareerSidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 10%;
  height: 100%;
  z-index: 10;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 8px;
  box-sizing: border-box;
}

.mpCareerSidebarLabel {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
}

.mpCareerSidebarCounter {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.40);
  transition: color 0.3s ease;
}

/* ── Bottom progress bar ── */
.mpCareerProgress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 15;
  background: rgba(255, 255, 255, 0.07);
}
.mpCareerProgressBar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #9b8cff 0%, #44f0b1 100%);
  transition: width 0.12s ease;
}

/* ── Mobile ── */
@media (max-width: 700px) {
  .mpCareerLeft {
    display: none;
  }
  .mpCareerStage {
    left: 0;
    right: 9%;
  }
  .mpCareerCard {
    flex: 0 0 250px;
    height: min(64svh, 420px);
  }
  .mpCareerSidebar {
    width: 9%;
  }
}

/* =========================
   TECH STACK (your tiles)
========================= */

/* ── Tech Stack section ───────────────────────────────────────────── */
.section.tech {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #06070f;
  padding: clamp(40px, 5.5vw, 72px) 20px clamp(64px, 8vw, 110px);
}

/* Heatmap canvas — fills the section, sits behind all content */
#techHeatCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Lift section content above canvas */
#tech .techHead,
#tech #techGrid {
  position: relative;
  z-index: 1;
}

.section-head {
  margin-bottom: 28px;
  text-align: center;
}

.section-title {
  margin-bottom: 40px;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}

.section-title span {
  color: transparent;
  background: linear-gradient(90deg, #8b9cff, #6ef3c5);
  -webkit-background-clip: text;
  background-clip: text;
}

.tech-grid {
  display: grid;
  justify-content: center;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 110px));
  width: min(980px, 100%);
  margin: 10px auto 0;
  justify-items: center;
}

@media (max-width: 1100px) {
  .tech-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .tech-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .tech-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tech-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  transform: translateZ(0);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  aspect-ratio: 1 / 1;
  backdrop-filter: blur(10px);
}

.tech-tile::after {
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(140, 120, 255, 0.22),
    transparent 55%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  content: "";
}

.tech-tile-inner {
  display: grid;
  gap: 10px;
  place-items: center;
  padding: 14px;
  text-align: center;
}

.tech-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.tech-icon svg,
.tech-icon i {
  opacity: 0.85;
  filter: grayscale(1) brightness(1.45) contrast(0.9);
  transition:
    filter 220ms ease,
    opacity 220ms ease,
    transform 220ms ease;
}

.tech-icon svg {
  width: 36px;
  height: 36px;
}

.tech-icon i {
  display: inline-block;
  font-size: 34px;
  line-height: 1;
  color: currentColor;
}

.tech-tile:hover .tech-icon svg,
.tech-tile:focus-visible .tech-icon svg,
.tech-tile:hover .tech-icon i,
.tech-tile:focus-visible .tech-icon i {
  opacity: 1;
  filter: none;
  transform: scale(1.03);
}

.tech-label {
  font-size: 11px;
  line-height: 1.1;
  opacity: 0.75;
}

.tech-tile:hover,
.tech-tile:focus-visible {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  transform: scale(1.08);
}

.tech-tile:hover::after,
.tech-tile:focus-visible::after {
  opacity: 1;
}

.tech-tile:focus-visible {
  outline: 2px solid rgba(160, 140, 255, 0.55);
  outline-offset: 3px;
}

.tech-groups {
  margin-top: 10px;
}

.tech-group {
  margin: 26px auto 0;
}

.tech-group-title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.7;
}

/* =========================
   TECH SPHERE (new design)
========================= */

.techHead {
  margin-bottom: 16px;
  text-align: center;
}

/* ── Tag echo row ─────────────────────────────────────────────────────
   Ghost pills in the same visual language as project filter tags.
   The same technology names that labelled the work above reappear here
   as faded markers — the project surface dissolving into the system below.
   A top-to-bottom fade (emerging from the bridge space above) and a
   bottom-to-top fade (merging into the category strips below) frame
   this row as a transitional decode layer, not standalone content. */
.techTagsEcho {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 560px;
  margin: 0 auto 28px;
  /* Fade in from the top (from the bridge/Projects zone) and
     fade out at the bottom (into the arsenal category strips). */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent    0%,
    black          22%,
    black          68%,
    transparent   100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent    0%,
    black          22%,
    black          68%,
    transparent   100%
  );
}

.tteTag {
  display: inline-block;
  padding: 4px 13px;
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(155, 140, 255, 0.50);
  background: rgba(155, 140, 255, 0.04);
  border: 1px solid rgba(155, 140, 255, 0.16);
  border-radius: 999px;
  pointer-events: none;
  /* Subtle staggered vertical offset via nth-child so tags feel scattered,
     not rigidly grid-aligned — more like floating signal than a table. */
  transform: translateY(0px);
}

.tteTag:nth-child(odd)  { transform: translateY(-3px); }
.tteTag:nth-child(even) { transform: translateY(3px);  }

@media (max-width: 600px) {
  .techTagsEcho { display: none; }
}

.techKicker {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
}

.techTitle {
  display: none;
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 18px;
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: -0.055em;
  color: transparent;
  background: linear-gradient(
    110deg,
    #9b8cff 0%,
    #c8c0ff 18%,
    #7eb4ff 36%,
    #44f0b1 52%,
    #9b8cff 68%,
    #c8c0ff 84%,
    #9b8cff 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sigSweep 8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 36px rgba(155, 140, 255, 0.20));
}

.techTitle::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(155, 140, 255, 0.11);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  pointer-events: none;
  z-index: -1;
  transform: translate(3px, 5px);
}

.techTitle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, #9b8cff 0%, #44f0b1 55%, transparent 100%);
  border-radius: 1px;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.techTitle span {
  color: inherit;
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
}

.techTitle.sig-hidden {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px) drop-shadow(0 0 0px rgba(155, 140, 255, 0));
}
.techTitle.sig-visible {
  opacity: 1;
  transform: translateY(0);
  filter: drop-shadow(0 0 36px rgba(155, 140, 255, 0.20));
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s ease;
}
.techTitle.sig-visible::after {
  width: 72px;
}

.techSphereMount {
  display: grid;
  place-items: center;
  width: min(980px, 100%);
  margin: 0 auto;
}

.techSphereStage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(720px, 92vw);
  user-select: none;
  touch-action: none;
  -webkit-user-select: none;
  aspect-ratio: 1 / 1;
}

.techSphereStage,
.techSphereStage * {
  user-select: none;
  -webkit-user-select: none;
}

.techSphereBackdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(255, 255, 255, 0.06),
      transparent 58%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(75, 105, 255, 0.14),
      transparent 62%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.65) 75%,
      rgba(0, 0, 0, 0.82) 100%
    );
  opacity: 1;
  filter: blur(0.2px);
  border-radius: 999px;
  pointer-events: none;
}

.techSphereBall {
  position: absolute;
  width: 64%;
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255, 255, 255, 0.1),
      transparent 46%
    ),
    radial-gradient(
      circle at 52% 54%,
      rgba(75, 105, 255, 0.16),
      transparent 62%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.05),
      rgba(0, 0, 0, 0.35) 72%,
      rgba(0, 0, 0, 0.55) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.techSphereBall::after {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.22) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  opacity: 0.32;
  transform: scale(1.05);
  content: "";
  mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 74%);
}

/* ========= 3D-ish net (stacked layers) ========= */

.techSphereNet {
  position: absolute;
  width: 64%;
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(75, 105, 255, 0.1) 0px,
    rgba(75, 105, 255, 0.1) 1px,
    transparent 1px,
    transparent 22px
  );
  border-radius: 999px;
  pointer-events: none;
  will-change: transform;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  mask-image: radial-gradient(circle at 50% 50%, #000 64%, transparent 78%);
}

/* wireframe grid */

.techSphereNet::before {
  position: absolute;
  inset: -8%;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.16) 0px,
      rgba(255, 255, 255, 0.16) 1px,
      transparent 1px,
      transparent 18px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px,
      transparent 18px
    );
  filter: blur(0.2px);
  content: "";
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 76%);
}

/* diagonal “geodesic” feel */

.techSphereNet::after {
  position: absolute;
  inset: -12%;
  background: repeating-linear-gradient(
    35deg,
    rgba(75, 105, 255, 0.14) 0px,
    rgba(75, 105, 255, 0.14) 1px,
    transparent 1px,
    transparent 26px
  );
  opacity: 0.55;
  content: "";
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 78%);
}

/* extra net layers */

.techSphereNetA {
  opacity: 0.22;
  mix-blend-mode: screen;
}

.techSphereNetB {
  opacity: 0.15;
  mix-blend-mode: screen;
  filter: blur(0.3px);
}

.techSphereNetC {
  opacity: 0.1;
  mix-blend-mode: screen;
  filter: blur(0.6px);
}

.techSphere {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.techOrb {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, filter;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.techOrb:focus {
  outline: none;
}

.techOrb:focus-visible {
  outline: none;
}

.techOrbIcon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
}

.techOrbIcon svg,
.techOrbIcon i {
  width: 36px;
  height: 36px;
  font-size: 36px;
  line-height: 1;
  background: transparent !important;
  opacity: calc(0.55 + (var(--front, 0) * 0.45));
  filter: grayscale(calc(1 - var(--front, 0)))
    saturate(calc(0.65 + (var(--front, 0) * 0.95)))
    brightness(calc(1.05 + (var(--front, 0) * 0.22))) contrast(0.96);
  border: 0 !important;
  transition:
    filter 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.techOrbLabel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: rgba(14, 12, 24, 0.72);
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transform: translateX(-50%);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

/* IMPORTANT: no hover box, only icon glow + label */

.techOrb.isHot {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.techOrb.isHot .techOrbIcon svg,
.techOrb.isHot .techOrbIcon i {
  opacity: 1;
  filter: grayscale(0) saturate(1.2) brightness(1.12) contrast(1.02)
    drop-shadow(0 0 16px rgba(75, 105, 255, 0.38))
    drop-shadow(0 0 30px rgba(75, 105, 255, 0.18));
  transform: scale(1.08);
}

.techOrb.isHot .techOrbLabel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.techSphereHint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0.65;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 520px) {
  .techOrb {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .techOrbIcon {
    width: 36px;
    height: 36px;
  }
  .techOrbIcon svg,
  .techOrbIcon i {
    width: 30px;
    height: 30px;
    font-size: 30px;
  }
}

/* ===== Projects showcase wrapper ===== */

.railWrap {
  position: relative;
  margin-top: 28px;
}

.railViewport {
  overflow: visible;
}

/* Vertical stack — one full-width card per row */
.workGrid.rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Rail arrows hidden */
.railArrow {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   COMPANIES & COLLABORATIONS — Full-bleed auto-scroll strip
   ══════════════════════════════════════════════════════════ */

/* Break out of the .wrap max-width container */
#companies {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  /* Coloured background — clearly distinguishes the strip as a section divider */
  background: linear-gradient(
    90deg,
    transparent                                              0%,
    color-mix(in srgb, var(--accent2) 10%, transparent)    20%,
    color-mix(in srgb, var(--accent)  14%, transparent)    50%,
    color-mix(in srgb, var(--accent2) 10%, transparent)    80%,
    transparent                                             100%
  );
  border-top:    1px solid color-mix(in srgb, var(--accent2) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent2) 45%, transparent);
}

/* Small centred label above the strip */
.companiesLabel {
  display: block;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* Tinted accent colour, very subtle */
  color: color-mix(in srgb, var(--accent) 38%, transparent);
  font-family: 'DM Mono', 'Courier New', monospace;
  padding: 13px 0 0;
  pointer-events: none;
}

/* Draggable strip area — edge-fade masks logos into nothing */
.companiesStrip {
  padding: 12px 0 14px;
  cursor: grab;
  overflow: hidden;
  touch-action: pan-y;
  /* Fade logos to invisible at the left/right viewport edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 90px,
    black calc(100% - 90px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 90px,
    black calc(100% - 90px),
    transparent 100%
  );
}
.companiesStrip.is-grabbing { cursor: grabbing; }

/* Scrolling track — moved by JS transform */
.companiesTrack {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  user-select: none;
}

/* One set of logos */
.companiesSet {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Logo wrapper — link or span */
.companyLogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.companyLogo img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 140px;
  filter: brightness(0) invert(1);
  opacity: 0.58;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.25s ease;
}
a.companyLogo:hover img { opacity: 0.95; }

/* Copenhagen Airports — keep original brand colours (navy box + yellow CPH).
   filter: invert(1) without brightness(0) turns navy→warm cream, yellow→dark-blue,
   which is readable and colourful on the dark strip. */
.logo-cph img {
  filter: invert(1) !important;
  opacity: 0.82 !important;
}
a.logo-cph:hover img { opacity: 1 !important; }

/* SEAVIS — text badge in place of logo */
.companyLogoText {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.58);
  transition: color 0.25s ease;
}
a.companyLogo:hover .companyLogoText { color: rgba(255,255,255,0.95); }

/* Dot separator */
.companySep {
  display: inline-block;
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent2) 30%, rgba(255,255,255,0.12));
  margin: 0 52px;
}

@media (max-width: 640px) {
  .companyLogo img { height: 24px; max-width: 110px; }
  .companySep { margin: 0 32px; }
  .companyLogoText { font-size: 11px; }
  .companiesStrip {
    -webkit-mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent);
    mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent);
  }
}

/* ══════════════════════════════════════════════════════════
   PROJECTS — Stacked Card Deck
   ══════════════════════════════════════════════════════════ */

/* Section base */
#work {
  position: relative;
  overflow: visible;
  contain: none;
  padding-bottom: 80px;
}

/* Particle canvas */
.deckBgCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── Section header ── */
.deckHead {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  margin-bottom: 52px;
  padding-top: 24px;
}

/* Big display title */
.deckTitle {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: clamp(64px, 10vw, 140px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.88;
  color: #fff;
  margin: 0;
  /* Subtle text shadow for depth */
  text-shadow: 0 2px 40px rgba(122,107,255,0.18);
}

/* Controls row: count badge + search + counter + arrows */
.deckHeadControls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Reset badge margin when used standalone in controls row */
.deckHeadControls .workTotalBadge {
  margin-left: 0;
  font-size: 13px;
  padding: 3px 12px;
}

.deckSearchBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(240,239,248,0.65);
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.deckSearchBtn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
  color: rgba(240,239,248,0.9);
}
.deckSearchBtn kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(240,239,248,0.5);
}

.deckCounter {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(240,239,248,0.45);
  min-width: 52px;
  text-align: center;
}

.deckArrowBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(240,239,248,0.7);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.deckArrowBtn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  transform: scale(1.08);
}
.deckArrowBtn:active { transform: scale(0.95); }

/* ── Deck wrapper ── */
.deckWrap {
  position: relative;
  z-index: 2;
  /* Height = card height + stack overflow for 3 peeking cards */
  height: calc(min(500px, 56vw) + 110px);
  margin-bottom: 80px;
}

/* ── Individual card ── */
.deckCard {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 94vw);
  height: min(500px, 56vw);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, opacity;
  transform-origin: bottom center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease;
  border: 1px solid rgba(255,255,255,0.08);
}

.deckCard[data-pos="0"] {
  transform: translateX(-50%) translateY(0) scale(1);
  z-index: 10;
  cursor: grab;
  box-shadow:
    0 2px 0 1px rgba(255,255,255,0.06),
    0 24px 80px rgba(0,0,0,0.7),
    0 4px 24px rgba(0,0,0,0.4);
}
.deckCard[data-pos="0"].is-dragging {
  cursor: grabbing;
  transition: none;
}
.deckCard[data-pos="1"] {
  transform: translateX(-50%) translateY(26px) scale(0.945);
  z-index: 9;
  pointer-events: none;
  cursor: default;
}
.deckCard[data-pos="2"] {
  transform: translateX(-50%) translateY(52px) scale(0.890);
  z-index: 8;
  pointer-events: none;
  cursor: default;
}
.deckCard[data-pos="3"] {
  transform: translateX(-50%) translateY(78px) scale(0.830);
  z-index: 7;
  pointer-events: none;
  cursor: default;
}

/* Disable pointer events on back cards during drag */
.deckWrap.deck-dragging .deckCard[data-pos="1"],
.deckWrap.deck-dragging .deckCard[data-pos="2"],
.deckWrap.deck-dragging .deckCard[data-pos="3"] {
  pointer-events: none;
}

/* Swipe hint animation on first load */
@keyframes deckSwipeHint {
  0%   { transform: translateX(-50%) translateX(0) rotate(0deg); }
  25%  { transform: translateX(-50%) translateX(-22px) rotate(-1.3deg); }
  75%  { transform: translateX(-50%) translateX(22px) rotate(1.3deg); }
  100% { transform: translateX(-50%) translateX(0) rotate(0deg); }
}

/* Deck intro — cards start below, fly up into stack */
.deckCard.deck-intro-hidden {
  transform: translateX(-50%) translateY(140px) scale(0.85) !important;
  opacity: 0 !important;
  transition: none !important;
}

/* ── Card panels ── */
.deckCardLeft {
  flex: 0 0 42%;
  width: 42%;
  background: linear-gradient(135deg, var(--dk-bg-l, #080218) 0%, var(--dk-bg-l, #080218) 100%);
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* subtle ambient glow on left panel */
.deckCardLeft::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dk-primary, #9b8cff) 0%, transparent 70%);
  opacity: 0.08;
  pointer-events: none;
}

.deckCardRight {
  flex: 0 0 58%;
  width: 58%;
  background: linear-gradient(135deg, var(--dk-bg-r, #02081a) 0%, var(--dk-bg-r, #02081a) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.5vw, 32px);
  position: relative;
  overflow: hidden;
}

/* gradient separator between panels */
.deckCardRight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--dk-primary, #9b8cff), transparent);
  opacity: 0.18;
}

/* ── Card left: content ── */
.deckCardTop {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.deckCardNum {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  color: var(--dk-primary, #9b8cff);
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 0.55;
}

.deckCardAccentLine {
  width: 36px;
  height: 2px;
  background: var(--dk-primary, #9b8cff);
  margin: 8px 0 12px;
  border-radius: 2px;
}

.deckCardTitle {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--text, #f0eff8);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 10px;
}

.deckCardDesc {
  font-size: clamp(11px, 1.15vw, 13px);
  line-height: 1.7;
  color: rgba(240,239,248,0.52);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.deckCardHighlights {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.deckCardHighlightItem {
  font-size: clamp(10px, 1.05vw, 12px);
  color: rgba(240,239,248,0.58);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
}

.deckCardHighlightPlus {
  color: var(--dk-primary, #9b8cff);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.5;
}

.deckCardBottom {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deckCardTags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.deckCardTag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: rgba(240,239,248,0.5);
  white-space: nowrap;
}

.deckCardLinks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.deckCardLink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 7px;
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
}
.deckCardLink:active { transform: scale(0.96); }

.deckCardLink.live {
  background: var(--dk-primary, #9b8cff);
  color: #08050e;
  font-weight: 600;
}
.deckCardLink.live:hover { filter: brightness(1.12); }

.deckCardLink.code {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(240,239,248,0.75);
}
.deckCardLink.code:hover {
  background: rgba(255,255,255,0.13);
  color: #fff;
}

/* ── Browser mockup (right panel) ── */
.deckCardMockup {
  width: 100%;
  max-width: min(460px, 52vw);
  border-radius: 10px;
  overflow: hidden;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: -24px 24px 60px rgba(0,0,0,0.6);
  transform: perspective(900px) rotateY(-10deg) rotateX(3deg);
  transform-origin: center center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  flex-shrink: 0;
}

.deckCard[data-pos="0"]:not(.is-dragging) .deckCardMockup:hover {
  transform: perspective(900px) rotateY(-5deg) rotateX(1.5deg);
  box-shadow: -18px 28px 70px rgba(0,0,0,0.65);
}

.deckCardMockupBar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.deckCardMockupDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.deckCardMockupDot:nth-child(1) { background: #ff5f57; }
.deckCardMockupDot:nth-child(2) { background: #febc2e; }
.deckCardMockupDot:nth-child(3) { background: #28c840; }

.deckCardMockupImg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #000;
  max-height: calc(min(500px, 56vw) - 80px);
  object-position: top center;
}

/* ── Deck dismiss flyout animation ── */
@keyframes deckFlyLeft {
  to { transform: translateX(-50%) translateX(-130vw) rotate(-18deg); opacity: 0; }
}
@keyframes deckFlyRight {
  to { transform: translateX(-50%) translateX(130vw) rotate(18deg); opacity: 0; }
}
.deckCard.fly-left  { animation: deckFlyLeft  0.38s cubic-bezier(0.4,0,1,1) forwards; }
.deckCard.fly-right { animation: deckFlyRight 0.38s cubic-bezier(0.4,0,1,1) forwards; }

/* ── Swipe drag indicator — reserved for future use ── */

/* projGrid removed */

/* ── Command Palette ── */
.projSearch {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(80px, 12vh, 140px);
}
.projSearch.is-open {
  display: flex;
}

.projSearchBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,7,17,0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.projSearchPanel {
  position: relative;
  z-index: 1;
  width: min(640px, 92vw);
  background: rgba(14,12,24,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.6),
    0 0 0 1px rgba(122,107,255,0.12);
  overflow: hidden;
  animation: projSearchIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes projSearchIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.projSearchBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.projSearchIcon {
  flex-shrink: 0;
  color: rgba(240,239,248,0.35);
}

.projSearchInput {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: #f0eff8;
  caret-color: var(--accent, #7a6bff);
}
.projSearchInput::placeholder { color: rgba(240,239,248,0.3); }

.projSearchEsc {
  flex-shrink: 0;
  padding: 3px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(240,239,248,0.4);
  letter-spacing: 0.05em;
}

.projSearchResults {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.projSearchResults:empty::after {
  content: 'No results';
  display: block;
  padding: 24px 18px;
  text-align: center;
  font-size: 13px;
  color: rgba(240,239,248,0.3);
}

.projSearchItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.projSearchItem:hover,
.projSearchItem.is-selected {
  background: rgba(122,107,255,0.12);
}
.projSearchItem.is-selected {
  outline: none;
}

.projSearchThumb {
  flex-shrink: 0;
  width: 56px;
  height: 36px;
  border-radius: 5px;
  overflow: hidden;
  background: #0a0a14;
  border: 1px solid rgba(255,255,255,0.07);
}
.projSearchThumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.projSearchItemText {
  flex: 1;
  min-width: 0;
}
.projSearchItemName {
  font-size: 13.5px;
  font-weight: 600;
  color: #f0eff8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.projSearchItemTags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.projSearchItemTag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: rgba(240,239,248,0.45);
}

.projSearchNoResult {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  gap: 8px;
}
.projSearchNoResultTitle {
  font-size: 14px;
  color: rgba(240,239,248,0.45);
}
.projSearchNoResultSub {
  font-size: 12px;
  color: rgba(240,239,248,0.25);
}

/* ── Mobile responsive ── */
@media (max-width: 700px) {
  .deckWrap {
    height: calc(min(420px, 140vw) + 100px);
    margin-bottom: 60px;
  }

  .deckCard {
    flex-direction: column;
    width: min(420px, 94vw);
    height: auto;
    min-height: min(420px, 140vw);
  }

  .deckCard[data-pos="0"] { transform: translateX(-50%) translateY(0) scale(1); }
  .deckCard[data-pos="1"] { transform: translateX(-50%) translateY(12px) scale(0.96); }
  .deckCard[data-pos="2"] { transform: translateX(-50%) translateY(24px) scale(0.92); }
  .deckCard[data-pos="3"] { transform: translateX(-50%) translateY(36px) scale(0.88); }

  .deckCardLeft {
    flex: none;
    width: 100%;
    padding: 20px 18px 16px;
    order: 2;
  }

  .deckCardRight {
    flex: none;
    width: 100%;
    padding: 14px 14px 0;
    order: 1;
  }

  .deckCardMockup {
    transform: none;
    max-width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  }

  .deckCardMockupImg {
    max-height: 44vw;
  }

  .deckCardRight::before { display: none; }

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

  .deckHead { flex-direction: column; align-items: flex-start; }
  .deckHeadRight { flex-wrap: wrap; }
}

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

  .deckCard {
    min-height: auto;
  }
}

/* ── Deck swipe direction indicator ── */
.deckSwipeLeft,
.deckSwipeRight {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 16px;
  border-radius: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.15s;
}
.deckSwipeLeft {
  left: 20px;
  background: rgba(239,68,68,0.18);
  border: 1px solid rgba(239,68,68,0.4);
  color: #f87171;
}
.deckSwipeRight {
  right: 20px;
  background: rgba(34,197,94,0.18);
  border: 1px solid rgba(34,197,94,0.4);
  color: #4ade80;
}

/* ------------------------------
   Ask Me (Contact)
------------------------------ */

.askTitle {
  margin: 8px 0 6px;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.askSub {
  max-width: 58ch;
  margin: 0 auto;
  color: var(--muted);
}

.askMeWrap {
  text-align: center;
}

.askTop {
  display: grid;
  align-items: center;
  gap: 14px;
  grid-template-columns: 84px 1fr;
  margin-bottom: 14px;
}

.askAvatar {
  width: 96px;
  height: 96px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(180, 160, 255, 0.25),
    rgba(80, 70, 140, 0.15)
  );
  border: 1px solid var(--stroke);
  border-radius: 50%;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.askAvatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.askAvatar span {
  font-weight: 800;
  letter-spacing: -0.03em;
  opacity: 0.9;
}

.askAvatar::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 25% 20%,
    rgba(75, 105, 255, 0.20),
    transparent 55%
  );
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.askWrap--simple {
  max-width: 860px;
  margin: 18px auto 28px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.askToken::before {
  position: absolute;
  inset: -8px;
  background: conic-gradient(
    from 0deg,
    rgba(75, 105, 255, 0.85),
    rgba(120, 150, 255, 0.85),
    rgba(75, 105, 255, 0.85)
  );
  opacity: 0.42;
  filter: blur(10px);
  border-radius: 999px;
  transform: translateZ(-30px);
  content: "";
}

.askToken::after {
  position: absolute;
  inset: -1px;
  background: color-mix(in srgb, var(--glass) 40%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  content: "";
}

@keyframes tokenSway {
  0% {
    transform: rotateY(-10deg) rotateX(6deg) translateY(0px);
  }

  50% {
    transform: rotateY(10deg) rotateX(-6deg) translateY(-6px);
  }

  100% {
    transform: rotateY(-10deg) rotateX(6deg) translateY(0px);
  }
}

.askBubble::after {
  position: absolute;
  top: 12px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: color-mix(in srgb, var(--glass2) 86%, transparent);
  border-radius: 4px;
  transform: rotate(45deg);
  border-right: 1px solid color-mix(in srgb, var(--stroke) 85%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--stroke) 85%, transparent);
  content: "";
}

.askChat {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 0 2px 14px;
}

.askMsg {
  width: fit-content;
  max-width: 78ch;
  padding: 12px 14px;
  line-height: 1.55;
  background: color-mix(in srgb, var(--glass) 76%, transparent);
  border: 1px solid var(--stroke);
  border-radius: 16px;
}

.askMsg.user {
  margin-left: auto;
  background: color-mix(in srgb, var(--glass2) 82%, transparent);
  border-color: rgba(120, 148, 255, 0.32);
}

.askForm {
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: 1fr 110px;
}

.askForm--simple {
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: 1fr 110px;
  max-width: 720px;
  margin: 0 auto;
}

.askInput:focus {
  border-color: rgba(160, 140, 255, 0.55);
  box-shadow: 0 0 0 6px rgba(160, 140, 255, 0.12);
}

.askMeta {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 720px) {
  .askTop {
    grid-template-columns: 64px 1fr;
  }

  .askAvatar {
    width: 64px;
    height: 64px;
  }

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

  .askSend {
    width: 100%;
  }

  .askStage {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .askToken {
    margin: 0 auto;
  }

  .askBubble {
    margin: 0 auto;
  }

  .askBubble::before {
    left: 50%;
    top: -8px;
    transform: translateX(-50%) rotate(45deg);
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid var(--stroke);
    border-top: 1px solid var(--stroke);
  }

  .askForm--simple {
    grid-template-columns: 1fr;
  }
}

.askInputWrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 18px auto 0;
  padding: 10px 10px;
  background: color-mix(in srgb, var(--glass2) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 85%, transparent);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

#askSend {
  position: relative;
  z-index: 1;
}

/* ── AI / Ask section ──────────────────────────────────────────────
   background-attachment:fixed keeps the photo stationary while
   everything else scrolls.  As tech slides off the top, the photo
   appears to rise from beneath — no JS, no sticky, no locking.
─────────────────────────────────────────────────────────────────── */
.ask-reveal {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #06070f;
  padding: clamp(80px, 11svh, 128px) 0 0;
}

/* Canvas sits behind all content */
#askBgCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.ask-reveal > * {
  position: relative;
  z-index: 1;
}

/* ==============================
   Ask Me — redesigned split panel
============================== */

.askHead {
  margin-bottom: 10px;
  text-align: center;
}

.askSub {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin: 6px auto 36px;  /* auto left/right keeps it centred */
  letter-spacing: 0.01em;
}

/* Main panel — card split into two columns */

.askPanel {
  display: grid;
  grid-template-columns: 290px 1fr;
  max-width: 960px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(75, 105, 255, 0.15);
  background: #07080d;
  min-height: 480px;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(75, 105, 255, 0.12),
    0 0 60px  rgba(75, 105, 255, 0.10),
    0 0 130px rgba(75, 105, 255, 0.06);
}

/* ---- LEFT: Identity panel ---- */

.askIdentity {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 24px 28px;
  background: linear-gradient(165deg, #04071a 0%, #030815 55%, #07080d 100%);
  border-right: 1px solid rgba(75, 105, 255, 0.12);
  gap: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Ambient glow blob behind avatar */

.askIdentity::before {
  content: “”;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(closest-side, rgba(75, 105, 255, 0.14) 0%, transparent 100%);
  pointer-events: none;
}

/* Avatar with animated conic ring */

.askAvatarWrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.askAvatarRing {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #4b69ff 0%, #6b8fff 35%, transparent 55%, transparent 70%, #4b69ff 100%);
  opacity: 0.55;
  animation: askRingSpin 7s linear infinite;
}

@keyframes askRingSpin {
  to { transform: rotate(360deg); }
}

.askAvatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(75, 105, 255, 0.28);
  background: #05091a;
}

.askOnlineDot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #07080d;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.65);
  animation: askDotPulse 2.5s ease-in-out infinite;
}

@keyframes askDotPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
  50%       { box-shadow: 0 0 16px rgba(34, 197, 94, 0.9); }
}

.askIdMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.askIdName {
  display: block;
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
}

.askIdRole {
  display: block;
  font-size: 0.75rem;
  color: var(--hot);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.askIdBio {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 2px 0;
}

/* Topic chips */

.askChips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 6px;
}

.askChip {
  width: 100%;
  padding: 9px 14px;
  background: rgba(75, 105, 255, 0.05);
  border: 1px solid rgba(75, 105, 255, 0.16);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms ease;
}

.askChip:hover {
  background: rgba(75, 105, 255, 0.12);
  border-color: rgba(75, 105, 255, 0.38);
  color: var(--text);
  transform: translateX(2px);
}

/* ---- RIGHT: Chat panel ---- */

.askChatPanel {
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.askChatMessages {
  flex: 1;
  overflow-y: auto;
  padding: 28px 26px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(75, 105, 255, 0.25) transparent;
}

/* Messages */

.askMsg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.58;
}

.askMsg.bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.askMsg.user {
  align-self: flex-end;
  background: rgba(75, 105, 255, 0.11);
  border: 1px solid rgba(75, 105, 255, 0.24);
  color: var(--text);
  border-bottom-right-radius: 4px;
}

/* Thinking status */

.askMeta {
  padding: 4px 26px 8px;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  opacity: 0.75;
}

/* Input row */

.askFormRow {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(75, 105, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.askInputField {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.88rem;
  font-family: var(--font);
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.askInputField::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.askInputField:focus {
  border-color: rgba(75, 105, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(75, 105, 255, 0.08);
}

.askSendBtn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(75, 105, 255, 0.12);
  border: 1px solid rgba(75, 105, 255, 0.32);
  color: var(--hot);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.askSendBtn:hover {
  background: rgba(75, 105, 255, 0.22);
  box-shadow: 0 0 18px rgba(75, 105, 255, 0.2);
  transform: translateY(-1px);
}

.askSendBtn:active {
  transform: translateY(0);
}

/* Light mode adjustments */

[data-theme="light"] .askPanel {
  background: #f8f9ff;
  border-color: rgba(75, 105, 255, 0.18);
}

[data-theme="light"] .askIdentity {
  background: linear-gradient(165deg, #f0f2ff 0%, #f5f6fd 55%, #f8f9ff 100%);
  border-right-color: rgba(75, 105, 255, 0.14);
}

[data-theme="light"] .askIdentity::before {
  background: radial-gradient(closest-side, rgba(75, 105, 255, 0.1) 0%, transparent 100%);
}

[data-theme="light"] .askAvatar {
  background: #e0e4ff;
}

[data-theme="light"] .askOnlineDot {
  border-color: #f8f9ff;
}

[data-theme="light"] .askMsg.bot {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .askMsg.user {
  background: rgba(75, 105, 255, 0.08);
  border-color: rgba(75, 105, 255, 0.2);
}

[data-theme="light"] .askFormRow {
  background: rgba(0, 0, 0, 0.04);
  border-top-color: rgba(75, 105, 255, 0.12);
}

[data-theme="light"] .askInputField {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .askInputField::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .askChip {
  background: rgba(75, 105, 255, 0.04);
  border-color: rgba(75, 105, 255, 0.18);
  color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .askChip:hover {
  background: rgba(75, 105, 255, 0.1);
  color: rgba(0, 0, 0, 0.85);
}

/* Mobile — stack panels vertically */

@media (max-width: 760px) {
  .askPanel {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .askIdentity {
    border-right: none;
    border-bottom: 1px solid rgba(75, 105, 255, 0.12);
    padding: 28px 20px 22px;
    gap: 12px;
  }

  .askChips {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
  }

  .askChip {
    width: auto;
    flex: 1 1 auto;
    text-align: center;
    transform: none !important;
  }

  .askChatPanel {
    min-height: 340px;
  }

  .askChatMessages {
    padding: 20px 18px 10px;
  }

  .askFormRow {
    padding: 12px 14px;
  }
}

/* Static story mode for mobile (ONLY when JS adds #story.storyStatic) */

@media (max-width: 900px) {
  #story.storyStatic {
    min-height: auto;
    padding: 22px 0 10px;
  }

  #story.storyStatic .storyGrid {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  /* Put avatar first on mobile */
  #story.storyStatic .storyCenter {
    order: 1;
  }

  #story.storyStatic .storyLeft {
    order: 2;
  }

  #story.storyStatic .storyRight {
    order: 3;
  }

  #story.storyStatic .storyLeft,
  #story.storyStatic .storyRight {
    min-height: auto;
    width: 100%;
  }

  /* The key: stop absolute stacking on mobile */
  #story.storyStatic .scene {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0 0 16px 0;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Avatar size */
  #story.storyStatic .avatarStage {
    width: min(360px, 82vw);
  }

  /* 3D canvas: reduce overscale that can cause clipping/overflow */
  #story.storyStatic #threeMount canvas {
    width: 120% !important;
    height: 120% !important;
  }
}

/* If reduced motion is on (common on iPhone), don't hide reveal elements */

@media (prefers-reduced-motion: reduce) {
  .r {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================
   Mobile (phones)
========================= */

@media (max-width: 760px) {
  /* Hard stop: no accidental horizontal overflow */
  html,
  body {
    overflow-x: clip; /* clip, not hidden — preserves sticky scroll containers */
  }

  /* =========================
     Header (pill nav version)
  ========================= */

  .topbar {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
  }

  .topIconBtn {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0;
  }

  /* Contact button: compact on mobile */
  .topActionBtn {
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    flex-shrink: 0;
  }

  .pillNav {
    max-width: 100% !important;
    width: 100% !important;
    padding: 5px;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* Fade hint on right edge to show scrollability */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  .pillNav::-webkit-scrollbar {
    display: none;
  }

  .pillTrack {
    inset: 5px;
  }

  .pillLink {
    padding: 8px 12px;
    font-size: 12.5px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Floating resume button tends to cover content on phones */
  .resumeBtn {
    display: none;
  }
}

/* ── Extra-small phones (≤430px): nav needs more space ── */
@media (max-width: 430px) {
  .topbar {
    left: 8px !important;
    right: 8px !important;
    gap: 6px !important;
  }

  .topIconBtn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .topActionBtn {
    height: 36px;
    padding: 0 10px;
    font-size: 11px;
  }

  .pillNav {
    padding: 4px;
    gap: 0;
  }

  .pillLink {
    padding: 7px 9px;
    font-size: 11px;
  }

  /* Hide "Home" link on tiny phones — logo/scroll-up covers it */
  .pillLink[href="#hero"],
  .pillLink[data-target="hero"] {
    display: none;
  }

  /* Left logo */
  .topLogo {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 900;
    letter-spacing: -0.02em;

    border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
    background: color-mix(in srgb, var(--glass2) 88%, transparent);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  }

  .topRight {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  /* Dropdown inside pill nav */
  .pillDrop {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .pillDropBtn {
    cursor: pointer;
    background: transparent;
    border: 0;
  }

  .pillChev {
    opacity: 0.75;
    margin-left: 6px;
    font-size: 12px;
  }

  .pillMenu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    padding: 8px;
    border-radius: 16px;

    border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
    background: rgba(8, 9, 12, 0.94);
    box-shadow:
      0 30px 100px rgba(0, 0, 0, 0.72),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 200;
  }

  .pillMenu a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 650;
    font-size: 13px;
  }

  .pillMenu a:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  /* =========================
   HERO (template-style)
========================= */
  .heroRef {
    position: relative;
    min-height: calc(100svh - var(--navH));
    display: grid;
    place-items: center;
    padding: 34px 0 26px;
  }

  .heroRefInner {
    text-align: center;
    max-width: 980px;
    padding: 0 18px;
    z-index: 2;
  }

  .heroRefBadge {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 9, 12, 0.55);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
  }

  .heroRefTitle {
    margin: 18px 0 10px;
    font-size: clamp(44px, 6.2vw, 82px);
    line-height: 1.02;
    letter-spacing: -0.05em;
  }

  .heroRefLead {
    margin: 0 auto;
    max-width: 62ch;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    font-size: 16px;
  }

  .heroRefCtas {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .heroRefMiniStats {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .heroMiniStat {
    min-width: 140px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 9, 12, 0.45);
    border-radius: 18px;
    padding: 12px 14px;
    backdrop-filter: blur(10px);
  }

  .heroMiniNum {
    font-weight: 950;
    font-size: 22px;
    letter-spacing: -0.02em;
  }

  .heroMiniLab {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
  }

  .heroRefHorizon {
    position: absolute;
    inset: auto -20% -40% -20%;
    height: 70%;
    background:
      radial-gradient(
        900px 360px at 50% 10%,
        rgba(155, 140, 255, 0.22),
        transparent 62%
      ),
      radial-gradient(
        1100px 420px at 50% 20%,
        rgba(68, 240, 177, 0.1),
        transparent 65%
      ),
      radial-gradient(
        1200px 520px at 50% 35%,
        rgba(0, 0, 0, 0.85),
        transparent 55%
      );
    filter: blur(18px);
    opacity: 0.95;
    pointer-events: none;
  }

  .aboutRef {
    padding-top: 10px;
  }

  /* Hide the old pinned-story visuals if any old styles remain */
  .story {
    display: none;
  }

}

/* Static story mode for mobile (ONLY when JS adds #story.storyStatic) */

@media (max-width: 900px) {
  #story.storyStatic {
    min-height: auto;
    padding: 22px 0 10px;
  }

  #story.storyStatic .storyGrid {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  #story.storyStatic .storyCenter {
    order: 1;
  }

  #story.storyStatic .storyLeft {
    order: 2;
  }

  #story.storyStatic .storyRight {
    order: 3;
  }

  #story.storyStatic .storyLeft,
  #story.storyStatic .storyRight {
    min-height: auto;
    width: 100%;
  }

  #story.storyStatic .scene {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0 0 16px 0;
    opacity: 1 !important;
    transform: none !important;
  }

  #story.storyStatic .avatarStage {
    width: min(360px, 82vw);
  }

  #story.storyStatic #threeMount canvas {
    width: 120% !important;
    height: 120% !important;
  }
}

/* If reduced motion is on (common on iPhone), don't hide reveal elements */

@media (prefers-reduced-motion: reduce) {
  .r {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* JS fallback when GSAP reveal isn't running */

.noReveal .r,
.noReveal {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* =========================
   Footer bar (outside contact panel) – Parth-style
========================= */

.footerBar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 6px 24px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
}

.footerBarRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footerIcon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-weight: 800;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  background: color-mix(in srgb, var(--glass2) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  border-radius: 12px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.footerIcon:hover {
  color: color-mix(in srgb, var(--text) 92%, transparent);
  background: color-mix(in srgb, var(--glass) 86%, transparent);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.footerIcon svg {
  opacity: 0.9;
}

/* =========================
   Header layout fix (centered pill nav)
========================= */

/* =========================
   FIX: page starts at top (hero should be full-bleed)
========================= */

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(var(--navH) + 26px) 18px 0;
  padding-top: 0 !important;
  overflow: visible !important;
}

/* =========================
   FIX: Header alignment (stable 3-column, centered pill)
========================= */

.topLogo {
  justify-self: start;
}

.topRight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

/* =========================
   Hero spacing (content down, background stays top)
========================= */

.heroSpace {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  min-height: 100svh;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
}

/* =========================
   FINAL HEADER (matches your pic 2)
========================= */

.topbar {
  position: fixed !important;
  top: 18px !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  align-items: center !important;
  gap: 18px !important;
  grid-template-columns: auto 1fr auto !important;
  width: min(1180px, calc(100% - 32px)) !important;
  height: var(--navH);
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* keep pill truly centered */

.pillNav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center !important;
  width: fit-content;
  max-width: min(720px, 100%);
  padding: 8px;
  background: color-mix(in srgb, var(--glass2) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  border-radius: 999px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px);
}

/* left + right alignment */

#themeBtn {
  justify-self: start !important;
}

#statsBtn {
  justify-self: end !important;
}

/* ── Mobile nav overrides (after the !important block above) ── */
@media (max-width: 760px) {
  .topbar {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
    gap: 8px !important;
  }
  .topIconBtn {
    width: 38px !important;
    height: 38px !important;
  }
  .topActionBtn {
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.03em !important;
  }
  .pillNav {
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }
  .pillLink {
    padding: 8px 9px !important;
    font-size: 12px !important;
  }
}

/* =========================
   HERO fills the viewport even with the negative offset
========================= */

#hero.heroSpace {
  position: relative !important;
  min-height: calc(100svh + var(--navH) + 26px) !important;
  margin-top: calc(-1 * (var(--navH) + 26px)) !important;
  overflow: hidden !important;
}

/* =========================
   HERO EARTH (final)
   - stable rim math (always visible)
   - slower + wider aurora (no “compact” look)
   - less banding / “waves”
========================= */

/* container */

.heroEarth {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: clamp(340px, 42vh, 580px);
  pointer-events: none;
  overflow: hidden;
  --hx: 0;
  --hy: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 100%
  );
  isolation: isolate;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* planet + rim (this is the “always visible” border) */

.heroEarth::before {
  position: absolute;
  bottom: calc(-1 * (var(--planetSize) - var(--rimReveal)));
  left: 50%;
  z-index: 3;
  width: var(--planetSize);
  height: var(--planetSize);
  background: radial-gradient(
    circle at 50% 42%,
    rgba(22, 22, 22, 0.96) 0%,
    rgba(0, 0, 0, 1) 64%
  );
  border-radius: 50%;
  box-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.85),
    0 -18px 70px rgba(255, 255, 255, 0.07),
    0 -90px 320px rgba(255, 130, 60, 0.1);
  transform: translateX(calc(-50% + (var(--hx) * 8px)))
    translateY(calc(var(--hy) * 5px));
  content: "";
}

/* warm base glow (keep subtle) */

.heroEarth::after {
  position: absolute;
  bottom: -12vh;
  left: 50%;
  z-index: 1;
  width: 140%;
  height: 260%;
  background: radial-gradient(
    closest-side at 50% 78%,
    rgba(255, 85, 40, 0.3),
    rgba(255, 110, 35, 0.1) 42%,
    transparent 72%
  );
  opacity: 0.85;
  filter: blur(28px);
  border-radius: 999px;
  transform: translateX(-50%);
  content: "";
}

/* aurora curtains (slower + less banding) */

.heroEarth .earthAurora {
  position: absolute;
  inset: -45% -30% -40% -30%;
  z-index: 2;
  background:
    radial-gradient(
      1200px 560px at 50% 82%,
      rgba(255, 85, 40, 0.26),
      rgba(255, 110, 35, 0.1) 44%,
      transparent 74%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 130, 60, 0) 0px,
      rgba(255, 130, 60, 0.08) 90px,
      rgba(255, 130, 60, 0.02) 170px,
      rgba(255, 130, 60, 0) 260px
    );
  background-size:
    100% 100%,
    1800px 100%;
  background-position:
    50% 50%,
    0% 50%;
  opacity: 0.65;
  mix-blend-mode: screen;
  filter: blur(30px) saturate(112%);
  pointer-events: none;
  transform: translateX(calc(var(--hx) * 12px))
    translateY(calc(var(--hy) * 6px));
  animation: earthAuroraDrift 22s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(
    1200px 560px at 50% 82%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 46%,
    rgba(0, 0, 0, 0) 74%
  );
  mask-image: radial-gradient(
    1200px 560px at 50% 82%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 46%,
    rgba(0, 0, 0, 0) 74%
  );
}

@keyframes earthAuroraDrift {
  0% {
    background-position:
      50% 50%,
      0% 50%;
    opacity: 0.55;
  }
  50% {
    background-position:
      50% 50%,
      100% 50%;
    opacity: 0.78;
  }
  100% {
    background-position:
      50% 50%,
      0% 50%;
    opacity: 0.55;
  }
}

/* rim sweep highlight (slow + subtle) */

.heroEarth .earthRim {
  position: absolute;
  bottom: calc(-1 * (var(--planetSize) - var(--rimReveal)));
  left: 50%;
  z-index: 4;
  width: var(--planetSize);
  height: var(--planetSize);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0) 304deg,
    rgba(255, 255, 255, 0.55) 332deg,
    rgba(255, 255, 255, 0) 352deg,
    transparent 360deg
  );
  opacity: 0.75;
  mix-blend-mode: screen;
  filter: blur(0.9px);
  border-radius: 50%;
  transform: translateX(calc(-50% + (var(--hx) * 8px)))
    translateY(calc(var(--hy) * 5px));
  animation: earthRimSweep 22s linear infinite;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 65.6%,
    rgba(0, 0, 0, 1) 66.9%,
    rgba(0, 0, 0, 1) 67.8%,
    transparent 69.2%
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 65.6%,
    rgba(0, 0, 0, 1) 66.9%,
    rgba(0, 0, 0, 1) 67.8%,
    transparent 69.2%
  );
}

@keyframes earthRimSweep {
  0% {
    transform: translateX(calc(-50% + (var(--hx) * 8px)))
      translateY(calc(var(--hy) * 5px)) rotate(0deg);
    opacity: 0.45;
  }
  35% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(calc(-50% + (var(--hx) * 8px)))
      translateY(calc(var(--hy) * 5px)) rotate(360deg);
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heroEarth .earthAurora,
  .heroEarth .earthRim {
    animation: none !important;
  }
}

/* =========================
   TECH SPHERE 3D NET
========================= */

.techNetSvg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 64%;
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%);
  aspect-ratio: 1 / 1;
}

.techNetSvg path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.1px;
  vector-effect: non-scaling-stroke;
}

/* Front hemisphere */

.techNetSvg path.front {
  stroke: rgba(75, 105, 255, 0.32);
}

/* Back hemisphere */

.techNetSvg path.back {
  stroke: rgba(75, 105, 255, 0.12);
}

/* =========================
   CONTACT SHEET (Get in touch) — FINAL (single source of truth)
========================= */

/* blurred background */

.contactOverlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 240ms ease;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.contactOverlay.isOpen {
  opacity: 1;
}

/* bottom sheet wrapper */

.contactSheet {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 9991;
  width: min(520px, calc(100vw - 28px));
  transform: translate(-50%, 120%);
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: transform;
}

.contactSheet.isOpen {
  transform: translate(-50%, 0%);
}

/* card */

.contactSheetInner {
  position: relative;
  padding: 18px 18px 16px;
  background: linear-gradient(
    180deg,
    rgba(14, 16, 32, 0.94),
    rgba(8, 10, 22, 0.94)
  );
  border: 1px solid rgba(75, 105, 255, 0.14);
  border-radius: 22px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

/* tiny handle at top (reference detail) */

.contactSheetInner::before {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 46px;
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  transform: translateX(-50%);
  content: "";
}

/* warm orange glow wash at top of contact sheet */

.contactSheetInner::after {
  position: absolute;
  inset: -120px -160px auto -160px;
  height: 220px;
  background: radial-gradient(
    closest-side,
    rgba(255, 90, 20, 0.28),
    rgba(75, 105, 255, 0.10),
    transparent 70%
  );
  opacity: 0.95;
  filter: blur(16px);
  pointer-events: none;
  content: "";
}

.contactClose {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
}

.contactClose:hover {
  transform: translateY(-1px);
}

.contactTitle {
  position: relative;
  z-index: 1;
  margin: 26px 0 2px;
  font-size: 46px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.contactSub {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

/* tiles should be like reference: icon top, text below (not side-by-side) */

.contactActions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}

.contactTile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 110px;
  padding: 16px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.contactTile:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 90, 20, 0.35);
  transform: translateY(-2px);
}

.tileIcon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: rgba(255, 90, 20, 0.95);
  background: rgba(255, 90, 20, 0.12);
  border: 1px solid rgba(255, 90, 20, 0.22);
  border-radius: 11px;
  overflow: visible;
}

.tileIcon svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
}

.tileText .tileTop {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 750;
}

.tileText .tileBottom {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.contactDivider {
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.06)
  );
}

.contactBottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 22px 18px;
  font-size: 13px;
  color: var(--muted);
  border-top: 0;
}

.copyRow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.copyRow:hover {
  color: rgba(255, 255, 255, 0.92);
}

.copyIcon svg {
  display: block;
  width: 16px;
  height: 16px;
  opacity: 0.75;
}

.copyText {
  font-size: 13px;
  font-weight: 700;
}

.copyValue {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* keep mini links compact so they don't force weird wrapping */

.contactMiniLinks {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.miniLink {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.miniLink svg {
  display: block;
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.miniLink:hover {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 90, 20, 0.35);
}

/* mobile */

@media (max-width: 520px) {
  .contactTitle {
    font-size: 40px;
  }

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

  .copyValue {
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* reduce motion */

@media (prefers-reduced-motion: reduce) {
  .contactSheet,
  .contactOverlay {
    transition: none !important;
  }
}

/* ------------------------------
   Stats modal
------------------------------ */

.contactLinkBtn {
  display: block;
  width: 100%;
  padding: 8px 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 650;
  line-height: inherit;
  text-align: left;
  color: rgba(255, 255, 255, 0.62); /* match .contactLink, not parent white */
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* ── Stats overlay ── */
.statsOverlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.62);
  opacity: 0;
  transition: opacity 240ms ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.statsOverlay.isOpen { opacity: 1; }

/* ── Stats modal shell ── */
.statsModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: start center;
  padding: 12px 16px;
  pointer-events: none;
}
.statsModal.isOpen { pointer-events: auto; }

.statsInner {
  width: min(1060px, 100%);
  max-height: min(96vh, 920px);
  padding: 0;
  background: rgba(6,7,17,0.97);
  border: 1px solid rgba(155,140,255,0.18);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(155,140,255,0.05) inset,
    0 48px 140px rgba(0,0,0,0.8),
    0 0 100px rgba(155,140,255,0.06);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 260ms cubic-bezier(0.22,1,0.36,1), transform 260ms cubic-bezier(0.22,1,0.36,1);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(155,140,255,0.2) transparent;
}
.statsModal.isOpen .statsInner { opacity: 1; transform: translateY(0) scale(1); }
.statsInner::-webkit-scrollbar { width: 5px; }
.statsInner::-webkit-scrollbar-thumb { background: rgba(155,140,255,0.2); border-radius: 99px; }

/* ── Close button ── */
.statsClose {
  position: sticky;
  top: 14px;
  float: right;
  margin: 14px 14px 0 0;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms, color 160ms;
  z-index: 2;
}
.statsClose:hover { background: rgba(255,77,77,0.12); color: #ff6464; border-color: rgba(255,77,77,0.3); }

/* ── Hero header ── */
.statsHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 32px 24px;
  clear: both;
}
.statsEye {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9b8cff;
  opacity: 0.8;
}
.statsH1 {
  margin: 0 0 6px;
  font-size: clamp(24px,4vw,36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg,#9b8cff 0%,#c4b8ff 50%,#44f0b1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.statsLead {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}
.statsLiveBadge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(68,240,177,0.9);
  background: rgba(68,240,177,0.07);
  border: 1px solid rgba(68,240,177,0.22);
  border-radius: 999px;
  margin-top: 4px;
}
.statsLiveDot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #44f0b1;
  box-shadow: 0 0 8px rgba(68,240,177,0.8);
  animation: statsPulse 1.8s ease-in-out infinite;
}
@keyframes statsPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.4; transform:scale(0.75); }
}

.statsDivider {
  height: 1px;
  margin: 0 32px;
  background: linear-gradient(to right, rgba(155,140,255,0.4), rgba(68,240,177,0.2), transparent);
}

/* ── Counter cards ── */
.statsGridTop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px 32px;
}
.statsCard {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: 20px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.statsCard::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 18px,
    rgba(255,255,255,0.5) 18px,
    rgba(255,255,255,0.5) 19px
  );
}
.statsCard--views {
  background: rgba(155,140,255,0.06);
  border-color: rgba(155,140,255,0.2);
}
.statsCard--likes {
  background: rgba(255,100,150,0.06);
  border-color: rgba(255,100,150,0.2);
}
.statsCardTop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.statsCardIcon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}
.statsCard--views .statsCardIcon { color: #9b8cff; }
.statsCard--likes .statsCardIcon { color: #ff6496; }
.statsCardTitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.statsBigNumber {
  font-size: clamp(48px,7vw,72px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 10px;
}
.statsCard--views .statsBigNumber {
  background: linear-gradient(135deg,#9b8cff,#c4b8ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.statsCard--likes .statsBigNumber {
  background: linear-gradient(135deg,#ff6496,#ffb3cc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.statsSubText {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  margin-top: auto;
}
.statsLoveBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  background: rgba(255,100,150,0.12);
  border: 1px solid rgba(255,100,150,0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms, transform 120ms;
  align-self: flex-start;
}
.statsLoveBtn:hover:not([disabled]) { background: rgba(255,100,150,0.22); transform: scale(1.03); }
.statsLoveBtn[disabled] { opacity: 0.5; cursor: default; }

/* ── GitHub section ── */
.statsGhHeader {
  padding: 8px 32px 16px;
}
.statsH2 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.88);
}

.statsHeatWrap {
  margin: 0 32px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
}
.statsHeatImg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  filter: invert(1) hue-rotate(175deg) saturate(1.3) brightness(0.9);
}
.statsHeatFoot {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}

/* ── GitHub tiles ── */
.statsGridBottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 20px 32px 32px;
}
.statsTile {
  padding: 16px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: border-color 200ms;
}
.statsTile:hover { border-color: rgba(155,140,255,0.25); }
.statsTile--hireable {
  background: rgba(68,240,177,0.07);
  border-color: rgba(68,240,177,0.2);
}
.statsTile--hireable .statsTileValue { color: #44f0b1; }
.statsTile--nohire {
  background: rgba(255,64,64,0.07);
  border-color: rgba(255,64,64,0.22);
}
.statsTile--nohire .statsTileValue { color: #ff6464; }
.statsTile--wide { grid-column: span 2; }
.statsTileLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-bottom: 8px;
}
.statsTileValue {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.9);
}
.statsTileValue--sm {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.statsTile--hireable .statsTileValue { color: #44f0b1; }

/* ── Responsive ── */
@media (max-width: 780px) {
  .statsHero { padding: 24px 20px 18px; }
  .statsDivider { margin: 0 20px; }
  .statsGridTop { grid-template-columns: 1fr; padding: 18px 20px; }
  .statsGhHeader { padding: 8px 20px 14px; }
  .statsHeatWrap { margin: 0 20px; }
  .statsGridBottom { grid-template-columns: 1fr 1fr; padding: 16px 20px 24px; }
  .statsTile--wide { grid-column: span 1; }
}
@media (max-width: 480px) {
  .statsGridBottom { grid-template-columns: 1fr; }
  .statsTile--wide { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════
   ABOUT — Editorial Profile  (redesigned)
   ═══════════════════════════════════════════════════ */

.abtSection {
  scroll-margin-top: 90px;
  padding-top: clamp(64px, 9vh, 112px);
  padding-bottom: clamp(64px, 9vh, 112px);
}

/* Two-column wrapper */
.abtInner {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 0;
  align-items: start;
}

/* ── Photo column ── */

.abtPhotoCol {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 56px;
}

.abtFrame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #0d0e1c;
}

/* Hide sci-fi dossier overlays */
.abtCorner,
.abtScan { display: none; }

.abtImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.04) saturate(0.92);
  transition: transform 700ms ease;
}
.abtFrame:hover .abtImg { transform: scale(1.025); }

/* Cinematic gradient at photo bottom */
.abtImgOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(8, 9, 18, 0.72) 0%,
    rgba(8, 9, 18, 0.10) 40%,
    transparent 65%
  );
  pointer-events: none;
}

/* Minimal ID tag */
.abtImgLabel {
  position: absolute;
  bottom: 16px; left: 18px; right: 18px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.abtImgId  { color: rgba(255, 255, 255, 0.45); }
.abtImgLoc { color: rgba(155, 140, 255, 0.65); }

/* Availability badge */
.abtAvail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.38);
}
.abtPulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(155, 140, 255, 0.55);
  flex-shrink: 0;
  animation: abtPulse 2.4s ease-in-out infinite;
}
@keyframes abtPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.15); }
}

/* ── Data column ── */

.abtDataCol {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 56px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Name block */
.abtNameBlock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Section eyebrow — matches career label style */
.abtEye {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(155, 140, 255, 0.55);
  transition: opacity 0.2s ease;
}
.abtEye::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(155, 140, 255, 0.38);
  flex-shrink: 0;
}
.abtEye.abt-eye-flash { opacity: 0; }

.abtName {
  margin: 0;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #ffffff;
}

.abtRole {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.35);
}

/* Bio */
.abtBio {
  margin: 0;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.52);
  max-width: 52ch;
}

/* Stats — clean large numbers, no glass card */
.abtStats {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.abtStat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  text-align: left;
  padding-right: 32px;
}
.abtStatRow {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.abtStatN {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #ffffff;
  line-height: 1;
}
.abtStatSuf {
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 900;
  color: #9b8cff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.abtStatL {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}
.abtStatDiv {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.09);
  flex-shrink: 0;
  margin-right: 32px;
}

/* Tabs — minimal underline style */
.abtTabWrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.abtTabBar {
  position: relative;
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 20px;
}
.abtTab {
  position: relative;
  z-index: 1;
  padding: 8px 22px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.abtTab.is-on        { color: #ffffff; }
.abtTab:hover:not(.is-on) { color: rgba(255, 255, 255, 0.58); }

.abtTabInk {
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px;
  background: linear-gradient(90deg, #9b8cff, #44f0b1);
  border-radius: 2px 2px 0 0;
  transition:
    left  0.26s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.abtPanels { min-height: 68px; }
.abtPanel {
  display: none;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.50);
  animation: abtPanelIn 0.22s ease both;
}
.abtPanel.is-on { display: block; }
@keyframes abtPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stack tags */
.abtStack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.abtStackLbl {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
}
.abtTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.abtTag {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 11px;
  color: rgba(155, 140, 255, 0.75);
  background: rgba(155, 140, 255, 0.06);
  border: 1px solid rgba(155, 140, 255, 0.22);
  border-radius: 4px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  cursor: default;
}
.abtTag:hover {
  color: #9b8cff;
  border-color: rgba(155, 140, 255, 0.48);
  background: rgba(155, 140, 255, 0.11);
}

/* Footer */
.abtFooter {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.36);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.abtLocIcon { color: #44f0b1; flex-shrink: 0; }
.abtLocName { font-weight: 600; color: rgba(255, 255, 255, 0.52); }
.abtFootSep { opacity: 0.25; }
.abtLocMode { color: rgba(255, 255, 255, 0.36); }

.abtMbti {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  border: 1px solid rgba(155, 140, 255, 0.22);
  border-radius: 4px;
  background: rgba(155, 140, 255, 0.06);
  margin-left: auto;
}
.abtMbtiCode {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #a78bfa;
}
.abtMbtiLabel {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.30);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .abtInner {
    grid-template-columns: 1fr;
  }
  .abtPhotoCol {
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
    padding-right: 0;
  }
  .abtFrame {
    width: clamp(140px, 38vw, 240px);
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
  }
  .abtDataCol {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 36px;
    gap: 24px;
  }
}
@media (max-width: 560px) {
  .abtPhotoCol {
    flex-direction: column;
    align-items: flex-start;
  }
  .abtFrame {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .abtTab { padding: 8px 14px 12px; }
  .abtStat { padding-right: 20px; }
  .abtStatDiv { margin-right: 20px; }
}

/* ── Light mode ── */
[data-theme="light"] .abtDataCol   { border-left-color: rgba(8, 9, 18, 0.08); }
[data-theme="light"] .abtName      { color: #0a0a12; }
[data-theme="light"] .abtRole      { color: rgba(8, 9, 18, 0.45); }
[data-theme="light"] .abtBio       { color: rgba(8, 9, 18, 0.60); }
[data-theme="light"] .abtStatN     { color: #0a0a12; }
[data-theme="light"] .abtStatSuf   { color: rgba(90, 72, 212, 0.90); }
[data-theme="light"] .abtStatL     { color: rgba(8, 9, 18, 0.38); }
[data-theme="light"] .abtStatDiv   { background: rgba(8, 9, 18, 0.10); }
[data-theme="light"] .abtTabBar    { border-bottom-color: rgba(8, 9, 18, 0.10); }
[data-theme="light"] .abtTab       { color: rgba(8, 9, 18, 0.32); }
[data-theme="light"] .abtTab.is-on { color: rgba(8, 9, 18, 0.90); }
[data-theme="light"] .abtTab:hover:not(.is-on) { color: rgba(8, 9, 18, 0.60); }
[data-theme="light"] .abtPanel     { color: rgba(8, 9, 18, 0.58); }
[data-theme="light"] .abtStackLbl  { color: rgba(8, 9, 18, 0.30); }
[data-theme="light"] .abtTag {
  color: rgba(70, 50, 195, 0.85);
  background: rgba(90, 72, 212, 0.06);
  border-color: rgba(90, 72, 212, 0.22);
}
[data-theme="light"] .abtTag:hover {
  color: rgba(70, 50, 195, 1);
  background: rgba(90, 72, 212, 0.12);
  border-color: rgba(90, 72, 212, 0.42);
}
[data-theme="light"] .abtFooter    { border-top-color: rgba(8, 9, 18, 0.07); color: rgba(8, 9, 18, 0.38); }
[data-theme="light"] .abtLocName   { color: rgba(8, 9, 18, 0.62); }
[data-theme="light"] .abtMbti      { border-color: rgba(90, 72, 212, 0.22); background: rgba(90, 72, 212, 0.06); }
[data-theme="light"] .abtMbtiCode  { color: #7c3aed; }
[data-theme="light"] .abtMbtiLabel { color: rgba(8, 9, 18, 0.45); }


/* ================================================
   HERO v4 — Three.js Torus + Serif Editorial
================================================ */

/* Hero base — use the CSS variable so it matches the actual body bg
   (body[data-bg="stars"] sets --bg:#000; default is #060711) */
#hero.heroSpace {
  position: relative !important;
  background: var(--bg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Three.js canvas fills entire hero */
.heroCanvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  will-change: opacity; /* own compositor layer — avoids repaint on opacity change */
  pointer-events: none;
  /* Stars stay fully visible almost to the very bottom so they flow
     seamlessly into the next section's star field */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black            0%,
    black            82%,
    rgba(0,0,0,0.40) 92%,
    transparent      100%
  );
  mask-image: linear-gradient(
    to bottom,
    black            0%,
    black            82%,
    rgba(0,0,0,0.40) 92%,
    transparent      100%
  );
}

/* Announcement chip — top left */
.heroChip {
  position: absolute;
  top: calc(var(--navH) + 22px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
  transition: background 200ms, border-color 200ms;
  white-space: nowrap;
}
.heroChip:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
}
.heroChipDot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4b69ff;
  box-shadow: 0 0 8px #4b69ff;
  animation: chipPulse 2s ease-in-out infinite;
}
@keyframes chipPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.heroChipArrow { opacity: 0.5; font-size: 14px; }

/* Main content — sits in lower-center of viewport, overlays torus */
.heroContent {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 16vh;
}

/* Small label above name */
.heroLabel {
  font-family: var(--font);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(200,212,255,0.44);
  margin: 0;
}

/* Giant serif name */
.heroName {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heroNameLine {
  display: block;
  font-size: clamp(56px, 10.5vw, 158px);
  color: rgba(255,255,255,0.96);
  text-shadow:
    0 0  70px rgba(80,110,255,0.24),
    0 2px 50px rgba(40,65,210,0.14),
    0 0 180px rgba(60,90,230,0.08);
}

.heroNameLine--outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.22);
  font-style: italic;
  text-shadow: 0 0 55px rgba(70,95,225,0.12);
}

/* Accent divider between name and subtitle */
.heroSub::before {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,90,20,0.50), rgba(75,105,255,0.50));
  margin: 6px auto 10px;
}

/* Colored subtitle */
.heroSub {
  font-family: var(--font);
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(148,168,255,0.68);
  margin: 0;
}

/* CTA buttons — minimal text style */
.heroBtns {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 14px;
}

.heroBtnLink {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.55);
  transition: color 200ms;
  display: flex;
  align-items: center;
  gap: 6px;
}
.heroBtnLink:hover { color: rgba(255,255,255,0.9); }
.heroBtnLink--primary {
  color: rgba(255,255,255,0.85);
  padding: 9px 22px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  transition: background 220ms, border-color 220ms, box-shadow 220ms, color 220ms;
}
.heroBtnLink--primary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.26);
  box-shadow: 0 0 28px rgba(80,110,255,0.18), 0 0 8px rgba(80,110,255,0.10);
  color: #fff;
}

/* Marquee */
.heroMarqueeOuter {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  z-index: 4;
  overflow: hidden;
  border-top:    1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 10px 0;
  background: rgba(0,0,0,0.12);
  /* Soft fade at both edges so it doesn't cut hard */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image:         linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.heroMarquee {
  display: flex;
  width: max-content;
  animation: heroMarqueeScroll 44s linear infinite;
  will-change: transform;
}
.heroMarqueeOuter:hover .heroMarquee { animation-play-state: paused; }

.heroMarqueeTrack {
  display: inline-block;
  font-size: 0.68rem;
  color: rgba(180,195,255,0.22);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 16px;
}

@keyframes heroMarqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Scroll cue */
.heroScrollCue {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.heroScrollCue .line {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3));
  animation: scrollLineGrow 1.8s ease-in-out infinite;
}
@keyframes scrollLineGrow {
  0%,100% { transform: scaleY(1); opacity: 0.5; }
  50%      { transform: scaleY(1.3); opacity: 1; }
}
.heroScrollCue .txt {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

/* Light mode: hero has a clean white background */
[data-theme="light"] #hero,
[data-theme="light"] #hero.heroSpace {
  background: #ffffff !important;
}

/* Fade to white at the bottom instead of to dark */
[data-theme="light"] #hero::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.18) 32%,
    rgba(255, 255, 255, 0.60) 58%,
    rgba(255, 255, 255, 0.90) 80%,
    #ffffff                   100%
  );
}

/* Canvas: particles are white — invert + multiply so they read as
   soft dark marks against the white background */
[data-theme="light"] .heroCanvas {
  opacity: 0.42;
  mix-blend-mode: multiply;
  filter: invert(1);
}

/* ── Text — dark on white ── */
[data-theme="light"] .heroNameLine {
  color: rgba(8, 9, 20, 0.92);
  text-shadow: 0 2px 40px rgba(75, 105, 255, 0.10);
}
[data-theme="light"] .heroNameLine--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(8, 9, 20, 0.16);
  text-shadow: none;
}
[data-theme="light"] .heroLabel {
  color: rgba(40, 50, 110, 0.52);
}
[data-theme="light"] .heroSub {
  color: rgba(55, 70, 160, 0.62);
}
[data-theme="light"] .heroSub::before {
  background: linear-gradient(90deg, rgba(155, 140, 255, 0.55), rgba(75, 105, 255, 0.55));
}
[data-theme="light"] .heroChip {
  background: rgba(8, 9, 20, 0.04);
  border-color: rgba(8, 9, 20, 0.10);
  color: rgba(8, 9, 20, 0.62);
}

/* CTA buttons */
[data-theme="light"] .heroBtnLink {
  color: rgba(8, 9, 20, 0.52);
}
[data-theme="light"] .heroBtnLink:hover {
  color: rgba(8, 9, 20, 0.88);
}
[data-theme="light"] .heroBtnLink--primary {
  color: rgba(8, 9, 20, 0.80);
  border-color: rgba(8, 9, 20, 0.14);
  background: rgba(8, 9, 20, 0.04);
}
[data-theme="light"] .heroBtnLink--primary:hover {
  background: rgba(8, 9, 20, 0.08);
  border-color: rgba(8, 9, 20, 0.22);
  box-shadow: 0 0 22px rgba(75, 105, 255, 0.10);
  color: rgba(8, 9, 20, 0.95);
}

/* Hero category pills — white bg, need real contrast */
[data-theme="light"] #hero .showcasePill {
  border-color: rgba(8, 9, 20, 0.16);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(8, 9, 20, 0.72);
  box-shadow: 0 1px 10px rgba(8, 9, 20, 0.07);
  backdrop-filter: blur(10px);
}
[data-theme="light"] #hero .showcasePill:hover {
  border-color: rgba(75, 105, 255, 0.42);
  background: rgba(255, 255, 255, 0.96);
  color: rgba(8, 9, 20, 0.92);
  box-shadow: 0 2px 14px rgba(75, 105, 255, 0.14);
}
[data-theme="light"] #hero .showcasePill.is-active {
  border-color: rgba(75, 105, 255, 0.52);
  background: rgba(75, 105, 255, 0.10);
  color: rgba(8, 9, 20, 0.92);
  box-shadow: 0 0 18px rgba(75, 105, 255, 0.14);
}

/* Showcase overlay text */
[data-theme="light"] .showcaseDesc {
  color: rgba(8, 9, 20, 0.52);
}
[data-theme="light"] .showcaseKicker {
  color: rgba(75, 105, 255, 0.65);
}

/* Marquee band */
[data-theme="light"] .heroMarqueeOuter {
  background: rgba(8, 9, 20, 0.025);
  border-top-color:    rgba(8, 9, 20, 0.06);
  border-bottom-color: rgba(8, 9, 20, 0.06);
}

/* Mobile */
@media (max-width: 660px) {
  .heroContent { margin-top: 26vh; gap: 8px; }
  .heroNameLine { font-size: clamp(44px, 14vw, 80px); }
  .heroBtns { gap: 16px; }
  .heroMarqueeOuter { bottom: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .heroMarquee, .heroChipDot, .heroScrollCue .line { animation: none !important; }
  .heroCanvas { display: none; }
}

/* ── Hero entrance animations ─────────────────────────────────────────
   Staggered hero entrance on page load. Only plays when motion is preferred. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Staggered entrance */
  body .heroChip          { animation: heroFadeIn 0.9s ease-out          0.12s both; }
  body .heroLabel         { animation: heroFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
  body .heroName          { animation: heroFadeUp 1.0s cubic-bezier(0.22,1,0.36,1) 0.44s both; }
  body .heroSub           { animation: heroFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.66s both; }
  body .heroBtns          { animation: heroFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.84s both; }
  body .heroMarqueeOuter  { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.96s both; }
  body .heroScrollCue     { animation: heroFadeIn 0.7s ease-out          1.08s both; }
}

/* ================================================================
   PRIVACY POLICY MODAL
   ================================================================ */

.privOverlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.62);
  opacity: 0;
  transition: opacity 240ms ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.privOverlay.isOpen { opacity: 1; }

.privModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none;
}
.privModal.isOpen { pointer-events: auto; }

.privInner {
  width: min(780px, 100%);
  max-height: min(92vh, 860px);
  padding: 0;
  background: rgba(6,7,17,0.96);
  border: 1px solid rgba(155,140,255,0.2);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(155,140,255,0.06) inset,
    0 48px 140px rgba(0,0,0,0.75),
    0 0 80px rgba(155,140,255,0.06);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 260ms cubic-bezier(0.22,1,0.36,1), transform 260ms cubic-bezier(0.22,1,0.36,1);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(155,140,255,0.25) transparent;
}
.privModal.isOpen .privInner {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.privInner::-webkit-scrollbar { width: 5px; }
.privInner::-webkit-scrollbar-thumb { background: rgba(155,140,255,0.25); border-radius: 99px; }

/* Close button */
.privClose {
  position: sticky;
  top: 14px;
  float: right;
  margin: 14px 14px 0 0;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms, color 160ms;
  z-index: 2;
}
.privClose:hover { background: rgba(255,77,77,0.12); color: #ff6464; border-color: rgba(255,77,77,0.3); }

/* Hero header */
.privHero {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 36px 36px 28px;
  clear: both;
}
.privShield {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(155,140,255,0.15), rgba(68,240,177,0.08));
  border: 1px solid rgba(155,140,255,0.28);
  border-radius: 16px;
  color: #9b8cff;
}
.privShield svg { width: 26px; height: 26px; }
.privEye {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9b8cff;
  opacity: 0.8;
}
.privTitle {
  margin: 0 0 6px;
  font-size: clamp(22px,4vw,32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg,#9b8cff 0%,#c9bfff 50%,#44f0b1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.privMeta {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.02em;
}

.privDivider {
  height: 1px;
  margin: 0 36px;
  background: linear-gradient(to right, rgba(155,140,255,0.35), rgba(68,240,177,0.2), transparent);
}

/* Summary pills */
.privPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px 36px;
}
.privPill {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
}
.privPill--green {
  color: rgba(68,240,177,0.9);
  background: rgba(68,240,177,0.07);
  border-color: rgba(68,240,177,0.22);
}
.privPill--amber {
  color: rgba(255,190,80,0.9);
  background: rgba(255,190,80,0.07);
  border-color: rgba(255,190,80,0.22);
}

/* Body sections */
.privBody {
  padding: 0 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.privSection { }
.privSectionTitle {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9b8cff;
}
.privBody p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.68);
}
.privBody p:last-child { margin-bottom: 0; }
.privList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.privList li {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.68);
  padding-left: 18px;
  position: relative;
}
.privList li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #44f0b1;
  opacity: 0.7;
}
.privLink {
  color: #9b8cff;
  text-decoration: none;
  border-bottom: 1px solid rgba(155,140,255,0.3);
  transition: color 150ms, border-color 150ms;
}
.privLink:hover { color: #44f0b1; border-color: rgba(68,240,177,0.5); }
.privBody code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  padding: 2px 7px;
  background: rgba(155,140,255,0.1);
  border: 1px solid rgba(155,140,255,0.18);
  border-radius: 5px;
  color: rgba(200,190,255,0.9);
}

/* Footer note */
.privFooterNote {
  margin: 0 36px 32px;
  padding: 14px 18px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}

/* Mobile */
@media (max-width: 520px) {
  .privHero { padding: 24px 22px 20px; gap: 16px; }
  .privDivider { margin: 0 22px; }
  .privPills { padding: 16px 22px; }
  .privBody { padding: 0 22px 22px; }
  .privFooterNote { margin: 0 22px 24px; }
}

/* ================================================================
   TERMS OF USE MODAL  (mirrors privacy modal, teal accent)
   ================================================================ */

.termsOverlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.62);
  opacity: 0;
  transition: opacity 240ms ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.termsOverlay.isOpen { opacity: 1; }

.termsModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none;
}
.termsModal.isOpen { pointer-events: auto; }

.termsInner {
  width: min(780px, 100%);
  max-height: min(92vh, 860px);
  background: rgba(6,7,17,0.96);
  border: 1px solid rgba(68,240,177,0.18);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(68,240,177,0.05) inset,
    0 48px 140px rgba(0,0,0,0.75),
    0 0 80px rgba(68,240,177,0.05);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 260ms cubic-bezier(0.22,1,0.36,1), transform 260ms cubic-bezier(0.22,1,0.36,1);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(68,240,177,0.22) transparent;
}
.termsModal.isOpen .termsInner { opacity: 1; transform: translateY(0) scale(1); }
.termsInner::-webkit-scrollbar { width: 5px; }
.termsInner::-webkit-scrollbar-thumb { background: rgba(68,240,177,0.22); border-radius: 99px; }

.termsClose {
  position: sticky;
  top: 14px;
  float: right;
  margin: 14px 14px 0 0;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms, color 160ms;
  z-index: 2;
}
.termsClose:hover { background: rgba(255,77,77,0.12); color: #ff6464; border-color: rgba(255,77,77,0.3); }

.termsHero {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 36px 36px 28px;
  clear: both;
}
.termsIcon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(68,240,177,0.12), rgba(155,140,255,0.07));
  border: 1px solid rgba(68,240,177,0.26);
  border-radius: 16px;
  color: #44f0b1;
}
.termsIcon svg { width: 26px; height: 26px; }

.termsEye {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #44f0b1;
  opacity: 0.8;
}
.termsTitle {
  margin: 0 0 6px;
  font-size: clamp(22px,4vw,32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg,#44f0b1 0%,#8bf5d8 50%,#9b8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.termsMeta {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.02em;
}

.termsDivider {
  height: 1px;
  margin: 0 36px;
  background: linear-gradient(to right, rgba(68,240,177,0.35), rgba(155,140,255,0.2), transparent);
}

.termsPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px 36px;
}
.termsPill {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
}
.termsPill--green {
  color: rgba(68,240,177,0.9);
  background: rgba(68,240,177,0.07);
  border-color: rgba(68,240,177,0.22);
}
.termsPill--amber {
  color: rgba(255,190,80,0.9);
  background: rgba(255,190,80,0.07);
  border-color: rgba(255,190,80,0.22);
}

.termsBody {
  padding: 0 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.termsSectionTitle {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #44f0b1;
}
.termsBody p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.68);
}
.termsBody p:last-child { margin-bottom: 0; }
.termsList {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.termsList li {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.68);
  padding-left: 18px;
  position: relative;
}
.termsList li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #44f0b1;
  opacity: 0.7;
}
.termsLink {
  color: #44f0b1;
  text-decoration: none;
  border-bottom: 1px solid rgba(68,240,177,0.3);
  transition: color 150ms, border-color 150ms;
}
.termsLink:hover { color: #9b8cff; border-color: rgba(155,140,255,0.5); }

.termsFooterNote {
  margin: 0 36px 32px;
  padding: 14px 18px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}

@media (max-width: 520px) {
  .termsHero { padding: 24px 22px 20px; gap: 16px; }
  .termsDivider { margin: 0 22px; }
  .termsPills { padding: 16px 22px; }
  .termsBody { padding: 0 22px 22px; }
  .termsFooterNote { margin: 0 22px 24px; }
}

/* ================================================================
   LIGHT MODE – DEFINITIVE VISIBILITY FIXES  (end-of-file, !important)
   These rules appear last so they win the cascade absolutely.
   All opacity / color overrides that were losing specificity battles
   are re-declared here with !important.
   ================================================================ */

/* --- Career: dim items were near-invisible (0.23–0.31 effective) --- */
[data-theme="light"] .careerYear.dim        { opacity: 0.52 !important; }
[data-theme="light"] .careerRightItem.dim   { opacity: 0.52 !important; }

[data-theme="light"] .careerItemBtn.dim .careerRole,
[data-theme="light"] .careerItemBtn.dim .careerSub {
  opacity: 0.60 !important;
}

/* Career active row: make sure active items read at full strength */
[data-theme="light"] .careerYear.active     { opacity: 1 !important; color: rgba(8,9,12,0.92) !important; }
[data-theme="light"] .careerItemBtn.active .careerRole,
[data-theme="light"] .careerItemBtn.active .careerSub { opacity: 1 !important; }

/* --- Projects subtitle: double-fade (opacity × alpha) collapses to 0.36 --- */
[data-theme="light"] .workHead .p { opacity: 1 !important; color: rgba(8,9,12,0.55) !important; }

/* --- Tags: text color too faint, background fighting glass2 --- */
[data-theme="light"] .tag {
  background: rgba(8,9,12,0.05) !important;
  border-color: rgba(8,9,12,0.12) !important;
  color: rgba(8,9,12,0.68) !important;
}
[data-theme="light"] .tag:hover,
[data-theme="light"] .tag.active {
  background: rgba(75,105,255,0.09) !important;
  border-color: rgba(75,105,255,0.24) !important;
  color: rgba(55,80,200,0.92) !important;
}

/* --- Filter bar (tagsBar) active button --- */
[data-theme="light"] .tagsBar button {
  color: rgba(8,9,12,0.65) !important;
}
[data-theme="light"] .tagsBar button.active {
  color: rgba(8,9,12,0.92) !important;
}

/* --- Footer icons: glass2 background = white on white --- */
[data-theme="light"] .footerIcon {
  background: rgba(8,9,12,0.05) !important;
  border-color: rgba(8,9,12,0.11) !important;
  color: rgba(8,9,12,0.65) !important;
  box-shadow: 0 2px 8px rgba(8,9,12,0.05) !important;
}
[data-theme="light"] .footerIcon:hover {
  background: rgba(8,9,12,0.08) !important;
  border-color: rgba(75,105,255,0.30) !important;
  color: rgba(8,9,12,0.90) !important;
}


/* --- Section label: use gradient text (same as dark mode, adjusted for light) --- */
[data-theme="light"] .secCategory {
  background: linear-gradient(110deg, #6a5acd 0%, #4b69ff 45%, #00b894 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Hero marquee (slightly stronger so it reads as content not ghost) --- */
[data-theme="light"] .heroMarqueeTrack { color: rgba(10,15,40,0.35) !important; }

/* --- Scroll cue text --- */
[data-theme="light"] .heroScrollCue .txt { color: rgba(10,15,40,0.40) !important; }

/* --- Career description in active/dim states --- */
[data-theme="light"] .careerDesc { color: rgba(8,9,12,0.60) !important; }
[data-theme="light"] .careerRightItem.active .careerDesc { color: rgba(8,9,12,0.80) !important; }

/* --- Career line: base opacity:0.35 collapses visibility --- */
[data-theme="light"] .careerLine { opacity: 0.65 !important; background: rgba(8,9,12,0.18) !important; }


/* ═══════════════════════════════════════════════════════════════════════
   Showcase section — particle morphing expertise
═══════════════════════════════════════════════════════════════════════ */

.showcaseSection {
  /* Pull the section up so the particle canvas starts in the hero's fade zone —
     the showcase canvas appears to grow from the same dark field as the hero. */
  padding-top: 0;
  margin-top: -56px;
  padding-bottom: 72px;
  overflow: visible; /* allow ::before glow to extend above */
}

.showcaseInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: min(96vw, 1200px);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* ── Header ── */

.showcaseHeader {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
  padding-bottom: 20px;
}

.showcaseKicker {
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  font-weight: 500;
  color: rgba(155, 140, 255, 0.55);
  text-transform: uppercase;
  margin: 0 0 14px;
}

.showcaseTitle {
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: transparent;
  background: linear-gradient(120deg, #9b8cff 0%, #7eb4ff 42%, #44f0b1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 32px rgba(155, 140, 255, 0.20));
  margin: 0 0 12px;
  transition: opacity 220ms ease, transform 220ms ease;
}

.showcaseTitle.scTrans {
  opacity: 0;
  transform: translateY(-6px);
}

.showcaseDesc {
  font-size: clamp(13px, 1.55vw, 16px);
  color: rgba(255, 255, 255, 0.48);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.7;
  transition: opacity 220ms ease;
}

.showcaseDesc.scTrans {
  opacity: 0;
}

/* ── Canvas ── */

.showcaseCanvasWrap {
  /* 100vw breaks out of .wrap's max-width. The parent's align-items:center
     already centers this oversized item correctly — no extra margin needed. */
  position: relative;
  width: 100vw;
  /* Top fade: particles emerge from hero darkness.
     Bottom fade: particles dissolve downward — releasing into the About section
     rather than hard-cutting. The two fades frame the canvas as a middle zone
     where identity coalesces and then disperses into person. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent       0%,
    rgba(0,0,0, 0.35) 5%,
    rgba(0,0,0, 0.72) 11%,
    black             20%,
    black             72%,
    rgba(0,0,0, 0.55) 84%,
    rgba(0,0,0, 0.18) 93%,
    transparent       100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent       0%,
    rgba(0,0,0, 0.35) 5%,
    rgba(0,0,0, 0.72) 11%,
    black             20%,
    black             72%,
    rgba(0,0,0, 0.55) 84%,
    rgba(0,0,0, 0.18) 93%,
    transparent       100%
  );
}

#showcaseCanvas {
  display: block;
  width: 100%;
  height: clamp(480px, 68vw, 780px);
}

/* ── Pills ── */

.showcasePills {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
  flex-wrap: wrap;
}

.showcasePill {
  padding: 9px 22px;
  border-radius: 100px;
  border: 1px solid rgba(75, 105, 255, 0.20);
  background: rgba(75, 105, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.50);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease,
              transform 160ms ease, box-shadow 160ms ease;
  outline: none;
}

.showcasePill:hover {
  border-color: rgba(75, 105, 255, 0.50);
  background: rgba(75, 105, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.showcasePill.is-active {
  border-color: rgba(75, 105, 255, 0.70);
  background: rgba(75, 105, 255, 0.16);
  color: #fff;
  box-shadow: 0 0 18px rgba(75, 105, 255, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ── Responsive ── */

@media (max-width: 760px) {
  .showcaseSection { padding-top: 0; margin-top: -36px; padding-bottom: 48px; }
  .showcaseHeader { padding-bottom: 12px; margin-top: 8px; }
  #showcaseCanvas { height: clamp(360px, 90vw, 520px); }
  .showcasePill { padding: 8px 18px; font-size: 11px; }
}
/* cache-bust: 20260326 */

/* ═══════════════════════════════════════════════════════════
   Signal Bridge — section transition dividers
   ═══════════════════════════════════════════════════════════ */
.secBridge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 18px;
  height: 72px;          /* vertical rhythm between sections  */
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

/* ── Left line: purple, grows left → right ── */
.sbLine--l {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(155, 140, 255, 0.08) 20%,
    rgba(155, 140, 255, 0.45) 100%
  );
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Right line: teal, grows right → left ── */
.sbLine--r {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left,
    transparent 0%,
    rgba(68, 240, 177, 0.08) 20%,
    rgba(68, 240, 177, 0.35) 100%
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Badge ── */
.sbBadge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  background: rgba(155, 140, 255, 0.04);
  border: 1px solid rgba(155, 140, 255, 0.16);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(5px) scale(0.97);
  transition:
    opacity  0.45s ease 0.55s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
  box-shadow: 0 0 18px rgba(155, 140, 255, 0.05);
}

.sbDiamond {
  font-size: 9px;
  color: #9b8cff;
  opacity: 0.7;
  line-height: 1;
}

.sbNum {
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #9b8cff;
}

.sbDash {
  width: 14px;
  height: 1px;
  background: linear-gradient(to right, rgba(155, 140, 255, 0.5), rgba(68, 240, 177, 0.4));
  border-radius: 1px;
  flex-shrink: 0;
}

.sbLabel {
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(68, 240, 177, 0.65);
}

/* ── Activated state (added by JS IntersectionObserver) ── */
.secBridge.sb-live .sbLine--l,
.secBridge.sb-live .sbLine--r {
  transform: scaleX(1);
}

.secBridge.sb-live .sbBadge {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Narrative tagline beneath each bridge ── */
.sbCopy {
  text-align: center;
  font-size: 0.67rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.20);
  margin: -10px 0 28px;
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  pointer-events: none;
}

/* ── Mobile: simpler, no animation ── */
@media (max-width: 640px) {
  .secBridge {
    height: 56px;
    padding: 0 14px;
  }
  .sbBadge {
    padding: 5px 12px;
  }
  .sbLabel {
    display: none; /* number-only on very small screens */
  }
}


/* ============================================================
   TECH STACK — Terminal / VS Code Editor
   ============================================================ */

@keyframes tsCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Outer wrapper ── */
.tsWrap {
  width: min(960px, 100%);
  margin: 0 auto;
}

/* ── Editor window ── */
.tsEditor {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0d1117;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 32px 96px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(155, 140, 255, 0.07);
  display: flex;
  flex-direction: column;
  height: 520px;
  transition: box-shadow 0.4s ease;
}
.tsEditor:focus-within {
  box-shadow:
    0 0 0 1px rgba(155, 140, 255, 0.18),
    0 32px 96px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(155, 140, 255, 0.12);
}

/* ── Title bar ── */
.tsBar {
  height: 40px;
  background: #161b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 14px;
  flex-shrink: 0;
  user-select: none;
}

.tsDots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.tsDot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  transition: filter 0.2s ease;
}
.tsDot--close { background: #ff5f57; }
.tsDot--min   { background: #febc2e; }
.tsDot--max   { background: #28c840; }
.tsEditor:hover .tsDot--close,
.tsEditor:hover .tsDot--min,
.tsEditor:hover .tsDot--max { filter: brightness(1.12); }

.tsBarFile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 16px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}
.tsBarFile::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 12px;
  background: rgba(155, 140, 255, 0.90);
  margin-left: 3px;
  animation: tsCursorBlink 1.1s step-end infinite;
  vertical-align: middle;
}

/* ── Body: sidebar + main ── */
.tsBody {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Sidebar / file explorer ── */
.tsSidebar {
  width: 188px;
  flex-shrink: 0;
  background: #0d1117;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tsSideHead {
  padding: 10px 14px 2px;
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}

.tsSideTree {
  padding: 2px 14px 7px;
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.tsSideTreeCaret { color: rgba(155, 140, 255, 0.55); font-size: 10px; }
.tsSideTreeName  { font-size: 11.5px; }

.tsSideItems {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 12px;
}
.tsSideItems::-webkit-scrollbar { display: none; }

.tsSideItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 24px;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  position: relative;
  transition: background 0.14s ease, color 0.14s ease;
}
.tsSideItem:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
}
.tsSideItem.ts-active {
  background: rgba(155, 140, 255, 0.10);
  color: rgba(200, 192, 255, 0.95);
}
.tsSideItem.ts-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--cat-color, #9b8cff);
  border-radius: 0 2px 2px 0;
}

.tsSideDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat-color, #9b8cff);
  flex-shrink: 0;
  opacity: 0.55;
  box-shadow: 0 0 5px var(--cat-color, #9b8cff);
  transition: opacity 0.14s, box-shadow 0.14s;
}
.tsSideItem:hover .tsSideDot,
.tsSideItem.ts-active .tsSideDot {
  opacity: 1;
  box-shadow: 0 0 9px var(--cat-color, #9b8cff);
}

.tsSideName {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsSideCount {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.18);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tsSideItem.ts-active .tsSideCount { color: rgba(200, 192, 255, 0.40); }

/* ── Main pane ── */
.tsMain {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 140, 255, 0.25) transparent;
}
.tsMain::-webkit-scrollbar       { width: 4px; }
.tsMain::-webkit-scrollbar-thumb {
  background: rgba(155, 140, 255, 0.25);
  border-radius: 2px;
}
.tsMain::-webkit-scrollbar-track { background: transparent; }

.tsContent { padding: 16px 24px 32px 0; }

/* ── Code blocks ── */
.tsBlock { margin-bottom: 6px; }

.tsLine {
  display: flex;
  align-items: flex-start;
  min-height: 22px;
  line-height: 22px;
}

/* Line number gutter */
.tsLn {
  width: 44px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 20px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.13);
  user-select: none;
  line-height: 22px;
}

/* Comment header line */
.tsLine--comment .tsCommentText {
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11.5px;
  color: #6a9955;
  line-height: 22px;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chips row */
.tsLine--chips {
  align-items: flex-start;
  padding: 8px 0 10px;
}

.tsChips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1;
}

/* ── Tech chip ── */
.tsChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  background: rgba(255, 255, 255, 0.038);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.70);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  /* Entrance animation start state */
  opacity: 0;
  transform: translateY(6px) scale(0.95);
}
.tsChip.ts-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity    0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.42s cubic-bezier(0.22, 1, 0.36, 1),
    background 160ms ease,
    border-color 160ms ease,
    color      160ms ease,
    box-shadow 160ms ease;
}
.tsChip:hover {
  background: rgba(var(--cat-rgb, 155, 140, 255), 0.10);
  border-color: rgba(var(--cat-rgb, 155, 140, 255), 0.30);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.tsChip:focus-visible {
  outline: 2px solid var(--cat-color, #9b8cff);
  outline-offset: 2px;
}

.tsChipIcon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--cat-color, #9b8cff);
}
.tsChipIcon svg,
.tsChipIcon i {
  width: 15px;
  height: 15px;
  font-size: 15px;
  line-height: 1;
  display: block;
  opacity: 0.65;
  filter: grayscale(0.35) brightness(1.08);
  transition: opacity 160ms ease, filter 160ms ease;
}
.tsChip:hover .tsChipIcon svg,
.tsChip:hover .tsChipIcon i {
  opacity: 1;
  filter: none;
}

.tsChipName { font-size: 12.5px; }

/* ── Status bar ── */
.tsStatusBar {
  height: 24px;
  background: rgba(109, 58, 205, 0.88);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.82);
  flex-shrink: 0;
  user-select: none;
}
.tsStatusSep   { color: rgba(255, 255, 255, 0.28); }
.tsStatusIcon  { font-size: 12px; }
.tsStatusRight { margin-left: auto; color: rgba(255, 255, 255, 0.45); }

/* ── Mobile: hide sidebar ── */
@media (max-width: 680px) {
  .tsEditor  { height: auto; max-height: 72vh; border-radius: 12px; }
  .tsSidebar { display: none; }
  .tsContent { padding: 12px 16px 24px 0; }
  .tsLn      { width: 32px; padding-right: 12px; }
  .tsLine--comment .tsCommentText { font-size: 10.5px; }
}


/* ============================================================
   SECTION TRANSITION CUES
   Ambient bloom at each section entry — bleeds ~80px upward into
   the bridge space so sections feel like they emerge from the
   previous one rather than starting fresh.
   Colors map to existing palette logic:
     purple  rgba(155,140,255,…) — narrative / signal / trajectory
     blue    rgba(75,105,255,…)  — identity / interface
     teal    rgba(68,240,177,…)  — proof / trajectory landing
   ============================================================ */

/* Hero → Showcase: star-field energy settling into signal.
   With the section pulled up –56px, this glow now bleeds 200px above
   the natural section boundary — right into the hero's lower fade zone. */
.showcaseSection::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1000px;
  height: 420px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(155, 140, 255, 0.13) 0%,
    rgba(126, 180, 255, 0.05) 40%,
    transparent               72%
  );
  pointer-events: none;
  z-index: 0;
}

/* Showcase → About: particles dissolve into person.
   Stronger purple bloom so the same glow language from showcase
   carries visibly across the bridge into the About section top. */
.abtSection::before {
  content: '';
  position: absolute;
  top: -200px;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  max-width: 1400px;
  background: radial-gradient(ellipse 80% 50% at 50% 40%,
    rgba(155, 140, 255, 0.05) 0%,
    transparent               65%
  );
  pointer-events: none;
  z-index: 0;
}

/* About → Career: identity launching into trajectory.
   Offset right (left:62%) to track the comet's upper-right entry zone —
   the bloom appears where the comet emerges, reinforcing its path.
   Raised to top:−130px so it bleeds into the bridge and About bottom. */
.careerX::before {
  content: '';
  position: absolute;
  top: -200px;
  bottom: -200px;
  left: 58%;
  transform: translateX(-50%);
  width: 140%;
  max-width: 1400px;
  background: radial-gradient(ellipse 80% 50% at 50% 40%,
    rgba(155, 140, 255, 0.06) 0%,
    transparent               65%
  );
  pointer-events: none;
  z-index: 0;
}

/* Career → Projects: trajectory arriving at concrete proof.
   Uses both the spine's purple and teal to carry the timeline's
   color language across the boundary into the Projects section.
   Raised to bleed into the bridge area so glow is visible there. */
#work::before {
  content: '';
  position: absolute;
  top: -200px;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  max-width: 1400px;
  background: radial-gradient(ellipse 80% 50% at 50% 40%,
    rgba(155, 140, 255, 0.05) 0%,
    transparent               65%
  );
  pointer-events: none;
  z-index: 0;
}

/* Projects → Skills: proof decomposing into underlying system.
   Purple-teal carried from the project tag pill colors so the glow
   feels like the same palette arriving in a new layer. */
#tech::before {
  content: '';
  position: absolute;
  top: -200px;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  max-width: 1400px;
  background: radial-gradient(ellipse 80% 50% at 50% 40%,
    rgba(68,  240, 177, 0.045) 0%,
    transparent               65%
  );
  pointer-events: none;
  z-index: 0;
}

/* Skills → Ask Me: systems activating into live interface */

/* Bottom-right activation node on the Skills section —
   feels like the capability matrix is about to go live */
.section.tech::after {
  content: '';
  position: absolute;
  bottom: 28px;
  right: clamp(48px, 8vw, 120px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(75, 105, 255, 0.9);
  box-shadow:
    0 0 0 5px  rgba(75, 105, 255, 0.12),
    0 0 0 10px rgba(75, 105, 255, 0.05),
    0 0  18px 4px rgba(75, 105, 255, 0.30);
  animation: askActivePulse 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes askActivePulse {
  0%, 100% { opacity: 0.55; transform: scale(1);    box-shadow: 0 0 0 5px rgba(75,105,255,0.12), 0 0 0 10px rgba(75,105,255,0.05), 0 0 18px 4px rgba(75,105,255,0.30); }
  50%       { opacity: 1;    transform: scale(1.18); box-shadow: 0 0 0 6px rgba(75,105,255,0.18), 0 0 0 14px rgba(75,105,255,0.07), 0 0 28px 6px rgba(75,105,255,0.45); }
}

/* Incoming glow — wider, taller, noticeably present */
#ask::before {
  content: '';
  position: absolute;
  top: -200px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  max-width: 1400px;
  background: radial-gradient(ellipse 80% 50% at 50% 40%,
    rgba(75, 105, 255, 0.05) 0%,
    transparent               65%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Ask Me narrative bridge strip ── */
.askNarrBridge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 36px;
  max-width: 420px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.askNarrBridge.anb-visible {
  opacity: 1;
  transform: translateY(0);
}
.anbLine {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(75, 105, 255, 0.28));
}
.anbLabel {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(75, 105, 255, 0.55);
  white-space: nowrap;
}
.anbDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(75, 105, 255, 0.65);
  box-shadow: 0 0 8px 2px rgba(75, 105, 255, 0.30);
  animation: anbBlink 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes anbBlink {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

/* Footer panel lives inside full-width #ask — centre + constrain it */
.contactPanel {
  max-width: 1280px;
  margin: clamp(50px, 6vh, 80px) auto 0;
}

/* Footer bar centred within the full-width ask section */
.footerBar {
  max-width: 1280px;
  margin: 0 auto;
}

/* #contact is now a zero-height anchor inside #ask — no ::before needed */

/* ============================================================
   CHAPTER RAIL — persistent narrative progress indicator
   ============================================================ */

.crRail {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9000;
  pointer-events: none;
  display: none;
}

@media (min-width: 1100px) {
  .crRail { display: block; }
}

.crTrack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  padding: 6px 0;
}

/* Spine — runs through every dot */
.crTrack::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(155, 140, 255, 0.15);
  pointer-events: none;
  left: var(--cr-dot-x, 50%);
  transform: translateX(-50%);
}

/* Fill — grows from top dot to active dot */
.crFill {
  position: absolute;
  top: 0;
  width: 2px;
  height: 0px;
  background: linear-gradient(
    180deg,
    rgba(155, 140, 255, 0.80) 0%,
    rgba(68, 240, 177, 0.70) 100%
  );
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(155, 140, 255, 0.50);
  pointer-events: none;
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  transform: translateX(-50%);
}

.crItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  pointer-events: all;
  cursor: pointer;
  position: relative;
}

.crDot {
  /* Small fixed size — grows via transform so layout never shifts */
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(155, 140, 255, 0.28);
  transition:
    background   0.28s ease,
    box-shadow   0.28s ease,
    transform    0.32s cubic-bezier(0.34, 1.56, 0.64, 1); /* spring pop */
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.crLabel {
  font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  transition: color 0.25s ease;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}

/* — Active — scale up via transform (no layout shift → spine stays stable) */
.crItem.cr-active .crDot {
  transform: scale(2.4);
  background: #9b8cff;
  box-shadow:
    0 0 0 3px rgba(155, 140, 255, 0.16),
    0 0 16px rgba(155, 140, 255, 0.55);
}

.crItem.cr-active .crLabel {
  color: rgba(200, 192, 255, 0.95);
  /* no letter-spacing change — keeps label width stable */
}

/* — Hover — */
.crItem:hover:not(.cr-active) .crDot {
  transform: scale(1.5);
  background: rgba(155, 140, 255, 0.55);
}

.crItem:hover .crLabel {
  color: rgba(255, 255, 255, 0.50);
}

/* ── Light mode ── */
[data-theme="light"] .crTrack::before {
  background: rgba(80, 60, 180, 0.14);
}

[data-theme="light"] .crDot {
  background: rgba(80, 60, 180, 0.20);
}

[data-theme="light"] .crLabel {
  color: rgba(60, 40, 150, 0.30);
}

[data-theme="light"] .crItem.cr-active .crDot {
  background: #6a50e8;
  box-shadow:
    0 0 0 3px rgba(100, 80, 220, 0.12),
    0 0 16px rgba(100, 80, 220, 0.40);
}

[data-theme="light"] .crItem.cr-active .crLabel {
  color: rgba(80, 60, 180, 0.92);
}

[data-theme="light"] .crItem:hover .crLabel {
  color: rgba(60, 40, 150, 0.60);
}

[data-theme="light"] .crItem:hover:not(.cr-active) .crDot {
  background: rgba(80, 60, 180, 0.45);
}

/* ============================================================
   LIGHT MODE COMPREHENSIVE FIXES
   ============================================================ */

/* ── Showcase section — dark island (particles need dark bg) ── */
[data-theme="light"] .showcaseSection {
  background: #0c0d18;
  border-radius: 20px;
  margin-inline: 12px;
}

[data-theme="light"] .showcaseKicker {
  color: rgba(155, 140, 255, 0.65);
}

[data-theme="light"] .showcaseDesc {
  color: rgba(255, 255, 255, 0.52);
}

/* Dark-island showcase section: pills stay light on dark bg */
[data-theme="light"] .showcaseSection .showcasePill {
  color: rgba(255, 255, 255, 0.60);
  border-color: rgba(75, 105, 255, 0.25);
  background: rgba(75, 105, 255, 0.07);
}

[data-theme="light"] .showcaseSection .showcasePill:hover {
  color: rgba(255, 255, 255, 0.90);
  border-color: rgba(75, 105, 255, 0.55);
  background: rgba(75, 105, 255, 0.14);
}

[data-theme="light"] .showcaseSection .showcasePill.is-active {
  color: #fff;
  border-color: rgba(75, 105, 255, 0.75);
  background: rgba(75, 105, 255, 0.20);
}

/* ── Career / Experience timeline ── */

/* Node dot */
[data-theme="light"] .cDot {
  box-shadow:
    0 0 0 3px rgba(8, 9, 20, 0.06),
    0 0 10px rgba(155, 140, 255, 0.18);
}

/* Cards — base */
[data-theme="light"] .ptCard {
  background: rgba(8, 9, 20, 0.028);
  border-color: rgba(8, 9, 20, 0.09);
}

/* Cards — active */
[data-theme="light"] .ptEntry.cActive .ptCard {
  background: rgba(8, 9, 20, 0.052);
  border-color: rgba(8, 9, 20, 0.14);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ce-color, #9b8cff) 12%, transparent),
    0 14px 40px rgba(0, 0, 0, 0.08),
    inset 0 0 28px color-mix(in srgb, var(--ce-color, #9b8cff) 2%, transparent);
}

[data-theme="light"] .ptEntry.cActive .ptCard::after {
  opacity: 0.22;
}

/* Ghost year */
[data-theme="light"] .ptGhost {
  -webkit-text-stroke: 1px rgba(8, 9, 20, 0.05);
}

[data-theme="light"] .ptEntry.cActive .ptGhost {
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ce-color, #9b8cff) 28%, transparent);
}

/* Badge */
[data-theme="light"] .ptBadge {
  color: var(--ce-color, #9b8cff);
  border-color: color-mix(in srgb, var(--ce-color, #9b8cff) 45%, transparent);
  background: color-mix(in srgb, var(--ce-color, #9b8cff) 6%, transparent);
}

/* Context */
[data-theme="light"] .ptCtx {
  color: rgba(8, 9, 20, 0.42);
}

/* Role */
[data-theme="light"] .ptRole {
  color: rgba(8, 9, 20, 0.82);
}

[data-theme="light"] .ptEntry.cActive .ptRole {
  color: rgba(8, 9, 20, 0.92);
}

[data-theme="light"] .ptDesc {
  color: rgba(8, 9, 20, 0.48);
}

[data-theme="light"] .ptEntry.cActive .ptDesc {
  color: rgba(8, 9, 20, 0.68);
}

/* ── Signal Bridge connectors ── */
[data-theme="light"] .sbCopy {
  color: rgba(0, 0, 0, 0.22);
}

[data-theme="light"] .sbLine--l {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(100, 80, 220, 0.12) 20%,
    rgba(100, 80, 220, 0.50) 100%
  );
}

[data-theme="light"] .sbLine--r {
  background: linear-gradient(to left,
    transparent 0%,
    rgba(30, 180, 130, 0.12) 20%,
    rgba(30, 180, 130, 0.45) 100%
  );
}

[data-theme="light"] .sbBadge {
  background: rgba(100, 80, 220, 0.06);
  border-color: rgba(100, 80, 220, 0.22);
  box-shadow: 0 0 14px rgba(100, 80, 220, 0.06);
}

[data-theme="light"] .sbDiamond {
  color: #6450dc;
  opacity: 0.75;
}

[data-theme="light"] .sbNum {
  color: #6450dc;
}

[data-theme="light"] .sbDash {
  background: linear-gradient(to right, rgba(100, 80, 220, 0.55), rgba(30, 180, 130, 0.45));
}

[data-theme="light"] .sbLabel {
  color: rgba(20, 150, 110, 0.80);
}

/* ── Section label (secNum / secLabelLine / secCategory) ── */
[data-theme="light"] .secNum {
  color: rgba(100, 80, 220, 0.70);
}

[data-theme="light"] .secLabelLine {
  background: linear-gradient(90deg, rgba(100, 80, 220, 0.45), rgba(255, 255, 255, 0.04));
}

/* ── Scrollbar fill ── */
[data-theme="light"] .cScrollFill,
[data-theme="light"] .cScrollThumb {
  background: rgba(100, 80, 220, 0.50);
}

/* ── Career section — "Experience" heading ── */
[data-theme="light"] .cTimelineWrap .sectionTitle,
[data-theme="light"] #career .sectionTitle {
  color: rgba(8, 9, 20, 0.88);
}

/* ============================================================
   LIGHT MODE — COLOR & VISIBILITY PASS 2
   ============================================================ */

/* ── 1. FOOTER — always-dark, contactPanel is transparent on canvas bg ── */
[data-theme="light"] .contactPanel {
  background: transparent;
}
[data-theme="light"] .contactBrandText {
  color: rgba(255, 255, 255, 0.52);
}
[data-theme="light"] .contactColTitle {
  color: rgba(255, 255, 255, 0.88);
}
[data-theme="light"] .contactLink,
[data-theme="light"] .contactLink:is(button) {
  color: rgba(255, 255, 255, 0.58);
}
[data-theme="light"] .contactLink:hover {
  color: rgba(255, 255, 255, 0.92);
}
[data-theme="light"] .contactPillTop {
  color: rgba(255, 255, 255, 0.48);
}
[data-theme="light"] .contactPillBot {
  color: rgba(255, 255, 255, 0.88);
}
[data-theme="light"] .contactPill {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── 2. TECH STACK EDITOR — stays dark in light mode (it's a terminal) ── */
[data-theme="light"] .tsEditor {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.10),
    0 32px 80px rgba(0, 0, 0, 0.22),
    0 0 60px rgba(155, 140, 255, 0.08);
}
[data-theme="light"] .tsEditor:focus-within {
  box-shadow:
    0 0 0 1px rgba(155, 140, 255, 0.22),
    0 32px 80px rgba(0, 0, 0, 0.22),
    0 0 60px rgba(155, 140, 255, 0.14);
}

/* ── 3. PROJECTS — color accents ── */
[data-theme="light"] .cardNum {
  color: #5a48d4;
  opacity: 0.90;
}
[data-theme="light"] .cardAccentLine {
  opacity: 0.90;
}
[data-theme="light"] .cardTitle {
  color: rgba(8, 9, 20, 0.90);
}
[data-theme="light"] .cardDesc {
  color: rgba(8, 9, 20, 0.56);
}
[data-theme="light"] .cardHighlightItem {
  color: rgba(8, 9, 20, 0.65);
}
[data-theme="light"] .highlightPlus {
  /* accent color comes inline via JS, leave it – just ensure visibility */
  opacity: 1;
  filter: saturate(1.3) brightness(0.88);
}
[data-theme="light"] .projectCard {
  border-left: 3px solid transparent;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
[data-theme="light"] .projectCard:hover {
  border-left-color: rgba(90, 72, 212, 0.55);
  box-shadow: 0 12px 48px rgba(90, 72, 212, 0.08), 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .pBadge {
  background: rgba(75, 105, 255, 0.80);
  color: #fff;
}
[data-theme="light"] .tag {
  color: rgba(60, 45, 180, 0.80);
  background: rgba(90, 72, 212, 0.07);
  border-color: rgba(90, 72, 212, 0.20);
}
[data-theme="light"] .tag:hover,
[data-theme="light"] .tag.active {
  color: rgba(60, 45, 180, 1);
  background: rgba(90, 72, 212, 0.13);
  border-color: rgba(90, 72, 212, 0.40);
}

/* ── 5. ABOUT light mode — consolidated into the .abt* block above ── */

/* ══════════════════════════════════════════════════════════════════
   UNIFIED HERO + SHOWCASE
   Hero section absorbs the showcase experience. Clicking a category
   pill fades out the hero text and fades in the formation canvas +
   descriptive text, all within the same viewport section.
   ══════════════════════════════════════════════════════════════════ */

/* ── Formation canvas overlay ── */
.heroShowcaseWrap {
  position: absolute;
  inset: 0;
  z-index: 2; /* above heroCanvas (1), below heroContent (3) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease;
}
#hero.hero--showcase .heroShowcaseWrap {
  opacity: 1;
  pointer-events: auto;
}
/* Canvas fills the full hero viewport */
#showcaseCanvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}
#hero.hero--showcase #showcaseCanvas {
  pointer-events: auto;
}

/* ── Hero orbital stars dim when showcase activates ── */
.heroCanvas {
  transition: opacity 1.1s ease;
}
#hero.hero--showcase .heroCanvas {
  opacity: 0.06;
}

/* ── Hero text fades out when showcase activates ── */
.heroContent {
  transition: opacity 0.55s ease, transform 0.55s ease;
}
#hero.hero--showcase .heroContent {
  opacity: 0;
  transform: translateY(-28px);
  pointer-events: none;
}

/* ── Category pills — always visible at bottom of hero ── */
.heroPills {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  white-space: nowrap;
  margin-top: 0;
}

/* ── Showcase text overlay (title + desc) ── */
.heroShowcaseText {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
  width: min(92vw, 540px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease 0.55s;
}
#hero.hero--showcase .heroShowcaseText {
  opacity: 1;
}

/* (Back button removed — re-clicking the active pill returns to overview) */

/* ── Scroll cue hides in showcase mode ── */
.heroScrollCue {
  transition: opacity 0.45s ease;
}
#hero.hero--showcase .heroScrollCue {
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none;
}

/* ── Mobile adjustments ── */
@media (max-width: 760px) {
  .heroPills {
    bottom: 28px;
    gap: 6px !important;
  }
  .heroShowcaseText {
    bottom: 108px;
    width: min(94vw, 400px);
  }
  .heroBackBtn {
    font-size: 10px;
    padding: 6px 16px;
  }
}


/* ═══════════════════════════════════════════════════════════
   MP HERO — Full redesign
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll wrapper: 200 vh gives 100 vh of pinned scroll travel ──
   Override the old #hero grid/overflow/min-height rules (they now hit
   this wrapper via the shared id="hero"). ── */
.mpHeroWrap {
  /* Reset conflicting old-hero rules */
  display: block !important;
  place-items: unset !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  /* Our own layout */
  position: relative !important;
  height: 200vh;   /* fallback */
  height: 200svh;  /* svh = small viewport height, consistent with window.innerHeight on mobile */
}

/* Kill the old grain and bottom-fade pseudo-elements on the wrapper */
.mpHeroWrap::before,
.mpHeroWrap::after {
  content: none !important;
  display: none !important;
}

/* ── Sticky viewport panel ── */
.mpHeroSticky {
  position: sticky;
  top: 0;
  height: 100vh;   /* fallback */
  height: 100svh;  /* never taller than the visible viewport on mobile */
  overflow: hidden;
  background: #000;
  will-change: transform; /* promote to own layer for perf */
}

/* ══════════════════════════
   Phase 1 — Intro portraits (clip-path reveal)

   Photos are always full-screen. A clip-path masks them down to a
   portrait-sized window at the centre. mp-zoomed expands the clip
   to inset(0%) — no scaling, just the matte pulling back.
   ══════════════════════════ */
.mpIntroWrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  /* Portrait window: ~40% top+bottom, ~43% left+right inset
     → roughly 14 vw wide × 20 vh tall centred                */
  clip-path: inset(40% 43% round 6px);
  /* clip-path is animated via @keyframes (not transition) so the
     start value is always explicit — avoids the "computed-start"
     snap that causes the visible jump at the beginning of the zoom. */
  transition: opacity 0.7s ease;
}

.mpIntroWrap.mp-zoomed {
  animation: mpPortalOpen 2.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes mpPortalOpen {
  from { clip-path: inset(40% 43% round 6px); }
  to   { clip-path: inset(0% 0%   round 0px); }
}

.mpIntroPhoto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mpIntroPhoto.mp-active {
  opacity: 1;
}

/* ══════════════════════════
   Phase 2 — Video ping-pong pair
   Two <video> elements inside mpIntroWrap; one is always faded in,
   the other preloads the next clip off-screen.
   ══════════════════════════ */
.mpVid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
  pointer-events: none;
}

.mpVid.mp-visible {
  opacity: 1;
}

/* ── Dark gradient overlay (always present once photos appear) ── */
.mpPhotoOverlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.05) 25%,
      rgba(0, 0, 0, 0.15) 60%,
      rgba(0, 0, 0, 0.65) 100%
    );
}

/* ══════════════════════════
   Title — MAURITS / PUGGAARD
   ══════════════════════════ */
.mpTitleWrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.mpTitleWrap.mp-visible {
  opacity: 1;
}

.mpTitleLine {
  /* No overflow:hidden — each slot clips itself */
  line-height: 0.9;
  display: flex;           /* lets mpTitleInner centre correctly */
  justify-content: center;
}

/* The font container — JS fills it with .mpLetterSlot children */
.mpTitleInner {
  display: inline-flex;
  align-items: flex-start;
  /* letter-spacing: 0 here — slots are flex items so kerning is
     handled by the individual .mpLetterChar padding instead */
  letter-spacing: 0;
  font-family: var(--font);
  font-size: clamp(3.8rem, 11.5vw, 11rem);
  font-weight: 900;
  color: #fff;
}

/* ── Letter slot machine ──
   Each slot's width is locked to the TARGET character via a ghost
   element. The reel is absolutely positioned so cycling characters
   never cause layout reflow or width jitter.                       */
.mpLetterSlot {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1em;
}

/* Ghost: invisible copy of target char — sets the slot width */
.mpLetterGhost {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

/* Reel sits absolutely over the ghost, matching slot width */
.mpLetterReel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.mpLetterChar {
  display: flex;
  align-items: flex-start;
  height: 1em;
  flex-shrink: 0;
  line-height: 1;
  overflow: hidden; /* clip chars wider than the slot */
  white-space: nowrap;
}

/* ── Subtitle ── */
.mpHeroSub {
  position: absolute;
  bottom: 17vh;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  text-align: center;
  font-family: var(--font);
  font-size: clamp(0.65rem, 1.2vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease 0.55s, transform 0.9s ease 0.55s;
  pointer-events: none;
}

.mpHeroSub.mp-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scroll cue ── */
.mpScrollCue {
  position: absolute;
  bottom: 4.5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.9s ease 1s;
}

.mpScrollCue.mp-visible {
  opacity: 1;
}

.mpScrollAnim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  animation: mpScrollBob 2.2s ease-in-out infinite;
}

@keyframes mpScrollBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

.mpScrollLine {
  display: block;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.45);
}

.mpScrollTxt {
  font-family: var(--font);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ══════════════════════════
   Blinds — 6 vertical panels
   ══════════════════════════ */
.mpBlinds {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  overflow: hidden; /* clips 2px right overhang from each blind */
}

.mpBlind {
  /* JS sets exact pixel left/width per blind — no flex needed */
  position: absolute;
  top: 0;
  bottom: 0;
  background: #000;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}


/* ═══════════════════════════════════════════════════════════
   MP MARQUEE SECTION — horizontal airport-terminal keyword strip
   Continuous auto-scrolling, right edge progressively blurred.
   ═══════════════════════════════════════════════════════════ */
.mpMarqueeSection {
  position: relative;
  /* Break out of max-width .wrap to span full viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #000;
  height: 38vh;    /* fallback */
  height: 38svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Left edge: hard fade to black so text appears smoothly */
.mpMarqueeSection::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12%;
  background: linear-gradient(to right, #000 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* Marquee track — two identical runs side by side for seamless loop */
.mpMarqueeTrack {
  display: flex;
  white-space: nowrap;
  flex-shrink: 0;
  animation: mpMarquee 32s linear infinite;
  will-change: transform;
}

.mpMarqueeRun {
  font-family: var(--font);
  font-size: clamp(4rem, 13vw, 12rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes mpMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Right-side blur overlay — backdrop-filter blurs the text behind it.
   The gradient mask makes it transparent on the left (text sharp)
   and opaque on the right (text blurred). */
.mpMarqueeBlur {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 52%,
    rgba(0,0,0,0.4) 68%,
    black 85%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 52%,
    rgba(0,0,0,0.4) 68%,
    black 85%
  );
}

/* ── Mobile tweaks ── */
@media (max-width: 760px) {
  .mpTitleInner {
    font-size: clamp(2.8rem, 14vw, 5rem);
  }
  /* Slightly smaller marquee text on mobile */
  .mpMarqueeRun {
    font-size: clamp(3rem, 18vw, 6rem);
  }
  /* On mobile, show a slightly taller portrait window */
  .mpIntroWrap:not(.mp-zoomed) {
    clip-path: inset(36% 36% round 6px);
  }
  /* Override keyframe start value to match mobile portrait size */
  @keyframes mpPortalOpen {
    from { clip-path: inset(36% 36% round 6px); }
    to   { clip-path: inset(0% 0%   round 0px); }
  }
}

/* ══════════════════════════════════════════════════════════════
   Chrome hidden during the intro sequence.
   .topbar and .resumeBtn are invisible until JS adds
   .mp-chrome-ready once the video sequence begins.
   ══════════════════════════════════════════════════════════════ */
.topbar:not(.mp-chrome-ready),
.resumeBtn:not(.mp-chrome-ready) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.topbar,
.resumeBtn {
  transition: opacity 0.9s ease;
}