.hero {
  padding: 100px 48px 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Radial glow background */
.hero::before {
  content: "";
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 480px;
  background: radial-gradient(ellipse at center, #2d1060 0%, transparent 65%);
  pointer-events: none;
}

.hero-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.3);
  color: var(--purple-mut);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 100px;
  margin-bottom: 28px;
}

.hero-h1 {
  position: relative;
  font-size: 68px; font-weight: 900;
  line-height: 1.05; letter-spacing: -3px;
  color: #fff; margin-bottom: 24px;
}

.hero-h1 .acc { color: var(--purple-mut); }

.ml {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.05em 0.18em;
  margin-bottom: -0.18em;
}
.ml-i { display: inline-block; }
.ml-sp { display: inline-block; }

.hero-sub {
  position: relative;
  font-size: 18px; color: var(--text-muted);
  line-height: 1.65; max-width: 500px;
  margin: 0 auto 36px;
}

.hero-cta {
  position: relative;
  display: flex; align-items: center;
  justify-content: center; gap: 20px;
}

/* ── Mask-reveal animation ──
   Each .ml is overflow:hidden (the mask).
   .ml-i slides up through the mask.
   Cycle: 8s
     0%      → below mask (translateY 110%)
     10%     → arrived (easeOut snappy)
     65%     → hold
     73%     → exits upward (easeIn)
     73.01%  → instant reset below
     100%    → pause
*/
@keyframes mask-in-out {
  0% {
    transform: translateY(110%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  10%  { transform: translateY(0%); animation-timing-function: linear; }
  65%  { transform: translateY(0%); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  73%  { transform: translateY(-110%); animation-timing-function: steps(1, end); }
  73.01%, 100% { transform: translateY(110%); }
}

.ml-i {
  animation: mask-in-out 8s infinite;
  animation-fill-mode: both;
}

/* ── Stagger delays ──
   Line 1 "Letter by letter." — 60ms per letter, +100ms per space gap
   Line 2 "Finally." — starts 240ms after last letter of line 1
*/

/* Line 1: L e t t e r [sp] b y [sp] l e t t e r . */
.line1 .ml:nth-child(1)  .ml-i { animation-delay: 0.00s; }
.line1 .ml:nth-child(2)  .ml-i { animation-delay: 0.06s; }
.line1 .ml:nth-child(3)  .ml-i { animation-delay: 0.12s; }
.line1 .ml:nth-child(4)  .ml-i { animation-delay: 0.18s; }
.line1 .ml:nth-child(5)  .ml-i { animation-delay: 0.24s; }
.line1 .ml:nth-child(6)  .ml-i { animation-delay: 0.30s; }
/* ml-sp at index 7 — no animation */
.line1 .ml:nth-child(8)  .ml-i { animation-delay: 0.46s; }
.line1 .ml:nth-child(9)  .ml-i { animation-delay: 0.52s; }
/* ml-sp at index 10 — no animation */
.line1 .ml:nth-child(11) .ml-i { animation-delay: 0.68s; }
.line1 .ml:nth-child(12) .ml-i { animation-delay: 0.74s; }
.line1 .ml:nth-child(13) .ml-i { animation-delay: 0.80s; }
.line1 .ml:nth-child(14) .ml-i { animation-delay: 0.86s; }
.line1 .ml:nth-child(15) .ml-i { animation-delay: 0.92s; }
.line1 .ml:nth-child(16) .ml-i { animation-delay: 0.98s; }
.line1 .ml:nth-child(17) .ml-i { animation-delay: 1.04s; }

/* Line 2: F i n a l l y . */
.line2 .ml:nth-child(1) .ml-i { animation-delay: 1.28s; }
.line2 .ml:nth-child(2) .ml-i { animation-delay: 1.34s; }
.line2 .ml:nth-child(3) .ml-i { animation-delay: 1.40s; }
.line2 .ml:nth-child(4) .ml-i { animation-delay: 1.46s; }
.line2 .ml:nth-child(5) .ml-i { animation-delay: 1.52s; }
.line2 .ml:nth-child(6) .ml-i { animation-delay: 1.58s; }
.line2 .ml:nth-child(7) .ml-i { animation-delay: 1.64s; }
.line2 .ml:nth-child(8) .ml-i { animation-delay: 1.70s; }