/* ═══════════════════════════════════════════
   HERO — Immersive full-viewport
   ═══════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.hero__bg {
    position: absolute; inset: 0; z-index: 0;
}
.hero__media {
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero__gradient {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.7) 0%,
        rgba(0,0,0,.3) 40%,
        rgba(0,0,0,.15) 100%
    );
}
.hero__content {
    position: relative; z-index: 1;
    padding: var(--ls-space-24) 0 var(--ls-space-16);
    width: 100%;
}
.hero__text { max-width: 640px; }
.hero__title {
    font-family: var(--ls-font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #fff;
    margin-bottom: var(--ls-space-5);
}
.hero__subtitle {
    font-size: clamp(.9rem, 1.5vw, 1.0625rem);
    line-height: 1.6;
    color: rgba(255,255,255,.65);
    margin-bottom: var(--ls-space-8);
    max-width: 480px;
}
.hero__actions {
    display: flex; gap: var(--ls-space-3); flex-wrap: wrap;
}
.hero__stats {
    display: flex; align-items: center; gap: var(--ls-space-6);
    margin-top: var(--ls-space-12);
    padding-top: var(--ls-space-6);
    border-top: 1px solid rgba(255,255,255,.12);
}
.hero__stat-value {
    display: block;
    font-size: 1.5rem; font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}
.hero__stat-label {
    font-size: .75rem; font-weight: 500;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.hero__stat-divider {
    width: 1px; height: 32px;
    background: rgba(255,255,255,.12);
}
.hero__scroll {
    position: absolute;
    bottom: var(--ls-space-6);
    left: 50%;
    transform: translateX(-50%);
    animation: hero-bounce 2s infinite;
    z-index: 1;
}
@keyframes hero-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 768px) {
    .hero { min-height: 85vh; align-items: center; }
    .hero__content { padding: var(--ls-space-16) 0 var(--ls-space-12); text-align: center; }
    .hero__text { max-width: 100%; }
    .hero__subtitle { max-width: 100%; }
    .hero__actions { justify-content: center; }
    .hero__stats { justify-content: center; margin-top: var(--ls-space-8); }
    .hero__scroll { display: none; }
}