.hero {
    padding: var(--space-6) 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(124,110,242,.18), transparent 60%),
        var(--color-bg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 2; }

/* Skogsbakgrund — EN fast, färdigblandad bild (inte en roterande
   diabildsvisning). Bilden är förblandad i förväg med Python/PIL från
   flera av era foton (se PROJECT_STATUS.md för vilka) så mixen alltid
   ser exakt likadan ut, ingen animation som byter bild. En mycket
   långsam, subtil zoom ("Ken Burns") ger fortfarande liv åt sektionen
   utan att bilden någonsin byts ut.
*/
.hero-forest-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-forest-layer {
    position: absolute;
    inset: -2%;
    background-image: url('/assets/img/backgrounds/hero-static-mix.jpg');
    background-size: cover;
    background-position: center;
    animation: heroForestKenBurns 40s ease-in-out infinite;
    will-change: transform;
}

@keyframes heroForestKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    50%  { transform: scale(1.06) translate(-1%, -1%); }
    100% { transform: scale(1) translate(0, 0); }
}

.hero-forest-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(40,26,14,.5) 0%, rgba(20,15,20,.72) 55%, var(--color-bg) 100%),
        radial-gradient(circle at 50% 10%, rgba(240,180,90,.22), transparent 55%);
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-forest-layer { animation: none; }
}

.hero-logo {
    max-height: 170px;
    width: auto;
    margin: 0 auto var(--space-3);
    filter: drop-shadow(0 8px 24px rgba(240,180,90,.35));
    animation: heroLogoFloat 5s ease-in-out infinite;
}
@keyframes heroLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-logo { animation: none; }
}

.hero-kicker {
    display: inline-block;
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #f0c878;
    margin-bottom: var(--space-2);
}

.hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--space-2);
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
}

.hero-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}

/* Engelsk slogan under loggan i hero */
.hero-tagline-en {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    color: #f0d9a8;
    margin: 0 0 .6rem;
    opacity: .9;
}