#hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}


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

.hero-word {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: .015em;
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  padding: 0 2rem;
}

/* ── CRISP LETTER RENDERING ──────────────────
   Key rules:
   - NO will-change on text (causes blur)
   - NO backface-visibility (causes compositing blur)
   - translateZ(0) ONLY after animation ends (via breathe class)
   - Start as outlined, swap to solid on land
─────────────────────────────────────────── */
.hero-letter {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: clamp(4rem, 11vw, 14rem);
  line-height: .88;
  letter-spacing: -.015em;
  display: inline-block;
  /* Start as outline — GSAP swaps to solid color on land */
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cream);
  position: relative;
  user-select: none;
  /* Anti-alias only — no compositing hints that blur */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Breathing only added after landing — safe to promote then */
.hero-letter.breathe {
  will-change: transform;
  animation: breathe var(--bd, 2.4s) var(--del, 0s) ease-in-out infinite alternate;
}
@keyframes breathe {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.009) translateY(-2px); }
}

/* Shockwave ring */
.shockwave {
  position: fixed;
  border-radius: 50%;
  border: 1.5px solid rgba(255,77,0,.55);
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -50%) scale(0);
  animation: shockExpand .75s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes shockExpand {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(9); opacity: 0; }
}

.hero-eyebrow {
  font-family: 'Clash Display', sans-serif;
  font-weight: 300;
  font-size: .72rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 2.2rem;
  opacity: 0;
  transform: translateY(10px);
  position: relative;
  z-index: 2;
}

.hero-subtitle {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3.5rem;
  opacity: 0;
  transform: translateY(12px);
  position: relative;
  z-index: 2;
  -webkit-font-smoothing: antialiased;
}

.hero-cta {
  margin-top: 2.8rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Clash Display', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  position: relative;
  z-index: 2;
  padding: .75rem 2.2rem;
  border: 1.5px solid rgba(245,240,232,.2);
  border-radius: 4rem;
  overflow: hidden;
  transition: border-color .35s, color .35s;
}
.hero-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.77,0,.175,1);
  z-index: -1;
}
.hero-cta:hover { border-color: var(--orange); color: #fff; }
.hero-cta:hover::before { transform: scaleX(1); }
.hero-arrow { display: inline-block; transition: transform .3s; }
.hero-cta:hover .hero-arrow { transform: translateY(3px); }

.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  opacity: 0;
  z-index: 2;
  animation: scrollFade 1s ease 3.5s forwards;
}
@keyframes scrollFade { to { opacity: .35; } }
.scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, transparent, var(--orange));
  animation: scrollPulse 1.6s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: scaleY(1); opacity: .6; }
  50%      { transform: scaleY(.5); opacity: 1; }
}
.scroll-label {
  font-size: .6rem;
  letter-spacing: .3em;
  color: var(--muted);
  text-transform: uppercase;
  transform: rotate(90deg);
  margin-top: .5rem;
}