/* HERO */
.hero {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 160px 0 100px;
    position: relative; overflow: hidden;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.7) 55%, var(--bg) 100%);
}
/* Background image on a pseudo-element — avoids the iOS/Android
   background-attachment:fixed overflow bug that causes horizontal scroll */
.hero::after {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background: url('../../assets/images/general/background.jpg') center/cover no-repeat;
    pointer-events: none;
}
@media (min-width: 769px) {
    .hero::after { background-attachment: fixed; }
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent, transparent calc(100% / 12 - 1px),
        rgba(255,255,255,0.022) calc(100% / 12 - 1px),
        rgba(255,255,255,0.022) calc(100% / 12)
    );
    pointer-events: none;
}
.hero .container { text-align: center; position: relative; z-index: 2; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-display); font-size: 10px;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold-400); margin-bottom: 28px;
    opacity: 0; animation: fadeSlideUp 0.8s var(--ease-out) 0.2s forwards;
}
.hero-eyebrow::before, .hero-eyebrow::after {
    content: ''; display: block; width: 36px; height: 1px; background: var(--gold-500);
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(46px, 7.5vw, 92px);
    font-weight: 700; line-height: 1.05; letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-primary); margin-bottom: 28px;
    opacity: 0; animation: fadeSlideUp 1s var(--ease-out) 0.4s forwards;
}
.hero h1 em { font-style: normal; font-weight: 300; color: var(--text-primary); }
.hero h1 strong { font-weight: 800; display: block; }

.hero-subtitle {
    font-size: clamp(16px, 2vw, 19px);
    color: var(--text-secondary); max-width: 540px; margin: 0 auto 44px;
    font-weight: 300; line-height: 1.75;
    opacity: 0; animation: fadeSlideUp 0.9s var(--ease-out) 0.6s forwards;
}

.btn-group {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    opacity: 0; animation: fadeSlideUp 0.9s var(--ease-out) 0.75s forwards;
}

.scroll-hint {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    opacity: 0; animation: fadeIn 1s ease 1.2s forwards;
}
.scroll-hint span {
    font-family: var(--font-display); font-size: 9px;
    letter-spacing: 2.5px; color: var(--text-muted); text-transform: uppercase;
}
.scroll-line {
    width: 1px; height: 44px;
    background: linear-gradient(to bottom, var(--gold-500), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}