#hero { overflow: hidden; flex-direction: column; justify-content: center; text-align: center; padding-bottom: 170px; }
#hero .hr-bg { position: absolute; inset: -6% 0; background: url(../assets/hero.jpg) center/cover no-repeat; opacity: .38; will-change: transform; }
#hero .hr-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 42%, rgba(5,12,23,.25), rgba(5,12,23,.92) 80%), linear-gradient(180deg, rgba(5,12,23,.5), transparent 30%, transparent 60%, var(--bg)); }
#hero .hr-net { position: absolute; inset: 0; width: 100%; height: 100%; }
#hero .hr-in { z-index: 2; min-width: 0; display: flex; flex-direction: column; align-items: center; }
#hero .hr-word { margin: 0; font: 700 clamp(64px, 22vw, 250px)/.9 var(--head); letter-spacing: -.02em; display: flex; justify-content: center;
  filter: drop-shadow(0 0 30px rgba(34,211,238,.25)); transition: filter .5s; }
#hero .hr-word.hit { filter: drop-shadow(0 0 46px rgba(34,211,238,.55)); transition: filter .08s; }
#hero .hr-word span { display: inline-block; background: linear-gradient(180deg, #f5f9fc 10%, #7dd3fc 60%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: scale(.6) translateY(30px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
#hero .hr-word span.hr-x { background: none; color: var(--gold); -webkit-text-fill-color: var(--gold); text-shadow: 0 0 40px rgba(255,197,0,.45); }
#hero.on .hr-word span, .hx-static #hero .hr-word span { opacity: 1; transform: none; }
#hero .hr-word span:nth-child(2) { transition-delay: .08s } #hero .hr-word span:nth-child(3) { transition-delay: .16s }
#hero .hr-word span:nth-child(4) { transition-delay: .24s } #hero .hr-word span:nth-child(5) { transition-delay: .32s } #hero .hr-word span:nth-child(6) { transition-delay: .44s }
#hero .hr-lead { margin: 22px auto 0; font-size: clamp(19px, 2vw, 26px); color: var(--white); }
#hero .hr-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
#hero .pill { background: rgba(5,12,23,.6); backdrop-filter: blur(6px); }
#hero .pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
#hero .hr-foot { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 16px; }
#hero .hr-credit { margin: 0; font-size: 14px; color: var(--muted); }
#hero .hr-credit b { color: var(--text); font-weight: 600; }
#hero .hr-word span.hr-d { background: none; }
#hero .hr-credit i { font-style: normal; }
#hero .hr-credit span { display: inline; }
#hero .hr-foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: -34px; height: 220px; z-index: -1; pointer-events: none; background: linear-gradient(0deg, var(--bg) 25%, rgba(5,12,23,.75) 60%, transparent); }
#hero .hr-hint { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
#hero .hr-hint svg { width: 18px; height: 18px; animation: hrBob 1.8s var(--ease) infinite; }
@keyframes hrBob { 50% { transform: translateY(6px); } }
@media (max-width: 600px) {
  #hero { padding-bottom: 200px; }
  #hero .hr-foot { bottom: 48px; }
  #hero .hr-pills { flex-direction: column; align-items: center; gap: 10px; }
  #hero .hr-word { letter-spacing: -.03em; font-size: clamp(64px, 26vw, 200px); }
  #hero .hr-credit .hr-c2 i { display: none; }
  #hero .hr-credit { line-height: 1.5; font-size: 13px; }
  #hero .hr-credit span { display: block; white-space: nowrap; }
  #hero .hr-credit .hr-c2 { font-size: 12px; }
  #hero .hr-foot::before { height: 260px; bottom: -48px; background: linear-gradient(0deg, var(--bg) 40%, rgba(5,12,23,.85) 70%, transparent); }
}
@media (prefers-reduced-motion: reduce) { #hero .hr-word span { opacity: 1; transform: none; transition: none; } #hero .hr-hint svg { animation: none; } }