.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 — två ljusa dimmiga skogsfoton som mjukt "faded"
   mellan varandra (korstoning), istället för en enda mörk, statisk
   bild. Ett svagt Ken Burns-zoom ligger kvar på båda lagren för liv,
   och overlayn är betydligt ljusare än tidigare så mer av bilderna
   faktiskt syns.
*/
.hero-forest-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--color-bg);
}
.hero-forest-layer {
    position: absolute;
    inset: -2%;
    background-size: cover;
    background-position: center;
    animation: heroForestKenBurns 44s ease-in-out infinite;
    will-change: transform, opacity;
}
.hero-forest-layer--a {
    background-image: url('/assets/img/backgrounds/hero-forest-1.jpg');
    animation-name: heroForestKenBurnsA, heroForestCrossfadeA;
    animation-duration: 44s, 22s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite, infinite;
}
.hero-forest-layer--b {
    background-image: url('/assets/img/backgrounds/hero-forest-2.jpg');
    animation-name: heroForestKenBurnsB, heroForestCrossfadeB;
    animation-duration: 44s, 22s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

@keyframes heroForestKenBurnsA {
    0%   { transform: scale(1) translate(0, 0); }
    50%  { transform: scale(1.07) translate(-1%, -1%); }
    100% { transform: scale(1) translate(0, 0); }
}
@keyframes heroForestKenBurnsB {
    0%   { transform: scale(1.05) translate(0, 0); }
    50%  { transform: scale(1) translate(1%, -1%); }
    100% { transform: scale(1.05) translate(0, 0); }
}
/* Lager A synligt först, tonar ut i mitten, tonar in igen — B gör tvärtom */
@keyframes heroForestCrossfadeA {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@keyframes heroForestCrossfadeB {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.hero-forest-overlay {
    position: absolute;
    inset: 0;
    /* Sista stoppet matchar EXAKT samma opacitet som bodyns skogslager
       (se layout.css) — annars uppstår en hård "kant"/rät linje precis
       där hero-sektionen slutar och nästa sektion börjar, som om någon
       klippt av bakgrunden med en sax. */
    background:
        linear-gradient(180deg, rgba(20,18,28,.28) 0%, rgba(14,13,20,.4) 55%, rgba(11,13,18,.55) 100%),
        radial-gradient(circle at 50% 8%, rgba(240,200,140,.16), transparent 55%);
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-forest-layer,
    .hero-forest-layer--a,
    .hero-forest-layer--b {
        animation: none;
        opacity: 1;
    }
    .hero-forest-layer--b { opacity: 0; }
}

.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;
}