/* ══════════════════════════════════════════
   HERO SECTION (reusable)
   ══════════════════════════════════════════ */
.hero-section {
    padding: 170px 0 50px;
    margin-top: -72px;
}
.hero-section h1 {
    font-family: 'Forum', Georgia, serif;
    text-align: center;
    margin-bottom: 32px;
}
.hero-section .hero-subtitle {
    color: #E0E0E0;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
}

/* ══════════════════════════════════════════
   HERO SECTION RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    .hero-section { padding: 100px 0 50px; margin-top: -48px; }
    .hero-section h1 { margin-bottom: 8px; }
    .hero-section .hero-subtitle { font-size: 18px; line-height: 28px; }
}

/* ══════════════════════════════════════════
   KINETIC HERO  —  opt-in: add `hero-section--kinetic`
   Gold-standard hero (matches the team page): masked
   line-by-line reveal, gold-shimmer keyword, editorial
   italic-gold subtitle. Base .hero-section is left
   untouched, so the other pages that share this file
   (roadmap / about / product) are unaffected.
   ══════════════════════════════════════════ */
.hero-section--kinetic { position: relative; z-index: 1; }

.hero-section--kinetic h1 {
    font-weight: 400;
    font-size: clamp(34px, 6.4vw, 96px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
    max-width: 1100px;
    margin: 0 auto 30px;
}

/* Each line is a mask; its inner span rises up from behind it */
.hero-section--kinetic .hero-line {
    display: block;
    overflow: hidden;
    padding: 0.05em 0;
}
.hero-section--kinetic .hero-line-inner {
    display: inline-block;
    animation: heroLineRise 1.3s cubic-bezier(.16, 1, .3, 1) 0.25s both;
}
.hero-section--kinetic .hero-line--2 .hero-line-inner { animation-delay: 0.42s; }

/* Gold shimmer on the brand keyword */
.hero-section--kinetic .hero-keyword {
    background: linear-gradient(105deg, #E0CB9A 20%, #AE8C4A 40%, #F6EBCF 60%, #E0CB9A 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: heroShimmer 7s linear 1.6s infinite;
}

/* Editorial subtitle (white, matching the hero heading) */
.hero-section--kinetic .hero-subtitle {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(18px, 2.2vw, 27px);
    line-height: 1.35;
    color: #FFFFFF;
    animation: heroFadeUp 1.4s cubic-bezier(.16, 1, .3, 1) 0.95s both;
}

@keyframes heroLineRise {
    0%   { opacity: 0; transform: translateY(110%) rotate(2deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes heroShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes heroFadeUp {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    /* Narrow screens: the long headline naturally wraps, so drop the
       single-line mask (it would clip wrapped text) and fade the lines
       up instead. Wrapping stays legible, nothing gets cut off. */
    .hero-section--kinetic h1 { margin-bottom: 18px; line-height: 1.14; }
    .hero-section--kinetic .hero-line { overflow: visible; padding: 0; }
    .hero-section--kinetic .hero-line-inner {
        animation: heroFadeUp 1s cubic-bezier(.16, 1, .3, 1) 0.15s both;
    }
    .hero-section--kinetic .hero-line--2 .hero-line-inner { animation-delay: 0.3s; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section--kinetic .hero-line-inner,
    .hero-section--kinetic .hero-subtitle,
    .hero-section--kinetic .hero-keyword {
        animation: none !important;
    }
    .hero-section--kinetic .hero-line-inner,
    .hero-section--kinetic .hero-subtitle {
        opacity: 1;
        transform: none;
    }
}