:root {
      --bg: #07080f;
      --surface: #0c0d18;
      --cyan: #00e5ff;
      --purple: #a855f7;
      --pink: #f472b6;
      --amber: #fbbf24;
      --green: #34d399;
      --text: #eeeef5;
      --muted: #44455a;
      --muted2: #8888aa;
      --cw: 1292px;

      --beam: #00e5ff;
      --beam-fade: rgba(0, 229, 255, 0.15);

      --card: rgb(13, 14, 28);
      --border: rgba(255, 255, 255, 0.09);
      --cardGlow: rgba(0, 229, 255, 0.05);
      --cardGrad: linear-gradient(165deg, rgb(16, 18, 35) 0%, rgb(13, 14, 28) 45%);

      --navBg: rgba(7, 8, 15, .75);
      --mobBg: rgba(7, 8, 15, .97);
      --projCardGradA: rgba(18, 20, 38, .65);
      --projCardAfterLine: rgba(255, 255, 255, .12);
      --termBg: rgba(10, 11, 21, 0.65);
      --termTbBg: rgba(255, 255, 255, 0.03);

      --eduCardBorder: rgba(255, 255, 255, .09);
      --eduCardGradA: rgba(22, 24, 42, .6);
      --eduCardGradB: rgba(11, 12, 22, .65);
      --eduCardGradC: rgba(8, 9, 18, .7);
      --eduCardShadow: rgba(0, 0, 0, .38);
      --eduCardInset: rgba(255, 255, 255, .06);
      --eduCardHoverShadow: rgba(0, 0, 0, .45);
      --eduCardHoverInset: rgba(255, 255, 255, .08);
      --eduCardBeforeColor: rgba(160, 162, 190, .65);
      --eduYearLabel: rgba(136, 138, 170, .85);
      --eduNoteBorderTop: rgba(255, 255, 255, .05);

      --themeToggleBg: rgba(255, 255, 255, .04);
      --themeToggleBgHover: rgba(0, 229, 255, .07);

      --fs-body: 16px;
      --fs-body-lg: 1.08rem;
      --fs-section-title: clamp(1.75rem, 4vw, 2.95rem);
    }

/* ── STONE / AMBIENT PORTFOLIO DIRECTION ── */
body.portfolio-home {
  --bg: #07090c;
  background-color: #07090c;
  background-image:
    linear-gradient(180deg, rgba(3, 5, 8, .36), rgba(3, 5, 8, .72)),
    url('assets/stone-surface.png');
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
}

body.portfolio-home::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .25;
  background:
    linear-gradient(rgba(93, 210, 230, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 210, 230, .035) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 72%);
}

body.portfolio-home::after {
  content: '';
  position: fixed;
  inset: 14px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(126, 212, 226, .08);
}

html[data-theme="light"] body.portfolio-home {
  background-color: #d9dee2;
  background-image:
    linear-gradient(180deg, rgba(229, 235, 238, .78), rgba(196, 205, 210, .82)),
    url('assets/stone-surface.png');
  color: #122027;
}

html[data-theme="light"] body.portfolio-home::before { opacity: .12; }
html[data-theme="light"] body.portfolio-home::after { border-color: rgba(19, 92, 108, .16); }

body.portfolio-home section.sec {
  background: linear-gradient(180deg, rgba(6, 10, 14, .76), rgba(5, 8, 12, .64));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.portfolio-home section.sec.surf {
  background: linear-gradient(180deg, rgba(5, 9, 13, .68), rgba(5, 8, 12, .54));
}

html[data-theme="light"] body.portfolio-home section.sec,
html[data-theme="light"] body.portfolio-home section.sec.surf {
  background: linear-gradient(180deg, rgba(241, 246, 248, .62), rgba(229, 235, 238, .54));
}

body.portfolio-home .hero {
  min-height: min(760px, 88vh);
  justify-content: center;
  padding-top: 132px;
  padding-bottom: 110px;
}

body.portfolio-home .hero-title {
  font-size: clamp(2.8rem, 7.4vw, 6.4rem);
  letter-spacing: -.055em;
  text-wrap: balance;
  max-width: 1050px;
}

body.portfolio-home .hero-title .wd {
  text-shadow: 0 0 28px rgba(88, 207, 224, .14), 1px 0 rgba(255, 90, 170, .16), -1px 0 rgba(82, 221, 240, .16);
}

body.portfolio-home .hero-sub { max-width: min(78ch, 92vw); color: rgba(218, 229, 232, .70); text-wrap: balance; }
body.portfolio-home .hero-eyebrow { color: #83e9ef; }
body.portfolio-home .hero-badges .bdg { background-color: rgba(7, 13, 17, .36); backdrop-filter: blur(8px); }

body.portfolio-home .st {
  font-size: clamp(1.65rem, 3.5vw, 2.45rem);
  letter-spacing: -.045em;
}

body.portfolio-home .sl { letter-spacing: .34em; color: rgba(149, 227, 236, .72) !important; }

@media (max-width: 700px) {
  body.portfolio-home .hero { min-height: 720px; padding: 108px 24px 76px; }
  body.portfolio-home .hero-title { font-size: clamp(2.55rem, 14vw, 4.5rem); }
  body.portfolio-home section.sec { background: rgba(5, 8, 11, .42) !important; }
}

    html[data-theme="light"] {
      --bg: #fdfbff;
      --surface: #f9fafb;

      --cyan: #0ea5e9;
      --purple: #6366f1;
      --pink: #ec4899;
      --amber: #f59e0b;
      --green: #10b981;

      --text: #020617;
      --muted: #334155;
      --muted2: #475569;

      --navBg: rgba(249, 250, 251, 0.92);
      --mobBg: rgba(249, 250, 251, 0.98);

      --projCardGradA: rgba(255, 255, 255, 0.98);
      --projCardAfterLine: rgba(148, 163, 184, 0.55);

      --termBg: rgba(255, 255, 255, 0.88);
      --termTbBg: rgba(15, 23, 42, 0.03);

      --eduCardBorder: rgba(148, 163, 184, 0.45);
      --eduCardGradA: rgba(255, 255, 255, 0.98);
      --eduCardGradB: rgba(244, 244, 255, 0.98);
      --eduCardGradC: rgba(235, 243, 255, 0.98);
      --eduCardShadow: rgba(15, 23, 42, 0.08);
      --eduCardInset: rgba(255, 255, 255, 0.90);
      --eduCardHoverShadow: rgba(15, 23, 42, 0.16);
      --eduCardHoverInset: rgba(255, 255, 255, 0.96);
      --eduCardBeforeColor: rgba(100, 116, 139, 0.9);
      --eduYearLabel: rgba(100, 116, 139, 0.95);
      --eduNoteBorderTop: rgba(148, 163, 184, 0.4);

      --card: rgb(240, 242, 248);
      --border: rgba(15, 23, 42, 0.12);
      --cardGlow: rgba(14, 165, 233, 0.08);
      --cardGrad: linear-gradient(165deg, rgb(255, 255, 255) 0%, rgb(245, 246, 252) 45%);
      --themeToggleBg: rgba(15, 23, 42, 0.02);
      --themeToggleBgHover: rgba(14, 165, 233, 0.14);
      --beam: #2563eb;
      --beam-fade: rgba(37, 99, 235, 0.15);
    }

    html[data-theme="light"] body {
      background:
        radial-gradient(900px 520px at 10% -12%, rgba(14, 165, 233, 0.10), transparent 62%),
        radial-gradient(900px 520px at 90% -10%, rgba(99, 102, 241, 0.09), transparent 62%),
        var(--bg);
    }

    html[data-theme="light"] body::before {
      opacity: .12;
    }

    html[data-theme="light"] nav {
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      border-bottom-color: rgba(148, 163, 184, 0.35);
    }

    html[data-theme="light"] .surf {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(249, 250, 251, 0.74));
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }

    html[data-theme="light"] .btn-a {
      color: #fff;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      box-shadow: 0 12px 26px rgba(37, 99, 235, 0.25);
    }

    html[data-theme="light"] .btn-a:hover {
      box-shadow: 0 18px 36px rgba(124, 58, 237, 0.26);
    }

    html[data-theme="light"] .proj-card,
    html[data-theme="light"] .sk-grp,
    html[data-theme="light"] .stat {
      border-color: rgba(148, 163, 184, 0.34);
      box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
    }

    html[data-theme="light"] .proj-card:hover,
    html[data-theme="light"] .sk-grp:hover,
    html[data-theme="light"] .stat {
      cursor: auto !important;
    }

    html[data-theme="light"] .proj-card:hover,
    html[data-theme="light"] .sk-grp:hover,
    html[data-theme="light"] .stat:hover {
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
    }

    html[data-theme="light"] .pill {
      background: rgba(15, 23, 42, 0.04);
      border-color: rgba(148, 163, 184, 0.35);
      color: #475569;
    }

    html[data-theme="light"] .pnum {
      color: rgba(71, 85, 105, 0.78);
    }

    html[data-theme="light"] .pfeat {
      border-color: rgba(245, 158, 11, 0.35);
      background: rgba(245, 158, 11, 0.12);
      color: #b45309;
    }


    .ct-card-actions .clp .cl-ico {
      width: 20px;
      height: 20px;
    }

    .ct-card-actions>a.clpk .cl-ico,
    .ct-card-actions>a.cla .cl-ico,
    .ct-card-actions>a.clkg .cl-ico {
      width: 20px;
      height: 20px;
    }

    html[data-theme="light"] .ct-glow {
      background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, .22), transparent 55%);
    }

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

    html,
    body {
      overflow-x: hidden;
      width: 100%;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: var(--fs-body);
      font-weight: 300;
      line-height: 1.6;
    }

    ::-webkit-scrollbar {
      width: 2px;
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(var(--cyan), var(--purple), var(--pink));
    }

    @media(pointer:fine) {
      body {
        cursor: auto;
      }
    }

    #geoBgCanvas {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      pointer-events: none;
      contain: strict;
    }

    body.portfolio-home .hero-wrap,
    body.portfolio-home section.sec,
    body.portfolio-home footer {
      position: relative;
      z-index: 2;
      transform: translate3d(0, 0, 0);
      will-change: auto;
    }

    section.sec {
      background: rgba(7, 8, 15, 0.78);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    html[data-theme="light"] section.sec {
      background: rgba(253, 251, 255, 0.88);
    }

    section.sec.surf {
      background: rgba(7, 8, 15, 0.70);
    }

    html[data-theme="light"] section.sec.surf {
      background: rgba(253, 251, 255, 0.58);
    }

    .hero-wrap {
      background: transparent;
    }

    .surf {
      background: transparent;
    }

    @property --border-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    @keyframes rotateBorder {
      to {
        --border-angle: 360deg;
      }
    }

    .glow-border {
      position: relative;
      z-index: 1;
      border: none !important;
    }

    .border-glow {
      position: absolute;
      inset: -1.5px;
      border-radius: inherit;
      padding: 2px;
      background: conic-gradient(from var(--border-angle, 0deg),
          transparent 0deg,
          transparent 165deg,
          var(--beam-fade, rgba(0, 229, 255, 0.2)) 205deg,
          var(--beam, #00e5ff) 265deg,
          #ffffff 295deg,
          var(--beam, #00e5ff) 325deg,
          var(--beam-fade, rgba(0, 229, 255, 0.2)) 348deg,
          transparent 360deg);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask-composite: exclude;
      animation: rotateBorder 4s linear infinite;
      animation-play-state: paused;
      pointer-events: none;
      z-index: 3;
      opacity: 0;
      filter: none;
      transition: opacity 0.35s ease, filter 0.35s ease;
    }

    .border-glow.is-animating {
      animation-play-state: running !important;
    }

    .pcc,
    .ec-c,
    .sk-c {
      --beam: var(--cyan);
      --beam-fade: rgba(0, 229, 255, 0.35);
    }

    .pcp,
    .ec-p,
    .sk-p {
      --beam: var(--purple);
      --beam-fade: rgba(168, 85, 247, 0.35);
    }

    .sk-pk {
      --beam: var(--pink);
      --beam-fade: rgba(244, 114, 182, 0.35);
    }

    .pca,
    .ec-a,
    .sk-a {
      --beam: var(--amber);
      --beam-fade: rgba(251, 191, 36, 0.35);
    }

    .sk-g {
      --beam: var(--green);
      --beam-fade: rgba(52, 211, 153, 0.35);
    }

    .glow-border:hover .border-glow,
    .proj-card:hover .border-glow {
      opacity: 1 !important;
      filter: drop-shadow(0 0 14px var(--beam, #00e5ff)) drop-shadow(0 0 28px var(--beam, #00e5ff)) !important;
    }

    #projects #aiemployee-card .border-glow {
      opacity: 1;
      animation-play-state: running !important;
      filter: drop-shadow(0 0 12px var(--beam, #00e5ff)) drop-shadow(0 0 24px var(--beam-fade, rgba(0, 229, 255, 0.5)));
    }

    .glow-border-base {
      position: absolute;
      inset: -1.5px;
      border-radius: inherit;
      padding: 1.5px;
      background: rgba(255, 255, 255, 0.08);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
      z-index: -1;
    }

    /* Show More Projects functionality */
    .show-more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 50px;
      padding-bottom: 20px;
      width: 100%;
    }

    .btn-show-more {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      color: var(--muted2);
      padding: 14px 38px;
      border-radius: 999px;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      gap: 12px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .btn-show-more svg {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      color: var(--cyan);
    }

    .btn-show-more:hover {
      background: var(--themeToggleBgHover);
      border-color: rgba(0, 229, 255, 0.4);
      color: var(--text);
      transform: translateY(-3px);
      box-shadow: 0 15px 30px rgba(0, 229, 255, 0.08);
    }

    .btn-show-more:hover svg {
      transform: translateY(2px);
    }

    .btn-show-more.is-expanded svg {
      transform: rotate(180deg);
    }

    .btn-show-more.is-expanded:hover svg {
      transform: rotate(180deg) translateY(-2px);
    }

    .hidden-project {
      display: none !important;
    }

    .hidden-cert {
      display: none !important;
    }

    .hidden-exp:not(.is-visible) {
      display: none !important;
    }

    .project-count-badge {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--cyan);
      background: rgba(0, 229, 255, 0.08);
      border: 1px solid rgba(0, 229, 255, 0.25);
      padding: 6px 14px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    @keyframes fadeInExp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0%;
      background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
      z-index: 9999;
      transition: width .08s;
    }

    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 700;
      padding: 22px 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      background: var(--navBg);
      border-bottom: 1px solid var(--border);
      transition: padding .3s, transform .4s cubic-bezier(.16, 1, .3, 1);
    }

    nav.scrolled {
      padding: 14px 64px;
    }

    nav.hidden {
      transform: translateY(0);
    }

    .nav-logo {
      font-family: 'Unbounded', sans-serif;
      font-weight: 900;
      font-size: .95rem;
      color: var(--text);
      text-decoration: none;
      letter-spacing: -.01em;
    }

    .nav-logo .dot {
      color: var(--cyan);
    }

    .nav-links {
      display: flex;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      color: var(--muted2);
      text-decoration: none;
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 500;
      transition: color .2s;
      position: relative;
      padding-bottom: 3px;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background: linear-gradient(90deg, var(--cyan), var(--purple));
      transition: width .35s;
    }

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

    .nav-links a.is-active {
      color: var(--text);
      font-weight: 850;
      text-shadow: 0 0 14px color-mix(in srgb, var(--chapter-accent) 62%, transparent);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-links a.is-active::after {
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, var(--chapter-accent), rgba(255, 255, 255, .72));
      box-shadow: 0 0 14px color-mix(in srgb, var(--chapter-accent) 56%, transparent);
    }

    #themeToggle {
      background: var(--themeToggleBg);
      border: 1px solid var(--border);
      color: var(--muted2);
      border-radius: 999px;
      padding: 10px 14px;
      cursor: pointer;
      font-size: .72rem;
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 600;
      transition: background .2s, border-color .2s, color .2s, transform .2s;
      user-select: none;
    }

    #themeToggle:hover {
      background: var(--themeToggleBgHover);
      border-color: rgba(0, 229, 255, .45);
      color: var(--text);
    }

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

    .ham {
      display: none;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      z-index: 800;
      padding: 2px;
    }

    .ham span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--text);
      transition: all .3s;
    }

    .ham.open span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .ham.open span:nth-child(2) {
      opacity: 0;
    }

    .ham.open span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    .mob {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--mobBg);
      z-index: 600;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 40px;
    }

    .mob.open {
      display: flex;
    }

    .mob a {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--muted2);
      text-decoration: none;
      transition: color .2s;
    }

    .mob a:hover {
      color: var(--cyan);
    }

    .hero-wrap {
      position: relative;
      overflow: visible;
      min-height: auto;
      z-index: 1;
    }

    .hero {
      min-height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 110px 60px 70px;
      position: relative;
      z-index: 2;
      max-width: 1360px;
      margin: 0 auto;
      pointer-events: none;
    }

    .hero>* {
      pointer-events: auto;
    }

    .hero-title,
    .hero-sub,
    .hero-eyebrow {
      mix-blend-mode: normal;
    }

    .hero-title,
    .hero-sub,
    .hero-eyebrow,
    .hero-badges,
    .hero-cta,
    .scroll-cue {
      transition: opacity .45s ease, transform .45s ease;
    }

    .hero.is-scrolling .hero-title,
    .hero.is-scrolling .hero-sub,
    .hero.is-scrolling .hero-eyebrow,
    .hero.is-scrolling .hero-badges,
    .hero.is-scrolling .hero-cta,
    .hero.is-scrolling .scroll-cue {
      opacity: calc(1 - var(--hero-fade, 0));
      transform: translateY(calc(var(--hero-fade, 0) * -28px));
    }

    html[data-theme="light"] .hero-title,
    html[data-theme="light"] .hero-sub,
    html[data-theme="light"] .hero-eyebrow {
      mix-blend-mode: normal;
    }

    .hero-title .wd {
      text-shadow:
        2px 0 rgba(255, 40, 120, 0.22),
        -2px 0 rgba(0, 229, 255, 0.22),
        0 0 40px rgba(168, 85, 247, 0.15);
    }

    .hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      --eb-line-h: 1.4em;
      font-size: .75rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 32px;
      font-weight: 500;
      line-height: var(--eb-line-h);
      max-width: 100%;
    }

    .eb-wrap {
      height: var(--eb-line-h);
      overflow: visible;
      display: inline-flex;
      min-width: 0;
      max-width: 100%;
    }

    .eb-ticker {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      transform: translateY(0);
      opacity: 1;
      transition: transform .26s ease, opacity .26s ease;
    }

    .eb-ticker.is-out {
      transform: translateY(-36%);
      opacity: 0;
    }

    .eb-meta {
      letter-spacing: .1em;
    }

    .hero-eyebrow::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 12px var(--cyan);
      animation: pulse 2s infinite;
      flex-shrink: 0;
    }

    .hero-title {
      font-family: 'Unbounded', sans-serif;
      font-weight: 900;
      font-size: clamp(2.8rem, 8.5vw, 7.5rem);
      line-height: .9;
      letter-spacing: -.03em;
    }

    .hero-title .ln {
      display: block;
      overflow: hidden;
    }

    .hero-title .ln .wd {
      display: inline-block;
      transform: translateY(110%);
      opacity: 0;
      animation: wordIn 1s cubic-bezier(.16, 1, .3, 1) forwards;
    }

    .ln1 .wd {
      animation-delay: .2s;
    }

    .ln2 .wd {
      animation-delay: .35s;
    }

    .ln3 .wd {
      animation-delay: .5s;
    }

    .hero-sub {
      margin-top: 32px;
      font-size: var(--fs-body-lg);
      color: var(--muted2);
      max-width: min(78ch, 92vw);
      text-wrap: balance;
      line-height: 1.8;
      font-weight: 300;
      opacity: 0;
      animation: fadeUp .8s ease .9s forwards;
    }

    .hero-badges {
      margin-top: 24px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp .7s ease 1.05s forwards;
    }

    .bdg {
      padding: 5px 12px;
      border-radius: 100px;
      font-size: .68rem;
      letter-spacing: .05em;
      border: 1px solid transparent;
      font-weight: 500;
    }

    .bc {
      background: rgba(0, 229, 255, .07);
      border-color: rgba(0, 229, 255, .22);
      color: var(--cyan);
    }

    .bp {
      background: rgba(168, 85, 247, .07);
      border-color: rgba(168, 85, 247, .22);
      color: var(--purple);
    }

    .ba {
      background: rgba(251, 191, 36, .07);
      border-color: rgba(251, 191, 36, .22);
      color: var(--amber);
    }

    .bg2 {
      background: rgba(52, 211, 153, .07);
      border-color: rgba(52, 211, 153, .22);
      color: var(--green);
    }

    .bpk {
      background: rgba(244, 114, 182, .07);
      border-color: rgba(244, 114, 182, .22);
      color: var(--pink);
    }

    .br {
      position: relative;
      background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.05));
      color: #ffd700;
      border-radius: 100px;
      z-index: 0;
      font-weight: 700;
      text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
      box-shadow: 0 0 15px rgba(251, 191, 36, 0.15);
    }

    .br::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 100px;
      background: linear-gradient(90deg, #ffd700, #ffb700, #fff5cc, #ffb700, #ffd700);
      background-size: 200% auto;
      animation: textShine 3s linear infinite;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
      z-index: -1;
    }

    .hero-cta {
      margin-top: 40px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp .7s ease 1.2s forwards;
    }

    .btn-a {
      padding: 13px 28px;
      background: linear-gradient(135deg, var(--cyan), #0099cc);
      color: #000;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 600;
      font-size: .85rem;
      border: none;
      border-radius: 8px;
      text-decoration: none;
      display: inline-block;
      transition: transform .2s, box-shadow .2s;
    }

    .hero-cta .btn-a {
      min-width: 220px;
      text-align: center;
    }

    .hero-cta .btn-github {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #ffffff;
      color: #050505;
      border: 1px solid rgba(255, 255, 255, 0.7);
      box-shadow: 0 14px 36px rgba(255, 255, 255, 0.08);
    }

    html[data-theme="light"] .hero-cta .btn-github {
      background: #050505;
      color: #ffffff;
      border-color: #050505;
      box-shadow: 0 14px 36px rgba(2, 6, 23, 0.16);
    }

    .hero-cta .btn-github svg {
      width: 18px;
      height: 18px;
      color: currentColor;
      flex-shrink: 0;
    }

    .btn-a:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(0, 229, 255, .28);
    }

    .scroll-cue {
      position: absolute;
      bottom: 40px;
      left: 60px;
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: 0;
      animation: fadeUp .6s ease 1.5s forwards;
    }

    .scroll-cue .line {
      width: 36px;
      height: 1px;
      background: var(--muted);
      overflow: hidden;
      position: relative;
    }

    .scroll-cue .line::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: var(--cyan);
      animation: scan 2s ease 1.7s infinite;
    }

    .scroll-cue span {
      font-size: .64rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .mq-wrap {
      overflow: hidden;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

    .mi {
      padding: 16px 30px;
      font-family: 'Unbounded', sans-serif;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .mc {
      color: var(--cyan);
    }

    .mp {
      color: var(--purple);
    }

    .mpk {
      color: var(--pink);
    }

    .ma {
      color: var(--amber);
    }

    .mg {
      color: var(--green);
    }

    .sec {
      padding: 110px 64px;
      position: relative;
      z-index: 2;
    }

    footer {
      position: relative;
      z-index: 2;
    }

    .inn {
      max-width: var(--cw);
      margin: 0 auto;
      position: relative;
    }

    .sl {
      font-size: .64rem;
      letter-spacing: .28em;
      text-transform: uppercase;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .st {
      font-family: 'Unbounded', sans-serif;
      font-weight: 700;
      font-size: var(--fs-section-title);
      letter-spacing: -.025em;
      line-height: 1.15;
      margin-bottom: 52px;
    }

    .surf {
      background: transparent;
    }

    .sec::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--cyan), transparent 45%, var(--purple) 85%, transparent);
      transform: scaleX(0);
      transform-origin: left center;
      opacity: .75;
      pointer-events: none;
      transition: transform 1s cubic-bezier(.16, 1, .3, 1);
    }

    .sec.sec-visible::after {
      transform: scaleX(1);
    }

    .r3d {
      opacity: 1;
      transform: none;
      transition: none;
      transform-origin: top center;
      will-change: auto;
    }

    .r3d.in {
      opacity: 1;
      transform: none;
    }

    .r3d.out-up {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .sl-l {
      opacity: 0;
      transform: translateX(-52px);
      transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
    }

    .sl-l.in {
      opacity: 1;
      transform: translateX(0);
    }

    .sl-l.out-up {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity .4s, transform .4s;
    }

    .sl-r {
      opacity: 0;
      transform: translateX(52px);
      transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
    }

    .sl-r.in {
      opacity: 1;
      transform: translateX(0);
    }

    .sl-r.out-up {
      opacity: 0;
      transform: translateX(30px);
      transition: opacity .4s, transform .4s;
    }

    .stg>* {
      opacity: 1;
      transform: none;
      transition: none;
      will-change: auto;
    }

    .stg.in>* {
      opacity: 1;
      transform: none;
    }

    .stg.out-up>* {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .stg.in>*:nth-child(1) {
      transition-delay: .04s;
    }

    .stg.in>*:nth-child(2) {
      transition-delay: .1s;
    }

    .stg.in>*:nth-child(3) {
      transition-delay: .16s;
    }

    .stg.in>*:nth-child(4) {
      transition-delay: .22s;
    }

    .stg.in>*:nth-child(5) {
      transition-delay: .28s;
    }

    .stg.in>*:nth-child(6) {
      transition-delay: .34s;
    }

    .stg.in>*:nth-child(7) {
      transition-delay: .4s;
    }

    .stg.in>*:nth-child(8) {
      transition-delay: .46s;
    }

    .stg.in>*:nth-child(9) {
      transition-delay: .52s;
    }

    .stg.in>*:nth-child(10) {
      transition-delay: .58s;
    }

    .stg.in>*:nth-child(11) {
      transition-delay: .64s;
    }

    .stg.in>*:nth-child(12) {
      transition-delay: .7s;
    }

    .stg.out-up>*:nth-child(1) {
      transition-delay: 0s;
    }

    .stg.out-up>*:nth-child(2) {
      transition-delay: .03s;
    }

    .stg.out-up>*:nth-child(3) {
      transition-delay: .06s;
    }

    .wr .w {
      display: inline-block;
      overflow: hidden;
      margin-right: .18em;
    }

    .wr .w .wi {
      display: inline-block;
      transform: none;
      opacity: 1;
      transition: none;
    }

    .wr.in .w .wi {
      transform: none;
      opacity: 1;
    }

    .wr.out-up .w .wi {
      transform: none;
      opacity: 1;
      transition: none;
    }

    .wr.in .w:nth-child(1) .wi {
      transition-delay: .04s;
    }

    .wr.in .w:nth-child(2) .wi {
      transition-delay: .1s;
    }

    .wr.in .w:nth-child(3) .wi {
      transition-delay: .16s;
    }

    .wr.in .w:nth-child(4) .wi {
      transition-delay: .22s;
    }

    .wr.in .w:nth-child(5) .wi {
      transition-delay: .28s;
    }

    .ab-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 72px;
      align-items: stretch;
    }

    .ab-text p {
      color: var(--muted2);
      font-size: 1.15rem;
      line-height: 1.95;
      margin-bottom: 24px;
      text-align: justify;
    }

    .ab-text strong {
      color: var(--text);
      font-weight: 600;
    }

    .hc {
      color: var(--cyan);
      font-weight: 500;
    }

    .hp {
      color: var(--purple);
      font-weight: 500;
    }

    .ha {
      color: var(--amber);
      font-weight: 500;
    }

    .hpk {
      color: var(--pink);
      font-weight: 500;
    }

    .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 5px;
    }

    .stat {
      background: var(--card);
      border: 1px solid var(--border);
      padding: 26px 22px;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, transform .3s;
      border-radius: 12px;
    }

    .stat:hover {
      transform: translateY(-3px);
    }

    .stat-bar {
      position: absolute;
      left: 0;
      top: 0;
      width: 2px;
      height: 0;
      transition: height .8s cubic-bezier(.16, 1, .3, 1);
    }

    .stg.in .stat-bar {
      height: 100%;
    }

    .stat-n {
      font-family: 'Unbounded', sans-serif;
      font-size: 2rem;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 6px;
    }

    .stat-d {
      font-size: .78rem;
      color: var(--muted2);
      font-weight: 400;
    }

    .edu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 18px;
    }

    .edu-card {
      background: var(--card);
      border: none;
      padding: 30px 26px;
      position: relative;
      overflow: visible;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1);
      border-radius: 14px;
    }

    .edu-card:hover {
      transform: translateY(-5px);
    }



    .ec-c:hover {
      border-color: rgba(0, 229, 255, .3);
    }



    .ec-p:hover {
      border-color: rgba(168, 85, 247, .3);
    }



    .ec-a:hover {
      border-color: rgba(251, 191, 36, .3);
    }

    .edu-yr {
      font-size: .65rem;
      letter-spacing: .1em;
      color: var(--muted2);
      margin-bottom: 10px;
      text-transform: uppercase;
      font-weight: 500;
    }

    .edu-sc {
      font-family: 'Unbounded', sans-serif;
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .edu-dg {
      color: var(--muted2);
      font-size: .82rem;
      margin-bottom: 14px;
    }

    .edu-bs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .edu-note {
      margin-top: 12px;
      font-size: .72rem;
      color: var(--muted2);
      line-height: 1.6;
    }

    #education {
      position: relative;
    }

    #experience {
      overflow: clip;
      contain: paint;
    }

    #education .edu-grid {
      gap: 18px;
      grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    }

    #education .edu-card {
      padding: 30px 28px 32px;
      border-radius: 18px;
      border: none;
      background: var(--cardGrad);
      box-shadow: 0 18px 48px var(--eduCardShadow), inset 0 1px 0 var(--eduCardInset);
      overflow: visible;
      transition: all .45s cubic-bezier(.16, 1, .3, 1);
    }

    #education .edu-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 28px 56px var(--eduCardHoverShadow), inset 0 1px 0 var(--eduCardHoverInset);
    }

    #education .edu-yr {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .58rem;
      letter-spacing: .12em;
      color: var(--eduYearLabel);
      margin-bottom: 16px;
    }

    #education .edu-sc {
      font-size: clamp(1.02rem, 2.4vw, 1.14rem);
      font-weight: 800;
      color: var(--text);
      line-height: 1.25;
      margin-bottom: 6px;
    }

    #education .edu-dg {
      font-size: .84rem;
      color: var(--muted2);
      margin-bottom: 16px;
    }

    #education .edu-bs {
      gap: 8px;
    }

    #education .edu-note {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--eduNoteBorderTop);
    }



    /* =========================================================================
       REIMAGINED EXPERIENCE SECTION (Editorial Serif Header & Chamfered Cyber Cards)
       ========================================================================= */

    #experience {
      position: relative;
      overflow: visible;
    }

    .exp-section-inn {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
    }

    /* Header with line, kicker, and diamond */
    .exp-header-wrap {
      margin-bottom: 38px;
    }

    .exp-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.76rem;
      letter-spacing: 0.2em;
      color: rgba(203, 213, 225, 0.75);
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .exp-kicker-line {
      display: inline-block;
      width: 26px;
      height: 1.5px;
      background: rgba(203, 213, 225, 0.5);
    }

    .exp-kicker-text {
      font-weight: 600;
    }

    .exp-kicker-diamond {
      color: rgba(203, 213, 225, 0.6);
      font-size: 0.82rem;
      margin-left: 2px;
    }

    /* Editorial Serif Title */
    .exp-editorial-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(2.4rem, 4.8vw, 4rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.08;
      margin: 0;
      background: linear-gradient(135deg, #ffffff 40%, #fbcfe8 75%, #f472b6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    /* 2x2 Cybernetic Chamfered Grid */
    .exp-cyber-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px;
      width: 100%;
    }

    /* Chamfered Card Wrapper with glowing polygon border */
    .exp-cyber-card {
      position: relative;
      clip-path: polygon(
        28px 0%,
        calc(100% - 28px) 0%,
        100% 28px,
        100% calc(100% - 28px),
        calc(100% - 28px) 100%,
        28px 100%,
        0% calc(100% - 28px),
        0% 28px
      );
      padding: 1.5px;
      background: var(--exp-card-border);
      box-shadow: 0 0 32px var(--exp-card-glow), 0 16px 36px rgba(0, 0, 0, 0.45);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    }

    .exp-cyber-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 0 45px var(--exp-card-glow-hover), 0 20px 48px rgba(0, 0, 0, 0.6);
    }

    /* Inner Chamfered Glass Card */
    .exp-cyber-card-inner {
      position: relative;
      height: 100%;
      padding: clamp(24px, 2.8vw, 32px) clamp(22px, 2.6vw, 30px);
      clip-path: polygon(
        27px 0%,
        calc(100% - 27px) 0%,
        100% 27px,
        100% calc(100% - 27px),
        calc(100% - 27px) 100%,
        27px 100%,
        0% calc(100% - 27px),
        0% 27px
      );
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.015) 45%, rgba(0, 0, 0, 0.45) 100%),
        rgba(10, 14, 22, 0.88);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Inset Chamfered Thin Frame */
    .exp-cyber-card-inner::before {
      content: '';
      position: absolute;
      inset: 6px;
      clip-path: polygon(
        22px 0%,
        calc(100% - 22px) 0%,
        100% 22px,
        100% calc(100% - 22px),
        calc(100% - 22px) 100%,
        22px 100%,
        0% calc(100% - 22px),
        0% 22px
      );
      border: 1px solid var(--exp-card-inner-stroke);
      pointer-events: none;
    }

    /* 4 Distinct Color Variations */
    /* 1. Techohub: Blue/Cyan Neon */
    .exp-card-blue {
      --exp-card-border: linear-gradient(135deg, #38bdf8 0%, #0284c7 40%, #00e5ff 100%);
      --exp-card-glow: rgba(56, 189, 248, 0.35);
      --exp-card-glow-hover: rgba(0, 229, 255, 0.6);
      --exp-card-inner-stroke: rgba(56, 189, 248, 0.32);
      --exp-accent: #38bdf8;
    }

    /* 2. UMT Peer Tutoring: Purple/Violet Neon */
    .exp-card-purple {
      --exp-card-border: linear-gradient(135deg, #c084fc 0%, #9333ea 40%, #a855f7 100%);
      --exp-card-glow: rgba(168, 85, 247, 0.35);
      --exp-card-glow-hover: rgba(192, 132, 252, 0.6);
      --exp-card-inner-stroke: rgba(168, 85, 247, 0.32);
      --exp-accent: #c084fc;
    }

    /* 3. SMZ Dispatch: Amber/Gold Neon */
    .exp-card-amber {
      --exp-card-border: linear-gradient(135deg, #fbbf24 0%, #d97706 40%, #f59e0b 100%);
      --exp-card-glow: rgba(245, 158, 11, 0.35);
      --exp-card-glow-hover: rgba(251, 191, 36, 0.6);
      --exp-card-inner-stroke: rgba(245, 158, 11, 0.32);
      --exp-accent: #fbbf24;
    }

    /* 4. Grasp Solutions: Teal/Emerald Neon */
    .exp-card-teal {
      --exp-card-border: linear-gradient(135deg, #2dd4bf 0%, #0d9488 40%, #14b8a6 100%);
      --exp-card-glow: rgba(45, 212, 191, 0.35);
      --exp-card-glow-hover: rgba(45, 212, 191, 0.6);
      --exp-card-inner-stroke: rgba(45, 212, 191, 0.32);
      --exp-accent: #2dd4bf;
    }

    /* 5. Shopify Store: Pink/Rose Neon */
    .exp-card-pink {
      --exp-card-border: linear-gradient(135deg, #fb7185 0%, #e11d48 40%, #f43f5e 100%);
      --exp-card-glow: rgba(244, 63, 94, 0.35);
      --exp-card-glow-hover: rgba(251, 113, 133, 0.6);
      --exp-card-inner-stroke: rgba(244, 63, 94, 0.32);
      --exp-accent: #fb7185;
    }

    /* Card Content Typography & Layout */
    .exp-card-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 14px;
      flex-wrap: wrap;
    }

    .exp-card-company {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: #ffffff;
      margin: 0;
      line-height: 1.35;
      letter-spacing: -0.01em;
    }

    .exp-card-date {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.84rem;
      font-weight: 500;
      color: rgba(226, 232, 240, 0.78);
      white-space: nowrap;
    }

    .exp-card-role {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.86rem;
      font-style: italic;
      color: rgba(148, 163, 184, 0.9);
      margin-top: -4px;
      margin-bottom: 6px;
    }

    .exp-card-bullets {
      list-style: none;
      padding: 0;
      margin: 0 0 6px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .exp-card-bullets li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 0.89rem;
      line-height: 1.65;
      color: rgba(226, 232, 240, 0.88);
    }

    .exp-bullet-arrow {
      color: var(--exp-accent);
      font-weight: 700;
      font-size: 0.95rem;
      line-height: 1.5;
      flex-shrink: 0;
    }

    .exp-card-action {
      margin-top: auto;
      padding-top: 10px;
    }

    .exp-link-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .exp-link-btn:hover {
      color: var(--exp-accent);
      transform: translateX(2px);
    }

    /* Centered Bottom CTA Button */
    .exp-bottom-cta {
      display: flex;
      justify-content: center;
      margin-top: 40px;
    }

    .btn-exp-more {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 28px;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-top: 1.5px solid rgba(255, 255, 255, 0.4);
      color: #f1f5f9;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      cursor: pointer;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-exp-more:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.45);
      transform: translateY(-2px);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
      color: #ffffff;
    }

    .btn-exp-more svg {
      transition: transform 0.25s ease;
    }

    .btn-exp-more:hover svg {
      transform: translateX(4px);
    }

    /* Expand / Collapse for 5th item */
    .exp-cyber-card.hidden-exp {
      display: none !important;
    }

    .exp-cyber-card.hidden-exp.is-visible {
      display: block !important;
      grid-column: 1 / -1;
      max-width: 600px;
      width: 100%;
      justify-self: center;
      animation: expCardFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes expCardFadeIn {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Light Theme Support */
    html[data-theme="light"] .exp-editorial-title {
      background: linear-gradient(135deg, #0f172a 30%, #be185d 80%, #db2777 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: none;
    }

    html[data-theme="light"] .exp-kicker {
      color: #64748b;
    }

    html[data-theme="light"] .exp-kicker-line {
      background: #94a3b8;
    }

    html[data-theme="light"] .exp-cyber-card-inner {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.88) 100%);
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    }

    html[data-theme="light"] .exp-card-company {
      color: #0f172a;
    }

    html[data-theme="light"] .exp-card-date {
      color: #64748b;
    }

    html[data-theme="light"] .exp-card-role {
      color: #475569;
    }

    html[data-theme="light"] .exp-card-bullets li {
      color: #334155;
    }

    html[data-theme="light"] .exp-link-btn {
      color: #0f172a;
    }

    html[data-theme="light"] .btn-exp-more {
      background: #0f172a;
      color: #ffffff;
      border-color: #1e293b;
    }

    /* Responsive Grid on Tablet / Mobile */
    @media (max-width: 960px) {
      .exp-cyber-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    .proj-bento {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
      align-items: start;
    }

    .proj-card {
      grid-column: 1/-1;
      background: var(--cardGrad);
      border: none;
      border-radius: 20px;
      padding: 32px 28px 28px;
      position: relative;
      overflow: visible;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      border: 1px solid transparent;
      transition: all .45s cubic-bezier(.16, 1, .3, 1);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    }

    .proj-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .4s ease;
      pointer-events: none;
      border-radius: inherit;
      z-index: 1;
    }

    .proj-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--projCardAfterLine), transparent);
      opacity: 0;
      transition: opacity .35s ease;
      border-radius: inherit;
    }

    .proj-vid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.16;
      transition: opacity 0.4s ease;
      pointer-events: none;
      z-index: 0;
      border-radius: inherit;
      filter: saturate(0.95) contrast(1.04);
    }

    .proj-card:hover .proj-vid {
      opacity: 0.28;
    }

    .parking-media-stack {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .parking-media-stack img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0;
    }

    .parking-media-stack .parking-primary {
      opacity: 0.84;
    }

    .parking-media-stack .parking-secondary {
      inset: auto 18px 18px auto;
      width: 42%;
      height: 42%;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
      opacity: 0.96;
      transform: rotate(-2deg);
      object-fit: cover;
    }

    .proj-card:hover .parking-media-stack .parking-secondary {
      transform: translateY(-2px) rotate(0deg) scale(1.03);
      opacity: 1;
    }

    .proj-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 48px rgba(0, 0, 0, .38);
    }

    .proj-card:hover::before {
      opacity: 1;
    }

    .proj-card:hover::after {
      opacity: 1;
    }

    .pcc::before {
      background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(0, 229, 255, .12), transparent 55%);
    }

    .pcc:hover {
      border-color: rgba(0, 229, 255, .35);
    }

    .premium-glow-card::before {
      background: radial-gradient(ellipse 120% 80% at 0% 0%,
          rgba(0, 229, 255, .15) 0%,
          rgba(168, 85, 247, .12) 40%,
          rgba(244, 114, 182, .1) 80%,
          transparent 100%) !important;
      opacity: 0.8 !important;
      transition: opacity 1s ease-in-out, background .3s;
    }

    .premium-glow-card:hover::before {
      opacity: 1 !important;
      filter: brightness(1.2);
    }

    .premium-glow-card {
      border-color: rgba(168, 85, 247, .25) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    }

    .premium-glow-card:hover {
      border-color: rgba(168, 85, 247, .45) !important;
      box-shadow: 0 32px 64px rgba(0, 0, 0, .45), 0 0 20px rgba(0, 229, 255, 0.15);
    }

    #aiemployee-card .pill {
      font-size: 0.78rem;
    }

    .pcp::before {
      background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(168, 85, 247, .12), transparent 55%);
    }

    .pcp:hover {
      border-color: rgba(168, 85, 247, .35);
    }

    .pca::before {
      background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(251, 191, 36, .1), transparent 55%);
    }

    .pca:hover {
      border-color: rgba(251, 191, 36, .35);
    }

    .pnum {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: .62rem;
      font-weight: 600;
      letter-spacing: .22em;
      color: rgba(136, 136, 170, .55);
      margin-bottom: 18px;
    }

    .ptg-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .ptg {
      display: inline-block;
      padding: 4px 10px;
      font-size: .58rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      border-radius: 4px;
      border: 1px solid;
      font-weight: 700;
      white-space: nowrap;
    }

    .pfeat {
      font-size: .52rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--amber);
      background: rgba(251, 191, 36, .08);
      white-space: nowrap;
    }

    .tc {
      background: rgba(0, 229, 255, .09);
      border-color: rgba(0, 229, 255, .28);
      color: var(--cyan);
    }

    .tpp {
      background: rgba(168, 85, 247, .09);
      border-color: rgba(168, 85, 247, .28);
      color: var(--purple);
    }

    .tpk {
      background: rgba(244, 114, 182, .09);
      border-color: rgba(244, 114, 182, .28);
      color: var(--pink);
    }

    .ta {
      background: rgba(251, 191, 36, .09);
      border-color: rgba(251, 191, 36, .28);
      color: var(--amber);
    }

    .tg {
      background: rgba(52, 211, 153, .09);
      border-color: rgba(52, 211, 153, .28);
      color: var(--green);
    }

    .pnm {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(1.05rem, 2.1vw, 1.2rem);
      font-weight: 800;
      letter-spacing: -.02em;
      margin-bottom: 0;
      line-height: 1.2;
      flex: 0 0 auto;
    }

    .pdsc {
      color: var(--muted2);
      font-size: 0.88rem;
      line-height: 1.75;
      margin-bottom: 0;
      flex: 1 1 auto;
      text-align: justify;
    }

    .pstk {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
      justify-content: center;
      width: 100%;
    }

    .pill {
      padding: 4px 10px;
      background: rgba(255, 255, 255, .035);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 100px;
      font-size: .62rem;
      color: var(--muted2);
      font-weight: 500;
      transition: border-color .2s, color .2s;
    }

    .proj-card:hover .pill {
      border-color: rgba(255, 255, 255, .12);
      color: var(--muted2);
    }

    .parr {
      position: absolute;
      top: 22px;
      right: 22px;
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .75rem;
      color: var(--muted2);
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .25s, border-color .25s, color .25s;
    }

    .proj-card:hover .parr {
      transform: translate(2px, -2px);
    }

    .pcc:hover .parr {
      background: rgba(0, 229, 255, .15);
      color: var(--cyan);
      border-color: rgba(0, 229, 255, .4);
    }

    .pcp:hover .parr {
      background: rgba(168, 85, 247, .15);
      color: var(--purple);
      border-color: rgba(168, 85, 247, .4);
    }

    #proj-modal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    #proj-modal.open {
      display: flex;
      opacity: 1;
      pointer-events: auto;
    }

    .m-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      z-index: -1;
    }

    .m-card {
      background: var(--cardGrad);
      border: 1px solid var(--border);
      border-radius: 28px;
      width: 100%;
      max-width: 1000px;
      height: auto;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      box-shadow: 0 42px 84px rgba(0, 0, 0, 0.6);
      transform: scale(0.92) translateY(20px);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Project modals should stay clean and flat; keep page card glow out. */
    #proj-modal .m-card,
    #proj-modal .m-card-premium,
    #proj-modal .m-vid-box-premium,
    #proj-modal .m-header-premium,
    #proj-modal .m-footer-premium,
    #proj-modal .m-media-controls {
      box-shadow: none !important;
      filter: none !important;
    }

    #proj-modal .m-card::before,
    #proj-modal .m-card::after,
    #proj-modal .m-card-premium::before,
    #proj-modal .m-card-premium::after {
      box-shadow: none !important;
      filter: none !important;
    }

    #proj-modal.open .m-card {
      transform: scale(1) translateY(0);
    }

    .m-close {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 20;
      transition: all 0.3s ease;
      font-size: 1.2rem;
    }

    .m-close:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: rotate(90deg) scale(1.1);
    }

    @media (max-width: 900px) {
      .m-card {
        max-height: 92vh;
      }
    }

    .proj-card-featured {
      grid-column: 1 / -1 !important;
      display: flex !important;
      flex-direction: row !important;
      padding: 0 !important;
      min-height: 286px !important;
      overflow: visible !important;
      border: 1px solid transparent !important;
    }

    .proj-card-preview {
      grid-column: span 6 !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 14px !important;
      min-height: 0 !important;
      overflow: visible !important;
      border: 1px solid transparent !important;
      cursor: pointer;
      align-self: stretch;
    }

    @media (max-width: 992px) {

      .proj-card-featured,
      .proj-card-preview {
        flex-direction: column !important;
        height: auto !important;
      }

      .p-visual {
        min-height: 240px;
      }

      .p-title-large {
        white-space: normal;
        word-break: break-word;
      }

      .p-actions-row {
        flex-wrap: wrap;
        gap: 12px;
      }
    }


    .p-visual {
      flex: 1.25;
      position: relative;
      background: #000;
      overflow: visible;
      min-height: 314px;
    }

    .proj-card-preview .p-visual {
      flex: 0 0 auto !important;
      height: 240px;
      min-height: 240px;
      border-radius: 16px;
      overflow: hidden;
    }

    .proj-card-preview .p-info {
      flex: 0 0 auto !important;
      width: 100%;
      padding: 12px 6px 0;
      box-sizing: border-box;
      min-width: 0;
      overflow: hidden;
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
      gap: 0;
      background: transparent;
    }

    .proj-card-preview .p-tags-top {
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .proj-card-preview .p-title-large {
      font-size: clamp(1.45rem, 2.4vw, 2rem);
      line-height: 1.2;
      letter-spacing: -0.02em;
      text-align: left;
      transition: color 0.3s ease;
    }

    .pcc.proj-card-preview:hover .p-title-large {
      color: var(--cyan);
    }

    .pcc.proj-card-featured:hover .p-title-large {
      color: var(--cyan);
    }

    .pca.proj-card-preview:hover .p-title-large {
      color: var(--amber);
    }

    .pcp.proj-card-preview:hover .p-title-large {
      color: var(--purple);
    }

    .proj-card-trio.pcc:hover .p-title-large {
      color: var(--cyan) !important;
    }

    .proj-card-trio.pcp:hover .p-title-large {
      color: var(--purple) !important;
    }

    .proj-card-trio.pca:hover .p-title-large {
      color: var(--amber) !important;
    }

    .proj-card-preview .p-desc-large {
      font-size: 1.02rem;
      text-align: left;
      max-width: none;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .proj-card-preview .pstk {
      justify-content: flex-start;
      margin-top: 8px;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .proj-card-preview .pill {
      padding: 6px 12px;
      font-size: 0.72rem;
    }

    .proj-card-preview .github-icon-btn {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      margin-left: auto;
    }

    .proj-card-preview .preview-hover-btn,
    .proj-card-trio .preview-hover-btn,
    .proj-card-featured .preview-hover-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0.96);
      padding: 12px 20px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(18, 22, 39, 0.72);
      color: #fff;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.25s ease;
      z-index: 10;
      pointer-events: none;
    }

    .proj-card-preview:hover .preview-hover-btn,
    .proj-card-trio:hover .preview-hover-btn,
    .proj-card-featured:hover .preview-hover-btn,
    .proj-card-preview .p-visual:hover .preview-hover-btn,
    .proj-card-trio .p-visual:hover .preview-hover-btn,
    .proj-card-featured .p-visual:hover .preview-hover-btn {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .proj-card-preview .preview-hover-btn:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 4px;
    }

    .proj-card-preview .badge-year {
      top: 16px;
      right: 16px;
      left: auto;
      bottom: auto;
      font-size: 0.9rem;
      padding: 6px 12px;
    }

    .proj-card-preview .image-label {
      position: absolute;
      top: 14px;
      left: 14px;
      padding: 6px 12px;
      background: rgba(0, 0, 0, 0.32);
      color: rgba(255, 255, 255, 0.95);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-radius: 6px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 2;
      pointer-events: none;
      transition: all 0.3s ease;
    }

    .proj-card-preview .image-label.cyan {
      background: rgba(0, 229, 255, 0.2);
      color: #00e5ff;
      border: 1px solid rgba(0, 229, 255, 0.35);
    }

    .proj-card-preview .image-label.agentic {
      background: rgba(168, 85, 247, 0.2);
      color: #a855f7;
      border: 1px solid rgba(168, 85, 247, 0.35);
    }

    .proj-card-preview .image-label.pink {
      background: rgba(244, 114, 182, 0.2);
      color: #f472b6;
      border: 1px solid rgba(244, 114, 182, 0.35);
    }

    .proj-card-preview .image-label.amber {
      background: rgba(251, 191, 36, 0.2);
      color: var(--amber);
      border: 1px solid rgba(251, 191, 36, 0.35);
    }

    .proj-card-preview .pill.pill-cyan {
      background: rgba(0, 229, 255, 0.12);
      color: #00e5ff;
      border: 1px solid rgba(0, 229, 255, 0.25);
    }

    .proj-card-preview .pill.pill-purple {
      background: rgba(168, 85, 247, 0.12);
      color: #a855f7;
      border: 1px solid rgba(168, 85, 247, 0.25);
    }

    .proj-card-preview .pill.pill-pink {
      background: rgba(244, 114, 182, 0.12);
      color: #f472b6;
      border: 1px solid rgba(244, 114, 182, 0.25);
    }

    .proj-card-trio {
      grid-column: span 4 !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 16px !important;
      min-height: 0 !important;
      background: var(--cardGrad) !important;
      border-radius: 20px !important;
      border: 1px solid var(--border) !important;
      cursor: pointer;
      align-self: stretch;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
      overflow: visible;
    }

    #projects .proj-card.hidden-project {
      display: none !important;
    }

    .proj-card-trio:hover {
      transform: translateY(-8px);
    }

    .proj-card-trio.pcc:hover {
      border-color: rgba(0, 229, 255, 0.4) !important;
      box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 229, 255, 0.1);
    }

    .proj-card-trio.pcp:hover {
      border-color: rgba(168, 85, 247, 0.4) !important;
      box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45), 0 0 20px rgba(168, 85, 247, 0.1);
    }

    .proj-card-trio.pca:hover {
      border-color: rgba(251, 191, 36, 0.4) !important;
      box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45), 0 0 20px rgba(251, 191, 36, 0.1);
    }

    .proj-card-trio .p-visual {
      flex: 0 0 auto !important;
      height: 200px !important;
      min-height: 200px !important;
      margin-bottom: 18px;
      border-radius: 12px !important;
      overflow: hidden;
      position: relative;
    }

    .proj-card-trio .p-info {
      flex: 1 1 auto !important;
      width: 100% !important;
      padding: 0 4px !important;
      display: flex !important;
      flex-direction: column !important;
      background: transparent !important;
    }

    .proj-card-trio .p-title-large {
      font-size: 1.35rem !important;
      font-weight: 800;
      margin-bottom: 4px !important;
      color: var(--text);
    }

    .proj-card-trio .p-desc-large {
      font-size: 0.88rem !important;
      line-height: 1.5 !important;
      margin-bottom: 12px !important;
      color: var(--muted2);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .proj-card-trio .badge-year {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      left: auto !important;
      bottom: auto !important;
      padding: 2px 7px !important;
      background: rgba(0, 0, 0, 0.35) !important;
      color: rgba(255, 255, 255, 0.85) !important;
      font-size: 0.58rem !important;
      font-weight: 500 !important;
      border-radius: 4px !important;
      z-index: 5 !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      border: 1px solid rgba(255, 255, 255, 0.05) !important;
      letter-spacing: 0.03em !important;
      min-width: 0 !important;
      width: auto !important;
      height: auto !important;
    }

    .proj-card-trio .image-label {
      position: absolute !important;
      top: 10px !important;
      left: 10px !important;
      padding: 4px 10px !important;
      font-size: 0.62rem !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      border-radius: 6px !important;
      z-index: 5 !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      letter-spacing: 0.05em !important;
    }

    .proj-card-trio .image-label.cyan {
      background: rgba(0, 229, 255, 0.2) !important;
      color: #00e5ff !important;
      border: 1px solid rgba(0, 229, 255, 0.35) !important;
    }

    .proj-card-trio .image-label.agentic {
      background: rgba(168, 85, 247, 0.22) !important;
      color: #a855f7 !important;
      border: 1px solid rgba(168, 85, 247, 0.35) !important;
    }

    .proj-card-trio .image-label.amber {
      background: rgba(251, 191, 36, 0.22) !important;
      color: #fbbf24 !important;
      border: 1px solid rgba(251, 191, 36, 0.35) !important;
    }

    .proj-card-trio .pstk {
      margin-top: 6px !important;
      justify-content: flex-start !important;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .proj-card-trio .pill {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 0.68rem;
      padding: 4px 10px;
    }

    @media (max-width: 1100px) {
      .proj-card-trio {
        grid-column: span 6 !important;
      }
    }

    @media (max-width: 768px) {
      .proj-card-trio {
        grid-column: span 12 !important;
      }
    }

    .proj-card-preview .pill.pill-amber {
      background: rgba(251, 191, 36, 0.12);
      color: var(--amber);
      border: 1px solid rgba(251, 191, 36, 0.25);
    }

    .p-visual video,
    .p-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.55;
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .proj-card-featured:hover .p-visual video,
    .proj-card-featured:hover .p-visual img,
    .proj-card-preview:hover .p-visual img {
      opacity: 0.8;
      transform: scale(1.04);
    }

    .badge-featured {
      position: absolute;
      top: 32px;
      left: 32px;
      padding: 10px 20px;
      background: rgba(255, 165, 0, 0.12);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 165, 0, 0.3);
      border-radius: 100px;
      color: #ffa500;
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 3;
    }

    .badge-featured::before {
      content: '';
      width: 8px;
      height: 8px;
      background: #ffa500;
      border-radius: 50%;
      box-shadow: 0 0 15px #ffa500;
    }

    .badge-year {
      position: absolute;
      bottom: 32px;
      left: 32px;
      padding: 8px 16px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      font-family: 'IBM Plex Mono', monospace;
      z-index: 3;
    }

    .p-info {
      flex: 1;
      padding: 28px 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.03), transparent);
      position: relative;
      z-index: 2;
      text-align: center;
    }

    @media (max-width: 992px) {
      .p-info {
        padding: 40px;
      }
    }

    .p-tags-top {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .tag-bubble {
      padding: 7px 16px;
      background: rgba(0, 229, 255, 0.08);
      border: 1.5px solid rgba(0, 229, 255, 0.45);
      border-radius: 100px;
      font-size: 0.72rem;
      font-weight: 700;
      color: #38bdf8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
      transition: all 0.25s ease;
    }

    .tag-bubble.tb-c {
      border-color: rgba(0, 229, 255, 0.55);
      background: rgba(0, 229, 255, 0.12);
      color: var(--cyan);
      box-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
    }

    .tag-bubble.tb-p {
      border-color: rgba(168, 85, 247, 0.55);
      background: rgba(168, 85, 247, 0.12);
      color: var(--purple);
      box-shadow: 0 0 14px rgba(168, 85, 247, 0.25);
    }

    .tag-bubble.tb-a {
      border-color: rgba(251, 191, 36, 0.55);
      background: rgba(251, 191, 36, 0.12);
      color: var(--amber);
      box-shadow: 0 0 14px rgba(251, 191, 36, 0.25);
    }

    .tag-bubble.tb-g {
      border-color: rgba(52, 211, 153, 0.55);
      background: rgba(52, 211, 153, 0.12);
      color: var(--green);
      box-shadow: 0 0 14px rgba(52, 211, 153, 0.25);
    }

    .tag-bubble.tb-pk {
      border-color: rgba(244, 114, 182, 0.55);
      background: rgba(244, 114, 182, 0.12);
      color: var(--pink);
      box-shadow: 0 0 14px rgba(244, 114, 182, 0.25);
    }

    .p-title-large {
      font-family: 'Unbounded', sans-serif;
      font-size: 2.8rem;
      font-weight: 800;
      letter-spacing: -0.05em;
      line-height: 1.05;
      margin: 0;
      color: var(--text);
      white-space: normal;
      max-width: 100%;
    }

    @media (max-width: 480px) {
      .p-title-large {
        font-size: 2.4rem;
      }
    }

    .p-desc-large {
      font-size: 1.15rem;
      line-height: 1.65;
      color: var(--muted2);
      max-width: 100%;
      text-align: center;
      margin: 0;
    }

    @media (max-width: 992px) {
      .proj-card-preview {
        padding: 14px !important;
      }

      .proj-card-preview .p-visual {
        flex: 0 0 auto !important;
        height: 210px;
        min-height: 210px;
      }

      .proj-card-preview .p-info {
        padding: 16px 4px 4px;
      }
    }

    .p-actions-row {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 15px;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
    }

    .shimmer-btn {
      position: relative;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #fff;
      padding: 18px 36px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 1rem;
      border: none;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 25px rgba(217, 119, 6, 0.35);
    }

    .shimmer-btn::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(to right,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0) 100%);
      transform: rotate(30deg);
      animation: shimmerEffect 4s infinite;
    }

    @keyframes shimmerEffect {
      0% {
        transform: translateX(-150%) rotate(30deg);
      }

      20% {
        transform: translateX(150%) rotate(30deg);
      }

      100% {
        transform: translateX(150%) rotate(30deg);
      }
    }

    .shimmer-btn:hover {
      box-shadow: 0 15px 35px rgba(217, 119, 6, 0.45);
      filter: brightness(1.15);
    }

    .github-icon-btn {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      font-size: 1.4rem;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    .github-icon-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.25);
    }

    .m-header-premium {
      padding: 28px 34px 18px;
      border-bottom: 1px solid var(--border);
      position: relative;
    }

    .m-title-premium {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(1.65rem, 3.2vw, 2.35rem);
      font-weight: 800;
      letter-spacing: -0.05em;
      margin-bottom: 10px;
      line-height: 1;
    }

    .m-subtitle-premium {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted2);
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .m-accent-icon {
      color: var(--cyan);
      font-size: 1.3rem;
      display: flex;
      align-items: center;
    }

    .m-desc-section {
      margin-top: 22px;
      border-left: 4px solid var(--cyan);
      padding-left: 30px;
      margin-bottom: 40px;
    }

    .m-desc-title {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      margin-bottom: 20px;
      color: var(--text);
      display: flex;
      align-items: center;
    }

    .m-card-premium {
      max-width: 1250px !important;
      max-height: 92vh !important;
    }

    .m-body-premium {
      display: block !important;
      overflow-y: auto !important;
      padding-bottom: 26px;
    }

    .m-vid-box-premium {
      width: 100%;
      margin: 0 0 28px 0;
      border-radius: 0;
      overflow: hidden;
      border: none;
      height: auto;
      min-height: 0;
      background: transparent;
    }

    .m-media-stage {
      position: relative;
      width: 100%;
      height: auto;
      display: block;
    }

    .m-vid-box-premium video,
    .m-vid-box-premium img {
      width: 100%;
      height: auto;
      display: block;
    }

    .m-vid-box-premium video {
      object-fit: cover;
    }

    .m-vid-box-premium img {
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: center;
    }

    .m-vid-box-premium img.m-media-slide {
      width: 100%;
      height: auto;
      object-fit: contain !important;
      object-position: center;
    }

    .m-media-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      opacity: 0;
      transition: opacity 0.35s ease-in-out;
      pointer-events: none;
    }

    .m-media-slide.is-active {
      position: relative;
      opacity: 1;
      pointer-events: auto;
    }

    .m-media-controls {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      z-index: 2;
    }

    .m-media-nav {
      pointer-events: auto;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(0, 0, 0, 0.32);
      color: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .m-media-nav:hover {
      background: rgba(0, 0, 0, 0.45);
    }

    .m-media-dots {
      pointer-events: auto;
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      position: absolute;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      z-index: 3;
    }



    .m-media-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      border: 0;
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
    }

    .m-media-dot.active {
      background: var(--cyan);
      box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.18);
    }

    .m-tag-cloud-premium {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      width: 88%;
      margin: 0 auto 20px;
    }

    .m-info-content-premium {
      width: 88%;
      margin: 0 auto;
      padding: 0 !important;
      background: none !important;
    }

    .m-footer-premium {
      padding: 60px 30px 40px;
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .m-pane-static {
      display: block;
      line-height: 1.8;
      font-size: 1.05rem;
      color: var(--muted2);
    }

    .m-pane-static p {
      margin-bottom: 16px;
    }

    .m-pane-static strong {
      color: var(--text);
    }

    @media (max-width: 600px) {
      .m-title-premium {
        font-size: clamp(1.4rem, 8vw, 1.8rem);
      }

      .m-header-premium {
        padding: 24px 16px 16px;
      }

      .m-vid-box-premium {
        width: 100%;
        border-radius: 0;
        margin: 15px 0;
        min-height: 240px;
        max-height: 50vh;
      }

      .m-info-content-premium {
        width: 100%;
      }

      .m-desc-section {
        padding-left: 16px;
        margin-top: 30px;
      }

      .m-subtitle-premium {
        font-size: 0.85rem;
        gap: 10px;
      }
    }

    .pca:hover .parr {
      background: rgba(251, 191, 36, .12);
      color: var(--amber);
      border-color: rgba(251, 191, 36, .4);
    }

    @media(min-width:801px) {
      .proj-span-7 {
        grid-column: span 7;
      }

      .proj-span-5 {
        grid-column: span 5;
      }

      .proj-span-4 {
        grid-column: span 4;
      }

      .proj-span-6 {
        grid-column: span 6;
      }
    }

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

      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .premium-glow {
      position: relative;
      background: var(--bg) !important;
      z-index: 1;
      overflow: hidden !important;
      border: none !important;
    }

    .premium-glow::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: conic-gradient(from 0deg,
          transparent 0%,
          var(--cyan) 15%,
          transparent 30%,
          var(--purple) 50%,
          transparent 65%,
          var(--pink) 85%,
          transparent 100%);
      animation: rotate-bg 5s linear infinite;
      z-index: -2;
    }

    .premium-glow::after {
      content: '';
      position: absolute;
      inset: 1px;
      background: var(--cardGrad);
      border-radius: 15px;
      z-index: -1;
    }

    .m-tag-pill {
      background: rgba(0, 229, 255, 0.08);
      border: 1.5px solid rgba(0, 229, 255, 0.45);
      padding: 8px 20px;
      border-radius: 100px;
      font-size: 0.88rem;
      font-weight: 700;
      color: #38bdf8;
      letter-spacing: 0.03em;
      transition: all 0.25s ease;
      text-transform: uppercase;
      box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
    }

    .mt-c {
      background: rgba(0, 229, 255, 0.1);
      border-color: rgba(0, 229, 255, 0.55);
      color: var(--cyan);
      box-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
    }

    .mt-p {
      background: rgba(168, 85, 247, 0.1);
      border-color: rgba(168, 85, 247, 0.55);
      color: var(--purple);
      box-shadow: 0 0 14px rgba(168, 85, 247, 0.25);
    }

    .mt-a {
      background: rgba(251, 191, 36, 0.1);
      border-color: rgba(251, 191, 36, 0.55);
      color: var(--amber);
      box-shadow: 0 0 14px rgba(251, 191, 36, 0.25);
    }

    .mt-g {
      background: rgba(52, 211, 153, 0.1);
      border-color: rgba(52, 211, 153, 0.55);
      color: var(--green);
      box-shadow: 0 0 14px rgba(52, 211, 153, 0.25);
    }

    .mt-pk {
      background: rgba(244, 114, 182, 0.1);
      border-color: rgba(244, 114, 182, 0.55);
      color: var(--pink);
      box-shadow: 0 0 14px rgba(244, 114, 182, 0.25);
    }

    .m-tag-pill:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      filter: brightness(1.2);
    }

    .m-unified-list {
      list-style: none;
      padding: 0;
      margin: 20px 0;
    }

    .m-unified-list li {
      position: relative;
      padding-left: 28px;
      margin-bottom: 18px;
      line-height: 1.7;
      font-size: 1.05rem;
      color: var(--muted2);
    }

    .m-unified-list li::before {
      content: '✦';
      position: absolute;
      left: 0;
      color: var(--cyan);
      font-size: 0.9rem;
    }

    .m-unified-list.stack li::before {
      color: var(--purple);
    }

    .m-btn-github-center {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--text);
      color: var(--bg);
      padding: 18px 40px;
      border-radius: 16px;
      font-weight: 800;
      text-decoration: none;
      font-size: 1.05rem;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .m-btn-github-center:hover {
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
      background: #fff;
    }

    @keyframes featGlow {

      0%,
      100% {
        border-color: rgba(0, 229, 255, .15);
        box-shadow: 0 0 10px rgba(0, 229, 255, .05);
      }

      50% {
        border-color: rgba(0, 229, 255, .5);
        box-shadow: 0 0 24px rgba(0, 229, 255, .2);
      }
    }

    .proj-card:has(.pfeat) {
      animation: featGlow 4s ease-in-out infinite;
    }

    .sk-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 28px;
    }

    .sk-grp {
      background: var(--card);
      border: none;
      padding: 26px 22px;
      position: relative;
      overflow: visible;
      border-radius: 12px;
    }



    .sk-grp h3 {
      font-family: 'Unbounded', sans-serif;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .sk-ul {
      list-style: none;
    }

    .sk-ul li {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .03);
      color: var(--muted2);
      font-size: .82rem;
      transition: color .2s, gap .2s;
    }

    .sk-ul li:hover {
      color: var(--text);
      gap: 12px;
    }

    .sdot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .ct-wrap {
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .ct-wrap.ct-play {
      animation: ctIn 1s cubic-bezier(.16, 1, .3, 1) both;
    }

    .ct-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 360px;
      background: radial-gradient(ellipse, rgba(168, 85, 247, .12) 0%, transparent 70%);
      pointer-events: none;
      animation: ctPulse 8s ease-in-out infinite;
    }

    .ct-big {
      font-family: 'Unbounded', sans-serif;
      font-weight: 900;
      font-size: clamp(2rem, 5.5vw, 5rem);
      letter-spacing: -.035em;
      line-height: 1.05;
      margin-bottom: 16px;
    }

    .ct-sub {
      color: var(--muted2);
      max-width: 420px;
      margin: 0 auto 0;
      font-size: .95rem;
      line-height: 1.8;
    }

    .ct-card {
      position: relative;
      max-width: 920px;
      margin: 34px auto 0;
      padding: clamp(22px, 3vw, 30px);
      border-radius: 22px;
      background:
        linear-gradient(135deg, rgba(0, 229, 255, 0.10), transparent 30%),
        linear-gradient(315deg, rgba(244, 114, 182, 0.10), transparent 34%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035));
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
      text-align: left;
    }

    .ct-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink), var(--amber));
    }

    .ct-card::after {
      content: '';
      position: absolute;
      inset: 4px 0 auto 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
      pointer-events: none;
    }

    .ct-card-hd {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .ct-card-kicker {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 8px;
    }

    .ct-card-title {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(1.2rem, 2.4vw, 1.75rem);
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--text);
      margin: 0;
    }

    .ct-card-copy {
      max-width: 520px;
      color: var(--muted2);
      line-height: 1.75;
      font-size: .94rem;
      margin: 8px 0 0;
    }

    .ct-direct {
      margin-bottom: 18px;
    }

    .ct-social-label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 18px 0 12px;
      color: var(--muted2);
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .ct-social-label::after {
      content: '';
      height: 1px;
      flex: 1;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent);
    }

    .ct-card-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .ct-card-actions .cl {
      justify-content: center;
      min-height: 54px;
      --cl-bg: rgba(255, 255, 255, 0.04);
      --cl-border: rgba(255, 255, 255, 0.1);
      --cl-color: var(--text);
      background: var(--cl-bg);
      border-color: var(--cl-border);
      color: var(--cl-color);
      font-weight: 700;
      font-size: .82rem;
      width: 100%;
      gap: 10px;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .cl-ico {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .ct-card-actions .cl:hover {
      border-color: var(--cl-border);
      background: var(--cl-bg);
      color: var(--cl-color);
    }

    .ct-direct .cl {
      min-height: 74px;
      justify-content: flex-start;
      --cl-bg: rgba(255, 255, 255, 0.04);
      --cl-border: rgba(255, 255, 255, 0.1);
      --cl-color: var(--text);
      background: var(--cl-bg);
      border-color: var(--cl-border);
      color: var(--cl-color);
      padding: 14px 16px;
      border-radius: 16px;
      box-shadow: 0 16px 34px rgba(234, 67, 53, 0.22);
    }

    .cl-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .cl-title {
      font-size: .94rem;
      font-weight: 850;
      line-height: 1.1;
    }

    .cl-note {
      overflow: hidden;
      color: currentColor;
      font-size: .72rem;
      font-weight: 650;
      line-height: 1.25;
      opacity: .78;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ct-card-actions .clc,
    .ct-direct .clc {
      --cl-bg: #ea4335;
      --cl-border: #ea4335;
      --cl-color: #ffffff;
    }

    .ct-card-actions>a.clp {
      --cl-bg: #0a66c2;
      --cl-border: #0a66c2;
      --cl-color: #ffffff;
      font-weight: 800;
    }

    .ct-card-actions>a.clpk {
      --cl-bg: #ffffff;
      --cl-border: #ffffff;
      --cl-color: #111111;
      font-weight: 800;
    }

    .ct-card-actions>a.cla {
      --cl-bg: #fbbf24;
      --cl-border: #fbbf24;
      --cl-color: #1f2937;
      font-weight: 800;
    }

    .ct-card-actions>a.clhf {
      --cl-bg: #ffcc4d;
      --cl-border: #ffcc4d;
      --cl-color: #111827;
      font-weight: 800;
    }

    .ct-card-actions>a.clkg {
      --cl-bg: #20beff;
      --cl-border: #20beff;
      --cl-color: #042f3f;
      font-weight: 800;
    }

    .ct-card-actions .clp .cl-ico,
    .ct-card-actions .clc .cl-ico,
    .ct-card-actions .clhf .cl-ico,
    .ct-card-actions .clkg .cl-ico,
    .ct-card-actions>a.clc .cl-ico,
    .ct-card-actions>a.clp .cl-ico,
    .ct-card-actions>a.clpk .cl-ico,
    .ct-card-actions>a.cla .cl-ico,
    .ct-card-actions>a.clhf .cl-ico,
    .ct-card-actions>a.clkg .cl-ico {
      color: currentColor;
    }

    .ct-links {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 40px;
      flex-wrap: wrap;
    }

    .cl {
      padding: 11px 22px;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--muted2);
      text-decoration: none;
      font-size: .78rem;
      letter-spacing: .04em;
      transition: all .2s;
      display: flex;
      align-items: center;
      gap: 7px;
      font-weight: 500;
    }

    .clc:hover {
      border-color: var(--cl-border);
      color: var(--cl-color);
      background: var(--cl-bg);
    }

    .clp:hover {
      border-color: var(--cl-border);
      color: var(--cl-color);
      background: var(--cl-bg);
    }

    .clpk:hover {
      border-color: var(--cl-border);
      color: var(--cl-color);
      background: var(--cl-bg);
    }

    .cla:hover {
      border-color: var(--cl-border);
      color: var(--cl-color);
      background: var(--cl-bg);
    }

    /* =========================================================================
       3D CONTACT SECTION (Frosted Monolith, Prismatic Hub & 3D Gem Nodes)
       ========================================================================= */

    #contact .ct-wrap {
      text-align: left;
      position: relative;
      overflow: visible;
      padding: clamp(28px, 4vw, 50px) clamp(16px, 3vw, 36px);
      border-radius: 28px;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    /* Background Circuit Board Traces */
    .ct-circuits-svg {
      position: absolute;
      inset: -20px;
      width: calc(100% + 40px);
      height: calc(100% + 40px);
      pointer-events: none;
      z-index: 0;
      opacity: 0.85;
    }

    .circuit-dot {
      animation: circuitPulse 3s ease-in-out infinite alternate;
    }

    @keyframes circuitPulse {
      0% {
        opacity: 0.4;
        r: 3;
        filter: drop-shadow(0 0 2px currentColor);
      }
      100% {
        opacity: 1;
        r: 4.5;
        filter: drop-shadow(0 0 8px currentColor);
      }
    }

    /* 3D Stage Layout */
    .ct-3d-stage {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
      gap: clamp(28px, 4vw, 56px);
      align-items: center;
      position: relative;
      z-index: 1;
      perspective: 1200px;
    }

    /* --- Left 3D Frosted Pure Transparent Glass Monolith --- */
    .ct-monolith-card {
      position: relative;
      perspective: 1000px;
    }

    .ct-monolith-glass {
      position: relative;
      padding: clamp(34px, 4.5vw, 54px) clamp(28px, 3.8vw, 46px);
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.015) 45%, rgba(0, 229, 255, 0.03) 100%),
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.12), transparent 45%);
      backdrop-filter: blur(16px) saturate(180%) contrast(104%);
      -webkit-backdrop-filter: blur(16px) saturate(180%) contrast(104%);
      border: 1.5px solid rgba(255, 255, 255, 0.42);
      border-top: 2.5px solid rgba(255, 255, 255, 0.85);
      border-left: 2px solid rgba(255, 255, 255, 0.7);
      box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.48),
        0 10px 25px rgba(0, 0, 0, 0.3),
        inset 0 2.5px 6px rgba(255, 255, 255, 0.8),
        inset 0 -2px 8px rgba(0, 229, 255, 0.15),
        inset 2px 0 5px rgba(255, 255, 255, 0.45);
      transform: rotateY(3deg) rotateX(1.5deg);
      transform-style: preserve-3d;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    }

    .ct-monolith-glass:hover {
      transform: rotateY(0deg) rotateX(0deg) translateY(-4px);
      box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.55),
        0 14px 30px rgba(0, 0, 0, 0.35),
        inset 0 3px 8px rgba(255, 255, 255, 0.9);
    }

    .ct-monolith-bevel {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 14px;
      border-radius: 28px 28px 0 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%);
      pointer-events: none;
    }

    .ct-monolith-shine {
      position: absolute;
      inset: 0;
      border-radius: 28px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 40%, rgba(0, 229, 255, 0.08) 100%);
      pointer-events: none;
    }

    .ct-monolith-inner {
      position: relative;
      z-index: 2;
    }

    .ct-monolith-title {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(2rem, 3.8vw, 3.4rem);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -0.025em;
      color: #ffffff;
      margin: 0 0 18px 0;
      text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    }

    .ct-monolith-great {
      background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #c084fc 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.55));
      display: inline-block;
    }

    .ct-monolith-desc {
      color: rgba(241, 245, 249, 0.9);
      font-size: clamp(0.95rem, 1.15vw, 1.05rem);
      line-height: 1.75;
      margin: 0 0 32px 0;
      max-width: 460px;
      font-weight: 400;
    }

    .ct-monolith-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .ct-glass-pill {
      display: inline-flex;
      align-items: center;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0, 229, 255, 0.06);
      border: 1.5px solid rgba(34, 211, 238, 0.75);
      color: #67e8f9;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow:
        0 0 16px rgba(0, 229, 255, 0.3),
        inset 0 1.5px 3px rgba(255, 255, 255, 0.65);
      transition: all 0.25s ease;
      cursor: default;
    }

    .ct-glass-pill:hover {
      background: rgba(0, 229, 255, 0.18);
      border-color: #22d3ee;
      color: #ffffff;
      box-shadow: 0 0 24px rgba(0, 229, 255, 0.6);
      transform: translateY(-2px);
    }

    /* --- Right 3D Pure Transparent Crystal Plaque Hub & Nodes Composition --- */
    .ct-hub-composition {
      position: relative;
      min-height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 10px 40px;
    }

    /* Central Prismatic Crystal Plaque */
    .ct-crystal-plaque {
      position: relative;
      width: 100%;
      max-width: 420px;
      padding: clamp(30px, 3.6vw, 42px) clamp(24px, 3vw, 36px);
      border-radius: 22px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(32, 190, 255, 0.05) 100%);
      backdrop-filter: blur(16px) saturate(190%) contrast(105%);
      -webkit-backdrop-filter: blur(16px) saturate(190%) contrast(105%);
      border: 1.5px solid rgba(255, 255, 255, 0.45);
      border-top: 2.5px solid rgba(255, 255, 255, 0.85);
      border-left: 2px solid rgba(255, 255, 255, 0.65);
      box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.45),
        inset 0 2.5px 5px rgba(255, 255, 255, 0.8),
        inset -2px -2px 8px rgba(32, 190, 255, 0.2);
      transform: rotateY(-3deg) rotateX(2deg);
      transform-style: preserve-3d;
      z-index: 5;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .ct-crystal-plaque:hover {
      transform: rotateY(0deg) rotateX(0deg) translateY(-3px);
      box-shadow:
        0 36px 85px rgba(0, 0, 0, 0.52),
        inset 0 3px 8px rgba(255, 255, 255, 0.9);
    }

    .ct-crystal-facets {
      position: absolute;
      inset: 0;
      border-radius: 22px;
      background:
        linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.22) 46%, transparent 52%),
        radial-gradient(circle at 85% 15%, rgba(0, 229, 255, 0.25), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(244, 114, 182, 0.2), transparent 45%);
      pointer-events: none;
    }

    .ct-crystal-refraction {
      position: absolute;
      inset: 0;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      pointer-events: none;
    }

    .ct-crystal-content {
      position: relative;
      z-index: 2;
    }

    .ct-crystal-kicker {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #00e5ff;
      margin-bottom: 8px;
      text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
      text-transform: uppercase;
    }

    .ct-crystal-heading {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(1.4rem, 2.3vw, 1.95rem);
      font-weight: 800;
      color: #ffffff;
      margin: 0 0 10px 0;
      letter-spacing: -0.02em;
    }

    .ct-crystal-sub {
      color: rgba(226, 232, 240, 0.88);
      font-size: 0.88rem;
      line-height: 1.6;
      margin: 0 0 24px 0;
    }

    /* Embedded Amber/Copper Email Plaque */
    .ct-email-plaque {
      display: block;
      position: relative;
      padding: 13px 18px;
      border-radius: 14px;
      background: linear-gradient(135deg, #c2410c 0%, #ea580c 45%, #9a3412 100%);
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-top: 1.5px solid rgba(255, 255, 255, 0.75);
      box-shadow:
        0 10px 25px rgba(234, 88, 12, 0.45),
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35);
      text-decoration: none;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    }

    .ct-email-plaque:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow:
        0 16px 36px rgba(234, 88, 12, 0.65),
        inset 0 1px 3px rgba(255, 255, 255, 0.85);
    }

    .ct-email-sheen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
      pointer-events: none;
    }

    .ct-email-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 50%, rgba(254, 215, 170, 0.3), transparent 60%);
      pointer-events: none;
    }

    .ct-email-text-wrap {
      position: relative;
      z-index: 2;
    }

    .ct-email-label {
      display: block;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      font-size: 0.95rem;
      color: #ffffff;
      line-height: 1.2;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .ct-email-address {
      display: block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.92);
      margin-top: 2px;
      letter-spacing: 0.01em;
    }

    /* --- 3D Profile Nodes (Orbs, Gems, Semicircle Prisms) --- */
    .ct-node-item {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      z-index: 10;
      cursor: pointer;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
    }

    .ct-node-item:hover {
      transform: translateY(-8px) scale(1.12);
      z-index: 25;
    }

    /* Position 1: LinkedIn (Top-Left of crystal plaque) */
    .node-pos-linkedin {
      top: 15px;
      left: 15px;
    }

    /* Position 2: GitHub (Bottom-Left of crystal plaque) */
    .node-pos-github {
      bottom: 35px;
      left: 20px;
    }

    /* Position 3: LeetCode (Bottom-Center in front of plaque) */
    .node-pos-leetcode {
      bottom: -15px;
      left: 110px;
    }

    /* Position 4: Hugging Face (Right of crystal plaque) */
    .node-pos-hf {
      top: 48%;
      right: 0px;
      transform: translateY(-50%);
    }
    .node-pos-hf:hover {
      transform: translateY(calc(-50% - 8px)) scale(1.12);
    }

    /* Position 5: Kaggle (Bottom-Right) */
    .node-pos-kaggle {
      bottom: -22px;
      right: 50px;
    }

    /* Common Diamond Crystal & Prism Dimensions */
    .gem-body,
    .sphere-body {
      width: 82px;
      height: 82px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(16px) saturate(200%) brightness(1.15);
      -webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.15);
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .gem-shadow,
    .sphere-shadow,
    .prism-shadow {
      position: absolute;
      bottom: -14px;
      left: 50%;
      transform: translateX(-50%);
      width: 85%;
      height: 16px;
      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 45%, transparent 75%);
      filter: blur(4px);
      pointer-events: none;
    }

    .diamond-facets-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    /* Chandelier Crystal Light Glints */
    .diamond-specular {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 15%, transparent 40%),
        linear-gradient(315deg, rgba(255, 255, 255, 0.45) 0%, transparent 35%);
      pointer-events: none;
      z-index: 4;
    }

    /* 1. LinkedIn Sparkling Blue Chandelier Diamond */
    .gem-body.glass-blue-diamond,
    .sphere-body.glass-blue {
      clip-path: polygon(50% 2%, 88% 18%, 98% 62%, 72% 98%, 24% 96%, 2% 58%, 14% 18%);
      background: 
        radial-gradient(circle at 45% 25%, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
        linear-gradient(135deg, rgba(147, 197, 253, 0.42) 0%, rgba(59, 130, 246, 0.16) 40%, rgba(29, 78, 216, 0.32) 100%);
      border: 1.5px solid rgba(191, 219, 254, 0.85);
      border-top: 2.5px solid rgba(255, 255, 255, 0.98);
      box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(59, 130, 246, 0.85),
        0 0 65px rgba(37, 99, 235, 0.45),
        inset 0 3px 8px rgba(255, 255, 255, 1),
        inset 0 -5px 10px rgba(30, 58, 138, 0.6),
        inset 0 0 16px rgba(255, 255, 255, 0.4);
      filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(59, 130, 246, 0.75));
    }

    .gem-body.glass-blue-diamond .linkedin-icon,
    .sphere-body.glass-blue .linkedin-icon {
      width: 36px;
      height: 36px;
      filter: drop-shadow(0 0 10px rgba(224, 242, 254, 0.95)) drop-shadow(0 0 22px rgba(147, 197, 253, 0.9)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
      z-index: 5;
    }

    /* 2. GitHub Porcelain / White Crystal Chandelier Diamond */
    .gem-body.marble-white-diamond,
    .sphere-body.marble-white {
      clip-path: polygon(28% 4%, 76% 4%, 98% 34%, 84% 88%, 50% 98%, 14% 86%, 2% 34%);
      background: 
        radial-gradient(circle at 45% 25%, rgba(255, 255, 255, 0.7) 0%, transparent 45%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.55) 0%, rgba(241, 245, 249, 0.20) 40%, rgba(203, 213, 225, 0.35) 100%);
      border: 1.5px solid rgba(255, 255, 255, 0.95);
      border-top: 2.5px solid rgba(255, 255, 255, 1);
      box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(255, 255, 255, 0.65),
        0 0 55px rgba(255, 255, 255, 0.3),
        inset 0 3px 8px rgba(255, 255, 255, 1),
        inset 0 -5px 10px rgba(148, 163, 184, 0.5),
        inset 0 0 16px rgba(255, 255, 255, 0.5);
      filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.52)) drop-shadow(0 0 26px rgba(255, 255, 255, 0.45));
    }

    .gem-body.marble-white-diamond .github-icon,
    .sphere-body.marble-white .github-icon {
      width: 36px;
      height: 36px;
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.98)) drop-shadow(0 0 20px rgba(203, 213, 225, 0.85)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
      z-index: 5;
    }

    /* 3. LeetCode Sparkling Amber / Gold Chandelier Diamond */
    .gem-body.faceted-amber-diamond,
    .sphere-body.faceted-amber {
      clip-path: polygon(50% 2%, 86% 16%, 98% 54%, 80% 98%, 46% 98%, 18% 88%, 2% 52%, 14% 16%);
      background: 
        radial-gradient(circle at 45% 25%, rgba(255, 250, 220, 0.55) 0%, transparent 40%),
        linear-gradient(145deg, rgba(254, 240, 138, 0.45) 0%, rgba(245, 158, 11, 0.18) 40%, rgba(217, 119, 6, 0.38) 100%);
      border: 1.5px solid rgba(253, 230, 138, 0.95);
      border-top: 2.5px solid rgba(255, 255, 255, 1);
      box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.5),
        0 0 38px rgba(245, 158, 11, 0.9),
        0 0 70px rgba(217, 119, 6, 0.45),
        inset 0 3px 8px rgba(255, 255, 255, 1),
        inset 0 -5px 10px rgba(180, 83, 9, 0.65),
        inset 0 0 16px rgba(254, 240, 138, 0.45);
      filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 35px rgba(245, 158, 11, 0.85));
    }

    .gem-body.faceted-amber-diamond .leetcode-icon,
    .sphere-body.faceted-amber .leetcode-icon {
      width: 38px;
      height: 38px;
      z-index: 5;
      position: relative;
      filter: drop-shadow(0 0 14px rgba(255, 161, 22, 1)) drop-shadow(0 0 28px rgba(251, 191, 36, 0.95)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95));
    }

    /* 4. Hugging Face Shining Smoky Diamond with Radiant Bright Yellow Emoji */
    .gem-body.hf-dull-diamond,
    .sphere-body.hf-yellow {
      clip-path: polygon(50% 2%, 88% 20%, 98% 65%, 75% 98%, 25% 98%, 2% 65%, 12% 20%);
      background: 
        radial-gradient(circle at 45% 25%, rgba(254, 240, 138, 0.35) 0%, transparent 45%),
        linear-gradient(145deg, rgba(254, 240, 138, 0.28) 0%, rgba(60, 50, 30, 0.22) 45%, rgba(30, 24, 12, 0.48) 100%);
      border: 1.5px solid rgba(250, 204, 21, 0.7);
      border-top: 2.5px solid rgba(255, 255, 255, 0.95);
      box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(234, 179, 8, 0.65),
        0 0 60px rgba(202, 138, 4, 0.35),
        inset 0 3px 8px rgba(255, 255, 255, 0.95),
        inset 0 -5px 10px rgba(80, 45, 12, 0.55),
        inset 0 0 16px rgba(254, 240, 138, 0.35);
      filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 28px rgba(234, 179, 8, 0.55));
    }

    .hf-radiant-glow {
      width: 48px;
      height: 48px;
      z-index: 5;
      filter: drop-shadow(0 0 16px rgba(254, 240, 138, 1)) drop-shadow(0 0 32px rgba(250, 204, 21, 1)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) !important;
    }

    /* 5. Kaggle Authentic Blue Glowing Glass Semicircle Prism */
    .prism-body.glass-kaggle-blue {
      width: 142px;
      height: 66px;
      border-radius: 8px 8px 70px 70px;
      background: linear-gradient(180deg, rgba(34, 211, 238, 0.52) 0%, rgba(6, 182, 212, 0.22) 50%, rgba(2, 132, 199, 0.78) 100%);
      border: 1.5px solid rgba(125, 211, 252, 0.85);
      border-top: 2.5px solid rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.55),
        0 0 34px rgba(34, 211, 238, 0.8),
        0 0 60px rgba(6, 182, 212, 0.4),
        inset 0 2px 6px rgba(255, 255, 255, 0.95),
        inset 0 -5px 10px rgba(3, 105, 161, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .prism-body.glass-kaggle-blue .kaggle-k {
      width: 32px;
      height: 32px;
      color: #20beff !important;
      fill: #20beff !important;
      filter: drop-shadow(0 0 12px rgba(32, 190, 255, 1)) drop-shadow(0 0 24px rgba(34, 211, 238, 0.85)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
      z-index: 5;
    }

    /* Specular Light Overlays */
    .sphere-gloss {
      position: absolute;
      top: 7px;
      left: 10px;
      width: 18px;
      height: 10px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 75%);
      transform: rotate(-30deg);
      pointer-events: none;
    }

    .sphere-highlight {
      position: absolute;
      inset: 1px;
      border-radius: 50%;
      border-top: 1.5px solid rgba(255, 255, 255, 0.75);
      pointer-events: none;
    }

    .prism-top-bevel {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      border-radius: 6px 6px 0 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, transparent 100%);
      pointer-events: none;
    }

    /* Tooltips on Hover */
    .node-hover-label {
      position: absolute;
      bottom: -28px;
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      padding: 4px 10px;
      border-radius: 6px;
      background: rgba(15, 23, 42, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #f1f5f9;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      z-index: 30;
    }

    .ct-node-item:hover .node-hover-label {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* Light Theme Tweaks */
    html[data-theme="light"] .ct-monolith-glass {
      background:
        linear-gradient(170deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 35%, rgba(200, 240, 255, 0.3) 100%);
      border-color: rgba(148, 163, 184, 0.4);
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    html[data-theme="light"] .ct-monolith-title {
      color: #0f172a;
      text-shadow: none;
    }

    html[data-theme="light"] .ct-monolith-desc {
      color: #334155;
    }

    html[data-theme="light"] .ct-crystal-plaque {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.7) 100%);
      border-color: rgba(148, 163, 184, 0.4);
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    html[data-theme="light"] .ct-crystal-heading {
      color: #0f172a;
    }

    html[data-theme="light"] .ct-crystal-sub {
      color: #475569;
    }

    html[data-theme="light"] .node-hover-label {
      background: #0f172a;
      color: #ffffff;
    }

    /* Responsive Adaptations for 3D Contact Section */
    @media (max-width: 1024px) {
      .ct-3d-stage {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .ct-monolith-glass {
        transform: none !important;
      }

      .ct-crystal-plaque {
        transform: none !important;
        max-width: 500px;
        margin: 0 auto;
      }

      .ct-hub-composition {
        padding: 30px 10px 50px;
      }
    }

    @media (max-width: 640px) {
      .ct-hub-composition {
        flex-direction: column;
        gap: 20px;
        padding: 10px 0 20px;
      }

      .ct-crystal-plaque {
        max-width: 100%;
      }

      .ct-node-item {
        position: static;
        transform: none !important;
      }

      .node-pos-hf {
        transform: none !important;
      }

      .ct-hub-composition {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
      }

      /* On small mobile, display the 5 nodes in a neat horizontal bar beneath the crystal plaque */
      .ct-hub-composition::after {
        content: '';
        display: none;
      }
    }

    footer {
      padding: 32px 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: .72rem;
      flex-wrap: wrap;
      gap: 10px;
      background: rgba(7, 8, 15, 0.62);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    html[data-theme="light"] footer {
      background: rgba(253, 251, 255, 0.72);
    }

    .fg {
      background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-family: 'Unbounded', sans-serif;
      font-weight: 700;
      font-size: .8rem;
    }

    #btt {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      border: none;
      border-radius: 50%;
      color: #000;
      font-size: .8rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      flex-shrink: 0;
      transition: transform .25s, box-shadow .25s;
    }

    #btt:hover {
      transform: scale(1.12);
      box-shadow: 0 0 14px rgba(0, 229, 255, .35);
    }

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

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

    @keyframes wordIn {
      0% {
        transform: translateY(110%);
        opacity: 0;
      }

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

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

    @keyframes float {

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

      50% {
        transform: translateY(-18px);
      }
    }

    @keyframes pulse {

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

      50% {
        opacity: .3;
        transform: scale(.6);
      }
    }

    @keyframes scan {
      0% {
        left: -100%;
      }

      50% {
        left: 100%;
      }

      100% {
        left: 100%;
      }
    }

    @keyframes marquee {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @keyframes gridDrift {
      to {
        background-position: 60px 60px;
      }
    }

    @keyframes ctPulse {

      0%,
      100% {
        opacity: .85;
        transform: translate(-50%, -50%) scale(1);
      }

      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
      }
    }

    @keyframes ctIn {
      0% {
        opacity: 0;
        transform: translateY(32px) scale(.98);
      }

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

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

      .ct-glow {
        animation: none !important;
      }

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

      .hero-eyebrow::before {
        animation: none !important;
      }

      .scroll-cue .line::after {
        animation: none !important;
      }

      .ct-wrap.ct-play {
        animation: none !important;
      }

      .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .reveal.active {
        opacity: 1;
        transform: translateY(0);
      }

      .sec.sec-visible::after {
        transform: scaleX(1) !important;
      }
    }

    @media(max-width:800px) {
      nav {
        padding: 16px 20px;
      }

      nav.scrolled {
        padding: 12px 20px;
      }

      .nav-links {
        display: none;
      }

      .ham {
        display: flex;
      }

      .hero {
        padding: 90px 20px 90px;
      }

      .hero-eyebrow {
        gap: 8px;
        --eb-line-h: 1.55em;
        font-size: .56rem;
        letter-spacing: .12em;
      }

      .scroll-cue {
        left: 20px;
      }

      .sec {
        padding: 72px 20px;
      }

      .inn {
        max-width: 100%;
      }

      .ab-grid {
        grid-template-columns: 1fr;
        gap: 44px;
      }

      .stats {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .sk-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .exp-hd {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
      }

      .exp-per {
        align-self: flex-start;
      }

      .ct-links {
        gap: 8px;
      }

      .cl {
        padding: 10px 16px;
        font-size: .74rem;
      }

      footer {
        padding: 24px 20px;
        flex-direction: column;
        text-align: center;
      }

      #btt {
        width: 28px;
        height: 28px;
        font-size: .7rem;
      }

      .p-info {
        padding: 32px 24px;
      }

      .p-title-large {
        font-size: clamp(1.6rem, 7.5vw, 2.2rem);
      }

      .p-desc-large {
        max-width: 100%;
      }
    }

    .spotlight-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 10;
      mix-blend-mode: overlay;
    }

    .proj-card:hover .spotlight-overlay,
    .edu-card:hover .spotlight-overlay,
    .sk-grp:hover .spotlight-overlay,
    .stat:hover .spotlight-overlay {
      opacity: 1;
    }


    /* ── Certifications ── */
    .cert-section-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 32px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted2);
      font-weight: 600;
    }

    .cert-section-title::before {
      content: '';
      width: 20px;
      height: 1px;
      background: linear-gradient(90deg, var(--cyan), var(--purple));
      flex-shrink: 0;
    }

    .cert-section-title .cert-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 229, 255, 0.08);
      border: 1px solid rgba(0, 229, 255, 0.15);
      color: var(--cyan);
      font-size: 0.62rem;
      padding: 2px 8px;
      border-radius: 999px;
      margin-left: 4px;
    }

    .cert-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
      margin-bottom: 48px;
    }

    .cert-card {
      position: relative;
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      background: var(--cardGrad);
      cursor: pointer;
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      transform: none;
    }

    .cert-card:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: 0 28px 56px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(0, 229, 255, 0.12);
    }

    .cert-card-img-wrap {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 16px 16px 0 0;
      background: rgba(255, 255, 255, 0.02);
    }

    .cert-card-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .cert-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(7, 8, 15, 0.85) 100%);
      opacity: 0;
      transition: opacity 0.4s ease;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 20px;
    }

    .cert-card:hover .cert-card-overlay {
      opacity: 1;
    }

    .cert-card-overlay span {
      font-size: 0.68rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cert-card-overlay svg {
      width: 16px;
      height: 16px;
      stroke: var(--cyan);
    }

    .cert-card-info {
      padding: 18px 20px 20px;
    }

    .cert-card-name {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
      line-height: 1.35;
    }

    .cert-card-issuer {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.74rem;
      color: var(--muted2);
      font-weight: 500;
    }

    .cert-card-issuer .cert-issuer-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--purple);
      flex-shrink: 0;
    }

    /* Lightbox */
    .cert-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0, 0, 0, 0.88);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .cert-lightbox.is-open {
      opacity: 1;
      visibility: visible;
    }

    .cert-lightbox-inner {
      position: relative;
      max-width: 88vw;
      max-height: 86vh;
      transform: scale(0.92);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cert-lightbox.is-open .cert-lightbox-inner {
      transform: scale(1);
    }

    .cert-lightbox-img {
      max-width: 100%;
      max-height: 86vh;
      border-radius: 12px;
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
    }

    .cert-lightbox-close {
      position: absolute;
      top: -42px;
      right: 0;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #fff;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      transition: background 0.2s, transform 0.2s;
    }

    .cert-lightbox-close:hover {
      background: rgba(255, 255, 255, 0.16);
      transform: rotate(90deg);
    }

    .cert-lightbox-caption {
      text-align: center;
      margin-top: 16px;
      color: rgba(255, 255, 255, 0.65);
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    html[data-theme="light"] .cert-card {
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    }

    html[data-theme="light"] .cert-card:hover {
      box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(14, 165, 233, 0.18);
    }

    html[data-theme="light"] .cert-card-overlay {
      background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, 0.92) 100%);
    }

    html[data-theme="light"] .cert-card-overlay span {
      color: #1e293b;
    }

    html[data-theme="light"] .cert-section-title .cert-count {
      background: rgba(14, 165, 233, 0.08);
      border-color: rgba(14, 165, 233, 0.18);
      color: #0ea5e9;
    }

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

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

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

    @media(max-width:480px) {
      .hero-eyebrow {
        --eb-line-h: 1.65em;
        font-size: .57rem;
        letter-spacing: .08em;
      }

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

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

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

      .ct-big {
        font-size: 1.8rem;
      }

      #contact .ct-layout {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      #contact .ct-left {
        order: 1;
      }

      #contact .ct-card {
        order: 2;
      }

      .ct-card {
        margin-top: 26px;
        padding: 20px;
      }

      #contact .ct-card-actions {
        grid-template-columns: 1fr;
      }

      #contact .ct-card-actions .cl {
        min-height: 58px;
      }

      #contact .ct-card-actions .clkg {
        grid-column: auto;
      }

      .hero-title {
        font-size: clamp(2.4rem, 11vw, 4rem);
      }

      .p-visual {
        min-height: 200px;
      }

      .p-info {
        padding: 20px 14px;
      }

      .tag-bubble {
        font-size: 0.62rem;
        padding: 6px 12px;
      }

      .shimmer-btn {
        width: 100%;
        min-height: 52px;
      }

      .github-icon-btn {
        width: 50px;
        height: 50px;
      }
    }

    @media(max-width:380px) {
      .hero-eyebrow {
        --eb-line-h: 1.75em;
        font-size: .48rem;
        letter-spacing: .04em;
        text-transform: none;
      }

      .p-visual {
        min-height: 180px;
      }

      .badge-featured {
        top: 14px;
        left: 14px;
        padding: 7px 12px;
        font-size: 0.58rem;
        letter-spacing: 0.05em;
        gap: 6px;
      }

      .badge-featured::before {
        width: 6px;
        height: 6px;
      }

      .badge-year {
        bottom: 14px;
        left: 14px;
        font-size: 0.8rem;
        padding: 6px 10px;
      }

      .p-title-large {
        font-size: clamp(1.5rem, 9.2vw, 1.9rem);
      }

      .p-desc-large {
        font-size: 0.95rem;
        line-height: 1.55;
      }

      .p-actions-row {
        gap: 10px;
      }

      .shimmer-btn {
        padding: 14px 18px;
        font-size: 0.9rem;
      }

      .github-icon-btn {
        width: 46px;
        height: 46px;
      }
    }

    @media (max-width: 340px) {
      .hero-eyebrow {
        font-size: .44rem;
        letter-spacing: .02em;
      }
    }

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

      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Clickable Badges */
    a.bdg {
      text-decoration: none !important;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* Add a subtle external link or document icon to clickable badges */
    a.bdg::after {
      content: "↗";
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 0.85em;
      opacity: 0.6;
      font-weight: 400;
      margin-left: 2px;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    a.bdg:hover {
      transform: translateY(-3px) scale(1.05);
      filter: brightness(1.2) drop-shadow(0 4px 10px rgba(255, 255, 255, 0.15));
    }

    a.bdg:hover::after {
      opacity: 1;
      transform: translate(1px, -1px);
    }

    .ha-link,
    a[href^="docs/"]:not(.bdg) {
      text-decoration: none !important;
      color: inherit;
      cursor: pointer !important;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
    }

    .ha-link:hover,
    a[href^="docs/"]:not(.bdg):hover {
      transform: translateY(-2px);
      filter: brightness(1.2) drop-shadow(0 4px 10px rgba(255, 255, 255, 0.15));
    }

    /* Glassmorphic Preview Modal */
    .doc-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      padding: 20px;
    }

    .doc-modal.active {
      opacity: 1;
      pointer-events: all;
    }

    .doc-modal-content {
      width: 100%;
      max-width: 900px;
      height: 85vh;
      background: var(--surf);
      border: 1px solid var(--border);
      border-radius: 20px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
      transform: translateY(20px);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .doc-modal.active .doc-modal-content {
      transform: translateY(0);
    }

    .doc-modal-header {
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.03);
    }

    .doc-modal-title {
      font-family: 'Unbounded', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
    }

    .doc-modal-actions {
      display: flex;
      gap: 12px;
    }

    .doc-modal-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 0.75rem;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
    }

    .doc-modal-btn:hover {
      background: var(--border);
      transform: translateY(-1px);
    }

    .doc-modal-body {
      flex: 1;
      position: relative;
      background: #111;
      overflow: hidden;
    }

    .doc-modal-body iframe,
    .doc-modal-body img {
      width: 100%;
      height: 100%;
      border: none;
      object-fit: contain;
    }

    .doc-modal-close {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      cursor: pointer;
      border: 1px solid var(--border);
      color: var(--text);
      transition: all 0.2s;
    }

    .doc-modal-close:hover {
      background: var(--pink);
      border-color: var(--pink);
      color: white;
    }

    @media(max-width: 768px) {
      .doc-modal-content {
        height: 80vh;
      }

      .doc-modal-title {
        font-size: 0.75rem;
      }
    }

    /* Modern portfolio refresh */
    :root {
      --bg: #050608;
      --surface: #0a0d11;
      --card: #0d1117;
      --cardGrad: linear-gradient(145deg, rgba(20, 26, 36, .94), rgba(8, 11, 16, .98));
      --border: rgba(218, 230, 255, .12);
      --text: #f7f8fb;
      --muted: #667085;
      --muted2: #a9b2c3;
      --cyan: #35d7ff;
      --purple: #8b5cf6;
      --pink: #ff6b9f;
      --amber: #ffbf45;
      --green: #7ee787;
      --navBg: rgba(5, 6, 8, .68);
      --mobBg: rgba(5, 6, 8, .96);
      --cardGlow: rgba(53, 215, 255, .1);
      --fs-section-title: clamp(2rem, 4.5vw, 4.1rem);
    }

    html[data-theme="light"] {
      --bg: #f6f8fb;
      --surface: #ffffff;
      --card: #ffffff;
      --cardGrad: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(238, 243, 251, .95));
      --border: rgba(19, 31, 55, .12);
      --text: #08111f;
      --muted: #6b7280;
      --muted2: #4b5563;
      --navBg: rgba(246, 248, 251, .78);
      --mobBg: rgba(246, 248, 251, .98);
    }

    body {
      background:
        linear-gradient(115deg, rgba(53, 215, 255, .09) 0 1px, transparent 1px 34%),
        linear-gradient(155deg, rgba(139, 92, 246, .10) 0 1px, transparent 1px 38%),
        linear-gradient(180deg, #050608 0%, #080b12 38%, #06070a 100%);
      background-attachment: fixed;
    }

    html[data-theme="light"] body {
      background:
        linear-gradient(115deg, rgba(14, 165, 233, .12) 0 1px, transparent 1px 34%),
        linear-gradient(155deg, rgba(124, 58, 237, .10) 0 1px, transparent 1px 38%),
        linear-gradient(180deg, #f6f8fb 0%, #eef4fb 46%, #fafafa 100%);
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .52;
      background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
    }

    html[data-theme="light"] body::before {
      opacity: .5;
      background-image:
        linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px);
    }

    #immersive-canvas {
      opacity: .08;
      mix-blend-mode: screen;
    }

    html[data-theme="light"] #immersive-canvas {
      opacity: .08;
    }

    nav {
      top: 14px;
      left: 24px;
      right: 24px;
      border-radius: 18px;
      border: 1px solid var(--border);
      box-shadow: 0 18px 60px rgba(0, 0, 0, .24);
    }

    nav.scrolled {
      padding: 12px 48px;
    }

    .nav-logo {
      letter-spacing: .04em;
    }

    .nav-links {
      gap: 22px;
    }

    .nav-links a {
      letter-spacing: .08em;
      color: rgba(233, 240, 255, .74);
    }

    html[data-theme="light"] .nav-links a {
      color: rgba(8, 17, 31, .68);
    }

    #themeToggle,
    .btn-show-more,
    .btn-a,
    .shimmer-btn,
    .github-icon-btn,
    .preview-hover-btn,
    .cl {
      border-radius: 10px;
    }

    .hero-wrap {
      min-height: auto;
    }

    .hero {
      min-height: auto;
      padding: 150px 64px 92px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .48fr);
      align-content: start;
      column-gap: 64px;
    }

    .hero::before,
    .hero::after {
      display: none;
    }

    .hero-eyebrow,
    .hero-title,
    .hero-sub,
    .hero-badges,
    .hero-cta,
    .scroll-cue {
      grid-column: 1;
    }

    .hero-title {
      font-size: clamp(3.25rem, 7.8vw, 8.3rem);
      letter-spacing: -.04em;
      position: relative;
      z-index: 3;
    }

    .hero-title .wd {
      text-shadow: 0 22px 70px rgba(53, 215, 255, .12);
    }

    .hero-sub {
      max-width: min(78ch, 92vw);
      font-size: clamp(1rem, 1.35vw, 1.22rem);
      color: rgba(233, 240, 255, .78);
      position: relative;
      z-index: 3;
    }

    html[data-theme="light"] .hero-sub {
      color: rgba(8, 17, 31, .72);
    }

    .hero-badges {
      gap: 10px;
    }

    .bdg,
    .pill,
    .ptg,
    .tag-bubble,
    .exp-per {
      border-radius: 8px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .bdg {
      padding: 7px 12px;
      background: rgba(255, 255, 255, .055);
      color: rgba(247, 248, 251, .86);
    }

    html[data-theme="light"] .bdg {
      color: rgba(8, 17, 31, .78);
      background: rgba(255, 255, 255, .72);
    }

    .hero-cta .btn-a {
      min-width: 190px;
    }

    .btn-a,
    .shimmer-btn {
      background: linear-gradient(135deg, #35d7ff, #8b5cf6);
      color: #050608;
      box-shadow: 0 18px 44px rgba(53, 215, 255, .18);
    }

    .hero-cta .btn-a:nth-child(2) {
      background: rgba(255, 255, 255, .07) !important;
      color: var(--text) !important;
      border: 1px solid var(--border);
      box-shadow: none;
    }

    .hero-cta .btn-github {
      background: #f7f8fb;
      color: #050608;
    }

    .sec {
      padding: 120px 64px;
    }

    section.sec,
    section.sec.surf {
      background: rgba(5, 6, 8, .76);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    html[data-theme="light"] section.sec,
    html[data-theme="light"] section.sec.surf {
      background: rgba(246, 248, 251, .72);
    }

    .sl {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .sl::before {
      content: '';
      width: 34px;
      height: 1px;
      background: currentColor;
      opacity: .85;
    }

    .st {
      max-width: 950px;
      margin-bottom: 56px;
    }

    .ab-grid {
      gap: 32px;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
    }

    .ab-text,
    .edu-card,
    .sk-grp,
    .ct-card,
    .cert-card {
      border: 1px solid var(--border);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .026));
      box-shadow: 0 22px 70px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .ab-text {
      padding: 30px;
    }

    .ab-text p {
      text-align: left;
      font-size: 1.06rem;
      line-height: 1.86;
    }

    .stats {
      gap: 12px;
    }

    .stat {
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .edu-grid,
    #education .edu-grid,
    .cert-grid,
    .sk-grid {
      gap: 16px;
    }

    #education .edu-card,
    .edu-card,
    .sk-grp,
    .cert-card {
      overflow: hidden;
    }



    .proj-bento {
      gap: 18px;
    }

    .project-filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin: -22px 0 24px;
      flex-wrap: wrap;
    }

    .project-filter-group {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .project-filter-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 10px;
      background: rgba(255, 255, 255, .045);
      color: var(--muted2);
      cursor: pointer;
      text-decoration: none;
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
    }

    .project-filter-btn:hover,
    .project-filter-btn.is-active {
      background: color-mix(in srgb, var(--cyan) 16%, rgba(255, 255, 255, .045));
      border-color: rgba(53, 215, 255, .42);
      color: var(--text);
      transform: translateY(-1px);
    }

    .project-see-all {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 10px;
      border: 1px solid rgba(53, 215, 255, .38);
      color: var(--cyan);
      background: rgba(53, 215, 255, .08);
      text-decoration: none;
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

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

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

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

    .project-empty {
      display: none;
      grid-column: 1 / -1;
      padding: 34px;
      border-radius: 8px;
      border: 1px dashed rgba(255, 255, 255, .16);
      color: var(--muted2);
      text-align: center;
    }

    .proj-card {
      border: 1px solid var(--border);
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
      box-shadow: 0 22px 75px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
      overflow: hidden;
    }

    .premium-glow-card {
      border-color: rgba(218, 230, 255, .14) !important;
    }

    .proj-card:hover,
    .premium-glow-card:hover {
      transform: translateY(-8px);
      border-color: rgba(53, 215, 255, .34) !important;
      box-shadow: 0 34px 90px rgba(0, 0, 0, .36), 0 0 0 1px rgba(53, 215, 255, .12);
    }

    .proj-card-featured {
      grid-column: span 12;
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
      gap: 0;
      padding: 0;
    }

    .proj-card-featured .p-visual {
      border-radius: 20px 0 0 20px;
      min-height: 520px;
      overflow: hidden;
    }

    .proj-card-preview .p-visual {
      border-radius: 16px 16px 0 0;
      min-height: 240px;
      overflow: hidden;
    }

    .proj-card-trio .p-visual {
      border-radius: 14px;
      min-height: 200px;
      height: 200px;
      overflow: hidden;
    }

    .p-visual img,
    .p-visual video {
      filter: saturate(1.08) contrast(1.03);
    }

    .proj-card:hover .p-visual img {
      transform: scale(1.045);
    }

    .p-info {
      padding: 28px;
    }

    .proj-card-featured .p-info {
      justify-content: center;
      padding: clamp(30px, 4vw, 54px);
    }

    #aiemployee-card .p-title-large {
      white-space: nowrap;
      font-size: clamp(2rem, 3.3vw, 3.7rem);
    }

    .p-title-large,
    .pnm {
      letter-spacing: -.03em;
    }

    .p-desc-large,
    .pdsc {
      color: rgba(233, 240, 255, .74);
    }

    html[data-theme="light"] .p-desc-large,
    html[data-theme="light"] .pdsc {
      color: rgba(8, 17, 31, .66);
    }

    .pstk {
      gap: 8px;
    }

    .pill {
      background: rgba(255, 255, 255, .065);
      border-color: rgba(255, 255, 255, .12);
      color: rgba(247, 248, 251, .78);
    }

    html[data-theme="light"] .pill {
      background: rgba(8, 17, 31, .04);
      color: rgba(8, 17, 31, .72);
    }

    .cert-card-img-wrap {
      background: rgba(255, 255, 255, .045);
    }

    .sk-grp h3 {
      font-size: .92rem;
      letter-spacing: .02em;
    }

    .sk-ul li {
      border-radius: 10px;
      padding: 9px 10px;
      margin-left: -10px;
    }


    footer {
      background: rgba(5, 6, 8, .82) !important;
    }

    @media (max-width: 1320px) {
      nav {
        padding-left: 36px;
        padding-right: 36px;
      }

      .nav-links {
        gap: 18px;
      }

      .nav-links a {
        font-size: .66rem;
      }

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

      .hero-eyebrow,
      .hero-title,
      .hero-sub,
      .hero-badges,
      .hero-cta,
      .scroll-cue {
        grid-column: 1;
      }

      .proj-card-featured {
        grid-template-columns: 1fr;
      }

      #aiemployee-card .p-title-large {
        white-space: normal;
      }
    }

    @media (max-width: 900px) {
      nav {
        top: 10px;
        left: 12px;
        right: 12px;
        padding: 16px 18px;
      }

      nav.scrolled {
        padding: 12px 18px;
      }

      .hero,
      .sec {
        padding-left: 22px;
        padding-right: 22px;
      }

      .hero {
        padding-top: 128px;
        min-height: auto;
        display: block;
        overflow: hidden;
      }

      .hero-title,
      .hero-sub,
      .hero-badges,
      .hero-cta {
        width: 100%;
        max-width: 100%;
        transform: none !important;
      }

      .hero-title,
      .hero-sub,
      .hero-eyebrow {
        mix-blend-mode: normal;
      }

      .hero-title {
        overflow-wrap: normal;
        text-shadow: 0 14px 36px rgba(0, 0, 0, .65);
      }

      .hero-badges {
        align-items: flex-start;
      }

      .hero-cta {
        flex-direction: column;
      }

      .hero-cta .btn-a {
        width: 100%;
        min-width: 0;
      }

      .scroll-cue {
        position: relative;
        left: 0;
        bottom: auto;
        margin-top: 28px;
      }

      .ab-grid,
      .exp-wrap,
      #contact .ct-layout {
        grid-template-columns: 1fr;
      }

      .ab-text {
        padding: 22px;
      }
    }

    @media (max-width: 560px) {
      .hero-title {
        font-size: clamp(2.52rem, 10.8vw, 3.45rem);
        line-height: .96;
      }

      .hero-cta .btn-a {
        width: 100%;
      }

      .proj-card-featured .p-visual,
      .proj-card-preview .p-visual,
      .proj-card-trio .p-visual {
        min-height: 240px;
      }
    }

    /* Final polish: restore color, clean wrapping, and animated card borders */
    .hero-title {
      font-size: clamp(3rem, 7.1vw, 7.6rem);
      max-width: min(1120px, calc(100vw - 96px));
    }

    .hero-title .ln {
      overflow: visible;
      white-space: nowrap;
    }

    .hero-title .ln2 {
      white-space: nowrap;
    }

    #about .st {
      max-width: none;
      white-space: nowrap;
      font-size: clamp(1.65rem, 3.35vw, 2.95rem);
    }

    #certificates .st {
      max-width: none;
      white-space: nowrap;
      font-size: clamp(1.65rem, 3.25vw, 2.95rem);
    }

    .bdg.bc,
    html[data-theme="light"] .bdg.bc {
      background: rgba(53, 215, 255, .11);
      border-color: rgba(53, 215, 255, .34);
      color: var(--cyan);
    }

    .bdg.bp,
    html[data-theme="light"] .bdg.bp {
      background: rgba(139, 92, 246, .12);
      border-color: rgba(139, 92, 246, .34);
      color: var(--purple);
    }

    .bdg.ba,
    html[data-theme="light"] .bdg.ba {
      background: rgba(255, 191, 69, .13);
      border-color: rgba(255, 191, 69, .38);
      color: var(--amber);
    }

    .bdg.bg2,
    html[data-theme="light"] .bdg.bg2 {
      background: rgba(126, 231, 135, .12);
      border-color: rgba(126, 231, 135, .36);
      color: var(--green);
    }

    .bdg.bpk,
    html[data-theme="light"] .bdg.bpk {
      background: rgba(255, 107, 159, .12);
      border-color: rgba(255, 107, 159, .36);
      color: var(--pink);
    }

    .bdg.br,
    html[data-theme="light"] .bdg.br {
      background: linear-gradient(135deg, rgba(255, 215, 0, .18), rgba(255, 191, 69, .08));
      border-color: rgba(255, 215, 0, .45);
      color: #ffd700;
      text-shadow: 0 0 8px rgba(255, 215, 0, .38);
      box-shadow: 0 0 18px rgba(255, 191, 69, .16);
    }

    .pill,
    html[data-theme="light"] .pill {
      background: rgba(255, 255, 255, .04);
      border-color: rgba(255, 255, 255, .1);
      color: rgba(247, 248, 251, .78);
    }

    .pcc .pill,
    .pill.pill-cyan,
    html[data-theme="light"] .pcc .pill,
    html[data-theme="light"] .pill.pill-cyan {
      background: rgba(53, 215, 255, .1);
      border-color: rgba(53, 215, 255, .32);
      color: var(--cyan);
    }

    .pcp .pill,
    .pill.pill-purple,
    html[data-theme="light"] .pcp .pill,
    html[data-theme="light"] .pill.pill-purple {
      background: rgba(139, 92, 246, .11);
      border-color: rgba(139, 92, 246, .32);
      color: var(--purple);
    }

    .pca .pill,
    .pill.pill-amber,
    html[data-theme="light"] .pca .pill,
    html[data-theme="light"] .pill.pill-amber {
      background: rgba(255, 191, 69, .12);
      border-color: rgba(255, 191, 69, .34);
      color: var(--amber);
    }

    #education .edu-card,
    .edu-card,
    .sk-grp {
      overflow: visible;
    }

    .edu-card.glow-border,
    .sk-grp.glow-border {
      border: none !important;
      box-shadow: 0 22px 70px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    @media (max-width: 900px) {
      .hero-title {
        max-width: 100%;
        font-size: clamp(2.55rem, 11.3vw, 4.2rem);
      }

      #about .st {
        white-space: normal;
      }

      #certificates .st {
        white-space: normal;
      }
    }

    section.sec,
    section.sec.surf {
      background: rgba(5, 6, 8, .22);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }

    #immersive-canvas {
      opacity: .56;
      filter: saturate(1.2) contrast(1.08);
    }

    html[data-theme="light"] section.sec,
    html[data-theme="light"] section.sec.surf {
      background: rgba(246, 248, 251, .24);
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);
    }

    html[data-theme="light"] #immersive-canvas {
      opacity: .58;
      mix-blend-mode: multiply;
      filter: saturate(1.45) contrast(1.26);
    }

    /* Sentinel interface redesign */
    :root {
      --chapter-accent: var(--cyan);
      --chapter-accent-soft: rgba(53, 215, 255, .16);
    }

    body {
      background:
        radial-gradient(circle at 50% 18%, rgba(53, 215, 255, .13), transparent 30vw),
        radial-gradient(circle at 78% 12%, rgba(255, 191, 69, .085), transparent 24vw),
        radial-gradient(circle at 12% 72%, rgba(255, 107, 159, .08), transparent 25vw),
        radial-gradient(ellipse at 50% 115%, rgba(126, 231, 135, .055), transparent 36vw),
        linear-gradient(180deg, #030507 0%, #071016 42%, #050609 100%);
    }

    html[data-theme="light"] body {
      background:
        radial-gradient(circle at 50% 18%, rgba(14, 165, 233, .16), transparent 30vw),
        radial-gradient(circle at 78% 12%, rgba(245, 158, 11, .11), transparent 24vw),
        radial-gradient(circle at 12% 72%, rgba(219, 39, 119, .09), transparent 25vw),
        linear-gradient(180deg, #f7fafc 0%, #eef4f8 45%, #fbfcfd 100%);
    }

    body::before {
      background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(115deg, rgba(53, 215, 255, .13) 0 1px, transparent 1px 36%),
        radial-gradient(circle, rgba(255, 255, 255, .18) 0 1px, transparent 1.6px);
      background-size: 86px 86px, 86px 86px, 460px 460px, 180px 180px;
      background-position: 0 0, 0 0, 0 0, 22px 38px;
      opacity: .52;
      transform: none;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 18% 26%, color-mix(in srgb, var(--chapter-accent) 16%, transparent), transparent 32%),
        linear-gradient(90deg, rgba(255, 255, 255, .038), transparent 18%, transparent 82%, rgba(255, 255, 255, .038)),
        repeating-linear-gradient(180deg, transparent 0 13px, rgba(255, 255, 255, .024) 14px, transparent 15px),
        repeating-linear-gradient(115deg, transparent 0 96px, rgba(53, 215, 255, .035) 97px, transparent 98px);
      opacity: .18;
      mix-blend-mode: screen;
    }

    html[data-theme="light"] body::after {
      opacity: .08;
      mix-blend-mode: multiply;
    }

    section.sec,
    section.sec.surf {
      position: relative;
      z-index: 2;
      min-height: auto;
      display: block;
      align-items: initial;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      scroll-margin-top: 96px;
    }

    section.sec::before {
      content: '';
      position: absolute;
      inset: 34px max(24px, 4vw);
      z-index: -1;
      border: 1px solid color-mix(in srgb, var(--chapter-accent) 24%, transparent);
      border-radius: 8px;
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--chapter-accent) 16%, transparent), transparent 19%, transparent 81%, color-mix(in srgb, var(--chapter-accent) 11%, transparent)),
        linear-gradient(145deg, rgba(8, 13, 18, .76), rgba(7, 8, 11, .54));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 110px rgba(0, 0, 0, .24);
      opacity: .76;
      transform: scaleX(.96);
      transition: opacity .42s cubic-bezier(.16, 1, .3, 1), transform .42s cubic-bezier(.16, 1, .3, 1);
    }

    html[data-theme="light"] section.sec::before {
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--chapter-accent) 12%, transparent), transparent 19%, transparent 81%, color-mix(in srgb, var(--chapter-accent) 10%, transparent)),
        linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(246, 248, 251, .68));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 28px 90px rgba(15, 23, 42, .11);
    }

    section.sec.sec-visible::before {
      opacity: .92;
      transform: scaleX(1);
    }

    section.sec .inn {
      width: min(var(--cw), calc(100vw - 48px));
      transform: none;
      opacity: 1;
      filter: none;
      transition: none;
    }

    section.sec.sec-visible .inn {
      transform: none;
      opacity: 1;
      filter: blur(0);
    }

    section.sec:nth-of-type(2n) .inn {
      transform: none;
    }

    section.sec:nth-of-type(2n).sec-visible .inn {
      transform: none;
    }

    .ab-text,
    .edu-card,
    .sk-grp,
    .ct-card,
    .cert-card,
    .proj-card,
    .stat {
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .052)),
        linear-gradient(135deg, color-mix(in srgb, var(--chapter-accent) 10%, transparent), transparent 42%);
      transform: translateY(14px) scale(.99);
      transition:
        transform .36s cubic-bezier(.16, 1, .3, 1),
        opacity .32s ease,
        border-color .35s ease,
        box-shadow .35s ease;
    }

    section.sec.sec-visible .ab-text,
    section.sec.sec-visible .edu-card,
    section.sec.sec-visible .sk-grp,
    section.sec.sec-visible .ct-card,
    section.sec.sec-visible .cert-card,
    section.sec.sec-visible .proj-card,
    section.sec.sec-visible .stat {
      transform: translateY(0) scale(1);
    }

    section.sec.sec-visible .edu-card:nth-child(2),
    section.sec.sec-visible .cert-card:nth-child(2),
    section.sec.sec-visible .proj-card:nth-child(2),
    section.sec.sec-visible .sk-grp:nth-child(2) {
      transition-delay: .03s;
    }

    section.sec.sec-visible .edu-card:nth-child(3),
    section.sec.sec-visible .cert-card:nth-child(3),
    section.sec.sec-visible .proj-card:nth-child(3),
    section.sec.sec-visible .sk-grp:nth-child(3) {
      transition-delay: .06s;
    }

    section.sec.sec-visible .cert-card:nth-child(4),
    section.sec.sec-visible .proj-card:nth-child(4),
    section.sec.sec-visible .sk-grp:nth-child(4) {
      transition-delay: .09s;
    }

    .sl::after {
      content: '';
      width: 8px;
      height: 8px;
      border: 1px solid currentColor;
      transform: rotate(45deg);
      box-shadow: 0 0 14px currentColor;
    }

    .st {
      text-shadow: 0 0 34px color-mix(in srgb, var(--chapter-accent) 20%, transparent);
    }

    .proj-card-featured {
      border-radius: 8px;
    }

    #about {
      --chapter-accent: var(--cyan);
    }

    #education {
      --chapter-accent: var(--amber);
    }

    #certificates {
      --chapter-accent: var(--purple);
    }

    #experience {
      --chapter-accent: var(--pink);
    }

    #projects {
      --chapter-accent: #38bdf8;
    }

    #skills {
      --chapter-accent: var(--green);
    }

    #contact {
      --chapter-accent: var(--amber);
    }

    @media (max-width: 900px) {
      section.sec,
      section.sec.surf {
        min-height: auto;
        padding-top: 96px;
        padding-bottom: 96px;
      }

      section.sec::before {
        inset: 18px 12px;
      }

      section.sec .inn,
      section.sec:nth-of-type(2n) .inn {
        width: min(100%, calc(100vw - 44px));
        transform: none;
        filter: none;
      }

      section.sec.sec-visible .inn,
      section.sec:nth-of-type(2n).sec-visible .inn {
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      section.sec .inn,
      section.sec:nth-of-type(2n) .inn,
      .ab-text,
      .edu-card,
      .sk-grp,
      .ct-card,
      .cert-card,
      .proj-card,
      .stat {
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
      }
    }

    /* Clean background pass: remove the section frame and heavy HUD layer. */
    body {
      background:
        radial-gradient(900px 520px at 12% -10%, rgba(53, 215, 255, .09), transparent 62%),
        radial-gradient(860px 500px at 88% -12%, rgba(139, 92, 246, .08), transparent 64%),
        radial-gradient(680px 520px at 78% 82%, rgba(126, 231, 135, .055), transparent 68%),
        linear-gradient(180deg, #030507 0%, #071016 46%, #050608 100%) !important;
    }

    html[data-theme="light"] body {
      background:
        radial-gradient(900px 520px at 12% -10%, rgba(14, 165, 233, .1), transparent 62%),
        radial-gradient(860px 500px at 88% -12%, rgba(124, 58, 237, .07), transparent 64%),
        radial-gradient(680px 520px at 78% 82%, rgba(16, 185, 129, .055), transparent 68%),
        linear-gradient(180deg, #f8fbfd 0%, #edf5f9 48%, #fbfcfd 100%) !important;
    }

    html {
      scroll-behavior: auto;
      scroll-padding-top: 88px;
      scrollbar-width: thin;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      display: block;
    }

    .hero-wrap {
      min-height: auto !important;
      overflow: visible;
    }

    .hero {
      min-height: auto !important;
      padding-top: clamp(128px, 15vh, 176px) !important;
      padding-bottom: clamp(56px, 8vh, 92px) !important;
      align-content: start;
    }

    section.sec,
    section.sec.surf {
      min-height: auto !important;
      display: block !important;
      align-items: initial !important;
      padding: clamp(72px, 9vw, 116px) 64px !important;
      overflow: visible;
      scroll-margin-top: 88px;
    }

    section.sec .inn {
      max-height: none;
      overflow-y: visible;
      overscroll-behavior: auto;
      padding-right: 0;
    }

    body::before {
      display: none !important;
      content: none !important;
    }

    html[data-theme="light"] body::before {
      display: none !important;
      content: none !important;
    }

    body::after {
      content: none !important;
      display: none !important;
    }

    #immersive-canvas {
      display: none !important;
      animation: none !important;
    }

    section.sec,
    section.sec.surf {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    section.sec::before,
    section.sec.sec-visible::before,
    html[data-theme="light"] section.sec::before {
      content: none !important;
      display: none !important;
    }

    section.sec .inn,
    section.sec:nth-of-type(2n) .inn {
      transform: none !important;
      opacity: 1 !important;
      filter: none !important;
      transition: none !important;
    }

    section.sec.sec-visible .inn,
    section.sec:nth-of-type(2n).sec-visible .inn {
      transform: none !important;
      opacity: 1 !important;
    }

    section.sec:not(.sec-visible) .inn {
      pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
    }

    @media (min-width: 901px) {
      #aiemployee-card .p-title-large {
        white-space: nowrap !important;
        font-size: clamp(1.85rem, 3.05vw, 3.4rem) !important;
      }
    }

    @media (max-width: 900px) {
      .hero {
        padding-top: 118px !important;
        padding-bottom: 58px !important;
      }

      section.sec,
      section.sec.surf {
        padding: 64px 20px !important;
      }

      section.sec .inn {
        max-height: none;
        width: min(100%, calc(100vw - 40px)) !important;
      }
    }

    .hero.is-scrolling .hero-title,
    .hero.is-scrolling .hero-sub,
    .hero.is-scrolling .hero-eyebrow,
    .hero.is-scrolling .hero-badges,
    .hero.is-scrolling .hero-cta,
    .hero.is-scrolling .scroll-cue,
    .stg>*,
    .stg.in>*,
    .stg.out-up>*,
    .wr .w .wi,
    .wr.in .w .wi,
    .wr.out-up .w .wi,
    .r3d,
    .r3d.in,
    .r3d.out-up,
    .sl-l,
    .sl-l.in,
    .sl-l.out-up,
    .sl-r,
    .sl-r.in,
    .sl-r.out-up {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }

    body.portfolio-home .hero-wrap {
      min-height: 100svh !important;
      display: flex;
      align-items: center;
    }

    body.portfolio-home .hero {
      width: 100%;
      min-height: 100svh !important;
      align-content: center !important;
      justify-content: stretch !important;
      padding-top: clamp(104px, 12vh, 136px) !important;
      padding-bottom: clamp(104px, 12vh, 136px) !important;
    }

    @media (max-width: 900px) {
      body.portfolio-home .hero {
        display: flex !important;
        flex-direction: column;
        min-height: 100svh !important;
        justify-content: center !important;
        padding-top: 84px !important;
        padding-bottom: 84px !important;
      }
    }


    /* Legacy pattern reset; the authored stone treatment is defined below. */
/* Final ambient direction overrides */
body.portfolio-home {
  background-color: #07090c !important;
  background-image: linear-gradient(180deg, rgba(3, 5, 8, .36), rgba(3, 5, 8, .72)) !important;
  background-attachment: scroll;
}

body.portfolio-home #geoBgCanvas { opacity: .86; }

body.portfolio-home section.sec {
  background: linear-gradient(180deg, rgba(6, 10, 14, .30), rgba(5, 8, 12, .22)) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

body.portfolio-home section.sec.surf {
  background: linear-gradient(180deg, rgba(5, 9, 13, .24), rgba(5, 8, 12, .18)) !important;
}

body.portfolio-home .hero { min-height: min(760px, 88vh); justify-content: center; padding-top: 132px; padding-bottom: 110px; }
body.portfolio-home .hero-eyebrow,
body.portfolio-home .hero-title,
body.portfolio-home .hero-sub,
body.portfolio-home .hero-badges,
body.portfolio-home .hero-cta { opacity: 1 !important; visibility: visible !important; }
body.portfolio-home .hero-title .ln .wd { opacity: 1 !important; transform: none !important; animation: none !important; }
body.portfolio-home .hero-title { font-size: clamp(2.8rem, 7.4vw, 6.4rem); letter-spacing: -.055em; text-wrap: balance; max-width: 1050px; }
body.portfolio-home .hero-title .wd { text-shadow: 0 0 28px rgba(88, 207, 224, .14), 1px 0 rgba(255, 90, 170, .16), -1px 0 rgba(82, 221, 240, .16); }
body.portfolio-home .hero-sub { max-width: min(78ch, 92vw) !important; color: rgba(218, 229, 232, .70); text-wrap: balance !important; }
body.portfolio-home .hero-eyebrow { color: #83e9ef; }
body.portfolio-home .hero-badges .bdg { background-color: rgba(7, 13, 17, .36); backdrop-filter: blur(8px); }
body.portfolio-home .st { font-size: clamp(1.65rem, 3.5vw, 2.45rem); letter-spacing: -.045em; }
body.portfolio-home .sl { letter-spacing: .34em; color: rgba(149, 227, 236, .72) !important; }

@media (max-width: 700px) {
  body.portfolio-home .hero { min-height: 720px; padding: 108px 24px 76px; }
  body.portfolio-home .hero-title { font-size: clamp(2.55rem, 14vw, 4.5rem); }
  body.portfolio-home section.sec { background: rgba(5, 8, 11, .42) !important; }
}

/* Final theme + project glow contract */
html[data-theme="light"] body.portfolio-home {
  background-color: #dfe6e8 !important;
  background-image: linear-gradient(180deg, rgba(244, 248, 249, .82), rgba(211, 221, 224, .72)) !important;
  color: #102027;
}

html[data-theme="light"] body.portfolio-home section.sec,
html[data-theme="light"] body.portfolio-home section.sec.surf {
  background: linear-gradient(180deg, rgba(242, 247, 248, .68), rgba(225, 233, 235, .54)) !important;
  color: #102027;
}

html[data-theme="light"] body.portfolio-home .hero-sub {
  color: rgba(32, 54, 61, .78);
}

html[data-theme="light"] body.portfolio-home #geoBgCanvas { opacity: .72; mix-blend-mode: multiply; }

/* Project cards glowing border contract */
#projects .proj-card {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

/* Only the first three featured cards keep an idle traveling border. */
#projects .proj-card .border-glow {
  opacity: 0 !important;
  animation-play-state: paused !important;
  filter: none !important;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

#projects .proj-card:hover .border-glow {
  opacity: 1 !important;
  animation-play-state: running !important;
  filter: drop-shadow(0 0 14px var(--beam, #00e5ff)) drop-shadow(0 0 28px var(--beam, #00e5ff)) !important;
}

/* Personal AI Employee, AutoGrader Agent, and SHAP-Explained IDS stay active. */
#projects #aiemployee-card .border-glow,
#projects .proj-card-featured .border-glow,
#projects .proj-card[data-project="autograder"] .border-glow,
#projects .proj-card[data-project="shapids"] .border-glow {
  opacity: 1 !important;
  animation-play-state: running !important;
  filter: drop-shadow(0 0 12px var(--beam, #00e5ff)) drop-shadow(0 0 24px var(--beam-fade, rgba(0, 229, 255, 0.5))) !important;
}

#projects #aiemployee-card:hover .border-glow,
#projects .proj-card-featured:hover .border-glow,
#projects .proj-card[data-project="autograder"]:hover .border-glow,
#projects .proj-card[data-project="shapids"]:hover .border-glow {
  opacity: 1 !important;
  filter: drop-shadow(0 0 16px var(--beam, #00e5ff)) drop-shadow(0 0 32px var(--beam, #00e5ff)) !important;
}

/* ── Engraved stone + traveling light refinement ── */
body.portfolio-home {
  background: #050709 !important;
  isolation: isolate;
}

body.portfolio-home::before {
  opacity: .12 !important;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(113, 135, 143, .08), transparent 25%),
    radial-gradient(circle at 77% 69%, rgba(38, 47, 52, .13), transparent 28%) !important;
  background-size: auto !important;
  mask-image: none !important;
}

body.portfolio-home::after {
  border-color: rgba(138, 177, 184, .045) !important;
}

body.portfolio-home #geoBgCanvas {
  z-index: 0;
  opacity: 1;
}

body.portfolio-home section.sec,
body.portfolio-home section.sec.surf {
  background: linear-gradient(180deg, rgba(4, 6, 8, .48), rgba(3, 5, 7, .36)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.portfolio-home .hero-eyebrow::before {
  background: rgba(130, 219, 232, .74);
  box-shadow: 0 0 8px rgba(87, 192, 213, .25);
}

body.portfolio-home .hero-eyebrow,
body.portfolio-home .hero-sub,
body.portfolio-home .hero-badges {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .52);
}

@media (max-width: 700px) {
  body.portfolio-home section.sec,
  body.portfolio-home section.sec.surf { background: rgba(4, 6, 8, .30) !important; }
}

/* Restore the committed hero typography while keeping the new ambient backdrop. */
body.portfolio-home .hero-wrap {
  min-height: 100vh !important;
  overflow: clip;
}

body.portfolio-home .hero {
  display: flex !important;
  flex-direction: column;
  grid-template-columns: none !important;
  align-content: initial !important;
  width: 100%;
  max-width: 1800px;
  min-height: 100vh !important;
  justify-content: center !important;
  padding: 110px 60px 70px !important;
  padding-left: clamp(84px, 7vw, 132px) !important;
  position: relative;
  isolation: isolate;
}

body.portfolio-home .hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 6% auto 5% 0;
  width: min(1080px, 84vw);
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(3, 7, 10, .98) 0%,
      rgba(3, 7, 10, .94) 54%,
      rgba(3, 7, 10, .76) 74%,
      rgba(3, 7, 10, .28) 91%,
      transparent 100%);
}

body.portfolio-home .hero > * {
  position: relative;
  z-index: 1;
}

body.portfolio-home .hero-title {
  max-width: none;
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(2.8rem, 8.5vw, 7.5rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-wrap: wrap;
}

body.portfolio-home .hero-title .ln {
  overflow: visible;
  display: block;
}

body.portfolio-home .hero-title .wd {
  display: inline-block;
  color: inherit;
  -webkit-text-fill-color: initial;
  text-shadow: none !important;
}

body.portfolio-home .hero-title .hero-name {
  display: inline-block !important;
  background: none !important;
  color: #f4f8f9 !important;
  -webkit-text-fill-color: #f4f8f9 !important;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .72) !important;
}

body.portfolio-home .hero-sub {
  max-width: 680px;
  padding-left: 18px;
  border-left: 2px solid rgba(116, 221, 235, .7);
  color: rgba(233, 241, 243, .88) !important;
  font-weight: 400;
  line-height: 1.7;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .72) !important;
}

@media (max-width: 700px) {
  body.portfolio-home .hero {
    min-height: 100svh !important;
    padding: 96px 24px 72px !important;
  }

  body.portfolio-home .hero-title {
    font-size: clamp(2.4rem, 11vw, 4rem);
  }

  body.portfolio-home .hero::before {
    inset: 5% 0;
    width: 100%;
    background: radial-gradient(ellipse at 42% 48%,
      rgba(3, 7, 10, .98) 0%,
      rgba(3, 7, 10, .90) 58%,
      transparent 94%);
  }
}

/* Theme contrast contract: keep every content label readable over the ambient canvas. */
body.portfolio-home {
  --text: #f8fafc;
  --muted: #aeb7c6;
  --muted2: #c7ceda;
}

body.portfolio-home .ab-text,
body.portfolio-home .edu-yr,
body.portfolio-home .edu-dg,
body.portfolio-home .exp-role,
body.portfolio-home .exp-ul,
body.portfolio-home .p-desc-large,
body.portfolio-home .sk-ul li,
body.portfolio-home .stat-d,
body.portfolio-home .ct-sub,
body.portfolio-home .ct-card-copy,
body.portfolio-home .cl-note,
body.portfolio-home .project-empty {
  color: #c7ceda;
  font-weight: 400;
}

body.portfolio-home footer { color: #b9c2d0; }

html[data-theme="light"] body.portfolio-home {
  --text: #08111f;
  --muted: #475569;
  --muted2: #334155;
  --cyan: #0369a1;
  --purple: #5b21b6;
  --pink: #be185d;
  --amber: #92400e;
  --green: #047857;
}

html[data-theme="light"] body.portfolio-home .hero-eyebrow,
html[data-theme="light"] body.portfolio-home .sl {
  color: #075985 !important;
  text-shadow: none;
}

html[data-theme="light"] body.portfolio-home .hero::before {
  background: radial-gradient(ellipse at 34% 50%,
    rgba(247, 250, 252, .96) 0%,
    rgba(240, 246, 248, .84) 45%,
    rgba(235, 242, 245, .46) 67%,
    transparent 86%);
}

html[data-theme="light"] body.portfolio-home .hero-title .hero-name {
  color: #0b1820 !important;
  -webkit-text-fill-color: #0b1820 !important;
  text-shadow: 0 2px 16px rgba(255, 255, 255, .72) !important;
}

html[data-theme="light"] body.portfolio-home .hero-sub {
  color: #30454d !important;
  border-left-color: rgba(3, 105, 161, .55);
  text-shadow: none !important;
}

html[data-theme="light"] body.portfolio-home .ab-text,
html[data-theme="light"] body.portfolio-home .edu-yr,
html[data-theme="light"] body.portfolio-home .edu-dg,
html[data-theme="light"] body.portfolio-home .exp-role,
html[data-theme="light"] body.portfolio-home .exp-ul,
html[data-theme="light"] body.portfolio-home .p-desc-large,
html[data-theme="light"] body.portfolio-home .sk-ul li,
html[data-theme="light"] body.portfolio-home .stat-d,
html[data-theme="light"] body.portfolio-home .ct-sub,
html[data-theme="light"] body.portfolio-home .ct-card-copy,
html[data-theme="light"] body.portfolio-home .cl-note,
html[data-theme="light"] body.portfolio-home .project-empty {
  color: #334155;
}

html[data-theme="light"] body.portfolio-home .bdg {
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(51, 65, 85, .28) !important;
  font-weight: 700;
  text-shadow: none;
}

html[data-theme="light"] body.portfolio-home .br {
  color: #92400e !important;
  text-shadow: none;
}

html[data-theme="light"] body.portfolio-home footer {
  color: #d6dbe4;
}

html[data-theme="light"] body.portfolio-home #geoBgCanvas {
  opacity: .88;
  mix-blend-mode: normal;
}

/* Centered hero refinement */
body.portfolio-home .hero {
  align-items: center !important;
  padding-left: clamp(24px, 5vw, 84px) !important;
  padding-right: clamp(24px, 5vw, 84px) !important;
  text-align: center;
}

body.portfolio-home .hero-eyebrow {
  justify-content: center;
}

body.portfolio-home .hero-title {
  width: min(1120px, 100%);
  margin-inline: auto;
}

body.portfolio-home .hero-title .hero-name {
  background: linear-gradient(100deg, #ffffff 5%, #e5fbff 50%, #ffffff 95%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .60) !important;
}

body.portfolio-home .hero-sub {
  width: min(860px, 100%);
  max-width: 860px !important;
  margin-top: 58px;
  margin-inline: auto;
  padding: 14px clamp(18px, 3vw, 34px);
  border: 1px solid rgba(112, 211, 229, .34);
  border-radius: 12px;
  background: rgba(4, 9, 13, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

body.portfolio-home .hero-badges,
body.portfolio-home .hero-cta {
  justify-content: center;
}

body.portfolio-home .hero-badges {
  gap: 8px;
}

body.portfolio-home .hero-badges .bdg {
  padding: 7px 11px;
  border-radius: 6px;
  background: rgba(5, 10, 15, .72) !important;
  box-shadow: none;
  text-shadow: none;
}

body.portfolio-home .hero-badges .bc { color: #73e7f5; border-color: rgba(115, 231, 245, .36); }
body.portfolio-home .hero-badges .ba { color: #7eb7ff; border-color: rgba(126, 183, 255, .34); }
body.portfolio-home .hero-badges .bp { color: #b799ff; border-color: rgba(183, 153, 255, .34); }
body.portfolio-home .hero-badges .bg2 { color: #7ee39b; border-color: rgba(126, 227, 155, .34); }
body.portfolio-home .hero-badges .br { color: #eacb72; border-color: rgba(234, 203, 114, .38); }
body.portfolio-home .hero-badges .br::before { content: none; }

body.portfolio-home .hero-cta {
  width: 100%;
  align-items: center;
}

body.portfolio-home .hero-cta .btn-a {
  min-width: 220px;
}

body.portfolio-home .hero-cta .btn-resume {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent !important;
  color: #eef7f8 !important;
  border: 0;
  box-shadow: 0 0 22px rgba(67, 206, 236, .10);
}

body.portfolio-home .hero-cta .btn-resume::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: 155%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg,
    transparent 0 62%,
    rgba(71, 225, 255, .22) 70%,
    #47e1ff 79%,
    #9b78ff 88%,
    transparent 96%);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: resumeBorderOrbit 3.2s linear infinite;
}

body.portfolio-home .hero-cta .btn-resume::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: 7px;
  background: rgba(4, 9, 14, .94);
}

body.portfolio-home .hero-cta .btn-work {
  background: linear-gradient(135deg, #39d7ee, #8067e8) !important;
  color: #061015 !important;
  border: 1px solid rgba(163, 235, 246, .54);
  box-shadow: 0 12px 30px rgba(68, 177, 220, .18);
}

html[data-theme="light"] body.portfolio-home .hero-title .hero-name {
  background: linear-gradient(100deg, #101b21 5%, #245c68 50%, #101b21 95%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.portfolio-home .hero-sub {
  background: rgba(247, 251, 252, .82);
  border-color: rgba(3, 105, 161, .26);
}

html[data-theme="light"] body.portfolio-home .hero-badges .bdg {
  background: rgba(248, 251, 252, .88) !important;
}

html[data-theme="light"] body.portfolio-home .hero-cta .btn-resume {
  background: transparent !important;
  color: #13252c !important;
}

html[data-theme="light"] body.portfolio-home .hero-cta .btn-resume::after {
  background: rgba(247, 251, 252, .96);
}

html[data-theme="light"] body.portfolio-home .hero-cta .btn-work {
  color: #071218 !important;
}

@media (max-width: 700px) {
  body.portfolio-home .hero-sub {
    margin-top: 42px;
    padding: 13px 16px;
  }

  body.portfolio-home .hero-badges {
    width: 100%;
  }
}

@keyframes resumeBorderOrbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.portfolio-home .hero-cta .btn-resume::before {
    animation: none;
  }
}

/* Deliberate plain-text exceptions for supporting headings and secondary cards. */
.no-heading-gradient,
.p-title-large:not(.project-heading-gradient) {
  color: inherit !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  animation: none !important;
}

#skills .sk-grp h3 {
  color: var(--skill-accent) !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 0 16px color-mix(in srgb, var(--skill-accent) 28%, transparent) !important;
  animation: none !important;
}

/* Give each project family its own technology-pill accent. */
#projects .proj-card.pcc .pill {
  background: rgba(0, 229, 255, .10);
  border-color: rgba(0, 229, 255, .32);
  color: #8eefff;
}

#projects .proj-card.pcp .pill {
  background: rgba(168, 85, 247, .11);
  border-color: rgba(168, 85, 247, .34);
  color: #d0a8ff;
}

#projects .proj-card.pca .pill {
  background: rgba(251, 191, 36, .11);
  border-color: rgba(251, 191, 36, .34);
  color: #ffd978;
}

html[data-theme="light"] #projects .proj-card.pcc .pill {
  background: rgba(14, 165, 233, .10);
  border-color: rgba(14, 165, 233, .30);
  color: #0369a1;
}

html[data-theme="light"] #projects .proj-card.pcp .pill {
  background: rgba(124, 58, 237, .10);
  border-color: rgba(124, 58, 237, .28);
  color: #6d28d9;
}

html[data-theme="light"] #projects .proj-card.pca .pill {
  background: rgba(217, 119, 6, .10);
  border-color: rgba(217, 119, 6, .28);
  color: #a16207;
}

/* Distinct accents for the three always-on featured project cards. */
#projects #aiemployee-card {
  --beam: #00e5ff;
  --beam-fade: rgba(0, 229, 255, .35);
}

#projects .proj-card[data-project="autograder"] {
  --beam: #a855f7;
  --beam-fade: rgba(168, 85, 247, .35);
}

#projects .proj-card[data-project="shapids"] {
  --beam: #f59e0b;
  --beam-fade: rgba(245, 158, 11, .35);
}

#projects .proj-card[data-project="autograder"] .pill {
  background: rgba(168, 85, 247, .11);
  border-color: rgba(168, 85, 247, .34);
  color: #d0a8ff;
}

#projects .proj-card[data-project="shapids"] .pill {
  background: rgba(245, 158, 11, .11);
  border-color: rgba(245, 158, 11, .34);
  color: #ffd27a;
}

html[data-theme="light"] #projects .proj-card[data-project="autograder"] .pill {
  background: rgba(124, 58, 237, .10);
  border-color: rgba(124, 58, 237, .28);
  color: #6d28d9;
}

html[data-theme="light"] #projects .proj-card[data-project="shapids"] .pill {
  background: rgba(217, 119, 6, .10);
  border-color: rgba(217, 119, 6, .28);
  color: #a16207;
}

/* About section — technical profile layout */
#about {
  --about-cyan: #22d3ee;
  --about-purple: #a06bff;
  --about-green: #5de77a;
  --about-gold: #f6c63d;
  min-height: auto !important;
  padding: 64px clamp(28px, 5vw, 84px) 72px !important;
}

#about .about-inn {
  width: min(1580px, 100%) !important;
  max-width: 1580px;
}

#about .about-kicker {
  display: grid;
  grid-template-columns: auto 15px minmax(120px, 440px);
  align-items: center;
  gap: 18px;
  width: min(610px, 100%);
  margin-bottom: 18px;
  color: #a9eff8;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
}

#about .about-kicker i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--about-cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(34, 211, 238, .36);
}

#about .about-kicker b {
  height: 1px;
  background: linear-gradient(90deg, var(--about-cyan), rgba(34, 211, 238, .18) 82%, var(--about-purple));
  position: relative;
}

#about .about-kicker b::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--about-purple);
  box-shadow: 0 0 10px var(--about-purple);
  transform: translate(50%, -50%);
}

#about .about-heading {
  margin: 0 0 26px;
  color: #f7f9fb;
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(2rem, 3.35vw, 3.65rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.055em;
  white-space: nowrap;
}

#about .about-heading span {
  background: linear-gradient(100deg, #a06bff 0%, #497ef6 45%, #18c9e7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(420px, 1fr);
  gap: 22px;
  align-items: stretch;
}

#about .about-story-panel,
#about .about-role-card {
  border: 1px solid rgba(129, 163, 180, .34);
  background: linear-gradient(145deg, rgba(12, 20, 27, .90), rgba(5, 10, 15, .82));
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}

#about .about-story-panel {
  position: relative;
  display: grid;
  align-content: center;
  padding: 20px 30px 20px 34px;
  min-height: 418px;
}

#about .about-story-panel::after {
  content: '';
  position: absolute;
  left: 60px;
  top: 60px;
  bottom: 60px;
  border-left: 1px dashed rgba(116, 145, 160, .42);
}

#about .about-story-row {
  --story-accent: var(--about-purple);
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  min-height: 92px;
}

#about .about-story-row + .about-story-row {
  border-top: 1px solid rgba(129, 163, 180, .11);
}

#about .story-cyan { --story-accent: var(--about-cyan); }
#about .story-green { --story-accent: var(--about-green); }

#about .about-story-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--story-accent);
  border: 1px solid color-mix(in srgb, var(--story-accent) 64%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--story-accent) 8%, rgba(5, 10, 15, .94));
  box-shadow: 0 0 20px color-mix(in srgb, var(--story-accent) 10%, transparent);
}

#about .about-story-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -25px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #657b88;
  transform: translateX(-50%);
}

#about .about-story-row:last-child .about-story-icon::after { display: none; }
#about .about-story-icon svg { width: 27px; height: 27px; }

#about .about-story-row p {
  margin: 0;
  color: #c9d0d7;
  font-size: clamp(.91rem, 1.04vw, 1.08rem);
  line-height: 1.62;
}

#about .about-story-row strong { color: #f3f5f7; font-weight: 700; }
#about .about-cyan { color: var(--about-cyan); }
#about .about-purple { color: var(--about-purple); }
#about .about-green { color: var(--about-green); }
#about .about-gold { color: var(--about-gold); }
#about .about-story-row em { color: #8c99a2; font-style: normal; padding-inline: 6px; }

#about .about-aside {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

#about .about-role-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: center;
  min-height: 168px;
  padding: 22px 28px;
  border-color: rgba(93, 151, 173, .46);
}

#about .about-role-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 84px;
  color: var(--about-cyan);
  background: linear-gradient(145deg, rgba(32, 46, 57, .72), rgba(12, 19, 25, .66));
  border: 1px solid rgba(138, 172, 188, .25);
  clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
}

#about .about-role-icon svg { width: 39px; height: 39px; }

#about .about-role-copy h3 {
  margin: 0 0 11px;
  color: #f5f7f8;
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1rem, 1.45vw, 1.42rem);
  line-height: 1.3;
}

#about .about-role-copy h3 span { color: #8db8c5; padding-inline: 7px; }

#about .about-role-copy p {
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid rgba(129, 163, 180, .16);
  color: #c6cdd3;
  font-size: .98rem;
  line-height: 1.58;
}

#about .about-role-copy p span { color: var(--about-cyan); }

#about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

#about .about-stat {
  --stat-accent: var(--about-cyan);
  position: relative;
  isolation: isolate;
  min-height: 150px;
  padding: 19px 21px 18px;
  border: 0;
  background: color-mix(in srgb, var(--stat-accent) 68%, rgba(93, 120, 132, .36));
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  transform: none;
}

#about .about-stat::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--stat-accent) 8%, rgba(8, 14, 19, .97)),
    rgba(5, 10, 15, .96));
  clip-path: polygon(0 0, calc(100% - 27px) 0, 100% 27px, 100% 100%, 0 100%);
}

#about .about-stat::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stat-accent) 46%, transparent);
  box-shadow:
    -8px 0 color-mix(in srgb, var(--stat-accent) 34%, transparent),
    -16px 0 color-mix(in srgb, var(--stat-accent) 22%, transparent),
    0 8px color-mix(in srgb, var(--stat-accent) 24%, transparent);
}

#about .about-stat > * {
  position: relative;
  z-index: 2;
}

#about .about-stat:hover { transform: translateY(-3px); }
#about .about-stat.stat-gold { --stat-accent: var(--about-gold); }
#about .about-stat.stat-purple { --stat-accent: var(--about-purple); }
#about .about-stat.stat-green { --stat-accent: var(--about-green); }

#about .about-stat-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 13px;
  color: var(--stat-accent);
  border: 1px solid color-mix(in srgb, var(--stat-accent) 42%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--stat-accent) 7%, transparent);
}

#about .about-stat-icon svg { width: 20px; height: 20px; }

#about .about-stat .stat-n {
  margin-bottom: 7px;
  color: var(--stat-accent) !important;
  font-size: clamp(1.7rem, 2.4vw, 2.45rem);
  letter-spacing: -.055em;
}

#about .about-stat .stat-d {
  color: #aeb7bf;
  font-size: .88rem;
}

html[data-theme="light"] #about .about-heading { color: #101b21; }

html[data-theme="light"] #about .about-story-panel,
html[data-theme="light"] #about .about-role-card {
  background: linear-gradient(145deg, rgba(250, 253, 254, .94), rgba(232, 240, 243, .88));
  border-color: rgba(44, 86, 101, .28);
}

html[data-theme="light"] #about .about-stat::before {
  background: linear-gradient(145deg, rgba(250, 253, 254, .98), rgba(232, 240, 243, .96));
}

html[data-theme="light"] #about .about-story-row p,
html[data-theme="light"] #about .about-role-copy p { color: #344a53; }
html[data-theme="light"] #about .about-story-row strong,
html[data-theme="light"] #about .about-role-copy h3 { color: #0c1b22; }
html[data-theme="light"] #about .about-role-icon { background: rgba(221, 235, 240, .86); }
html[data-theme="light"] #about .about-stat .stat-d { color: #4b6069; }

@media (max-width: 1180px) {
  #about .about-heading { font-size: clamp(2rem, 3.35vw, 3.2rem); }
  #about .about-layout { grid-template-columns: 1fr; }
  #about .about-aside { grid-template-columns: .92fr 1.35fr; grid-template-rows: 1fr; }
  #about .about-role-card { min-height: 100%; }
}

@media (max-width: 820px) {
  #about { padding: 56px 20px 64px !important; }
  #about .about-heading { white-space: normal; font-size: clamp(2.25rem, 8.7vw, 4rem); }
  #about .about-aside { grid-template-columns: 1fr; }
  #about .about-story-panel { padding: 20px 22px; }
  #about .about-story-panel::after { left: 50px; }
  #about .about-story-row { grid-template-columns: 62px minmax(0, 1fr); padding-block: 14px; }
  #about .about-story-icon { width: 48px; height: 48px; }
  #about .about-story-icon svg { width: 25px; height: 25px; }
  #about .about-role-card { grid-template-columns: 84px minmax(0, 1fr); padding: 26px 22px; }
  #about .about-role-icon { width: 70px; height: 78px; }
}

@media (max-width: 540px) {
  #about .about-kicker { grid-template-columns: auto 12px 1fr; gap: 12px; }
  #about .about-heading { margin-bottom: 28px; }
  #about .about-story-panel::after { display: none; }
  #about .about-story-row { grid-template-columns: 1fr; gap: 14px; }
  #about .about-story-icon::after { display: none; }
  #about .about-role-card { grid-template-columns: 1fr; gap: 20px; }
  #about .about-stats { gap: 12px; }
  #about .about-stat { min-height: 142px; padding: 18px 16px; }
  #about .about-stat-icon { margin-bottom: 16px; }
}

/* Contact section — glass monolith and profile hub composition */
#contact {
  min-height: auto !important;
  padding: 54px clamp(24px, 4vw, 66px) 68px !important;
  overflow: hidden;
}

#contact .ct-wrap {
  width: min(1520px, 100%) !important;
  max-width: 1520px;
  min-height: 560px;
  padding: 24px 18px 28px;
}

#contact .ct-3d-stage {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(8px, 1.5vw, 24px);
  min-height: 510px;
  align-items: center;
}

#contact .ct-monolith-card {
  width: 88%;
  margin-left: 3%;
  perspective: 1300px;
}

#contact .ct-monolith-glass {
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 54px clamp(34px, 4vw, 58px) 42px;
  border-radius: 48% 8% 9% 8% / 16% 8% 9% 8%;
  background:
    linear-gradient(145deg, rgba(222, 239, 247, .22), rgba(54, 75, 88, .16) 44%, rgba(10, 23, 31, .22) 100%),
    linear-gradient(105deg, rgba(255, 255, 255, .13), transparent 38%);
  border-top: 3px solid rgba(225, 245, 252, .72);
  border-left: 2px solid rgba(203, 235, 246, .58);
  border-right: 1px solid rgba(122, 174, 193, .38);
  border-bottom: 2px solid rgba(134, 186, 204, .38);
  box-shadow:
    -10px 22px 0 rgba(126, 169, 187, .13),
    0 34px 78px rgba(0, 0, 0, .46),
    inset 0 4px 12px rgba(255, 255, 255, .32),
    inset -14px -12px 24px rgba(1, 8, 13, .28);
  transform: rotateY(7deg) rotateZ(-1.2deg);
}

#contact .ct-monolith-glass:hover {
  transform: rotateY(4deg) rotateZ(-.5deg) translateY(-3px);
}

#contact .ct-monolith-bevel {
  height: 22px;
  border-radius: 100% 12px 0 0;
  opacity: .72;
}

#contact .ct-monolith-title {
  max-width: 520px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 3.25vw, 3.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .015em;
}

#contact .ct-monolith-great {
  background: linear-gradient(100deg, #b044b9, #ec4e9a);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 12px rgba(218, 72, 168, .34));
  font-weight: 800;
}

#contact .ct-monolith-desc {
  max-width: 520px;
  margin-bottom: 22px;
  font-size: clamp(.84rem, 1vw, .98rem);
  line-height: 1.55;
}

#contact .ct-monolith-badges {
  gap: 8px;
}

#contact .ct-glass-pill {
  padding: 6px 13px;
  font-size: .72rem;
  border-width: 1px;
  box-shadow: 0 0 12px rgba(0, 229, 255, .22), inset 0 1px 2px rgba(255, 255, 255, .44);
}

#contact .ct-hub-composition {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
}

#contact .ct-crystal-plaque {
  position: absolute;
  top: 18px;
  left: 50%;
  right: auto;
  width: 64%;
  max-width: 390px;
  min-height: 292px;
  padding: 38px 34px 32px;
  isolation: isolate;
  border-radius: 0;
  border: 0;
  background: linear-gradient(135deg,
    rgba(213, 242, 250, .88),
    rgba(64, 196, 224, .48) 34%,
    rgba(127, 92, 205, .42) 70%,
    rgba(205, 230, 239, .72));
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  box-shadow:
    0 28px 55px rgba(0, 0, 0, .42),
    0 0 28px rgba(34, 211, 238, .10);
  transform: translateX(-50%) rotateY(-2deg);
}

#contact .ct-crystal-plaque::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1px;
  background:
    linear-gradient(145deg, rgba(22, 38, 49, .96), rgba(6, 15, 21, .97)),
    linear-gradient(105deg, rgba(255, 255, 255, .08), transparent 42%);
  clip-path: polygon(23px 0, 100% 0, 100% calc(100% - 23px), calc(100% - 23px) 100%, 0 100%, 0 23px);
}

#contact .ct-crystal-plaque:hover {
  transform: translateX(-50%) rotateY(0deg) translateY(-2px);
}

#contact .ct-crystal-facets {
  border-radius: 0;
  clip-path: inherit;
  opacity: .36;
}

#contact .ct-crystal-refraction {
  inset: 11px;
  border-radius: 0;
  border: 1px solid rgba(133, 210, 226, .20);
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

#contact .ct-crystal-kicker {
  font-size: .63rem;
  margin-bottom: 7px;
}

#contact .ct-crystal-heading {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  margin-bottom: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(92, 189, 210, .30);
}

#contact .ct-crystal-sub {
  max-width: 310px;
  margin-bottom: 20px;
  font-size: .78rem;
  line-height: 1.42;
}

#contact .ct-email-plaque {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  padding: 15px 22px;
  border-radius: 8px;
  background: linear-gradient(115deg, #8f2115 0%, #d84620 44%, #8c1f17 100%);
  box-shadow:
    0 15px 30px rgba(123, 28, 17, .52),
    inset 0 2px 4px rgba(255, 206, 174, .34),
    inset 0 -3px 6px rgba(35, 3, 0, .42);
  transform: none;
  border: 1px solid rgba(255, 204, 177, .42);
}

#contact .ct-email-plaque:hover {
  transform: translateY(-2px);
}

#contact .ct-email-label { font-size: .82rem; }
#contact .ct-email-address {
  font-size: .67rem;
  overflow-wrap: anywhere;
}

#contact .ct-node-item {
  position: absolute;
  z-index: 12;
  transform: none;
}

#contact .ct-node-item:hover {
  transform: translateY(-8px) scale(1.08);
}

#contact .node-pos-linkedin { top: 138px; left: 1%; }
#contact .node-pos-github { bottom: 92px; left: 5%; }
#contact .node-pos-leetcode { bottom: 48px; left: 28%; }
#contact .node-pos-hf { top: 49%; right: 0; transform: translateY(-50%); }
#contact .node-pos-hf:hover { transform: translateY(calc(-50% - 8px)) scale(1.08); }
#contact .node-pos-kaggle { bottom: 0; right: 18%; }

#contact .gem-body,
#contact .sphere-body {
  width: 82px;
  height: 82px;
}

#contact .gem-body.faceted-amber-diamond,
#contact .gem-body.hf-dull-diamond,
#contact .sphere-body.faceted-amber,
#contact .sphere-body.hf-yellow {
  width: 82px;
  height: 82px;
}

#contact .gem-body.glass-blue-diamond .linkedin-icon,
#contact .sphere-body.glass-blue .linkedin-icon { width: 36px; height: 36px; }
#contact .gem-body.marble-white-diamond .github-icon,
#contact .sphere-body.marble-white .github-icon { width: 36px; height: 36px; }
#contact .gem-body.faceted-amber-diamond .leetcode-icon,
#contact .sphere-body.faceted-amber .leetcode-icon { width: 38px; height: 38px; }
#contact .gem-body.hf-dull-diamond .hf-emoji-svg,
#contact .sphere-body.hf-yellow .hf-emoji-svg { width: 48px; height: 48px; }

#contact .prism-body.glass-kaggle-blue {
  width: 142px;
  height: 66px;
  border-radius: 7px 7px 70px 70px;
}

#contact .prism-body.glass-kaggle-blue .kaggle-k {
  width: 34px;
  height: 34px;
  color: #20beff !important;
  fill: #20beff !important;
}

html[data-theme="light"] #contact .ct-monolith-glass,
html[data-theme="light"] #contact .ct-crystal-plaque {
  background:
    linear-gradient(145deg, rgba(250, 253, 254, .82), rgba(198, 220, 228, .54)),
    linear-gradient(105deg, rgba(255, 255, 255, .60), transparent 42%);
}

html[data-theme="light"] #contact .ct-crystal-plaque::before {
  background: linear-gradient(145deg, rgba(250, 253, 254, .98), rgba(221, 234, 239, .97));
}

html[data-theme="light"] #contact .ct-crystal-plaque {
  background: linear-gradient(135deg,
    rgba(43, 137, 158, .72),
    rgba(45, 182, 210, .48) 38%,
    rgba(105, 78, 177, .40) 72%,
    rgba(50, 106, 125, .62));
}

@media (max-width: 1100px) {
  #contact .ct-wrap { min-height: auto; }
  #contact .ct-3d-stage { grid-template-columns: 1fr; gap: 46px; }
  #contact .ct-monolith-card { width: min(680px, 92%); margin-inline: auto; }
  #contact .ct-monolith-glass { transform: none; }
  #contact .ct-hub-composition { width: min(680px, 100%); margin-inline: auto; }
}

@media (max-width: 640px) {
  #contact { padding: 52px 18px 60px !important; }
  #contact .ct-wrap { padding-inline: 0; }
  #contact .ct-monolith-card { width: 100%; }
  #contact .ct-monolith-glass {
    min-height: auto;
    padding: 42px 25px 32px;
    border-radius: 28% 8% 9% 8% / 10% 8% 9% 8%;
  }
  #contact .ct-hub-composition {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px 12px;
    min-height: auto;
    padding-top: 0;
  }
  #contact .ct-crystal-plaque {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    min-height: 250px;
    margin: 0 0 24px;
    transform: none;
  }
  #contact .ct-node-item,
  #contact .node-pos-hf {
    position: relative;
    inset: auto;
    grid-row: 2;
    transform: none;
    justify-self: center;
  }
  #contact .node-pos-linkedin { grid-column: 1; }
  #contact .node-pos-github { grid-column: 2; }
  #contact .node-pos-leetcode { grid-column: 3; }
  #contact .node-pos-hf { grid-column: 1; grid-row: 3; }
  #contact .node-pos-kaggle { grid-column: 2 / span 2; grid-row: 3; justify-self: center; }
  #contact .sphere-body { width: 66px; height: 66px; }
  #contact .sphere-body.faceted-amber,
  #contact .sphere-body.hf-yellow { width: 66px; height: 66px; }
  #contact .prism-body.glass-kaggle-blue { width: 112px; height: 54px; }
}

/* Academic background — technical timeline cards */
#education {
  --edu-cyan: #26d5ef;
  --edu-purple: #9b63e9;
  --edu-gold: #e9ad4c;
  min-height: auto !important;
  padding: 66px clamp(28px, 5vw, 80px) 76px !important;
}

#education .education-inn {
  width: min(1500px, 100%) !important;
  max-width: 1500px;
}

#education .education-kicker {
  display: grid;
  grid-template-columns: 10px auto minmax(100px, 260px);
  align-items: center;
  gap: 13px;
  width: min(420px, 100%);
  margin-bottom: 14px;
  color: #9bdce8;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

#education .education-kicker > i {
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

#education .education-kicker > b {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(115, 193, 207, .72), var(--edu-cyan));
}

#education .education-kicker > b::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--edu-cyan);
  box-shadow: 0 0 10px var(--edu-cyan);
  transform: translate(50%, -50%);
}

#education .education-heading {
  margin: 0 0 30px;
  color: #f7f8fa;
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.55rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

#education .education-heading span {
  background: linear-gradient(100deg, #a46cf2, #5b83f4 48%, #31c8e7);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#education .edu-timeline,
#education .edu-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1220px;
  margin: 0 auto;
}

#education .edu-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 43px;
  bottom: 43px;
  border-left: 1px dashed rgba(145, 168, 180, .56);
}

#education .edu-entry {
  --edu-accent: var(--edu-cyan);
  display: grid;
  grid-template-columns: 42px 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}

#education .edu-entry.edu-purple { --edu-accent: var(--edu-purple); }
#education .edu-entry.edu-gold { --edu-accent: var(--edu-gold); }

#education .edu-node {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 9px;
  border: 1px solid color-mix(in srgb, var(--edu-accent) 78%, white 12%);
  border-radius: 50%;
  background: #091017;
  box-shadow: 0 0 14px color-mix(in srgb, var(--edu-accent) 35%, transparent);
}

#education .edu-node i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--edu-accent);
  box-shadow: 0 0 8px var(--edu-accent);
}

#education .edu-node::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 50%;
  width: 19px;
  border-top: 1px dashed color-mix(in srgb, var(--edu-accent) 52%, transparent);
}

#education .edu-hex-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 78px;
  color: var(--edu-accent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--edu-accent) 24%, rgba(12, 22, 29, .94)), rgba(7, 13, 18, .96));
  border: 1px solid color-mix(in srgb, var(--edu-accent) 62%, transparent);
  clip-path: polygon(50% 0, 94% 23%, 94% 77%, 50% 100%, 6% 77%, 6% 23%);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--edu-accent) 18%, transparent));
}

#education .edu-hex-icon svg {
  width: 39px;
  height: 39px;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--edu-accent) 42%, transparent));
}

#education .edu-card {
  position: relative;
  min-height: 112px;
  padding: 20px 190px 18px 24px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--edu-accent) 72%, rgba(130, 151, 160, .36)) !important;
  box-shadow: 0 15px 34px rgba(0, 0, 0, .24) !important;
  clip-path: polygon(18px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transform: none;
}

#education .edu-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 1px;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--edu-accent) 12%, transparent), transparent 24%),
    linear-gradient(145deg, rgba(12, 22, 29, .97), rgba(5, 10, 15, .96));
  clip-path: polygon(17px 0, calc(100% - 23px) 0, 100% 23px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px);
}

#education .edu-card::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 1px;
  top: 1px;
  width: 46px;
  height: 34px;
  background: linear-gradient(135deg, var(--edu-accent), transparent 74%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: .88;
}

#education .edu-card-content { position: static; }

#education .edu-sc,
#education .edu-dg,
#education .edu-bs,
#education .edu-card-dots {
  position: relative;
  z-index: 2;
}

#education .edu-card:hover {
  transform: translateX(4px) !important;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--edu-accent) 13%, rgba(0, 0, 0, .36)) !important;
}

#education .edu-sc {
  margin: 0 0 5px;
  color: #f5f7f9;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  font-weight: 700;
  line-height: 1.2;
}

#education .edu-dg {
  margin: 0 0 13px;
  color: color-mix(in srgb, var(--edu-accent) 62%, #aebbc2) !important;
  font-size: .78rem;
}

#education .edu-yr {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 22px;
  margin: 0;
  padding: 6px 11px;
  color: color-mix(in srgb, var(--edu-accent) 72%, white 12%) !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .61rem;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--edu-accent) 55%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--edu-accent) 6%, rgba(5, 11, 16, .88));
}

#education .edu-bs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

#education .edu-bs .bdg {
  padding: 5px 12px;
  color: color-mix(in srgb, var(--edu-accent) 72%, #e8edf0) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .65rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--edu-accent) 52%, transparent) !important;
  border-radius: 5px;
  background: color-mix(in srgb, var(--edu-accent) 5%, rgba(5, 10, 15, .80)) !important;
  box-shadow: none;
  text-shadow: none;
}

/* Individual result colors keep each education card from becoming monochrome. */
#education .edu-entry .edu-bs .bdg.edu-pill-cyan {
  color: #70dff1 !important;
  border-color: rgba(83, 211, 235, .54) !important;
  background: rgba(34, 188, 221, .14) !important;
}

#education .edu-entry .edu-bs .bdg.edu-pill-purple {
  color: #c6adff !important;
  border-color: rgba(167, 139, 250, .54) !important;
  background: rgba(139, 92, 246, .14) !important;
}

#education .edu-entry .edu-bs .bdg.edu-pill-pink {
  color: #ff9fc4 !important;
  border-color: rgba(244, 114, 182, .52) !important;
  background: rgba(219, 39, 119, .14) !important;
}

#education .edu-entry .edu-bs .bdg.edu-pill-green {
  color: #83dfa1 !important;
  border-color: rgba(74, 222, 128, .48) !important;
  background: rgba(34, 197, 94, .13) !important;
}

#education .edu-bs .edu-gold-pill {
  color: #e9c36b !important;
  border-color: rgba(233, 195, 107, .54) !important;
}

#education .edu-bs .edu-green-pill {
  color: #78d89a !important;
  border-color: rgba(120, 216, 154, .46) !important;
}

#education .edu-card-dots {
  position: absolute;
  right: 20px;
  bottom: 17px;
  display: flex;
  gap: 5px;
}

#education .edu-card-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--edu-accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--edu-accent) 45%, transparent);
}

html[data-theme="light"] #education .education-heading { color: #0e1920; }
html[data-theme="light"] #education .edu-node { background: #edf4f6; }

html[data-theme="light"] #education .edu-card::before {
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--edu-accent) 12%, transparent), transparent 24%),
    linear-gradient(145deg, rgba(249, 252, 253, .98), rgba(229, 238, 241, .96));
}

html[data-theme="light"] #education .edu-sc { color: #101b21; }
html[data-theme="light"] #education .edu-dg { color: #42616d !important; }

@media (max-width: 820px) {
  #education { padding: 58px 20px 66px !important; }
  #education .education-heading { font-size: clamp(1.9rem, 7vw, 3.1rem); }
  #education .edu-entry { grid-template-columns: 34px 58px minmax(0, 1fr); gap: 9px; }
  #education .edu-timeline::before { left: 16px; }
  #education .edu-node { width: 18px; height: 18px; margin-left: 7px; }
  #education .edu-node::after { left: 18px; width: 13px; }
  #education .edu-hex-icon { width: 54px; height: 62px; }
  #education .edu-hex-icon svg { width: 30px; height: 30px; }
  #education .edu-card { padding: 18px 18px 18px 20px !important; }
  #education .edu-yr { position: static; display: inline-flex; margin-bottom: 11px; }
  #education .edu-card-dots { display: none; }
}

@media (max-width: 560px) {
  #education .education-heading span { display: block; }
  #education .edu-entry { grid-template-columns: 1fr; }
  #education .edu-timeline::before,
  #education .edu-node { display: none; }
  #education .edu-hex-icon { margin-left: 14px; margin-bottom: -20px; z-index: 3; }
  #education .edu-card { padding-top: 34px !important; }
}

/* ── Certifications: verified credential console ── */
#certificates {
  --chapter-accent: var(--cyan);
  padding-top: 92px;
  padding-bottom: 96px;
}

#certificates::before {
  display: none;
}

#certificates .inn {
  width: min(1440px, calc(100vw - 96px));
}

#certificates .sl {
  margin: 0 0 20px;
  color: var(--cyan) !important;
  font-size: .78rem;
  letter-spacing: .22em;
}

#certificates .sl::before {
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  background: transparent;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(53, 215, 255, .45);
}

#certificates .sl::after {
  width: min(230px, 20vw);
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, rgba(53, 215, 255, .9), rgba(139, 92, 246, .75), transparent);
  transform: none;
  box-shadow: none;
}

#certificates .st {
  max-width: none;
  margin: 0 0 18px;
  color: #f7f9fb;
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.03;
  white-space: normal;
  text-shadow: 0 18px 50px rgba(0, 0, 0, .32);
}

#certificates .st .w {
  display: inline-block;
}

#certificates .cert-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 0 0 24px;
  padding: 9px 12px;
  color: #f0f4f7;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid rgba(156, 174, 190, .25);
  border-radius: 999px;
  background: rgba(6, 12, 18, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

#certificates .cert-section-title::before {
  display: none;
}

#certificates .cert-section-title > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#certificates .cert-section-title .cert-count {
  min-width: 28px;
  height: 24px;
  margin: 0 0 0 2px;
  padding: 0 8px;
  color: var(--cyan);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 213, 255, .13);
}

#certificates .cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

#certificates .cert-card {
  --cert-accent: var(--cyan);
  position: relative;
  display: grid;
  grid-template-columns: minmax(185px, 38%) minmax(0, 1fr);
  min-height: 210px;
  overflow: hidden;
  color: var(--text);
  border: 1px solid rgba(144, 162, 178, .24) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--cert-accent) 7%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(13, 20, 29, .94), rgba(6, 11, 17, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 18px 48px rgba(0, 0, 0, .18) !important;
  transform: none;
}

#certificates .cert-card:nth-child(4n + 2) { --cert-accent: #9a72f8; }
#certificates .cert-card:nth-child(4n + 3) { --cert-accent: #b574ff; }
#certificates .cert-card:nth-child(4n + 4) { --cert-accent: #ffbf45; }

#certificates .cert-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cert-accent) 8%, transparent);
}

#certificates .cert-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--cert-accent) 55%, transparent) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .3), 0 0 26px color-mix(in srgb, var(--cert-accent) 9%, transparent) !important;
}

#certificates .cert-card-img-wrap {
  align-self: stretch;
  aspect-ratio: auto;
  min-height: 184px;
  margin: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 9px;
  background: #eef0f4;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

#certificates .cert-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#certificates .cert-card-info {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  margin: 22px 18px 22px 0;
  padding: 31px 24px 40px;
  border-left: 2px solid var(--cert-accent);
}

#certificates .cert-card-info::before {
  content: '◇  CERTIFICATE OF COMPLETION';
  position: absolute;
  top: 1px;
  left: 24px;
  color: var(--cert-accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .035em;
}

#certificates .cert-card:first-child .cert-card-info::before {
  content: '◇  COMPLETION BADGE';
}

#certificates .cert-card-info::after {
  content: 'VERIFIED · ' attr(data-issued);
  position: absolute;
  right: 0;
  bottom: 0;
  left: 24px;
  padding-top: 12px;
  color: rgba(206, 215, 224, .62);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .07em;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

#certificates .cert-card-name {
  margin: 0 0 9px;
  color: #f4f6f8;
  font-size: clamp(.95rem, 1.28vw, 1.2rem);
  font-weight: 600;
  line-height: 1.28;
}

#certificates .cert-card-issuer {
  display: block;
  color: rgba(205, 216, 225, .66);
  font-size: .78rem;
  line-height: 1.4;
}

#certificates .cert-issuer-dot {
  display: none;
}

#certificates .cert-card-overlay {
  padding: 15px;
  background: linear-gradient(180deg, transparent 28%, rgba(4, 8, 13, .9));
}

#certificates .cert-card-overlay span {
  font-size: .58rem;
  letter-spacing: .11em;
}

#certificates .show-more-wrap {
  margin-top: 26px;
  padding-bottom: 0;
}

#certificates .btn-show-more {
  gap: 14px;
  padding: 13px 24px;
  color: #f2f5f7;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(rgba(6, 12, 18, .94), rgba(6, 12, 18, .94)) padding-box,
    linear-gradient(90deg, #35d7ff, #8b5cf6 48%, #ffbf45) border-box;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}

#certificates .btn-show-more:hover {
  color: #fff;
  border-color: transparent;
  background:
    linear-gradient(rgba(13, 22, 31, .98), rgba(13, 22, 31, .98)) padding-box,
    linear-gradient(90deg, #35d7ff, #8b5cf6 48%, #ffbf45) border-box;
  box-shadow: 0 16px 36px rgba(53, 215, 255, .1);
}

#certificates .cert-button-medal {
  color: #e9f8ff;
  font-size: 1.1rem;
}

#certificates .cert-button-arrow {
  color: #eef7fb;
}

html[data-theme="light"] #certificates .st { color: #111a22; }
html[data-theme="light"] #certificates .cert-section-title {
  color: #17232c;
  background: rgba(255, 255, 255, .78);
}
html[data-theme="light"] #certificates .cert-card {
  background:
    radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--cert-accent) 8%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(235, 241, 245, .96)) !important;
}
html[data-theme="light"] #certificates .cert-card-name { color: #101a22; }
html[data-theme="light"] #certificates .cert-card-issuer,
html[data-theme="light"] #certificates .cert-card-info::after { color: rgba(29, 45, 57, .65); }
html[data-theme="light"] #certificates .cert-card-info::after { border-color: rgba(17, 31, 42, .1); }

@media (max-width: 1050px) {
  #certificates .inn { width: min(100%, calc(100vw - 48px)); }
  #certificates .cert-card { grid-template-columns: minmax(160px, 36%) minmax(0, 1fr); }
  #certificates .cert-card-info { padding-right: 12px; }
}

@media (max-width: 780px) {
  #certificates { padding: 72px 22px 78px !important; }
  #certificates .inn { width: 100%; }
  #certificates .st { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  #certificates .cert-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  #certificates .sl::after { width: 70px; }
  #certificates .cert-card { grid-template-columns: 1fr; }
  #certificates .cert-card-img-wrap { aspect-ratio: 4 / 3; min-height: 0; margin-bottom: 0; }
  #certificates .cert-card-info { min-height: 170px; margin: 14px; padding-left: 19px; border-left-width: 2px; }
  #certificates .cert-card-info::before,
  #certificates .cert-card-info::after { left: 19px; }
}

/* ── Skills: layered technical toolkit ── */
#skills {
  --chapter-accent: var(--cyan);
  padding-top: 78px;
  padding-bottom: 64px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

#skills .inn {
  width: min(1340px, calc(100vw - 112px));
}

#skills .sl {
  display: flex;
  width: 100%;
  margin: 0 0 14px;
  color: rgba(215, 226, 235, .72) !important;
  font-size: .62rem;
  letter-spacing: .2em;
}

#skills .sl::before {
  width: 28px;
  background: rgba(178, 194, 207, .48);
}

#skills .sl::after {
  width: 7px;
  height: 7px;
  border-color: rgba(178, 194, 207, .7);
  box-shadow: none;
}

#skills .st {
  max-width: none;
  margin: 0 auto 46px;
  color: #f5f8fa;
  font-size: clamp(2.25rem, 4vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 16px 45px rgba(0, 0, 0, .38);
  font-family: 'Unbounded', sans-serif;
}

#skills .st .w {
  display: inline-block;
}

#skills .st .w:nth-child(1) .wi {
  color: #75e8f5;
}

#skills .st .w:nth-child(2) .wi {
  color: #a68cf7;
}

#skills .sk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 1.7vw, 24px);
  margin: 0 auto;
  perspective: 1200px;
}

#skills .sk-grp {
  --skill-accent: var(--cyan);
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 356px;
  padding: 31px 16px 18px;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}

#skills .sk-grp.sk-p { --skill-accent: #a978f2; }
#skills .sk-grp.sk-a { --skill-accent: #e0b950; }
#skills .sk-grp.sk-g { --skill-accent: #68d47c; }

#skills .sk-grp::before,
#skills .sk-grp::after {
  content: '';
  position: absolute;
  pointer-events: none;
  clip-path: polygon(9% 0, 73% 0, 81% 7%, 100% 7%, 100% 91%, 91% 100%, 10% 100%, 0 90%, 0 10%);
}

#skills .sk-grp::before {
  inset: -10px -7px -9px;
  z-index: -2;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--skill-accent) 28%, transparent), rgba(10, 17, 24, .74) 36%, color-mix(in srgb, var(--skill-accent) 15%, rgba(7, 12, 17, .86)));
  border: 0;
  box-shadow:
    6px 7px 0 -3px color-mix(in srgb, var(--skill-accent) 13%, transparent),
    -5px -5px 0 -3px color-mix(in srgb, var(--skill-accent) 10%, transparent),
    0 18px 38px rgba(0, 0, 0, .24);
  opacity: .58;
}

#skills .sk-grp::after {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--skill-accent) 17%, transparent), transparent 35%) padding-box,
    linear-gradient(155deg, rgba(23, 33, 44, .96), color-mix(in srgb, var(--skill-accent) 10%, rgba(7, 12, 18, .96))) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--skill-accent) 78%, white 8%), color-mix(in srgb, var(--skill-accent) 18%, transparent) 48%, color-mix(in srgb, var(--skill-accent) 62%, transparent)) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 0 35px color-mix(in srgb, var(--skill-accent) 6%, transparent),
    0 20px 48px rgba(0, 0, 0, .28);
}

/* Skills cards use a stable accent border; disable the shared rotating beam. */
#skills .sk-grp:hover {
  transform: translateY(-8px) !important;
  filter: drop-shadow(0 15px 22px color-mix(in srgb, var(--skill-accent) 13%, transparent));
}

#skills .sk-grp h3 {
  position: relative;
  z-index: 2;
  min-height: 31px;
  margin: 0 0 9px;
  color: var(--skill-accent);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  text-transform: uppercase;
  text-shadow: 0 0 16px color-mix(in srgb, var(--skill-accent) 28%, transparent);
}

#skills .sk-grp h3::after {
  content: '';
  position: absolute;
  top: -13px;
  left: 0;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--skill-accent), transparent);
  box-shadow: 0 0 9px var(--skill-accent);
  opacity: .55;
}

#skills .sk-ul {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
}

#skills .sk-ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 31px;
  padding: 6px 8px;
  color: rgba(239, 244, 248, .9);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(.75rem, .72vw, .82rem);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 5px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--skill-accent) 9%, rgba(255, 255, 255, .055)), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: color .22s ease, border-color .22s ease, transform .22s ease, background .22s ease;
}

#skills .sk-ul li:hover {
  gap: 8px;
  color: #fff;
  border-color: color-mix(in srgb, var(--skill-accent) 36%, transparent);
  background: color-mix(in srgb, var(--skill-accent) 11%, rgba(255, 255, 255, .05));
  transform: translateX(3px);
}

#skills .sdot {
  width: 4px;
  height: 4px;
  margin-top: .43em;
  background: var(--skill-accent) !important;
  box-shadow: 0 0 7px var(--skill-accent);
}

html[data-theme="light"] #skills .st { color: #11202a; }
html[data-theme="light"] #skills .sk-grp::after {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--skill-accent) 15%, transparent), transparent 35%) padding-box,
    linear-gradient(155deg, rgba(250, 253, 255, .97), color-mix(in srgb, var(--skill-accent) 7%, rgba(229, 237, 242, .98))) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--skill-accent) 62%, white), color-mix(in srgb, var(--skill-accent) 18%, transparent), color-mix(in srgb, var(--skill-accent) 48%, transparent)) border-box;
}
html[data-theme="light"] #skills .sk-ul li {
  color: rgba(17, 31, 41, .82);
  border-color: rgba(28, 50, 65, .12);
  background: color-mix(in srgb, var(--skill-accent) 7%, rgba(255, 255, 255, .78));
}
@media (max-width: 1180px) {
  #skills .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 46px; }
  #skills .inn { width: min(100%, calc(100vw - 64px)); }
  #skills .sk-grp { min-height: 350px; }
}

@media (max-width: 720px) {
  #skills { padding: 70px 22px 66px !important; }
  #skills .inn { width: 100%; }
  #skills .st { margin-bottom: 42px; font-size: clamp(2.2rem, 10vw, 3.4rem); }
  #skills .sk-grid { grid-template-columns: 1fr; gap: 44px; padding: 0 7px; }
  #skills .sk-grp { min-height: auto; }
}

@media (max-width: 460px) {
  #skills .st .w { display: inline; }
  #skills .sk-grp { padding: 35px 16px 20px; }
  #skills .sk-ul li { font-size: .78rem; }
}

/* Use the Experience heading scale for the previously oversized sections. */
#about .about-heading,
#education .education-heading,
#certificates .st,
#skills .st {
  font-size: clamp(1.65rem, 3.5vw, 2.45rem);
}

#skills .st {
  margin: 0 0 46px;
  text-align: left;
}

/* Light-mode contrast pass for accent text, pills, and technical labels. */
html[data-theme="light"] body.portfolio-home .hero-badges .bc {
  color: #0e7490 !important;
  border-color: rgba(8, 145, 178, .46) !important;
}

html[data-theme="light"] body.portfolio-home .hero-badges .ba {
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, .42) !important;
}

html[data-theme="light"] body.portfolio-home .hero-badges .bp {
  color: #6d28d9 !important;
  border-color: rgba(109, 40, 217, .38) !important;
}

html[data-theme="light"] body.portfolio-home .hero-badges .bg2 {
  color: #047857 !important;
  border-color: rgba(4, 120, 87, .38) !important;
}

html[data-theme="light"] #about {
  --about-cyan: #0e7490;
  --about-purple: #6d28d9;
  --about-green: #047857;
  --about-gold: #a16207;
}

html[data-theme="light"] #about .about-story-icon,
html[data-theme="light"] #about .about-role-icon,
html[data-theme="light"] #about .about-stat-icon {
  background: #ffffff;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .10);
}

html[data-theme="light"] #education .edu-hex-icon {
  background: linear-gradient(145deg, #ffffff, #f4f8fa);
  border-color: color-mix(in srgb, var(--edu-accent) 58%, rgba(15, 23, 42, .20));
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, .12));
}

html[data-theme="light"] #education .edu-sc {
  color: color-mix(in srgb, var(--edu-accent) 76%, #0f172a) !important;
}

html[data-theme="light"] #education .edu-yr {
  color: color-mix(in srgb, var(--edu-accent) 74%, #0f172a) !important;
  border-color: color-mix(in srgb, var(--edu-accent) 44%, rgba(15, 23, 42, .20));
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

html[data-theme="light"] #education .edu-bs .bdg {
  color: color-mix(in srgb, var(--edu-accent) 76%, #0f172a) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .07);
}

html[data-theme="light"] #education .edu-bs .edu-gold-pill {
  color: #92400e !important;
  background: #fffaf0 !important;
}

html[data-theme="light"] #education .edu-bs .edu-green-pill {
  color: #047857 !important;
  background: #f0fdf4 !important;
}

html[data-theme="light"] #education .edu-entry .edu-bs .bdg.edu-pill-cyan {
  color: #0e7490 !important;
  border-color: rgba(8, 145, 178, .45) !important;
  background: rgba(6, 182, 212, .13) !important;
}

html[data-theme="light"] #education .edu-entry .edu-bs .bdg.edu-pill-purple {
  color: #6d28d9 !important;
  border-color: rgba(109, 40, 217, .40) !important;
  background: rgba(124, 58, 237, .12) !important;
}

html[data-theme="light"] #education .edu-entry .edu-bs .bdg.edu-pill-pink {
  color: #be185d !important;
  border-color: rgba(190, 24, 93, .38) !important;
  background: rgba(219, 39, 119, .11) !important;
}

html[data-theme="light"] #education .edu-entry .edu-bs .bdg.edu-pill-green {
  color: #047857 !important;
  border-color: rgba(4, 120, 87, .38) !important;
  background: rgba(5, 150, 105, .11) !important;
}

html[data-theme="light"] #skills .sl {
  color: #075985 !important;
}

html[data-theme="light"] #skills .sk-grp.sk-p { --skill-accent: #6d28d9; }
html[data-theme="light"] #skills .sk-grp.sk-a { --skill-accent: #a16207; }
html[data-theme="light"] #skills .sk-grp.sk-g { --skill-accent: #047857; }

html[data-theme="light"] #skills .sk-grp::before {
  display: none;
}

html[data-theme="light"] #skills .sk-grp::after {
  background: linear-gradient(155deg,
    rgba(255, 255, 255, .97),
    color-mix(in srgb, var(--skill-accent) 5%, rgba(241, 245, 249, .98)));
  border: 1px solid color-mix(in srgb, var(--skill-accent) 32%, rgba(71, 85, 105, .22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 12px 28px rgba(15, 23, 42, .09);
}

html[data-theme="light"] #skills .st .w:nth-child(1) .wi {
  color: #0e7490;
}

html[data-theme="light"] #skills .st .w:nth-child(2) .wi {
  color: #6d28d9;
}

html[data-theme="light"] #contact .ct-glass-pill {
  color: #0e7490;
  border-color: rgba(8, 145, 178, .48);
  background: rgba(6, 182, 212, .10);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .72);
}

html[data-theme="light"] #contact .ct-crystal-kicker {
  color: #0e7490;
  text-shadow: none;
}

/* Shared live heading treatment: every heading gets the same animated glow. */
:where(h1, h2, h3, h4, h5, h6),
:where(h1, h2, h3, h4, h5, h6) span {
  color: transparent !important;
  background: linear-gradient(110deg, var(--cyan) 0%, var(--purple) 38%, #ffffff 50%, var(--pink) 68%, var(--amber) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  animation: headingGlow 6s ease-in-out infinite;
}

:where(h1, h2, h3, h4, h5, h6) span:not(.hero-name) {
  text-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 24%, transparent),
    0 0 28px color-mix(in srgb, var(--purple) 18%, transparent);
}

/* Modal typography is intentionally neutral, including its headings. */
#proj-modal h1,
#proj-modal h2,
#proj-modal h3,
#proj-modal h4,
#proj-modal h5,
#proj-modal h6,
#proj-modal h1 span,
#proj-modal h2 span,
#proj-modal h3 span,
#proj-modal h4 span,
#proj-modal h5 span,
#proj-modal h6 span {
  color: var(--text) !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
  animation: none !important;
}

@keyframes headingGlow {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(h1, h2, h3, h4, h5, h6),
  :where(h1, h2, h3, h4, h5, h6) span {
    animation: none;
  }
}

html[data-theme="light"] #contact .ct-monolith-great {
  background: linear-gradient(100deg, #86198f, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}

/* ═══════════════════════════════════════════════════════════════
   SEAMLESS BLAST DOOR GATEWAY OVERLAY (DIRECT HERO REVEAL)
   ═══════════════════════════════════════════════════════════════ */
#blastDoorGateway {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  pointer-events: auto;
  font-family: 'IBM Plex Mono', monospace;
  background: transparent;
  user-select: none;
}

#blastDoorGateway.is-dismissed {
  display: none !important;
  pointer-events: none !important;
}

/* ── The Two Gateway Door Leaves (Left & Right Split) ── */
.blast-door-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 44%, rgba(42, 98, 126, 0.2), transparent 31%),
              radial-gradient(circle at 82% 30%, rgba(104, 75, 170, 0.09), transparent 28%),
              linear-gradient(145deg, #050b11, #020507 66%, #071018);
  contain: layout paint style;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 1.55s cubic-bezier(0.22, 0.76, 0.2, 1), box-shadow 1s ease-out;
  will-change: transform;
}

.blast-door-leaf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.28;
  background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(166, 199, 217, 0.025) 40px),
              repeating-linear-gradient(90deg, transparent 0 39px, rgba(166, 199, 217, 0.018) 40px);
  pointer-events: none;
}

.blast-door-leaf::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: radial-gradient(circle, transparent 53%, rgba(0, 0, 0, 0.5) 100%);
}

.blast-door-leaf.left {
  left: 0;
  box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.8);
}

.blast-door-leaf.right {
  right: 0;
  box-shadow: inset 4px 0 20px rgba(0, 0, 0, 0.8);
}

/* Door Opening States */
#blastDoorGateway.is-opening .blast-door-leaf.left {
  transform: translate3d(-101%, 0, 0);
  box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.72), 0 0 0 rgba(0, 229, 255, 0);
}

#blastDoorGateway.is-opening .blast-door-leaf.right {
  transform: translate3d(101%, 0, 0);
  box-shadow: inset 4px 0 20px rgba(0, 0, 0, 0.72), 0 0 0 rgba(0, 229, 255, 0);
}

/* Inner 100vw Gate Canvas for perfect cross-seam registration */
.gateway-leaf-canvas {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 560px;
  isolation: isolate;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* During the door translation, keep the detailed HUD as a stable texture.
   This avoids repainting the duplicated SVG and glow effects on every frame. */
#blastDoorGateway.is-opening .gateway-leaf-canvas .orbit-cyan,
#blastDoorGateway.is-opening .gateway-leaf-canvas .orbit-violet,
#blastDoorGateway.is-opening .gateway-leaf-canvas .core-beam,
#blastDoorGateway.is-opening .gateway-leaf-canvas .core-beam::after,
#blastDoorGateway.is-opening .gateway-leaf-canvas .system-mark::before {
  animation-play-state: paused;
}

.blast-door-leaf.left .gateway-leaf-canvas {
  left: 0;
}

.blast-door-leaf.right .gateway-leaf-canvas {
  right: 0;
}

/* Gateway Shell and Stage Panel on each Leaf */
.gateway-leaf-canvas .gateway-shell {
  position: absolute;
  inset: clamp(8px, 1.3vw, 18px);
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr) 58px;
  overflow: hidden;
  border: 1px solid rgba(204, 224, 235, 0.42);
  border-radius: 9px;
  background: rgba(4, 9, 13, 0.72);
  box-shadow: inset 0 0 0 4px rgba(1, 3, 5, 0.88),
              inset 0 0 0 6px rgba(128, 154, 170, 0.16),
              0 0 0 1px #000,
              0 28px 90px rgba(0, 0, 0, 0.72);
}

.gateway-leaf-canvas .gateway-shell::before,
.gateway-leaf-canvas .gateway-shell::after {
  content: '';
  position: absolute;
  z-index: 24;
  width: 110px;
  height: 110px;
  pointer-events: none;
  border-color: rgba(184, 211, 224, 0.32);
  border-style: solid;
}

.gateway-leaf-canvas .gateway-shell::before {
  top: 5px;
  left: 5px;
  border-width: 2px 0 0 2px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.gateway-leaf-canvas .gateway-shell::after {
  right: 5px;
  bottom: 5px;
  border-width: 0 2px 2px 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.gateway-leaf-canvas .topbar,
.gateway-leaf-canvas .bottombar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(18px, 2.4vw, 36px);
  color: rgba(221, 231, 237, 0.88);
  font-size: clamp(0.62rem, 0.76vw, 0.82rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(26, 37, 47, 0.96), rgba(12, 19, 26, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.85);
}

.gateway-leaf-canvas .topbar {
  justify-content: flex-start;
  border-bottom: 1px solid rgba(177, 203, 217, 0.2);
}

.gateway-leaf-canvas .bottombar {
  justify-content: flex-start;
  border-top: 1px solid rgba(177, 203, 217, 0.2);
}

.gateway-leaf-canvas .bottombar span {
  color: rgba(180, 215, 230, 0.75);
  font-size: clamp(0.58rem, 0.72vw, 0.76rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gateway-leaf-canvas .topbar strong {
  color: var(--cyan, #72ebf4);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-shadow: 0 0 10px rgba(114, 235, 244, 0.5);
}

.gateway-leaf-canvas .system-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.gateway-leaf-canvas .system-mark::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan, #72ebf4);
  box-shadow: 0 0 12px var(--cyan, #72ebf4);
  animation: statusPulse 1.5s ease-in-out infinite;
}

.gateway-leaf-canvas .stage-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 158, 177, 0.26);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(9, 16, 23, 0.98), rgba(8, 15, 22, 0.72) 29%, rgba(8, 15, 22, 0.45) 50%, rgba(8, 15, 22, 0.72) 71%, rgba(9, 16, 23, 0.98)),
              radial-gradient(circle at 50% 50%, rgba(80, 180, 209, 0.12), transparent 42%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.42);
}

.gateway-leaf-canvas .stage-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.035) 4px);
}

.gateway-leaf-canvas .panel-chamfer {
  position: absolute;
  z-index: 16;
  width: 42px;
  height: 210px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #75848d, #26323a 35%, #111a20 72%);
  border: 1px solid rgba(216, 231, 238, 0.3);
  box-shadow: inset 0 0 0 4px #080d11, 0 10px 30px rgba(0, 0, 0, 0.5);
}

.gateway-leaf-canvas .panel-chamfer.left {
  left: -17px;
  clip-path: polygon(0 0, 65% 0, 100% 12%, 100% 88%, 65% 100%, 0 100%);
}

.gateway-leaf-canvas .panel-chamfer.right {
  right: -17px;
  transform: translateY(-50%) scaleX(-1);
  clip-path: polygon(0 0, 65% 0, 100% 12%, 100% 88%, 65% 100%, 0 100%);
}

.gateway-leaf-canvas .power-spine {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: clamp(118px, 13vw, 180px);
  transform: translateX(-50%);
  clip-path: polygon(24% 0, 76% 0, 76% 20%, 100% 27%, 100% 73%, 76% 80%, 76% 100%, 24% 100%, 24% 80%, 0 73%, 0 27%, 24% 20%);
  background: linear-gradient(90deg, #111a20 0 12%, #a4b2b8 13%, #263941 19%, #091014 24%, transparent 25% 75%, #091014 76%, #263941 81%, #a4b2b8 87%, #111a20 88%),
              linear-gradient(90deg, rgba(86, 227, 238, 0.2), rgba(192, 251, 255, 0.72), rgba(71, 205, 221, 0.2));
  border-block: 1px solid rgba(255, 255, 255, 0.42);
  filter: drop-shadow(0 0 18px rgba(94, 230, 239, 0.22));
}

.gateway-leaf-canvas .power-spine::before,
.gateway-leaf-canvas .power-spine::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #bffaff;
  box-shadow: 0 0 8px var(--cyan, #72ebf4), 0 0 20px rgba(114, 235, 244, 0.8);
  opacity: 0.88;
}

.gateway-leaf-canvas .power-spine::before { left: 31%; }
.gateway-leaf-canvas .power-spine::after { right: 31%; }

.gateway-leaf-canvas .core-beam {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #e9ffff;
  box-shadow: 0 0 5px #fff, 0 0 12px var(--cyan, #72ebf4), 0 0 30px rgba(80, 188, 255, 0.9);
  animation: beamCharge 2.3s ease-in-out infinite;
}

.gateway-leaf-canvas .core-beam::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 12px;
  height: 54px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #fff, transparent);
  filter: blur(2px);
  animation: beamScan 2.6s linear infinite;
}

.gateway-leaf-canvas .orbital {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(52vw, 650px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.56;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(103, 222, 236, 0.12));
}

.gateway-leaf-canvas .orbit-track {
  fill: none;
  stroke: rgba(128, 181, 205, 0.27);
  stroke-width: 1;
}

.gateway-leaf-canvas .orbit-cyan {
  fill: none;
  stroke: var(--cyan, #72ebf4);
  stroke-width: 1.2;
  stroke-dasharray: 5 13;
  transform-origin: center;
  animation: rotate 34s linear infinite;
}

.gateway-leaf-canvas .orbit-violet {
  fill: none;
  stroke: var(--violet, #927bf3);
  stroke-width: 1;
  stroke-dasharray: 3 19;
  transform-origin: center;
  animation: rotateBack 43s linear infinite;
}

.gateway-leaf-canvas .orbit-node {
  fill: var(--bright, #d9fdff);
  filter: drop-shadow(0 0 5px var(--cyan, #72ebf4));
}

.gateway-leaf-canvas .telemetry-cluster {
  position: absolute;
  z-index: 6;
  top: 50%;
  width: clamp(150px, 23vw, 330px);
  height: 230px;
  transform: translateY(-50%);
  opacity: 0.42;
  color: var(--cyan, #72ebf4);
}

.gateway-leaf-canvas .telemetry-cluster.left {
  left: clamp(30px, 5vw, 80px);
}

.gateway-leaf-canvas .telemetry-cluster.right {
  right: clamp(30px, 5vw, 80px);
  color: var(--violet, #927bf3);
  transform: translateY(-50%) scaleX(-1);
}

.gateway-leaf-canvas .telemetry-cluster::before,
.gateway-leaf-canvas .telemetry-cluster::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 58px;
  background: radial-gradient(circle, currentColor 0 2px, transparent 2.5px) 0 0 / 13px 13px,
              linear-gradient(currentColor, currentColor) 58% 50% / 38% 1px no-repeat;
  mask-image: linear-gradient(90deg, #000, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
}

.gateway-leaf-canvas .telemetry-cluster::before { top: 16px; }
.gateway-leaf-canvas .telemetry-cluster::after { bottom: 16px; transform: scaleY(-1); }

.gateway-leaf-canvas .gateway-content {
  position: absolute;
  z-index: 18;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 24px 35px;
  text-align: center;
}

.gateway-leaf-canvas .awakening-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: #9eeef5;
  font-size: clamp(0.72rem, 0.95vw, 0.96rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 14px rgba(114, 235, 244, 0.7);
}

.gateway-leaf-canvas .awakening-row::before,
.gateway-leaf-canvas .awakening-row::after {
  content: '';
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #72ebf4);
  box-shadow: 0 0 8px #72ebf4;
}
.gateway-leaf-canvas .awakening-row::after { transform: scaleX(-1); }

.gateway-leaf-canvas .given-name {
  margin-bottom: 6px;
  color: #ffffff;
  font-size: clamp(0.95rem, 1.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(114, 235, 244, 0.5);
}

.gateway-leaf-canvas .gateway-name {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(2.8rem, 6.8vw, 7.2rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 38%, #94a3b8 58%, #ffffff 82%, #cbd5e1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 24px rgba(114, 235, 244, 0.45));
  white-space: nowrap;
}

.gateway-leaf-canvas .gateway-role {
  margin-top: 16px;
  color: #72ebf4;
  font-size: clamp(0.85rem, 1.25vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 16px rgba(114, 235, 244, 0.65);
}

.gateway-leaf-canvas .loader {
  width: min(560px, 72vw);
  margin-top: clamp(28px, 5vh, 50px);
}

.gateway-leaf-canvas .loader-copy {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 9px;
  color: #e2f1f7;
  font-size: clamp(0.68rem, 0.85vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(114, 235, 244, 0.4);
}

.gateway-leaf-canvas .loader-copy span:last-child {
  color: #72ebf4;
  font-size: clamp(0.78rem, 0.95vw, 1rem);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(114, 235, 244, 0.6);
}

.gateway-leaf-canvas .loader-track {
  position: relative;
  height: 12px;
  padding: 2px;
  border: 1px solid rgba(209, 235, 241, 0.8);
  background: rgba(2, 7, 10, 0.9);
  box-shadow: inset 0 0 7px #000, 0 0 14px rgba(114, 235, 244, 0.15);
  border-radius: 3px;
}

.gateway-leaf-canvas .loader-fill {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00b4d8, #72ebf4 75%, #ffffff);
  box-shadow: 0 0 10px var(--cyan, #72ebf4), 0 0 20px rgba(114, 235, 244, 0.6);
  border-radius: 2px;
}

.gateway-leaf-canvas .loader-fill::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 14px;
  transform: translate(50%, -50%);
  background: #fff;
  box-shadow: 0 0 8px 2px #fff, 0 0 16px 4px var(--cyan, #72ebf4);
  border-radius: 1px;
}

/* Floating Skip Control */
.hud-skip-wrap {
  position: absolute;
  bottom: clamp(14px, 2.2vw, 24px);
  right: clamp(16px, 2.5vw, 36px);
  z-index: 50;
  pointer-events: auto;
}

.hud-skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.64rem, 0.75vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #bdf8fb;
  border: 1px solid rgba(114, 235, 244, 0.48);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(28, 52, 62, 0.9), rgba(12, 25, 32, 0.95));
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hud-skip-btn:hover {
  border-color: #72ebf4;
  background: rgba(45, 95, 110, 0.6);
  box-shadow: 0 0 20px rgba(114, 235, 244, 0.35);
  transform: translateY(-1px);
}

#blastDoorGateway.is-opening .hud-skip-wrap {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Keyframes for Gateway Elements */
@keyframes statusPulse {
  50% { opacity: 0.35; transform: scale(0.72); }
}

@keyframes beamCharge {
  50% { opacity: 0.58; filter: brightness(1.5); }
}

@keyframes beamScan {
  from { top: -60px; }
  to { top: calc(100% + 60px); }
}

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

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

/* Responsive Rules for Gateway Leaves */
@media (max-width: 760px) {
  .gateway-leaf-canvas .gateway-shell {
    inset: 6px;
    grid-template-rows: 48px minmax(0, 1fr) 54px;
  }
  .gateway-leaf-canvas .topbar,
  .gateway-leaf-canvas .bottombar {
    padding: 0 14px;
  }
  .gateway-leaf-canvas .power-spine {
    width: 106px;
    opacity: 0.78;
  }
  .gateway-leaf-canvas .orbital {
    width: min(94vw, 520px);
  }
  .gateway-leaf-canvas .telemetry-cluster {
    opacity: 0.2;
    width: 38vw;
  }
  .gateway-leaf-canvas .telemetry-cluster.left { left: 12px; }
  .gateway-leaf-canvas .telemetry-cluster.right { right: 12px; }
  .gateway-leaf-canvas .gateway-content { padding: 48px 16px 28px; }
  .gateway-leaf-canvas .gateway-name { font-size: clamp(2.1rem, 10.5vw, 4.5rem); }
  .gateway-leaf-canvas .gateway-role { letter-spacing: 0.13em; }
  .gateway-leaf-canvas .loader { width: min(520px, 86vw); }
  .gateway-leaf-canvas .panel-chamfer { display: none; }
}

@media (max-width: 460px) {
  .gateway-leaf-canvas .gateway-name { white-space: normal; line-height: 1.04; }
  .gateway-leaf-canvas .awakening-row::before,
  .gateway-leaf-canvas .awakening-row::after { width: 17px; }
  .gateway-leaf-canvas .gateway-role { max-width: 280px; line-height: 1.7; }
  .gateway-leaf-canvas .loader-copy { align-items: flex-end; }
}

/* Completion Flash Burst */
#blastDoorFlash {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: #dffeff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#blastDoorFlash.flash {
  opacity: 0.25;
  transition: opacity 0.05s ease;
}

/* Deliberate beacon pulse for the hero name: shine, dim, repeat. */
body.portfolio-home .hero-title .hero-name {
  animation: heroNameBeacon 2.15s ease-in-out infinite !important;
  will-change: opacity, filter;
}

@keyframes heroNameBeacon {
  0%, 100% {
    opacity: .58;
    filter: brightness(.72) saturate(.78) drop-shadow(0 0 0 rgba(114, 235, 244, 0));
  }
  50% {
    opacity: 1;
    filter: brightness(1.42) saturate(1.12) drop-shadow(0 0 16px rgba(114, 235, 244, .76));
  }
}

html[data-theme="light"] body.portfolio-home .hero-title .hero-name {
  animation-name: heroNameBeaconLight !important;
}

@keyframes heroNameBeaconLight {
  0%, 100% {
    opacity: .62;
    filter: brightness(.78) saturate(.82) drop-shadow(0 0 0 rgba(3, 105, 161, 0));
  }
  50% {
    opacity: 1;
    filter: brightness(1.22) saturate(1.08) drop-shadow(0 0 12px rgba(3, 105, 161, .34));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.portfolio-home .hero-title .hero-name {
    animation: none !important;
    opacity: 1;
    filter: none;
  }
}

/* Clear section boundaries over the geometric background. */
body.portfolio-home section.sec::after {
  top: 0;
  left: max(24px, 4vw);
  right: max(24px, 4vw);
  height: 2px;
  z-index: 4;
  opacity: 1;
  transform: none !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(142, 205, 218, .38) 7%,
    color-mix(in srgb, var(--chapter-accent, #72ebf4) 72%, #dffeff) 28%,
    rgba(218, 242, 247, .72) 50%,
    color-mix(in srgb, var(--chapter-accent, #72ebf4) 72%, #dffeff) 72%,
    rgba(142, 205, 218, .38) 93%,
    transparent 100%);
  box-shadow: 0 1px 8px rgba(114, 235, 244, .18);
}

html[data-theme="light"] body.portfolio-home section.sec::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(37, 78, 91, .34) 7%,
    color-mix(in srgb, var(--chapter-accent, #087f9b) 62%, #334155) 28%,
    rgba(30, 55, 65, .70) 50%,
    color-mix(in srgb, var(--chapter-accent, #087f9b) 62%, #334155) 72%,
    rgba(37, 78, 91, .34) 93%,
    transparent 100%);
  box-shadow: 0 1px 7px rgba(15, 54, 66, .16);
}

@media (max-width: 700px) {
  body.portfolio-home section.sec::after {
    left: 18px;
    right: 18px;
  }
}

/* Anchor each section divider directly below the fixed navigation. */
html {
  scroll-padding-top: 82px;
  scroll-behavior: smooth;
}

body.portfolio-home section.sec,
body.portfolio-home section.sec.surf {
  scroll-margin-top: 0 !important;
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 72px;
  }
}

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

/* Unified section-title casing, scale, and Skills color hierarchy. */
body.portfolio-home .st,
#about .about-heading,
#education .education-heading,
#certificates .st,
#skills .st {
  font-size: clamp(1.85rem, 3.8vw, 2.7rem);
}

#education .education-heading {
  text-transform: none;
}

#skills .st .w:nth-child(1) .wi,
#skills .st .w:nth-child(2) .wi {
  color: #f7f8fa;
  background: none;
  -webkit-text-fill-color: currentColor;
}

#skills .st .sk-work {
  color: #a68cf7;
  background: none;
  -webkit-text-fill-color: currentColor;
}

#skills .st .sk-with {
  color: #74dfa9;
  background: none;
  -webkit-text-fill-color: currentColor;
}

html[data-theme="light"] #skills .st .w:nth-child(1) .wi,
html[data-theme="light"] #skills .st .w:nth-child(2) .wi {
  color: #11202a;
}

html[data-theme="light"] #skills .st .sk-work {
  color: #6d28d9;
}

html[data-theme="light"] #skills .st .sk-with {
  color: #047857;
}