.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(94, 201, 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: var(--font-hero);
      font-weight: 700;
      font-size: clamp(2.8rem, 8.5vw, 7.5rem);
      line-height: .9;
      letter-spacing: var(--heading-tracking);
    }

    .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(94, 201, 247, .07);
      border-color: rgba(94, 201, 247, .22);
      color: var(--steel-blue);
    }

    .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: var(--font-body);
      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: var(--font-display);
      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(--steel-blue);
    }

    .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;
    }


    @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%;
      }
    }

/* ═══════════════════════════════════════════════════════════════
   HERO TROPHY BADGE & HACKATHON WINNER STYLES
   ═══════════════════════════════════════════════════════════════ */
body.portfolio-home .hero-badges .bdg-trophy {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.48);
  background: rgba(245, 158, 11, 0.12) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.18);
  font-weight: 600;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
body.portfolio-home .hero-badges .bdg-trophy:hover {
  border-color: rgba(251, 191, 36, 0.85);
  background: rgba(245, 158, 11, 0.22) !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}
html[data-theme="light"] body.portfolio-home .hero-badges .bdg-trophy {
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.45);
  background: rgba(245, 158, 11, 0.12) !important;
}

/* A dark text-shadow paints over transparent gradient-clipped glyphs and
   muddies their fill. The existing outer glow, gradient, font, and pulse remain. */
body.portfolio-home .hero-title .wd .hero-name {
  text-shadow: none !important;
}

/* Keep the name and primary actions comfortably inside phone gutters. */
@media (max-width: 700px) {
  body.portfolio-home main .hero-wrap { min-height: 0 !important; }
  body.portfolio-home main .hero {
    min-height: auto !important;
    padding: 108px 20px 40px !important;
  }
  body.portfolio-home .hero .hero-title {
    font-size: clamp(1.75rem, 9.6vw, 3.4rem);
    line-height: 1.08;
  }
  body.portfolio-home .hero .hero-eyebrow { margin-bottom: 20px; }
  body.portfolio-home .hero .hero-sub {
    margin-top: 24px;
    padding: 12px 14px;
    font-size: .95rem;
    line-height: 1.6;
  }
  body.portfolio-home .hero .hero-badges { margin-top: 18px; }
  body.portfolio-home .hero .hero-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
  }
  body.portfolio-home .hero .hero-cta .btn-a {
    min-width: 0;
    min-height: 46px;
    padding: 12px 8px;
    font-size: .8rem;
  }
  body.portfolio-home .hero .hero-cta .btn-resume { grid-column: 1 / -1; }
}