.hero { max-width: var(--max); margin: 0 auto; padding: 112px 24px 96px; display: flex; flex-direction: column; gap: 40px; }
.hero h1 { font-weight: 700; font-size: clamp(44px, 7vw, 96px); line-height: 1.02; letter-spacing: -0.03em; max-width: 14ch; }
/* Highlights the key promise of the headline in the brand accent. */
.accent-word { color: var(--accent); }
.hero-lede { max-width: 620px; font-size: 20px; color: var(--text-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-line { width: 100%; height: auto; margin-top: 24px; overflow: visible; }

/* Load-in sequence: staggered by --i, plain CSS so it runs before any JS. */
.hero > :not(svg) { animation: rise 0.9s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }

/* Line sequence (driven by hero.js): a glowing dot travels the whole path,
   then the entire line lights up in the accent color. Without JS the line is
   shown already lit. */
.line-base { stroke: #5a4a39; }
.line-lit { stroke: var(--accent); opacity: 1; }
.line-dot { fill: var(--accent); opacity: 0; filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 14px var(--accent)); }
.line-label { opacity: 0; animation: fade 0.6s ease 0.6s forwards; }
@keyframes fade { to { opacity: 1; } }

.js .line-lit { opacity: 0; }
.js .hero-line.lit .line-lit { opacity: 1; transition: opacity 0.9s ease; animation: glow 1.8s ease-out; }
@keyframes glow {
  0% { filter: drop-shadow(0 0 0 var(--accent)); }
  35% { filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 22px var(--accent)); }
  100% { filter: drop-shadow(0 0 4px rgba(232, 160, 74, 0.55)); }
}
.hero-line.lit .line-lit { filter: drop-shadow(0 0 4px rgba(232, 160, 74, 0.55)); }