/* Startsida H cinematic experiment */

.wf-startsida-h-page {
    position: relative;
    background: #f7fbff;
    color: var(--wf-text);
}

.wf-startsida-h-page .home-h-brand-seo {
    padding-block: clamp(3.5rem, 6vw, 5.5rem);
    background:
        radial-gradient(circle at 50% 0%, rgba(82, 142, 205, 0.12), transparent 46%),
        var(--wf-bg-section);
}

.wf-startsida-h-page .home-h-brand-seo-grid {
    max-width: 880px;
    margin: 0 auto;
}

.wf-startsida-h-page .home-h-brand-seo-copy {
    text-align: center;
}

.wf-startsida-h-page .home-h-brand-seo-copy .section-label {
    margin: 0 auto 1rem;
}

.wf-startsida-h-page .home-h-brand-seo-copy h2 {
    margin: 0 auto 1.25rem;
    color: var(--wf-text-strong);
}

.wf-startsida-h-page .home-h-brand-seo-lead {
    font-size: var(--wf-text-lg);
    color: var(--wf-text);
    line-height: 1.65;
    margin: 0 auto 1.1rem;
}

.wf-startsida-h-page .home-h-brand-seo-text {
    color: var(--wf-text-muted);
    line-height: 1.72;
    margin: 0 auto 1.5rem;
}

.wf-startsida-h-page .home-h-brand-seo-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
    margin-top: 1.4rem;
}

.wf-startsida-h-page .home-h-brand-seo-links a {
    color: var(--wf-text-link);
    font-weight: 700;
    font-size: var(--wf-text-sm);
    text-decoration: none;
    border-bottom: 1px solid var(--wf-border-accent);
    padding-bottom: 1px;
}

.wf-startsida-h-page .home-h-cinematic {
    position: relative;
    background:
        linear-gradient(180deg, #dff2ff 0%, #f6fbff 18%, #eef3f7 42%, #f7fbff 72%, #0e4d85 100%);
}

.wf-startsida-h-page .home-h-scene {
    position: relative;
    min-height: 100svh;
    --p: 1;
    --pe: 1;
    --pout: 1;
    --reveal: 1;
    --reveal-e: 1;
    --cinema-rise: 1;
    --cinema-mid: 1;
    --cinema-full: 1;
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene {
    min-height: 215vh;
    --p: 0;
    --pe: 0;
    --pout: 0;
    --reveal: 0;
    --reveal-e: 0;
    --cinema-rise: max(0.16, clamp(0, calc(var(--reveal-e) * 1.35), 1));
    --cinema-mid: max(0.12, clamp(0, calc((var(--reveal-e) - 0.06) * 1.85), 1));
    --cinema-full: max(0.1, clamp(0, calc((var(--reveal-e) - 0.16) * 2.2), 1));
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-2 {
    min-height: 285vh;
}

.wf-startsida-h-page .home-h-scene-pin {
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    perspective: 1800px;
    transform-style: preserve-3d;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, calc(0.1 + var(--cinema-mid) * 0.32)), transparent 35%),
        radial-gradient(circle at 18% 76%, rgba(214, 182, 66, calc(0.05 + var(--cinema-mid) * 0.12)), transparent 34%),
        radial-gradient(circle at 84% 24%, rgba(54, 113, 177, calc(0.07 + var(--cinema-mid) * 0.16)), transparent 34%);
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-pin {
    position: sticky;
    top: 0;
    height: 100svh;
}

.wf-startsida-h-page .home-h-scene-pin::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 45%, transparent 0%, transparent 34%, rgba(3, 12, 24, calc(0.2 * (1 - var(--cinema-full)))) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, calc(0.55 * (1 - var(--cinema-rise)))) 0%, transparent 48%, rgba(4, 12, 24, calc(0.24 * (1 - var(--cinema-full)))) 100%);
    opacity: calc(0.08 + (1 - var(--cinema-full)) * 0.66);
}

.wf-startsida-h-page .home-h-scene-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    filter:
        blur(calc((1 - var(--cinema-full)) * 4px))
        saturate(calc(0.35 + var(--cinema-full) * 0.75))
        contrast(calc(0.74 + var(--cinema-full) * 0.26))
        brightness(calc(0.84 + var(--cinema-full) * 0.16));
}

.wf-startsida-h-page .home-h-scene-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wf-startsida-h-page .home-h-scene-content {
    position: relative;
    z-index: 6;
    max-width: min(960px, 92vw);
    text-align: center;
    padding: 2rem 1rem;
    opacity: 1;
    transform-style: preserve-3d;
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-content {
    opacity: calc(0.18 + var(--reveal-e) * 0.82);
    transform:
        translate3d(0, calc((1 - var(--reveal-e)) * 56px), calc((1 - var(--cinema-rise)) * -140px))
        scale(calc(0.9 + var(--cinema-rise) * 0.1));
}

.wf-startsida-h-page .home-h-scene-eyebrow {
    display: inline-block;
    margin-bottom: 1.1rem;
    padding: 0.45rem 1rem;
    background: rgba(255, 255, 255, 0.52);
    color: var(--wf-text-link);
    border: 1px solid rgba(40, 100, 168, 0.24);
    border-radius: var(--wf-radius-pill);
    font-size: var(--wf-text-xs);
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(18px);
}

.wf-startsida-h-page .home-h-scene-title {
    font-size: clamp(2rem, 5vw, 4.4rem);
    line-height: 1.05;
    color: var(--wf-text-strong);
    margin: 0 0 1.4rem;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 22px 54px rgba(12, 28, 48, calc(0.14 + var(--cinema-rise) * 0.16));
}

.wf-startsida-h-page .home-h-scene-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    color: var(--wf-text-muted);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto;
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene :where(.home-h-scene-eyebrow, .home-h-scene-title, .home-h-scene-lead, .home-h-founder-text, .home-h-card-num, .home-h-card h3, .home-h-card p, .home-h-case-copy h3, .home-h-case-copy p, .home-h-case-copy a, .home-h-stat-label, .home-h-gallery-item figcaption) {
    filter:
        blur(calc((1 - var(--cinema-full)) * 1.8px))
        saturate(calc(0.42 + var(--cinema-full) * 0.58))
        contrast(calc(0.82 + var(--cinema-full) * 0.18));
}

.wf-startsida-h-page .home-h-scene-1 {
    background: linear-gradient(180deg, #85c6ea 0%, #d8effb 62%, #f6fbff 100%);
}

.wf-startsida-h-page .home-h-scene-1-bg {
    background:
        radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.64) 0%, transparent 42%),
        linear-gradient(180deg, rgba(74, 154, 207, 0.72) 0%, rgba(214, 237, 249, 0.92) 72%, rgba(255, 255, 255, 0.98) 100%);
}

.wf-startsida-h-page .home-h-depth-flight {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    transform-style: preserve-3d;
    pointer-events: none;
}

.wf-startsida-h-page .home-h-cloud {
    position: absolute;
    width: clamp(8rem, 15vw, 14rem);
    aspect-ratio: 2.8 / 1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 18% 55%, rgba(255, 255, 255, 0.66) 0 20%, transparent 21%),
        radial-gradient(circle at 36% 42%, rgba(255, 255, 255, 0.76) 0 24%, transparent 25%),
        radial-gradient(circle at 55% 54%, rgba(255, 255, 255, 0.68) 0 21%, transparent 22%),
        radial-gradient(circle at 74% 48%, rgba(255, 255, 255, 0.56) 0 18%, transparent 19%);
    filter: blur(calc(1px + (1 - var(--cinema-rise)) * 2px));
    opacity: calc(0.16 + var(--cinema-rise) * 0.58);
    transform: translate3d(calc(var(--cloud-x) + var(--pout) * var(--cloud-move)), calc(var(--cloud-y) + var(--pe) * var(--cloud-drift)), var(--cloud-z)) scale(var(--cloud-scale));
}

.wf-startsida-h-page .home-h-cloud-1 { --cloud-x: -5vw; --cloud-y: 17vh; --cloud-z: -120px; --cloud-move: 16vw; --cloud-drift: -6vh; --cloud-scale: 0.95; }
.wf-startsida-h-page .home-h-cloud-2 { --cloud-x: 58vw; --cloud-y: 12vh; --cloud-z: -180px; --cloud-move: -12vw; --cloud-drift: 5vh; --cloud-scale: 0.72; }
.wf-startsida-h-page .home-h-cloud-3 { --cloud-x: 82vw; --cloud-y: 35vh; --cloud-z: -260px; --cloud-move: -18vw; --cloud-drift: -3vh; --cloud-scale: 1.05; }

.wf-startsida-h-page .home-h-bird {
    position: absolute;
    width: var(--bird-size);
    height: calc(var(--bird-size) * 0.45);
    left: 0;
    top: 0;
    opacity: calc(0.08 + var(--bird-p) * 0.78);
    filter:
        blur(calc(var(--bird-blur) * 1px * (1 - var(--bird-p))))
        drop-shadow(0 14px 22px rgba(5, 16, 31, calc(0.08 + var(--bird-p) * 0.22)));
    transform:
        translate3d(
            calc(var(--bird-start-x) + var(--bird-p) * var(--bird-travel-x)),
            calc(var(--bird-start-y) + var(--bird-p) * var(--bird-travel-y) + (1 - var(--bird-p)) * var(--bird-p) * var(--bird-arc) * 4),
            var(--bird-z)
        )
        rotate(calc(var(--bird-rotate) + (1 - var(--bird-p)) * -12deg))
        scale(calc(var(--bird-scale) + var(--bird-p) * 0.12));
    --bird-p: clamp(0, calc((var(--pe) - var(--bird-delay)) * var(--bird-speed)), 1);
}

.wf-startsida-h-page .home-h-bird::before,
.wf-startsida-h-page .home-h-bird::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 56%;
    height: 60%;
    border-top: calc(var(--bird-size) * 0.09) solid rgba(8, 21, 38, 0.9);
}

.wf-startsida-h-page .home-h-bird::before {
    left: 0;
    border-radius: 100% 0 0 0;
    transform: rotate(20deg);
    transform-origin: 100% 0;
}

.wf-startsida-h-page .home-h-bird::after {
    right: 0;
    border-radius: 0 100% 0 0;
    transform: rotate(-20deg);
    transform-origin: 0 0;
}

.wf-startsida-h-page .home-h-bird-1 { --bird-size: 5rem; --bird-start-x: -18vw; --bird-start-y: 68vh; --bird-travel-x: 106vw; --bird-travel-y: -50vh; --bird-arc: -26vh; --bird-z: 160px; --bird-scale: 1.12; --bird-delay: 0.02; --bird-speed: 1.45; --bird-rotate: -9deg; --bird-blur: 1.2; z-index: 6; }
.wf-startsida-h-page .home-h-bird-2 { --bird-size: 2.8rem; --bird-start-x: -10vw; --bird-start-y: 48vh; --bird-travel-x: 92vw; --bird-travel-y: -16vh; --bird-arc: 18vh; --bird-z: -40px; --bird-scale: 0.9; --bird-delay: 0.08; --bird-speed: 1.25; --bird-rotate: 6deg; --bird-blur: 1.8; z-index: 4; }
.wf-startsida-h-page .home-h-bird-3 { --bird-size: 3.7rem; --bird-start-x: 108vw; --bird-start-y: 26vh; --bird-travel-x: -112vw; --bird-travel-y: 24vh; --bird-arc: -22vh; --bird-z: 80px; --bird-scale: 1; --bird-delay: 0.18; --bird-speed: 1.3; --bird-rotate: 172deg; --bird-blur: 1.4; z-index: 5; }
.wf-startsida-h-page .home-h-bird-4 { --bird-size: 2.1rem; --bird-start-x: 112vw; --bird-start-y: 58vh; --bird-travel-x: -92vw; --bird-travel-y: -36vh; --bird-arc: 12vh; --bird-z: -140px; --bird-scale: 0.72; --bird-delay: 0.3; --bird-speed: 1.05; --bird-rotate: 180deg; --bird-blur: 2.4; z-index: 3; }
.wf-startsida-h-page .home-h-bird-5 { --bird-size: 2.4rem; --bird-start-x: -12vw; --bird-start-y: 22vh; --bird-travel-x: 118vw; --bird-travel-y: 30vh; --bird-arc: -14vh; --bird-z: -80px; --bird-scale: 0.78; --bird-delay: 0.38; --bird-speed: 1.18; --bird-rotate: 8deg; --bird-blur: 2.1; z-index: 3; }

.wf-startsida-h-page .home-h-scene-1-content {
    opacity: 1;
    transform:
        translate3d(0, calc((1 - clamp(0, calc((1 - var(--p)) * 4), 1)) * -8vh), 80px)
        scale(calc(0.96 + var(--cinema-rise) * 0.04));
}

.wf-startsida-h-page .home-h-year {
    display: inline-flex;
    gap: 0;
    font-size: clamp(5rem, 18vw, 14rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.wf-startsida-h-page .home-h-digit {
    display: inline-block;
    background: linear-gradient(135deg, var(--wf-accent-deep) 0%, #1f6dad 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    --d-p: clamp(0, calc((var(--reveal-e) - var(--d-delay, 0)) * 7), 1);
    opacity: var(--d-p);
    transform:
        translate(calc(var(--d-x) * (1 - var(--d-p))), calc(var(--d-y) * (1 - var(--d-p))))
        rotate(calc(var(--d-rot) * (1 - var(--d-p))))
        scale(calc(0.4 + var(--d-p) * 0.6));
}

.wf-startsida-h-page .home-h-digit-1 { --d-delay: 0; --d-x: -60vw; --d-y: -60vh; --d-rot: -40deg; }
.wf-startsida-h-page .home-h-digit-2 { --d-delay: 0.04; --d-x: 60vw; --d-y: -60vh; --d-rot: 40deg; }
.wf-startsida-h-page .home-h-digit-3 { --d-delay: 0.08; --d-x: 60vw; --d-y: 60vh; --d-rot: -40deg; }
.wf-startsida-h-page .home-h-digit-4 { --d-delay: 0.12; --d-x: -60vw; --d-y: 60vh; --d-rot: 40deg; }

.wf-startsida-h-page .home-h-scene-2 .home-h-scene-pin,
.wf-startsida-h-page .home-h-scene-4 .home-h-scene-pin,
.wf-startsida-h-page .home-h-scene-5 .home-h-scene-pin {
    grid-template-rows: auto 1fr;
    place-items: stretch;
}

.wf-startsida-h-page .home-h-scene-2 .home-h-scene-content,
.wf-startsida-h-page .home-h-scene-4-header,
.wf-startsida-h-page .home-h-scene-5-header {
    grid-row: 1;
    align-self: start;
    padding: 5vh 1rem 1rem;
    margin: 0 auto;
}

.wf-startsida-h-page .home-h-scene-5-header {
    padding-top: clamp(2.25rem, 4vh, 3.5rem);
    padding-bottom: 0.5rem;
}

.wf-startsida-h-page .home-h-cards-stack {
    grid-row: 2;
    position: relative;
    z-index: 4;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.wf-startsida-h-page .home-h-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(300px, 64vw);
    padding: 1.2rem 1.4rem;
    background: rgba(255, 255, 255, calc(0.42 + var(--cinema-full) * 0.48));
    border: 1px solid rgba(124, 144, 166, calc(0.18 + var(--cinema-full) * 0.2));
    border-radius: var(--wf-radius-lg);
    box-shadow: 0 calc(10px + var(--cinema-full) * 20px) calc(24px + var(--cinema-full) * 36px) rgba(15, 36, 62, calc(0.08 + var(--cinema-full) * 0.12));
    pointer-events: auto;
    --x: 0vmin;
    --y: 0vmin;
    --z: 0px;
    --r: 0deg;
    --side: 0;
    --c-p: 1;
    opacity: var(--c-p);
    transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), var(--z)) rotate(var(--r));
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-card {
    --c-p: max(0.16, clamp(0, calc((var(--reveal-e) - var(--c-delay, 0)) * 5.5), 1));
    transform:
        translate3d(
            calc(-50% + (var(--side) * 68vw) * (1 - var(--c-p)) + var(--x) * var(--c-p)),
            calc(-50% + var(--y) * var(--c-p) - (1 - var(--c-p)) * var(--c-p) * 34vmin),
            calc(-180px + var(--z) * var(--c-p) + var(--c-p) * 180px)
        )
        rotateY(calc(var(--side) * -18deg * (1 - var(--c-p))))
        rotate(calc(var(--side) * 25deg * (1 - var(--c-p)) + var(--r) * var(--c-p)))
        scale(calc(0.64 + var(--c-p) * 0.36));
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-2 .home-h-scene-content {
    --scene2-title-p: clamp(0, calc(var(--p) * 5), 1);
    opacity: calc(0.16 + var(--scene2-title-p) * 0.84);
    transform:
        translate3d(0, calc((1 - var(--scene2-title-p)) * 64px - var(--pe) * 1.8vh), calc((1 - var(--scene2-title-p)) * -160px))
        scale(calc(0.9 + var(--scene2-title-p) * 0.1));
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-2 .home-h-card {
    --c-p: clamp(0, calc((var(--p) - var(--c-delay, 0)) * 4.8), 1);
    opacity: var(--c-p);
    filter:
        blur(calc((1 - var(--c-p)) * 8px))
        grayscale(calc((1 - var(--c-p)) * 0.72))
        saturate(calc(0.34 + var(--c-p) * 0.66))
        brightness(calc(0.72 + var(--c-p) * 0.28))
        contrast(calc(0.84 + var(--c-p) * 0.16));
}

.wf-startsida-h-page .home-h-card-num {
    display: inline-block;
    font-size: var(--wf-text-xs);
    font-weight: 800;
    color: var(--wf-text-link);
    letter-spacing: 0.18em;
    margin-bottom: 0.45rem;
}

.wf-startsida-h-page .home-h-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    color: var(--wf-text-strong);
    line-height: 1.2;
}

.wf-startsida-h-page .home-h-card p {
    margin: 0;
    color: var(--wf-text-muted);
    line-height: 1.5;
    font-size: var(--wf-text-sm);
}

.wf-startsida-h-page .home-h-card-1 { --x: -24vmin; --y: -13vmin; --z: 30px; --r: -3deg; --c-delay: 0.08; --side: -1; }
.wf-startsida-h-page .home-h-card-2 { --x: 24vmin; --y: -10vmin; --z: -30px; --r: 3deg; --c-delay: 0.18; --side: 1; }
.wf-startsida-h-page .home-h-card-3 { --x: 0vmin; --y: 3vmin; --z: -10px; --r: -1deg; --c-delay: 0.28; --side: -1; }
.wf-startsida-h-page .home-h-card-4 { --x: -24vmin; --y: 18vmin; --z: -50px; --r: 3deg; --c-delay: 0.38; --side: 1; }
.wf-startsida-h-page .home-h-card-5 { --x: 24vmin; --y: 21vmin; --z: -30px; --r: -3deg; --c-delay: 0.48; --side: -1; }

.wf-startsida-h-page .home-h-scene-3 .home-h-scene-pin {
    color: var(--wf-text-on-dark);
}

.wf-startsida-h-page .home-h-scene-3-bg {
    transform: translateY(calc(var(--p) * -8vh)) scale(calc(1.15 + var(--p) * 0.15));
}

.wf-startsida-h-page .home-h-scene-3-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 22, 36, 0.38) 0%, rgba(13, 22, 36, 0.86) 100%);
}

.wf-startsida-h-page .home-h-scene-3-content {
    color: var(--wf-text-on-dark);
}

.wf-startsida-h-page .home-h-scene-3-content .home-h-scene-eyebrow,
.wf-startsida-h-page .home-h-scene-6-content .home-h-scene-eyebrow {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.wf-startsida-h-page .home-h-scene-3-content .home-h-scene-title,
.wf-startsida-h-page .home-h-scene-6-title {
    color: #fff;
}

.wf-startsida-h-page .home-h-scene-3-content .home-h-scene-lead,
.wf-startsida-h-page .home-h-scene-6-content .home-h-scene-lead {
    color: rgba(255, 255, 255, 0.92);
}

.wf-startsida-h-page .home-h-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    margin: 2rem auto 1.6rem;
    max-width: 760px;
}

.wf-startsida-h-page .home-h-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    --p-stat: 1;
    opacity: var(--p-stat);
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-stat {
    --p-stat: max(0.18, clamp(0, calc((var(--reveal-e) - var(--s-delay, 0)) * 5), 1));
    filter: blur(calc((1 - var(--p-stat)) * 2px)) saturate(calc(0.5 + var(--p-stat) * 0.5));
    transform: translate3d(0, calc((1 - var(--p-stat)) * 50px), calc((1 - var(--p-stat)) * -140px)) rotateX(calc((1 - var(--p-stat)) * 8deg)) scale(calc(0.82 + var(--p-stat) * 0.18));
}

.wf-startsida-h-page .home-h-stat:nth-child(1) { --s-delay: 0.1; }
.wf-startsida-h-page .home-h-stat:nth-child(2) { --s-delay: 0.18; }
.wf-startsida-h-page .home-h-stat:nth-child(3) { --s-delay: 0.26; }

.wf-startsida-h-page .home-h-stat-value {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    background: linear-gradient(135deg, var(--wf-accent-gold) 0%, var(--wf-accent-gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wf-startsida-h-page .home-h-stat-label {
    font-size: var(--wf-text-xs);
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.wf-startsida-h-page .home-h-cases-track,
.wf-startsida-h-page .home-h-gallery {
    grid-row: 2;
    display: grid;
    gap: clamp(1rem, 2.5vw, 2rem);
    width: min(1000px, 92vw);
    margin: 0 auto;
    align-content: center;
    padding: 1rem 0 5vh;
    perspective: 1600px;
    transform-style: preserve-3d;
}

.wf-startsida-h-page .home-h-cases-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1180px, 92vw);
    gap: clamp(0.85rem, 1.4vw, 1.25rem);
    padding-bottom: 6vh;
}

.wf-startsida-h-page .home-h-case {
    background: rgba(255, 255, 255, calc(0.45 + var(--p-case) * 0.5));
    border: 1px solid rgba(124, 144, 166, 0.2);
    border-radius: var(--wf-radius-lg);
    overflow: hidden;
    box-shadow: 0 calc(10px + var(--p-case) * 18px) calc(24px + var(--p-case) * 34px) rgba(15, 36, 62, calc(0.08 + var(--p-case) * 0.12));
    --cx: 0;
    --cy: 0;
    --cr: 0;
    --p-case: 1;
    opacity: var(--p-case);
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-case {
    --p-case: max(0.18, clamp(0, calc((var(--reveal-e) - var(--c-delay, 0)) * 5), 1));
    transform: translate3d(calc(var(--cx) * (1 - var(--p-case)) * 110px), calc(var(--cy) * (1 - var(--p-case)) * 78px), calc((1 - var(--p-case)) * -160px)) rotateX(calc((1 - var(--p-case)) * 6deg)) rotateY(calc(var(--cx) * (1 - var(--p-case)) * -8deg)) rotate(calc(var(--cr) * (1 - var(--p-case)) * 1deg)) scale(calc(0.84 + var(--p-case) * 0.16));
}

.wf-startsida-h-page .home-h-case[data-case="1"] { --cx: -1; --cy: -1; --cr: -3; --c-delay: 0; }
.wf-startsida-h-page .home-h-case[data-case="2"] { --cx: 1; --cy: -1; --cr: 3; --c-delay: 0.1; }
.wf-startsida-h-page .home-h-case[data-case="3"] { --cx: -1; --cy: 1; --cr: -2; --c-delay: 0.2; }
.wf-startsida-h-page .home-h-case[data-case="4"] { --cx: 1; --cy: 1; --cr: 2; --c-delay: 0.3; }

.wf-startsida-h-page .home-h-case-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--wf-surface-soft);
    position: relative;
}

.wf-startsida-h-page .home-h-case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(calc(1 - var(--p-case))) blur(calc((1 - var(--p-case)) * 4px)) brightness(calc(0.64 + var(--p-case) * 0.36)) saturate(calc(0.3 + var(--p-case) * 0.85)) contrast(calc(0.78 + var(--p-case) * 0.22));
}

.wf-startsida-h-page .home-h-case-img-placeholder {
    display: grid;
    place-items: center;
    color: var(--wf-accent);
    background: linear-gradient(135deg, var(--wf-accent-soft) 0%, var(--wf-surface-tint) 100%);
}

.wf-startsida-h-page .home-h-case-img-placeholder svg {
    width: clamp(48px, 6vw, 72px);
    height: auto;
    opacity: 0.65;
}

.wf-startsida-h-page .home-h-case-copy {
    padding: 0.95rem 1rem 1.05rem;
}

.wf-startsida-h-page .home-h-case-copy h3 {
    margin: 0 0 0.4rem;
    color: var(--wf-text-strong);
    font-size: 1rem;
}

.wf-startsida-h-page .home-h-case-copy p {
    margin: 0 0 0.7rem;
    color: var(--wf-text-muted);
    line-height: 1.45;
    font-size: var(--wf-text-xs);
}

.wf-startsida-h-page .home-h-case-copy a {
    color: var(--wf-text-link);
    font-weight: 700;
    text-decoration: none;
    font-size: var(--wf-text-xs);
}

.wf-startsida-h-page .home-h-gallery-wrap {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(0.8rem, 1.6vh, 1.4rem);
    width: 100%;
    padding-top: clamp(2vh, 4vh, 5vh);
}

.wf-startsida-h-page .home-h-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto;
    width: min(1100px, 94vw);
    padding-inline: 1rem;
    padding-bottom: 0;
    padding-top: 0;
    align-content: start;
}

.wf-startsida-h-page .home-h-gallery-item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--wf-radius-md);
    box-shadow: 0 calc(10px + var(--p-item) * 18px) calc(24px + var(--p-item) * 34px) rgba(15, 36, 62, calc(0.08 + var(--p-item) * 0.14));
    position: relative;
    aspect-ratio: 3 / 4;
    --gx: 0;
    --gy: 0;
    --p-item: 1;
    opacity: var(--p-item);
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-gallery-item {
    --p-item: max(0.18, clamp(0, calc((var(--reveal-e) - var(--g-delay, 0)) * 4), 1));
    transform: translate3d(calc(var(--gx) * (1 - var(--p-item)) * 80px), calc(var(--gy) * (1 - var(--p-item)) * 70px), calc((1 - var(--p-item)) * -180px)) rotateX(calc((1 - var(--p-item)) * 7deg)) rotateY(calc(var(--gx) * (1 - var(--p-item)) * -7deg)) scale(calc(0.88 + var(--p-item) * 0.12));
}

.wf-startsida-h-page .home-h-gallery-1 { --gx: -1; --g-delay: 0.1; }
.wf-startsida-h-page .home-h-gallery-2 { --gx: -0.5; --gy: 1; --g-delay: 0.18; }
.wf-startsida-h-page .home-h-gallery-3 { --gx: 0; --gy: 1; --g-delay: 0.26; }
.wf-startsida-h-page .home-h-gallery-5 { --gx: 0.5; --gy: 1; --g-delay: 0.34; }
.wf-startsida-h-page .home-h-gallery-6 { --gx: 1; --g-delay: 0.42; }
.wf-startsida-h-page .home-h-gallery-4 { --gy: -1; --g-delay: 0.04; }

.wf-startsida-h-page .home-h-gallery-wide {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    height: clamp(190px, 24vh, 300px);
}

.wf-startsida-h-page .home-h-gallery-more {
    text-align: center;
    margin: 0;
    font-size: var(--wf-text-sm);
}

.wf-startsida-h-page .home-h-gallery-more a {
    color: var(--wf-text-link);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.18s ease;
}

.wf-startsida-h-page .home-h-gallery-more a:hover,
.wf-startsida-h-page .home-h-gallery-more a:focus-visible {
    opacity: 0.78;
}

.wf-startsida-h-page .home-h-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(calc(1 - var(--p-item))) blur(calc((1 - var(--p-item)) * 5px)) brightness(calc(0.62 + var(--p-item) * 0.38)) saturate(calc(0.28 + var(--p-item) * 0.9)) contrast(calc(0.86 + var(--p-item) * 0.14));
}

.wf-startsida-h-page .home-h-gallery-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--wf-bg) 0%, var(--wf-surface-soft) 100%);
    opacity: calc(1 - var(--p-item));
    z-index: 1;
    pointer-events: none;
}

.wf-startsida-h-page .home-h-gallery-item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.8rem;
    color: #fff;
    font-weight: 700;
    font-size: var(--wf-text-sm);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 2;
}

.wf-startsida-h-page .home-h-scene-founder {
    background: linear-gradient(180deg, #f7fbff 0%, #edf3f8 100%);
}

.wf-startsida-h-page .home-h-scene-founder .home-h-scene-pin {
    padding: 0 max(4vw, 1rem);
}

.wf-startsida-h-page .home-h-founder-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4rem);
    width: min(1100px, 92vw);
    align-items: center;
    transform-style: preserve-3d;
}

.wf-startsida-h-page .home-h-founder-photo {
    margin: 0;
    overflow: hidden;
    border-radius: var(--wf-radius-lg);
    box-shadow: 0 calc(10px + var(--p-photo) * 20px) calc(24px + var(--p-photo) * 40px) rgba(15, 36, 62, calc(0.08 + var(--p-photo) * 0.16));
    aspect-ratio: 3 / 4;
    max-height: 70vh;
    --p-photo: 1;
    opacity: var(--p-photo);
    position: relative;
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-founder-photo {
    --p-photo: max(0.18, clamp(0, calc(var(--reveal-e) * 3.5), 1));
    transform: translate3d(calc((1 - var(--p-photo)) * -90px), calc((1 - var(--p-photo)) * 18px), calc((1 - var(--p-photo)) * -170px)) rotateY(calc((1 - var(--p-photo)) * 8deg)) rotate(calc((1 - var(--p-photo)) * -4deg)) scale(calc(0.88 + var(--p-photo) * 0.12));
}

.wf-startsida-h-page .home-h-founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(calc(1 - var(--p-photo))) blur(calc((1 - var(--p-photo)) * 4px)) brightness(calc(0.64 + var(--p-photo) * 0.36)) saturate(calc(0.32 + var(--p-photo) * 0.82)) contrast(calc(0.84 + var(--p-photo) * 0.16));
}

.wf-startsida-h-page .home-h-founder-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--wf-surface-soft) 0%, var(--wf-bg-page) 100%);
    opacity: calc(1 - var(--p-photo));
    pointer-events: none;
    z-index: 1;
}

.wf-startsida-h-page .home-h-founder-copy {
    --p-copy: 1;
    opacity: var(--p-copy);
    text-align: left;
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-founder-copy {
    --p-copy: max(0.18, clamp(0, calc((var(--reveal-e) - 0.05) * 3.5), 1));
    transform: translate3d(calc((1 - var(--p-copy)) * 84px), 0, calc((1 - var(--p-copy)) * -120px)) scale(calc(0.95 + var(--p-copy) * 0.05));
}

.wf-startsida-h-page .home-h-founder-copy .home-h-scene-title {
    text-align: left;
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
}

.wf-startsida-h-page .home-h-founder-text {
    color: var(--wf-text-muted);
    line-height: 1.7;
    margin: 0 0 1rem;
    font-size: var(--wf-text-lg);
}

.wf-startsida-h-page .home-h-founder-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.wf-startsida-h-page .home-h-scene-6 {
    background: linear-gradient(135deg, var(--wf-accent-deep) 0%, var(--wf-accent) 100%);
    color: var(--wf-text-on-accent);
}

.wf-startsida-h-page .home-h-scene-6-content {
    z-index: 3;
    --p-cta: 1;
}

.wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-6-content {
    --p-cta: max(0.18, clamp(0, calc(var(--reveal-e) * 4), 1));
    opacity: var(--p-cta);
    transform: rotateX(calc((1 - var(--p-cta)) * -25deg)) translateY(calc((1 - var(--p-cta)) * 80px)) scale(calc(0.85 + var(--p-cta) * 0.15));
    transform-origin: 50% 100%;
}

.wf-startsida-h-page .home-h-scene-6-cta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* ============================================================
   Desktop animation timing for scenes after "Byggt och driftat".
   Default formulas complete the reveal long before the scene is
   sticky-pinned, so the entire pinned scroll is spent on already
   finished animations. Override on desktop to stretch the reveal
   across the whole pinned scroll using --p (in-pin progress) and
   spread delays so cards/items animate sequentially.
   ============================================================ */
.wf-startsida-h-page[data-cinematic-mode="desktop"][data-cinematic-js="ready"] .home-h-case {
    --p-case: max(0.05, clamp(0, calc((var(--reveal-e) * 0.25 + var(--p) * 1.4) - var(--c-delay, 0)), 1));
}
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-case[data-case="1"] { --c-delay: 0; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-case[data-case="2"] { --c-delay: 0.18; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-case[data-case="3"] { --c-delay: 0.36; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-case[data-case="4"] { --c-delay: 0.54; }

.wf-startsida-h-page[data-cinematic-mode="desktop"][data-cinematic-js="ready"] .home-h-gallery-item {
    --p-item: max(0.05, clamp(0, calc((var(--reveal-e) * 0.2 + var(--p) * 1.5) - var(--g-delay, 0)), 1));
}
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-gallery-4 { --g-delay: 0; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-gallery-1 { --g-delay: 0.15; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-gallery-2 { --g-delay: 0.27; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-gallery-3 { --g-delay: 0.39; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-gallery-5 { --g-delay: 0.51; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-gallery-6 { --g-delay: 0.62; }

.wf-startsida-h-page[data-cinematic-mode="desktop"][data-cinematic-js="ready"] .home-h-founder-photo {
    --p-photo: max(0.1, clamp(0, calc(var(--reveal-e) * 0.3 + var(--p) * 1.4), 1));
}
.wf-startsida-h-page[data-cinematic-mode="desktop"][data-cinematic-js="ready"] .home-h-founder-copy {
    --p-copy: max(0.1, clamp(0, calc((var(--reveal-e) * 0.3 + var(--p) * 1.5) - 0.18), 1));
}
.wf-startsida-h-page[data-cinematic-mode="desktop"][data-cinematic-js="ready"] .home-h-scene-6-content {
    --p-cta: max(0.1, clamp(0, calc(var(--reveal-e) * 0.35 + var(--p) * 1.5), 1));
}

/* Scene 3 stats also use the same stretched timing on desktop
   so the transition into the cases scene is consistent. */
.wf-startsida-h-page[data-cinematic-mode="desktop"][data-cinematic-js="ready"] .home-h-stat {
    --p-stat: max(0.1, clamp(0, calc((var(--reveal-e) * 0.35 + var(--p) * 1.3) - var(--s-delay, 0)), 1));
}
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-stat:nth-child(1) { --s-delay: 0; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-stat:nth-child(2) { --s-delay: 0.2; }
.wf-startsida-h-page[data-cinematic-mode="desktop"] .home-h-stat:nth-child(3) { --s-delay: 0.4; }

@media (max-width: 900px) {
    body.page-startsida-h .home-g-hero {
        padding-block: 0.85rem 1.35rem;
    }

    body.page-startsida-h .home-g-hero .container {
        width: min(100% - 0.9rem, var(--wf-container));
    }

    body.page-startsida-h .home-g-hero-tabs {
        gap: 0.48rem;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body.page-startsida-h .home-g-hero-tabs .home-f-hero-tab,
    body.page-startsida-h .home-g-hero-tabs .home-f-hero-tab.is-active {
        overflow: hidden;
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-lg);
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--wf-blue) 6%, var(--wf-surface)) 0%, var(--wf-surface) 70%),
            var(--wf-surface);
        box-shadow: var(--wf-shadow-sm);
    }

    body.page-startsida-h .home-g-hero-tabs .home-f-hero-tab + .home-f-hero-tab {
        border-top: 1px solid var(--wf-border);
    }

    body.page-startsida-h .home-g-hero-tabs .home-f-hero-tab-trigger {
        grid-template-columns: 1fr;
        min-height: 3.05rem;
        padding: 0.5rem 0.62rem;
    }

    body.page-startsida-h .home-g-hero-tabs .home-f-hero-tab-icon {
        display: none;
    }

    body.page-startsida-h .home-g-hero-tabs .home-f-hero-tab-label {
        font-size: 0.86rem;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }

    body.page-startsida-h .home-g-hero-tabs .home-f-hero-tab.is-active .home-f-hero-tab-body {
        max-height: 34rem;
        padding: 0.35rem 0.78rem 0.95rem;
    }

    body.page-startsida-h .home-g-hero-intro .hero-title-ultra,
    body.page-startsida-h .home-g-hero-tab-title {
        max-width: none;
        font-size: clamp(1.85rem, 8.6vw, 2.35rem);
        line-height: 1.04;
    }

    body.page-startsida-h .home-g-hero-intro .hero-subtitle-ultra,
    body.page-startsida-h .home-g-hero-tabs .home-f-hero-tab-body p {
        max-width: none;
        margin-top: 0.62rem;
        font-size: 0.92rem;
        line-height: 1.5;
    }

    body.page-startsida-h .home-g-hero-intro .hero-cta-group {
        gap: 0.48rem;
        margin-top: 0.85rem;
    }

    body.page-startsida-h .home-g-hero-intro .hero-cta-group .btn-ultra,
    body.page-startsida-h .home-g-hero-tabs .home-f-hero-tab-body > a {
        width: 100%;
        min-height: 40px;
    }

    .wf-startsida-h-page .home-h-scene,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene {
        min-height: auto;
        padding: 3rem 0;
    }

    .wf-startsida-h-page .home-h-scene-pin,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-pin {
        position: relative;
        height: auto;
        min-height: 80vh;
    }

    .wf-startsida-h-page .home-h-scene-content,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-content,
    .wf-startsida-h-page .home-h-scene-1-content,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-1-content,
    .wf-startsida-h-page .home-h-scene-3-content,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-3-content,
    .wf-startsida-h-page .home-h-scene-4-header,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-4-header,
    .wf-startsida-h-page .home-h-scene-5-header,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-5-header,
    .wf-startsida-h-page .home-h-scene-6-content,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-6-content,
    .wf-startsida-h-page .home-h-card,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-card,
    .wf-startsida-h-page .home-h-case,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-case,
    .wf-startsida-h-page .home-h-gallery-item,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-gallery-item,
    .wf-startsida-h-page .home-h-stat,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-stat,
    .wf-startsida-h-page .home-h-founder-photo,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-founder-photo,
    .wf-startsida-h-page .home-h-founder-copy,
    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-founder-copy,
    .wf-startsida-h-page .home-h-digit {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .wf-startsida-h-page .home-h-scene :where(.home-h-scene-eyebrow, .home-h-scene-title, .home-h-scene-lead, .home-h-founder-text, .home-h-card-num, .home-h-card h3, .home-h-card p, .home-h-case-copy h3, .home-h-case-copy p, .home-h-case-copy a, .home-h-stat-label, .home-h-gallery-item figcaption),
    .wf-startsida-h-page .home-h-case-img img,
    .wf-startsida-h-page .home-h-gallery-item img,
    .wf-startsida-h-page .home-h-founder-photo img {
        filter: none;
    }

    .wf-startsida-h-page .home-h-scene-pin::after {
        display: none;
    }

    .wf-startsida-h-page .home-h-cards-stack {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 2rem 1rem;
    }

    .wf-startsida-h-page .home-h-card {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-2 .home-h-scene-content {
        --scene2-title-p: clamp(0, calc(var(--p) * 3.2), 1);
        opacity: calc(0.18 + var(--scene2-title-p) * 0.82);
        transform:
            translate3d(0, calc((1 - var(--scene2-title-p)) * 36px), calc((1 - var(--scene2-title-p)) * -90px))
            scale(calc(0.94 + var(--scene2-title-p) * 0.06));
    }

    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-2 .home-h-card {
        --c-p: clamp(0, calc((var(--p) - (var(--c-delay, 0) * 0.58)) * 3.4), 1);
        opacity: var(--c-p);
        filter:
            blur(calc((1 - var(--c-p)) * 5px))
            grayscale(calc((1 - var(--c-p)) * 0.45))
            saturate(calc(0.45 + var(--c-p) * 0.55))
            brightness(calc(0.78 + var(--c-p) * 0.22));
        transform:
            translate3d(0, calc((1 - var(--c-p)) * 42px), calc((1 - var(--c-p)) * -90px))
            rotateX(calc((1 - var(--c-p)) * 5deg))
            scale(calc(0.94 + var(--c-p) * 0.06));
    }

    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-scene-3-content {
        --scene3-p: clamp(0, calc(var(--p) * 2.8), 1);
        opacity: calc(0.2 + var(--scene3-p) * 0.8);
        transform:
            translate3d(0, calc((1 - var(--scene3-p)) * 44px), calc((1 - var(--scene3-p)) * -110px))
            scale(calc(0.94 + var(--scene3-p) * 0.06));
    }

    .wf-startsida-h-page[data-cinematic-js="ready"] .home-h-stat {
        --p-stat: clamp(0, calc((var(--p) - (var(--s-delay, 0) * 0.48)) * 3.2), 1);
        opacity: var(--p-stat);
        filter: blur(calc((1 - var(--p-stat)) * 3px)) saturate(calc(0.5 + var(--p-stat) * 0.5));
        transform:
            translate3d(0, calc((1 - var(--p-stat)) * 38px), calc((1 - var(--p-stat)) * -80px))
            scale(calc(0.92 + var(--p-stat) * 0.08));
    }

    .wf-startsida-h-page .home-h-cases-track {
        grid-template-columns: 1fr;
    }

    .wf-startsida-h-page .home-h-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        width: min(100% - 1rem, 520px);
        max-width: 520px;
    }

    .wf-startsida-h-page .home-h-gallery-wide {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .wf-startsida-h-page .home-h-gallery-item figcaption {
        padding: 0.36rem 0.46rem;
        font-size: 0.72rem;
    }

    .wf-startsida-h-page .home-h-gallery-item::before,
    .wf-startsida-h-page .home-h-founder-photo::before {
        opacity: 0;
    }

    .wf-startsida-h-page .home-h-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.8rem;
    }

    .wf-startsida-h-page .home-h-stat-value {
        font-size: 1.8rem;
    }

    .wf-startsida-h-page .home-h-founder-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DARK THEME — startsida-h
   Override hardcoded light backgrounds with dark equivalents.
   All text uses themed tokens already (var(--wf-text-strong) etc),
   so they auto-flip. Only need to override the hardcoded colors.
   ============================================================ */
html[data-theme="dark"] .wf-startsida-h-page {
    background: var(--wf-bg-page);
}

html[data-theme="dark"] .wf-startsida-h-page .home-h-brand-seo {
    background:
        radial-gradient(circle at 50% 0%, rgba(97, 161, 234, 0.10), transparent 46%),
        var(--wf-bg-section);
}

/* Cinematic main gradient — dark mid-tones with deep accent at bottom */
html[data-theme="dark"] .wf-startsida-h-page .home-h-cinematic {
    background:
        linear-gradient(180deg, #0f151e 0%, #131b27 18%, #161e2c 42%, #111824 72%, #0a2950 100%);
}

/* Scene 1 — was a daylight sky; in dark mode = deep night sky */
html[data-theme="dark"] .wf-startsida-h-page .home-h-scene-1 {
    background: linear-gradient(180deg, #0e2546 0%, #142336 62%, #111824 100%);
}
html[data-theme="dark"] .wf-startsida-h-page .home-h-scene-1-bg {
    background:
        radial-gradient(ellipse at 50% 45%, rgba(76, 143, 217, 0.32) 0%, transparent 42%),
        linear-gradient(180deg, rgba(13, 35, 70, 0.85) 0%, rgba(17, 24, 36, 0.92) 72%, rgba(15, 21, 30, 0.98) 100%);
}

/* Scene 2 (and 4/5) — cards become dark surfaces */
html[data-theme="dark"] .wf-startsida-h-page .home-h-card {
    background: rgba(23, 31, 43, calc(0.5 + var(--cinema-full) * 0.4));
    border-color: rgba(225, 235, 247, calc(0.12 + var(--cinema-full) * 0.14));
    box-shadow: 0 calc(10px + var(--cinema-full) * 20px) calc(24px + var(--cinema-full) * 36px) rgba(0, 0, 0, calc(0.35 + var(--cinema-full) * 0.25));
}

/* Scene 4 — case cards on dark page */
html[data-theme="dark"] .wf-startsida-h-page .home-h-case {
    background: rgba(23, 31, 43, calc(0.55 + var(--p-case) * 0.35));
    border-color: rgba(225, 235, 247, 0.14);
}

/* Founder section bg — was light blue, now dark */
html[data-theme="dark"] .wf-startsida-h-page .home-h-scene-founder {
    background: linear-gradient(180deg, #111824 0%, #0e1520 100%);
}

/* Eyebrow pills (was rgba(255,255,255,0.52) — translucent white) */
html[data-theme="dark"] .wf-startsida-h-page .home-h-scene-eyebrow {
    background: rgba(97, 161, 234, 0.16);
    color: var(--wf-text-link);
    border-color: rgba(97, 161, 234, 0.28);
}

/* Stat values — gold gradient already works on any bg, but ensure stat label is light */
html[data-theme="dark"] .wf-startsida-h-page .home-h-stat-label {
    color: rgba(255, 255, 255, 0.82);
}

/* Pin overlay — adjust opacity to feel right on dark */
html[data-theme="dark"] .wf-startsida-h-page .home-h-scene-pin::after {
    background:
        radial-gradient(circle at 50% 45%, transparent 0%, transparent 34%, rgba(0, 0, 0, calc(0.45 * (1 - var(--cinema-full)))) 100%),
        linear-gradient(180deg, rgba(15, 21, 30, calc(0.65 * (1 - var(--cinema-rise)))) 0%, transparent 48%, rgba(0, 0, 0, calc(0.42 * (1 - var(--cinema-full)))) 100%);
}

/* Pin radial-gradients — adjust to subtle glows on dark */
html[data-theme="dark"] .wf-startsida-h-page .home-h-scene-pin {
    background:
        radial-gradient(circle at 50% 40%, rgba(97, 161, 234, calc(0.05 + var(--cinema-mid) * 0.16)), transparent 35%),
        radial-gradient(circle at 18% 76%, rgba(214, 182, 66, calc(0.04 + var(--cinema-mid) * 0.10)), transparent 34%),
        radial-gradient(circle at 84% 24%, rgba(54, 113, 177, calc(0.06 + var(--cinema-mid) * 0.14)), transparent 34%);
}

/* Scene 1 dawn-sky pulse: in dark mode use cooler colors */
html[data-theme="dark"] .wf-startsida-h-page .home-h-scene-1-bg {
    /* keep above; do nothing here */
}

/* If digit gradient feels too dark, brighten end stop in dark mode */
html[data-theme="dark"] .wf-startsida-h-page .home-h-digit {
    background: linear-gradient(135deg, #6fa8e0 0%, #b9d4ef 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Caption gradient on gallery items — slightly softer on dark */
html[data-theme="dark"] .wf-startsida-h-page .home-h-gallery-item figcaption {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    color: var(--wf-text-on-dark);
}