/* =========================================================
   AUTOREDUTA
   Homepage v3.0
   Cinematic / Scroll Narrative
   ---------------------------------------------------------
   PART 01
   Design system
   Base styles
   Typography
   Buttons
   Navigation
   Hero
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

    /* -----------------------------------------
       COLORS
       ----------------------------------------- */

    --ar-black: #08090a;
    --ar-background: #0b0b0c;
    --ar-background-soft: #101113;
    --ar-graphite: #151619;
    --ar-graphite-light: #1b1c20;

    --ar-white: #f6f6f7;
    --ar-silver: #d7d7da;
    --ar-muted: #a7a8ad;
    --ar-muted-light: #c4c5c8;

    --ar-border: rgba(255, 255, 255, 0.12);
    --ar-border-soft: rgba(255, 255, 255, 0.07);

    --ar-overlay-light: rgba(8, 9, 10, 0.15);
    --ar-overlay-medium: rgba(8, 9, 10, 0.5);
    --ar-overlay-heavy: rgba(8, 9, 10, 0.8);


    /* -----------------------------------------
       TYPOGRAPHY
       ----------------------------------------- */

    --font-ui:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;


    /* -----------------------------------------
       CONTAINERS
       ----------------------------------------- */

    --container-max: 1600px;
    --container-text: 780px;

    --page-gutter: clamp(28px, 5vw, 80px);


    /* -----------------------------------------
       SPACING
       ----------------------------------------- */

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 96px;
    --space-3xl: 128px;
    --space-4xl: 160px;

    --section-space:
        clamp(96px, 10vw, 168px);


    /* -----------------------------------------
       RADII
       ----------------------------------------- */

    --radius-sm: 12px;
    --radius-md: 24px;
    --radius-lg: 24px;
    --radius-pill: 999px;


    /* -----------------------------------------
       MOTION
       ----------------------------------------- */

    --ease-premium:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-soft:
        cubic-bezier(0.4, 0, 0.2, 1);

    --transition-fast:
        220ms var(--ease-soft);

    --transition:
        450ms var(--ease-premium);

    --transition-slow:
        900ms var(--ease-premium);


    /* -----------------------------------------
       NAV
       ----------------------------------------- */

    --nav-height: 84px;
}



/* =========================================================
   02. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background: var(--ar-background);
}


body {
    margin: 0;
    padding: 0;

    min-width: 320px;

    background:
        var(--ar-background);

    color:
        var(--ar-white);

    font-family:
        var(--font-ui);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}


body.menu-open {
    overflow: hidden;
}

body.menu-open .site-nav {
    transform: none !important;
}

body.menu-open .floating-phone-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


main {
    position: relative;
    width: 100%;
}


img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}


img {
    height: auto;
}


video {
    width: 100%;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


ul,
ol {
    margin: 0;
    padding: 0;
}


::selection {
    background:
        rgba(215, 215, 218, 0.95);

    color:
        var(--ar-black);
}



/* =========================================================
   03. ACCESSIBILITY
   ========================================================= */

:focus-visible {

    outline:
        2px solid var(--ar-silver);

    outline-offset:
        4px;
}


.visually-hidden {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border: 0 !important;
}



/* =========================================================
   04. CONTAINERS
   ========================================================= */

.container-site {

    width: 100%;

    max-width:
        var(--container-max);

    margin-inline:
        auto;

    padding-inline:
        var(--page-gutter);
}


.container-text {

    width: 100%;

    max-width:
        var(--container-text);

    margin-inline:
        auto;
}


.section {

    position: relative;

    padding-block:
        var(--section-space);
}


.section-dark {
    background:
        var(--ar-background);
}


.section-soft {
    background:
        var(--ar-background-soft);
}



/* =========================================================
   05. TYPOGRAPHY
   ========================================================= */

.display-heading,
.display-title,
h1,
h2,
h3 {

    text-wrap:
        balance;
}


.display-heading {

    margin:
        0;

    font-family:
        var(--font-display);

    font-weight:
        400;

    letter-spacing:
        -0.025em;

    line-height:
        0.98;

    color:
        var(--ar-white);
}


.display-xl {

    font-size:
        clamp(4rem, 8.4vw, 9rem);
}


.display-lg {

    font-size:
        clamp(3.25rem, 6vw, 6.8rem);
}


.display-md {

    font-size:
        clamp(2.75rem, 4.6vw, 5rem);
}


.display-sm {

    font-size:
        clamp(2.1rem, 3vw, 3.4rem);
}


.eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin:
        0 0 22px;

    color:
        var(--ar-muted-light);

    font-family:
        var(--font-ui);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.28em;

    line-height:
        1.3;

    text-transform:
        uppercase;
}


.eyebrow::before {

    content:
        "";

    width:
        28px;

    height:
        1px;

    background:
        currentColor;

    opacity:
        0.55;
}


.eyebrow.no-line::before {
    display: none;
}


.lead-text {

    margin:
        0;

    max-width:
        650px;

    color:
        var(--ar-muted-light);

    font-size:
        clamp(1rem, 1.25vw, 1.2rem);

    font-weight:
        400;

    line-height:
        1.75;

    text-wrap:
        pretty;
}


.body-text {

    color:
        var(--ar-muted);

    font-size:
        1rem;

    line-height:
        1.8;

    text-wrap:
        pretty;
}


.text-muted-brand {
    color:
        var(--ar-muted);
}


.text-silver {
    color:
        var(--ar-silver);
}



/* =========================================================
   06. GENERIC LINK
   ========================================================= */

.link-arrow {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    padding-bottom:
        5px;

    color:
        var(--ar-white);

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    transition:
        color var(--transition-fast);
}


.link-arrow::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px;

    background:
        currentColor;

    transform:
        scaleX(0.35);

    transform-origin:
        left center;

    transition:
        transform var(--transition);
}


.link-arrow i {

    font-size:
        14px;

    transition:
        transform var(--transition);
}


.link-arrow:hover {
    color:
        var(--ar-silver);
}


.link-arrow:hover::after {

    transform:
        scaleX(1);
}


.link-arrow:hover i {

    transform:
        translateX(5px);
}



/* =========================================================
   07. BUTTONS
   ========================================================= */

.btn-ar {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        54px;

    padding:
        0 28px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        0.1em;

    line-height:
        1;

    text-transform:
        uppercase;

    overflow:
        hidden;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


.btn-ar > * {
    position:
        relative;

    z-index:
        2;
}


.btn-ar i {

    position:
        relative;

    z-index:
        2;

    font-size:
        14px;

    transition:
        transform var(--transition);
}


.btn-ar:hover i.bi-arrow-right {

    transform:
        translateX(5px);
}


.btn-ar:hover i.bi-arrow-up-right {

    transform:
        translate(3px, -3px);
}



/* LIGHT BUTTON */

.btn-ar-light {

    background:
        var(--ar-white);

    color:
        var(--ar-black);

    border-color:
        var(--ar-white);
}


.btn-ar-light:hover {

    background:
        var(--ar-silver);

    border-color:
        var(--ar-silver);

    color:
        var(--ar-black);

    transform:
        translateY(-2px);
}



/* GLASS BUTTON */

.btn-ar-glass {

    background:
        rgba(255, 255, 255, 0.055);

    color:
        var(--ar-white);

    border-color:
        rgba(255, 255, 255, 0.25);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.btn-ar-glass:hover {

    background:
        rgba(255, 255, 255, 0.12);

    border-color:
        rgba(255, 255, 255, 0.55);

    color:
        var(--ar-white);

    transform:
        translateY(-2px);
}



/* DARK BUTTON */

.btn-ar-dark {

    background:
        var(--ar-black);

    color:
        var(--ar-white);

    border-color:
        var(--ar-border);
}


.btn-ar-dark:hover {

    border-color:
        var(--ar-silver);

    background:
        var(--ar-graphite);

    color:
        var(--ar-white);
}



/* =========================================================
   08. NAVIGATION
   ========================================================= */

.site-nav {

    position:
        fixed;

    inset:
        0 0 auto;

    z-index:
        1000;

    width:
        100%;

    border-bottom:
        1px solid transparent;

    transition:
        background-color 500ms var(--ease-premium),
        border-color 500ms var(--ease-premium),
        backdrop-filter 500ms var(--ease-premium),
        transform 600ms var(--ease-premium);
}


.site-nav.is-scrolled {

    background:
        rgba(8, 9, 10, 0.74);

    border-bottom-color:
        rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(22px) saturate(115%);

    -webkit-backdrop-filter:
        blur(22px) saturate(115%);
}


/*
 * JS v3 może używać tej klasy podczas scrollowania
 * w dół.
 */

.site-nav.is-hidden {

    transform:
        translateY(-100%);
}


.site-nav .navbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        32px;

    min-height:
        var(--nav-height);

    padding-block:
        0;

    /* jak w _HTML: 1.5rem / 2.5rem / 4rem */
    padding-inline:
        1.5rem;

    position:
        relative;

    z-index:
        1002;
}


@media (min-width: 768px) {

    .site-nav .navbar {

        padding-inline:
            2.5rem;
    }
}


@media (min-width: 992px) {

    .site-nav .navbar {

        padding-inline:
            4rem;
    }
}



/* LOGO */

.brand-mark {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    flex:
        0 0 auto;

    z-index:
        2;
}


.brand-mark img {

    display:
        block;

    width:
        64px;

    height:
        auto;

    transition:
        width var(--transition),
        opacity var(--transition);
}


.site-nav.is-scrolled .brand-mark img {

    width:
        54px;
}



/* DESKTOP MENU */

.site-nav .navbar-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(18px, 1.6vw, 32px);
}


.nav-link-site {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        9px 0 !important;

    color:
        rgba(255, 255, 255, 0.72) !important;

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        0.08em;

    white-space:
        nowrap;

    transition:
        color var(--transition-fast);
}


.nav-link-site::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        2px;

    width:
        100%;

    height:
        1px;

    background:
        var(--ar-white);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform 400ms var(--ease-premium);
}


.nav-link-site:hover,
.nav-link-site:focus,
.nav-link-site.is-active {

    color:
        var(--ar-white) !important;
}


.nav-link-site:hover::after,
.nav-link-site.is-active::after {

    transform:
        scaleX(1);

    transform-origin:
        left;
}



/* PHONE */

.phone-pill {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        46px;

    padding:
        0 20px;

    border:
        1px solid var(--ar-white);

    border-radius:
        var(--radius-pill);

    background:
        var(--ar-white);

    color:
        var(--ar-black);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        0.06em;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}


.phone-pill:hover {

    background:
        var(--ar-silver);

    border-color:
        var(--ar-silver);

    color:
        var(--ar-black);
}



/* MENU TOGGLER */

.nav-toggler {

    width:
        46px;

    height:
        46px;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.035);

    color:
        var(--ar-white);

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        border-color var(--transition),
        background var(--transition);
}


.nav-toggler i {

    font-size:
        20px;
}


.nav-toggler:hover {

    border-color:
        rgba(255, 255, 255, 0.65);

    background:
        rgba(255, 255, 255, 0.1);
}



/* =========================================================
   09. MOBILE MENU
   ========================================================= */

.mobile-menu {

    position:
        fixed;

    inset:
        0;

    z-index:
        10050;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-start;

    padding:
        max(12px, env(safe-area-inset-top, 0px))
        0
        max(48px, env(safe-area-inset-bottom, 0px));

    background:
        rgba(8, 9, 10, 0.985);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(-12px);

    overflow-x:
        hidden;

    overflow-y:
        auto;

    -webkit-overflow-scrolling:
        touch;

    overscroll-behavior:
        contain;

    transition:
        opacity 450ms var(--ease-premium),
        visibility 450ms,
        transform 450ms var(--ease-premium);
}


.mobile-menu.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0);
}


.mobile-menu-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    min-height:
        var(--nav-height);

    padding:
        8px 1.5rem 12px;
}


.mobile-menu-title {

    font-size:
        11px;

    letter-spacing:
        0.32em;

    text-transform:
        uppercase;

    color:
        var(--ar-muted);
}


.mobile-menu-close {

    width:
        46px;

    height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.035);

    color:
        var(--ar-white);

    cursor:
        pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}


.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {

    background:
        var(--ar-white);

    border-color:
        var(--ar-white);

    color:
        var(--ar-black);
}


.mobile-menu .container-site,
.mobile-menu .mobile-menu-links {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-start;

    width:
        100%;

    height:
        auto;

    min-height:
        0;

    padding-inline:
        var(--page-gutter);
}


.mobile-menu a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        12px 0;

    border-bottom:
        1px solid var(--ar-border-soft);

    color:
        rgba(255, 255, 255, 0.82);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.75rem, 7vw, 2.7rem);

    font-weight:
        400;

    line-height:
        1.15;

    transition:
        color var(--transition-fast),
        padding-left var(--transition);
}


.mobile-menu a:hover {

    padding-left:
        8px;

    color:
        var(--ar-white);
}



/* =========================================================
   10. HERO
   ========================================================= */

.hero {

    position:
        relative;

    width:
        100%;

    height:
        100svh;

    min-height:
        680px;

    display:
        flex;

    align-items:
        flex-end;

    overflow:
        hidden;

    background:
        var(--ar-black);
}



/* HERO MEDIA */

.hero-media {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    overflow:
        hidden;
}


.hero-media::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(8, 9, 10, 0.15) 0%,
            rgba(8, 9, 10, 0.08) 30%,
            rgba(8, 9, 10, 0.24) 60%,
            rgba(8, 9, 10, 0.82) 100%
        );
}


.hero-video,
.hero-media video,
.hero-media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.015);

    will-change:
        transform;
}



/* Cinematic shadow vignette */

.hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 68% 46%,
            transparent 0%,
            transparent 28%,
            rgba(8, 9, 10, 0.08) 50%,
            rgba(8, 9, 10, 0.35) 100%
        ),

        linear-gradient(
            90deg,
            rgba(8, 9, 10, 0.52) 0%,
            rgba(8, 9, 10, 0.08) 48%,
            rgba(8, 9, 10, 0.12) 100%
        );
}



/* HERO CONTENT */

.hero-content {

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    padding-bottom:
        clamp(56px, 8vh, 110px);
}


.hero-copy {

    width:
        min(820px, 100%);
}


.hero .eyebrow {

    color:
        rgba(255, 255, 255, 0.72);
}


.hero-title,
.hero h1 {

    margin:
        0;

    max-width:
        960px;

    color:
        var(--ar-white);

    font-family:
        var(--font-display);

    font-size:
        clamp(4.1rem, 8.2vw, 9.2rem);

    font-weight:
        400;

    letter-spacing:
        -0.035em;

    line-height:
        0.88;

    text-wrap:
        balance;

    text-shadow:
        0 10px 50px rgba(0, 0, 0, 0.18);
}


.hero-subtitle,
.hero .lead-text {

    max-width:
        590px;

    margin:
        28px 0 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        clamp(0.95rem, 1.15vw, 1.125rem);

    line-height:
        1.75;
}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        34px;
}



/* =========================================================
   11. HERO ROUTE LINK
   ========================================================= */

.hero-route {

    position:
        absolute;

    right:
        var(--page-gutter);

    bottom:
        clamp(56px, 8vh, 110px);

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

    transition:
        color var(--transition-fast);
}


.hero-route i {

    font-size:
        17px;
}


.hero-route:hover {

    color:
        var(--ar-white);
}



/* =========================================================
   12. HERO SCROLL INDICATOR
   ========================================================= */

.hero-scroll {

    position:
        absolute;

    left:
        50%;

    bottom:
        28px;

    z-index:
        4;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        10px;

    transform:
        translateX(-50%);

    color:
        rgba(255, 255, 255, 0.52);

    pointer-events:
        none;
}


.hero-scroll-label {

    font-size:
        8px;

    font-weight:
        500;

    letter-spacing:
        0.25em;

    text-transform:
        uppercase;
}


.hero-scroll-line {

    position:
        relative;

    display:
        block;

    width:
        1px;

    height:
        42px;

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.2);
}


.hero-scroll-line::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        rgba(255, 255, 255, 0.9);

    transform:
        translateY(-100%);

    animation:
        hero-scroll-line 2.2s var(--ease-premium)
        infinite;
}


@keyframes hero-scroll-line {

    0% {
        transform:
            translateY(-100%);
    }

    45% {
        transform:
            translateY(0%);
    }

    100% {
        transform:
            translateY(100%);
    }
}



/* =========================================================
   13. HERO INTRO TRANSITION
   Natural gradient into next section
   ========================================================= */

.hero::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -1px;

    z-index:
        2;

    height:
        100px;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(11, 11, 12, 0) 0%,
            var(--ar-background) 100%
        );
}



/* =========================================================
   14. INITIAL RESPONSIVE NAV / HERO
   Full responsive section comes in part 6.
   ========================================================= */

@media (max-width: 1399.98px) {

    .site-nav .navbar-nav {
        display:
            none !important;
    }

    .nav-toggler {
        display:
            inline-flex;
    }
}


@media (max-width: 767.98px) {

    :root {
        --nav-height:
            72px;
    }


    .brand-mark img {
        width:
            52px;
    }


    .site-nav.is-scrolled .brand-mark img {
        width:
            48px;
    }


    .phone-pill {

        width:
            44px;

        height:
            44px;

        min-height:
            44px;

        padding:
            0;

        border-radius:
            50%;

        overflow:
            hidden;

        gap:
            0;

        font-size:
            0;
    }


    .phone-pill .bi {

        font-size:
            1rem;

        line-height:
            1;
    }


    .phone-pill span,
    .phone-pill .phone-label {

        display:
            none;
    }


    .hero {

        min-height:
            620px;
    }


    .hero-content {

        padding-bottom:
            88px;
    }


    .hero-copy {

        width:
            100%;
    }


    .hero-title,
    .hero h1 {

        max-width:
            94%;

        font-size:
            clamp(3.5rem, 17vw, 5.8rem);

        line-height:
            0.91;
    }


    .hero-subtitle,
    .hero .lead-text {

        max-width:
            92%;

        margin-top:
            22px;

        font-size:
            0.94rem;

        line-height:
            1.65;
    }


    .hero-actions {

        align-items:
            stretch;

        gap:
            10px;

        margin-top:
            28px;
    }


    .hero-actions .btn-ar {

        width:
            100%;
    }


    .hero-route {

        display:
            none;
    }


    .hero-scroll {

        left:
            auto;

        right:
            var(--page-gutter);

        bottom:
            24px;

        transform:
            none;
    }

}



/* =========================================================
   AUTOREDUTA
   Homepage v3.0
   ---------------------------------------------------------
   PART 02
   Scroll Narrative / Worlds of AUTOREDUTA
   ========================================================= */


/* =========================================================
   15. WORLDS SECTION
   Main scroll narrative
   ========================================================= */

.worlds-section {

    position:
        relative;

    width:
        100%;

    /*
     * 5 usług x ok. 100vh + zapas na przejścia.
     * JS wykorzysta tę wysokość do określenia progresu.
     */

    height:
        600vh;

    background:
        var(--ar-background);
}



/*
 * Element przyklejony do viewportu.
 * Użytkownik przewija "przez" worlds-section,
 * natomiast ekran pozostaje nieruchomy.
 */

.worlds-sticky {

    position:
        sticky;

    top:
        0;

    width:
        100%;

    height:
        100svh;

    min-height:
        680px;

    overflow:
        hidden;

    background:
        var(--ar-black);
}



/* =========================================================
   16. WORLDS LAYOUT
   ========================================================= */

.worlds-inner {

    position:
        relative;

    z-index:
        5;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(420px, 0.75fr);

    width:
        100%;

    height:
        100%;
}



/* =========================================================
   17. MEDIA SIDE
   ========================================================= */

.worlds-media {

    position:
        relative;

    min-width:
        0;

    height:
        100%;

    overflow:
        hidden;

    background:
        #08090a;
}



/*
 * Każdy obraz / film zajmuje dokładnie ten sam obszar.
 * JS aktywuje kolejno klasę .is-active.
 */

.world-media-item {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(1.075);

    filter:
        brightness(0.82);

    pointer-events:
        none;

    will-change:
        opacity,
        transform,
        filter;

    transition:
        opacity 1.05s var(--ease-premium),
        visibility 1.05s,
        transform 1.7s var(--ease-premium),
        filter 1.4s var(--ease-premium);
}


.world-media-item.is-active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1);

    filter:
        brightness(1);

    pointer-events:
        auto;
}



/*
 * Poprzedni element może otrzymać klasę is-leaving.
 * Dzięki temu przejście nie jest zwykłym crossfade.
 */

.world-media-item.is-leaving {

    opacity:
        0;

    visibility:
        visible;

    transform:
        scale(0.985);

    filter:
        brightness(0.6);
}



/* IMG / VIDEO */

.world-media-item img,
.world-media-item video {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    pointer-events:
        none;
}



/*
 * Delikatny ruch samego media.
 * JS może aktualizować --world-media-y od -1 do 1.
 */

.world-media-item img,
.world-media-item video {

    transform:
        translate3d(
            0,
            calc(var(--world-media-y, 0) * -24px),
            0
        )
        scale(1.035);

    transition:
        transform 0.12s linear;
}



/* =========================================================
   18. CINEMATIC MEDIA OVERLAYS
   ========================================================= */

.worlds-media::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        8;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(8, 9, 10, 0) 54%,
            rgba(8, 9, 10, 0.08) 69%,
            rgba(8, 9, 10, 0.52) 100%
        ),

        linear-gradient(
            180deg,
            rgba(8, 9, 10, 0.14) 0%,
            rgba(8, 9, 10, 0) 34%,
            rgba(8, 9, 10, 0.14) 72%,
            rgba(8, 9, 10, 0.52) 100%
        );
}



/*
 * Subtelna winieta dla bardziej filmowego kadru.
 */

.worlds-media::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        9;

    pointer-events:
        none;

    box-shadow:
        inset 0 0 130px rgba(0, 0, 0, 0.22);
}



/* =========================================================
   19. CONTENT SIDE
   ========================================================= */

.worlds-content {

    position:
        relative;

    z-index:
        10;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    height:
        100%;

    padding:
        calc(var(--nav-height) + 52px)
        clamp(52px, 5vw, 100px)
        64px;

    border-left:
        1px solid var(--ar-border-soft);

    background:

        linear-gradient(
            145deg,
            rgba(20, 21, 24, 0.96),
            rgba(9, 10, 11, 0.99)
        );
}



/*
 * Bardzo subtelne światło w tle panelu.
 */

.worlds-content::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 0% 45%,
            rgba(255, 255, 255, 0.035),
            transparent 34%
        );
}



/* =========================================================
   20. CONTENT HEADER
   ========================================================= */

.worlds-header {

    position:
        absolute;

    top:
        calc(var(--nav-height) + 34px);

    left:
        clamp(52px, 5vw, 100px);

    right:
        clamp(52px, 5vw, 100px);

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


.worlds-header .eyebrow {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.48);
}



/* "01 / 05" */

.worlds-counter {

    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;

    color:
        var(--ar-muted);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


.worlds-counter-current {

    color:
        var(--ar-white);

    font-size:
        13px;
}



/* =========================================================
   21. TEXT PANELS
   ========================================================= */

.world-copy-stack {

    position:
        relative;

    width:
        100%;

    min-height:
        430px;
}



/*
 * Wszystkie copy nakładają się na siebie.
 */

.world-copy {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate3d(0, 42px, 0);

    pointer-events:
        none;

    will-change:
        opacity,
        transform;

    transition:
        opacity 750ms var(--ease-premium),
        transform 950ms var(--ease-premium),
        visibility 750ms;
}


.world-copy.is-active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate3d(0, 0, 0);

    pointer-events:
        auto;
}



/*
 * Animacja wyjścia w górę.
 */

.world-copy.is-leaving {

    opacity:
        0;

    visibility:
        visible;

    transform:
        translate3d(0, -32px, 0);
}



/* NUMBER */

.world-number {

    margin:
        0 0 24px;

    color:
        rgba(255, 255, 255, 0.38);

    font-family:
        var(--font-ui);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.25em;

    text-transform:
        uppercase;
}



/* TITLE */

.world-title {

    max-width:
        570px;

    margin:
        0;

    color:
        var(--ar-white);

    font-family:
        var(--font-display);

    font-size:
        clamp(3rem, 4.25vw, 5.6rem);

    font-weight:
        400;

    letter-spacing:
        -0.035em;

    line-height:
        0.96;

    text-wrap:
        balance;
}



/* DESCRIPTION */

.world-description {

    max-width:
        520px;

    margin:
        30px 0 0;

    color:
        var(--ar-muted-light);

    font-size:
        clamp(0.94rem, 1vw, 1.08rem);

    line-height:
        1.8;

    text-wrap:
        pretty;
}



/* =========================================================
   22. SERVICE FEATURES
   ========================================================= */

.world-features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    margin:
        30px 0 0;

    padding:
        0;

    list-style:
        none;
}


.world-features li {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size:
        12px;

    letter-spacing:
        0.035em;

    line-height:
        1.5;
}


.world-features li::before {

    content:
        "";

    flex:
        0 0 auto;

    width:
        20px;

    height:
        1px;

    background:
        rgba(255, 255, 255, 0.52);
}



/* =========================================================
   23. WORLD CTA
   ========================================================= */

.world-action {

    margin-top:
        38px;
}


.world-action .link-arrow {

    color:
        var(--ar-white);
}



/* =========================================================
   24. PROGRESS
   ========================================================= */

.world-progress {

    position:
        absolute;

    right:
        clamp(22px, 2vw, 34px);

    top:
        50%;

    z-index:
        20;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    transform:
        translateY(-50%);
}



/*
 * Każdy element reprezentuje jeden "świat".
 */

.world-progress-item {

    position:
        relative;

    display:
        block;

    width:
        2px;

    height:
        34px;

    padding:
        0;

    border:
        0;

    background:
        rgba(255, 255, 255, 0.13);

    overflow:
        hidden;

    cursor:
        pointer;

    transition:
        height var(--transition),
        background var(--transition);
}


.world-progress-item::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        var(--ar-white);

    transform:
        scaleY(0);

    transform-origin:
        top;

    transition:
        transform 600ms var(--ease-premium);
}


.world-progress-item.is-active {

    height:
        54px;

    background:
        rgba(255, 255, 255, 0.25);
}


.world-progress-item.is-active::after {

    transform:
        scaleY(1);
}



/*
 * JS może używać CSS custom property:
 * --item-progress od 0 do 1.
 *
 * Dzięki temu progres aktualnej sekcji można animować
 * dokładnie wraz ze scrollem.
 */

.world-progress-item.is-current::after {

    transform:
        scaleY(var(--item-progress, 0));
}



/* =========================================================
   25. MEDIA LABEL
   ========================================================= */

.world-media-caption {

    position:
        absolute;

    left:
        var(--page-gutter);

    bottom:
        42px;

    z-index:
        15;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.world-media-caption::before {

    content:
        "";

    width:
        24px;

    height:
        1px;

    background:
        rgba(255, 255, 255, 0.45);
}



/* =========================================================
   26. SCROLL HINT
   ========================================================= */

.world-scroll-hint {

    position:
        absolute;

    left:
        clamp(52px, 5vw, 100px);

    bottom:
        44px;

    z-index:
        12;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    color:
        rgba(255, 255, 255, 0.36);

    font-size:
        8px;

    font-weight:
        500;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}


.world-scroll-hint-line {

    position:
        relative;

    width:
        40px;

    height:
        1px;

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.15);
}


.world-scroll-hint-line::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        rgba(255, 255, 255, 0.75);

    transform:
        translateX(-100%);

    animation:
        world-hint 2.4s var(--ease-premium)
        infinite;
}


@keyframes world-hint {

    0% {

        transform:
            translateX(-100%);
    }

    55% {

        transform:
            translateX(0);
    }

    100% {

        transform:
            translateX(100%);
    }
}



/* =========================================================
   27. FIRST / LAST TRANSITIONS
   ========================================================= */

/*
 * Góra sekcji nie powinna wyglądać jak nagłe
 * przejście z poprzedniej części.
 */

.worlds-sticky::before {

    content:
        "";

    position:
        absolute;

    inset:
        0 auto auto 0;

    z-index:
        30;

    width:
        100%;

    height:
        90px;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(11, 11, 12, 0.52),
            transparent
        );
}



/*
 * Podobnie dół świata.
 */

.worlds-sticky::after {

    content:
        "";

    position:
        absolute;

    inset:
        auto 0 0;

    z-index:
        30;

    height:
        70px;

    pointer-events:
        none;

    background:
        linear-gradient(
            0deg,
            rgba(8, 9, 10, 0.5),
            transparent
        );
}



/* =========================================================
   28. OPTIONAL FULLSCREEN VARIANT
   ========================================================= */

/*
 * Jeśli dla któregoś świata chcemy pełnoekranowy kadr,
 * np. ASO Mercedes-Benz:
 *
 * <div class="worlds-sticky worlds-sticky-full">
 */

.worlds-sticky-full .worlds-inner {

    display:
        block;
}


.worlds-sticky-full .worlds-media {

    position:
        absolute;

    inset:
        0;
}


.worlds-sticky-full .worlds-content {

    width:
        min(620px, 46vw);

    margin-left:
        auto;

    border-left:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            90deg,
            rgba(8, 9, 10, 0.1),
            rgba(8, 9, 10, 0.92) 22%,
            rgba(8, 9, 10, 0.98)
        );
}



/* =========================================================
   29. TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .worlds-inner {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(360px, 0.85fr);
    }


    .worlds-content {

        padding-left:
            44px;

        padding-right:
            54px;
    }


    .worlds-header {

        left:
            44px;

        right:
            54px;
    }


    .world-scroll-hint {

        left:
            44px;
    }


    .world-title {

        font-size:
            clamp(2.8rem, 5vw, 4.5rem);
    }

}



/* =========================================================
   30. MOBILE SCROLL NARRATIVE
   ========================================================= */

/*
 * Mobile nadal korzysta ze sticky scroll,
 * ale zmieniamy kompozycję:
 *
 * media = cały ekran
 * content = dolna część jako cinematic overlay
 *
 * Nie robimy dwóch kolumn.
 */

@media (max-width: 767.98px) {

    .worlds-section {

        /*
         * Na mobile przewijanie powinno być trochę
         * krótsze, aby efekt nie męczył.
         */

        height:
            500vh;
    }


    .worlds-sticky {

        height:
            100svh;

        min-height:
            620px;
    }


    .worlds-inner {

        display:
            block;
    }


    .worlds-media {

        position:
            absolute;

        inset:
            0;

        width:
            100%;

        height:
            100%;
    }


    .worlds-media::after {

        background:

            linear-gradient(
                180deg,
                rgba(8, 9, 10, 0.05) 0%,
                rgba(8, 9, 10, 0.04) 33%,
                rgba(8, 9, 10, 0.6) 61%,
                rgba(8, 9, 10, 0.96) 84%,
                rgba(8, 9, 10, 1) 100%
            );
    }


    .worlds-media::before {

        box-shadow:
            inset 0 0 80px rgba(0, 0, 0, 0.14);
    }


    .world-media-item img,
    .world-media-item video {

        object-position:
            center center;
    }



    /* CONTENT */

    .worlds-content {

        position:
            absolute;

        inset:
            auto 0 0;

        z-index:
            20;

        display:
            block;

        height:
            auto;

        min-height:
            48svh;

        padding:
            94px
            var(--page-gutter)
            62px;

        border-left:
            0;

        border-top:
            0;

        background:

            linear-gradient(
                180deg,
                rgba(8, 9, 10, 0),
                rgba(8, 9, 10, 0.68) 18%,
                rgba(8, 9, 10, 0.95) 44%,
                var(--ar-black) 78%
            );
    }


    .worlds-content::before {

        display:
            none;
    }



    /* HEADER */

    .worlds-header {

        position:
            absolute;

        top:
            auto;

        bottom:
            calc(48svh + 4px);

        left:
            var(--page-gutter);

        right:
            var(--page-gutter);

        z-index:
            24;
    }


    .worlds-header .eyebrow {

        font-size:
            8px;
    }


    .worlds-counter {

        font-size:
            8px;
    }



    /* COPY */

    .world-copy-stack {

        min-height:
            310px;
    }


    .world-copy {

        justify-content:
            flex-start;
    }


    .world-number {

        display:
            none;
    }


    .world-title {

        max-width:
            94%;

        font-size:
            clamp(2.7rem, 13vw, 4.3rem);

        line-height:
            0.97;
    }


    .world-description {

        max-width:
            94%;

        margin-top:
            18px;

        font-size:
            0.9rem;

        line-height:
            1.6;
    }


    .world-features {

        gap:
            7px;

        margin-top:
            18px;
    }


    .world-features li {

        font-size:
            10px;
    }


    .world-action {

        margin-top:
            24px;
    }


    .world-action .link-arrow {

        font-size:
            10px;
    }



    /* PROGRESS */

    .world-progress {

        top:
            42%;

        right:
            15px;

        gap:
            9px;
    }


    .world-progress-item {

        width:
            1px;

        height:
            21px;
    }


    .world-progress-item.is-active {

        height:
            34px;
    }



    /* MEDIA CAPTION */

    .world-media-caption {

        display:
            none;
    }


    .world-scroll-hint {

        display:
            none;
    }


    .worlds-sticky-full .worlds-content {

        width:
            100%;

        margin:
            0;

        border:
            0;
    }

}



/* =========================================================
   31. SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .worlds-content {

        min-height:
            51svh;

        padding-bottom:
            46px;
    }


    .worlds-header {

        bottom:
            calc(51svh + 1px);
    }


    .world-copy-stack {

        min-height:
            300px;
    }


    .world-title {

        font-size:
            clamp(2.45rem, 12vw, 3.65rem);
    }


    .world-description {

        font-size:
            0.86rem;
    }

}



/* =========================================================
   AUTOREDUTA
   Homepage v3.0
   ---------------------------------------------------------
   PART 03
   Purchase lead section
   Purchase form
   Latest cars
   Horizontal automotive cards
   ========================================================= */


/* =========================================================
   32. PURCHASE LEAD SECTION
   ========================================================= */

.purchase-lead-section {

    position:
        relative;

    overflow:
        hidden;

    padding-block:
        clamp(110px, 11vw, 180px);

    background:

        radial-gradient(
            circle at 75% 18%,
            rgba(255, 255, 255, 0.035),
            transparent 28%
        ),

        var(--ar-background);
}


.purchase-lead-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.012),
            transparent 38%
        );
}



/* =========================================================
   33. PURCHASE LAYOUT
   ========================================================= */

.purchase-lead-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 0.78fr);

    gap:
        clamp(70px, 8vw, 150px);

    align-items:
        center;
}



/* =========================================================
   34. PURCHASE COPY
   ========================================================= */

.purchase-lead-copy {

    max-width:
        760px;
}


.purchase-lead-title {

    margin:
        0;

    max-width:
        740px;

    color:
        var(--ar-white);

    font-family:
        var(--font-display);

    font-size:
        clamp(3.3rem, 5.3vw, 6.3rem);

    font-weight:
        400;

    letter-spacing:
        -0.035em;

    line-height:
        0.96;

    text-wrap:
        balance;
}


.purchase-lead-description {

    max-width:
        610px;

    margin:
        30px 0 0;

    color:
        var(--ar-muted-light);

    font-size:
        clamp(1rem, 1.1vw, 1.14rem);

    line-height:
        1.8;

    text-wrap:
        pretty;
}



/* =========================================================
   35. PURCHASE BENEFITS
   ========================================================= */

.purchase-benefits {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        1px;

    max-width:
        760px;

    margin-top:
        48px;

    border:
        1px solid var(--ar-border-soft);

    background:
        var(--ar-border-soft);
}


.purchase-benefit {

    min-height:
        130px;

    padding:
        26px;

    background:
        var(--ar-background);

    transition:
        background var(--transition);
}


.purchase-benefit:hover {

    background:
        var(--ar-background-soft);
}


.purchase-benefit-number {

    display:
        block;

    margin-bottom:
        22px;

    color:
        rgba(255, 255, 255, 0.35);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.22em;

    text-transform:
        uppercase;
}


.purchase-benefit-title {

    margin:
        0;

    color:
        var(--ar-white);

    font-size:
        13px;

    font-weight:
        500;

    letter-spacing:
        0.025em;

    line-height:
        1.5;
}


.purchase-benefit-text {

    margin:
        7px 0 0;

    color:
        var(--ar-muted);

    font-size:
        11px;

    line-height:
        1.6;
}



/* =========================================================
   36. PURCHASE FORM CARD
   ========================================================= */

.purchase-form-card {

    position:
        relative;

    width:
        100%;

    padding:
        clamp(32px, 3.5vw, 54px);

    border:
        1px solid rgba(255, 255, 255, 0.1);

    background:

        linear-gradient(
            145deg,
            rgba(25, 26, 29, 0.96),
            rgba(12, 13, 15, 0.985)
        );

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.22);
}


.purchase-form-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255, 255, 255, 0.04),
            transparent 32%
        );
}


.purchase-form-head {

    position:
        relative;

    z-index:
        2;

    margin-bottom:
        34px;
}


.purchase-form-kicker {

    margin:
        0 0 12px;

    color:
        var(--ar-muted);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.23em;

    text-transform:
        uppercase;
}


.purchase-form-title {

    margin:
        0;

    color:
        var(--ar-white);

    font-family:
        var(--font-display);

    font-size:
        clamp(2.1rem, 2.8vw, 3.4rem);

    font-weight:
        400;

    letter-spacing:
        -0.025em;

    line-height:
        1;
}



/* =========================================================
   37. PURCHASE FORM
   ========================================================= */

.purchase-form {

    position:
        relative;

    z-index:
        2;
}


.purchase-form-row {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px;
}


.purchase-form-group {

    margin-bottom:
        14px;
}


.purchase-form-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


.purchase-input,
.purchase-select,
.purchase-textarea {

    width:
        100%;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius:
        999px;

    outline:
        none;

    background:
        rgba(255, 255, 255, 0.035);

    color:
        var(--ar-white);

    font-family:
        var(--font-ui);

    font-size:
        13px;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}


.purchase-input,
.purchase-select {

    min-height:
        54px;

    padding:
        0 18px;
}


.purchase-textarea {

    min-height:
        120px;

    padding:
        16px 22px;

    border-radius:
        24px;

    resize:
        vertical;
}


.purchase-input::placeholder,
.purchase-textarea::placeholder {

    color:
        rgba(255, 255, 255, 0.32);
}


.purchase-input:hover,
.purchase-select:hover,
.purchase-textarea:hover {

    border-color:
        rgba(255, 255, 255, 0.25);
}


.purchase-input:focus,
.purchase-select:focus,
.purchase-textarea:focus {

    border-color:
        rgba(255, 255, 255, 0.62);

    background:
        rgba(255, 255, 255, 0.055);
}


.purchase-select {

    appearance:
        none;

    -webkit-appearance:
        none;

    cursor:
        pointer;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            rgba(255,255,255,.55) 50%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.55) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 23px,
        calc(100% - 13px) 23px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;
}


.purchase-select option {

    background:
        #151619;

    color:
        var(--ar-white);
}



/* =========================================================
   38. PURCHASE FORM FOOTER
   ========================================================= */

.purchase-form-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        22px;

    margin-top:
        22px;
}


.purchase-form-note {

    max-width:
        260px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.38);

    font-size:
        9px;

    line-height:
        1.55;
}


.purchase-form-submit {

    flex:
        0 0 auto;
}



/* =========================================================
   39. PURCHASE SUCCESS
   ========================================================= */

.purchase-form-success {

    display:
        none;

    position:
        relative;

    z-index:
        2;

    padding:
        28px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.035);
}


.purchase-form-success.is-visible {

    display:
        block;
}


.purchase-form-success-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    margin-bottom:
        18px;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius:
        50%;

    color:
        var(--ar-white);
}


.purchase-form-success h3 {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        2rem;

    font-weight:
        400;
}


.purchase-form-success p {

    margin:
        10px 0 0;

    color:
        var(--ar-muted);

    font-size:
        13px;

    line-height:
        1.7;
}



/* =========================================================
   40. LATEST CARS SECTION
   ========================================================= */

.latest-section {

    position:
        relative;

    overflow:
        hidden;

    padding-block:
        clamp(100px, 10vw, 165px);

    background:
        var(--ar-background-soft);
}


.latest-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 18% 0%,
            rgba(255, 255, 255, 0.025),
            transparent 30%
        );
}



/* =========================================================
   41. LATEST HEADER
   ========================================================= */

.latest-header {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        36px;

    margin-bottom:
        clamp(40px, 5vw, 72px);
}


.latest-header-copy {

    max-width:
        740px;
}


.latest-title {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(3rem, 4.8vw, 5.6rem);

    font-weight:
        400;

    letter-spacing:
        -0.035em;

    line-height:
        0.96;
}


.latest-header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}



/* =========================================================
   42. LATEST SWIPER
   ========================================================= */

.latest-swiper {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    overflow:
        visible;
}


.latest-swiper .swiper-wrapper {

    align-items:
        stretch;
}


.latest-swiper .swiper-slide {

    width:
        auto;

    height:
        auto;
}



/* =========================================================
   43. HORIZONTAL CAR CARD
   ========================================================= */

.car-card {

    position:
        relative;

    display:
        block;

    width:
        100%;

    overflow:
        hidden;

    color:
        var(--ar-white);

    background:
        #0d0e10;
}


/*
 * Kluczowa zmiana na podstawie uwag klienta:
 * samochody pokazujemy poziomo, nie pionowo.
 */

.car-card-media {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #121315;
}


.car-card-media img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.002);

    transition:
        transform 1.3s var(--ease-premium),
        filter 1s var(--ease-premium);
}


.car-card:hover .car-card-media img {

    transform:
        scale(1.045);

    filter:
        brightness(0.92);
}


.car-card-media::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            transparent 48%,
            rgba(8, 9, 10, 0.16) 72%,
            rgba(8, 9, 10, 0.76) 100%
        );
}



/* =========================================================
   44. CAR CARD CONTENT
   ========================================================= */

.car-card-content {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        3;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        26px;

    padding:
        clamp(22px, 2.2vw, 36px);
}


.car-card-meta {

    min-width:
        0;
}


.car-card-brand {

    margin:
        0 0 5px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.24em;

    text-transform:
        uppercase;
}


.car-card-title {

    margin:
        0;

    color:
        var(--ar-white);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.9rem, 2.5vw, 3rem);

    font-weight:
        400;

    letter-spacing:
        -0.025em;

    line-height:
        1;
}


.car-card-arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        46px;

    height:
        46px;

    border:
        1px solid rgba(255, 255, 255, 0.24);

    border-radius:
        50%;

    background:
        rgba(8, 9, 10, 0.24);

    color:
        var(--ar-white);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition),
        border-color var(--transition);
}


.car-card:hover .car-card-arrow {

    background:
        var(--ar-white);

    border-color:
        var(--ar-white);

    color:
        var(--ar-black);

    transform:
        translate(3px, -3px);
}



/* =========================================================
   45. CAR SLIDE WIDTHS
   ========================================================= */

.latest-swiper .swiper-slide {

    width:
        min(70vw, 980px);
}


@media (min-width: 1400px) {

    .latest-swiper .swiper-slide {

        width:
            min(58vw, 960px);
    }
}



/* =========================================================
   46. LATEST NAVIGATION
   ========================================================= */

.latest-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.latest-nav-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--ar-white);

    transition:
        border-color var(--transition),
        color var(--transition),
        background var(--transition);
}


.latest-nav-btn:hover:not(:disabled) {

    border-color:
        var(--ar-white);

    background:
        var(--ar-white);

    color:
        var(--ar-black);
}


.latest-nav-btn:disabled,
.latest-nav-btn.swiper-button-disabled {

    opacity:
        0.28;

    cursor:
        default;
}



/* =========================================================
   47. SLIDER PROGRESS
   ========================================================= */

.latest-progress {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        1px;

    margin-top:
        38px;

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.11);
}


.latest-progress-bar {

    width:
        100%;

    height:
        100%;

    background:
        var(--ar-white);

    transform:
        scaleX(var(--latest-progress, 0));

    transform-origin:
        left center;

    transition:
        transform 250ms linear;
}



/* =========================================================
   48. DESKTOP PURCHASE RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .purchase-lead-grid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, 0.82fr);

        gap:
            56px;
    }


    .purchase-benefits {

        grid-template-columns:
            1fr;
    }


    .purchase-benefit {

        min-height:
            auto;

        display:
            grid;

        grid-template-columns:
            46px 1fr;

        column-gap:
            16px;

        padding:
            20px 22px;
    }


    .purchase-benefit-number {

        grid-row:
            1 / span 2;

        margin:
            3px 0 0;
    }

}



/* =========================================================
   49. TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .purchase-lead-grid {

        grid-template-columns:
            1fr;

        gap:
            64px;
    }


    .purchase-lead-copy {

        max-width:
            820px;
    }


    .purchase-benefits {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .purchase-benefit {

        display:
            block;

        padding:
            24px;

        min-height:
            130px;
    }


    .purchase-benefit-number {

        margin-bottom:
            18px;
    }


    .purchase-form-card {

        max-width:
            760px;
    }


    .latest-swiper .swiper-slide {

        width:
            78vw;
    }

}



/* =========================================================
   50. MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .purchase-lead-section {

        padding-block:
            88px;
    }


    .purchase-lead-grid {

        gap:
            46px;
    }


    .purchase-lead-title {

        font-size:
            clamp(2.9rem, 14vw, 4.6rem);
    }


    .purchase-lead-description {

        margin-top:
            20px;

        font-size:
            0.94rem;

        line-height:
            1.65;
    }


    .purchase-benefits {

        grid-template-columns:
            1fr;

        margin-top:
            34px;
    }


    .purchase-benefit {

        min-height:
            auto;

        padding:
            20px;
    }


    .purchase-form-card {

        padding:
            28px 20px;
    }


    .purchase-form-row {

        grid-template-columns:
            1fr;

        gap:
            0;
    }


    .purchase-form-footer {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            18px;
    }


    .purchase-form-note {

        max-width:
            none;
    }


    .purchase-form-submit,
    .purchase-form-submit .btn-ar {

        width:
            100%;
    }



    /* Latest */

    .latest-section {

        padding-block:
            86px;
    }


    .latest-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        margin-bottom:
            34px;
    }


    .latest-title {

        font-size:
            clamp(2.8rem, 13vw, 4.2rem);
    }


    .latest-header-actions {

        width:
            100%;

        justify-content:
            space-between;
    }


    .latest-swiper {

        overflow:
            visible;
    }


    /*
     * Widoczny fragment kolejnego samochodu.
     * Użytkownik od razu rozumie, że slider można przesunąć.
     */

    .latest-swiper .swiper-slide {

        width:
            86vw;
    }


    .car-card-media {

        aspect-ratio:
            16 / 10;
    }


    .car-card-content {

        padding:
            20px;
    }


    .car-card-title {

        font-size:
            clamp(1.8rem, 8vw, 2.5rem);
    }


    .car-card-arrow {

        width:
            42px;

        height:
            42px;
    }


    .latest-nav {

        display:
            none;
    }


    .latest-progress {

        margin-top:
            26px;
    }

}



/* =========================================================
   51. SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .purchase-form-card {

        margin-inline:
            calc(var(--page-gutter) * -0.25);
    }


    .purchase-input,
    .purchase-select {

        min-height:
            52px;
    }


    .latest-swiper .swiper-slide {

        width:
            89vw;
    }


    .car-card-media {

        aspect-ratio:
            16 / 10.5;
    }


    .car-card-brand {

        font-size:
            8px;
    }


    .car-card-arrow {

        width:
            38px;

        height:
            38px;
    }

}



/* =========================================================
   AUTOREDUTA
   Homepage v3.0
   ---------------------------------------------------------
   PART 04
   Mercedes-Benz service
   Insurance
   Claims
   Newsletter
   ========================================================= */


/* =========================================================
   52. MERCEDES-BENZ CINEMATIC BAND
   ========================================================= */

.mercedes-section {

    position:
        relative;

    min-height:
        clamp(680px, 82vh, 920px);

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--ar-black);
}



/* MEDIA */

.mercedes-media {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;
}


.mercedes-media img,
.mercedes-media video {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.025);

    will-change:
        transform;
}



/* OVERLAYS */

.mercedes-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(8, 9, 10, 0.92) 0%,
            rgba(8, 9, 10, 0.78) 26%,
            rgba(8, 9, 10, 0.42) 52%,
            rgba(8, 9, 10, 0.08) 100%
        ),

        linear-gradient(
            180deg,
            rgba(8, 9, 10, 0.08) 0%,
            rgba(8, 9, 10, 0) 46%,
            rgba(8, 9, 10, 0.45) 100%
        );
}


.mercedes-section::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        2;

    height:
        140px;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            rgba(11, 11, 12, 0),
            var(--ar-background)
        );
}



/* CONTENT */

.mercedes-content {

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    padding-block:
        clamp(110px, 12vw, 180px);
}


.mercedes-copy {

    max-width:
        720px;
}


.mercedes-title {

    margin:
        0;

    max-width:
        680px;

    font-family:
        var(--font-display);

    font-size:
        clamp(3.6rem, 6vw, 7rem);

    font-weight:
        400;

    letter-spacing:
        -0.035em;

    line-height:
        0.94;

    color:
        var(--ar-white);

    text-wrap:
        balance;
}


.mercedes-description {

    max-width:
        570px;

    margin:
        28px 0 0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        clamp(0.96rem, 1.1vw, 1.1rem);

    line-height:
        1.78;
}


.mercedes-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        36px;
}



/* BADGE / WORDMARK */

.mercedes-mark {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        26px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}


.mercedes-mark::before {

    content:
        "";

    width:
        30px;

    height:
        1px;

    background:
        rgba(255, 255, 255, 0.42);
}



/* =========================================================
   53. SERVICE SUPPORT SECTION
   Insurance + claims
   ========================================================= */

.support-section {

    position:
        relative;

    padding-block:
        clamp(100px, 10vw, 160px);

    background:
        var(--ar-background);
}


.support-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        48px;

    margin-bottom:
        clamp(42px, 5vw, 70px);
}


.support-header-copy {

    max-width:
        760px;
}


.support-title {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(3rem, 4.7vw, 5.5rem);

    font-weight:
        400;

    letter-spacing:
        -0.03em;

    line-height:
        0.98;

    color:
        var(--ar-white);
}


.support-intro {

    max-width:
        460px;

    margin:
        0;

    color:
        var(--ar-muted);

    font-size:
        0.95rem;

    line-height:
        1.72;
}



/* =========================================================
   54. SUPPORT GRID
   ========================================================= */

.support-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        1px;

    background:
        var(--ar-border-soft);

    border:
        1px solid var(--ar-border-soft);
}



/* =========================================================
   55. SUPPORT CARD
   ========================================================= */

.support-card {

    position:
        relative;

    min-height:
        520px;

    overflow:
        hidden;

    background:
        #0d0e10;
}


.support-card-media {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;
}


.support-card-media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.015);

    transition:
        transform 1.25s var(--ease-premium),
        filter 1s var(--ease-premium);
}


.support-card:hover .support-card-media img {

    transform:
        scale(1.055);

    filter:
        brightness(0.88);
}


.support-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            rgba(8, 9, 10, 0.05) 0%,
            rgba(8, 9, 10, 0.08) 34%,
            rgba(8, 9, 10, 0.72) 75%,
            rgba(8, 9, 10, 0.96) 100%
        );
}



/* CONTENT */

.support-card-body {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        3;

    padding:
        clamp(28px, 3.4vw, 50px);
}


.support-card-index {

    margin:
        0 0 16px;

    color:
        rgba(255, 255, 255, 0.42);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}


.support-card-title {

    margin:
        0;

    max-width:
        520px;

    color:
        var(--ar-white);

    font-family:
        var(--font-display);

    font-size:
        clamp(2.4rem, 3.3vw, 4rem);

    font-weight:
        400;

    letter-spacing:
        -0.03em;

    line-height:
        0.98;
}


.support-card-text {

    max-width:
        500px;

    margin:
        20px 0 0;

    color:
        rgba(255, 255, 255, 0.62);

    font-size:
        0.9rem;

    line-height:
        1.7;
}


.support-card-action {

    margin-top:
        28px;
}



/* =========================================================
   56. NEWSLETTER
   ========================================================= */

.newsletter-section {

    position:
        relative;

    overflow:
        hidden;

    border-top:
        1px solid var(--ar-border-soft);

    border-bottom:
        1px solid var(--ar-border-soft);

    background:

        radial-gradient(
            circle at 78% 18%,
            rgba(255, 255, 255, 0.035),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #111214,
            #0d0e10
        );
}


.newsletter-inner {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(440px, 0.85fr);

    gap:
        clamp(64px, 8vw, 140px);

    align-items:
        center;

    padding-block:
        clamp(90px, 9vw, 145px);
}



/* COPY */

.newsletter-copy {

    max-width:
        740px;
}


.newsletter-title {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(3rem, 4.8vw, 5.6rem);

    font-weight:
        400;

    letter-spacing:
        -0.035em;

    line-height:
        0.98;
}


.newsletter-description {

    max-width:
        600px;

    margin:
        24px 0 0;

    color:
        var(--ar-muted-light);

    font-size:
        0.98rem;

    line-height:
        1.75;
}



/* INCENTIVE */

.newsletter-benefit {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    max-width:
        610px;

    margin-top:
        28px;

    padding-top:
        24px;

    border-top:
        1px solid var(--ar-border-soft);
}


.newsletter-benefit-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        40px;

    height:
        40px;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius:
        50%;

    color:
        var(--ar-white);
}


.newsletter-benefit-text {

    margin:
        0;

    color:
        var(--ar-muted);

    font-size:
        0.85rem;

    line-height:
        1.65;
}



/* =========================================================
   57. NEWSLETTER FORM
   ========================================================= */

.newsletter-form-wrap {

    position:
        relative;
}


.newsletter-form {

    display:
        grid;

    gap:
        12px;
}


.newsletter-field {

    position:
        relative;
}


.newsletter-input {

    width:
        100%;

    height:
        58px;

    padding:
        0 20px;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius:
        999px;

    outline:
        none;

    background:
        rgba(255, 255, 255, 0.025);

    color:
        var(--ar-white);

    font-size:
        13px;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}


.newsletter-input::placeholder {

    color:
        rgba(255, 255, 255, 0.34);
}


.newsletter-input:hover {

    border-color:
        rgba(255, 255, 255, 0.23);
}


.newsletter-input:focus {

    border-color:
        rgba(255, 255, 255, 0.6);

    background:
        rgba(255, 255, 255, 0.045);
}


.newsletter-submit {

    width:
        100%;

    min-height:
        58px;
}



/* GDPR / INFO */

.newsletter-note {

    margin:
        12px 0 0;

    color:
        rgba(255, 255, 255, 0.34);

    font-size:
        9px;

    line-height:
        1.55;
}



/* =========================================================
   58. NEWSLETTER SUCCESS
   ========================================================= */

.newsletter-success {

    display:
        none;

    padding:
        34px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.025);
}


.newsletter-success.is-visible {

    display:
        block;
}


.newsletter-success-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        18px;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius:
        50%;

    color:
        var(--ar-white);
}


.newsletter-success-title {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        2.1rem;

    font-weight:
        400;
}


.newsletter-success-text {

    margin:
        9px 0 0;

    color:
        var(--ar-muted);

    font-size:
        13px;

    line-height:
        1.7;
}



/* =========================================================
   59. LARGE TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .newsletter-inner {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, 0.9fr);

        gap:
            58px;
    }


    .support-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            22px;
    }

}



/* =========================================================
   60. TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .mercedes-section {

        min-height:
            720px;
    }


    .mercedes-section::before {

        background:

            linear-gradient(
                90deg,
                rgba(8, 9, 10, 0.9) 0%,
                rgba(8, 9, 10, 0.62) 48%,
                rgba(8, 9, 10, 0.18) 100%
            ),

            linear-gradient(
                180deg,
                transparent 44%,
                rgba(8, 9, 10, 0.42) 100%
            );
    }


    .support-grid {

        grid-template-columns:
            1fr;
    }


    .support-card {

        min-height:
            480px;
    }


    .newsletter-inner {

        grid-template-columns:
            1fr;

        gap:
            48px;
    }


    .newsletter-copy {

        max-width:
            800px;
    }


    .newsletter-form-wrap {

        max-width:
            680px;
    }

}



/* =========================================================
   61. MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .mercedes-section {

        min-height:
            760px;

        align-items:
            flex-end;
    }


    .mercedes-media img,
    .mercedes-media video {

        object-position:
            center center;
    }


    .mercedes-section::before {

        background:

            linear-gradient(
                180deg,
                rgba(8, 9, 10, 0.04) 0%,
                rgba(8, 9, 10, 0.08) 36%,
                rgba(8, 9, 10, 0.68) 62%,
                rgba(8, 9, 10, 0.98) 88%,
                var(--ar-background) 100%
            );
    }


    .mercedes-content {

        padding-top:
            220px;

        padding-bottom:
            90px;
    }


    .mercedes-copy {

        max-width:
            100%;
    }


    .mercedes-title {

        font-size:
            clamp(3rem, 14vw, 4.8rem);

        line-height:
            0.96;
    }


    .mercedes-description {

        max-width:
            94%;

        margin-top:
            20px;

        font-size:
            0.92rem;

        line-height:
            1.65;
    }


    .mercedes-actions {

        align-items:
            stretch;

        flex-direction:
            column;

        margin-top:
            28px;
    }


    .mercedes-actions .btn-ar {

        width:
            100%;
    }



    /* Support */

    .support-section {

        padding-block:
            86px;
    }


    .support-header {

        margin-bottom:
            32px;
    }


    .support-title {

        font-size:
            clamp(2.8rem, 13vw, 4.2rem);
    }


    .support-intro {

        font-size:
            0.9rem;
    }


    .support-card {

        min-height:
            430px;
    }


    .support-card-body {

        padding:
            24px 20px;
    }


    .support-card-title {

        font-size:
            clamp(2.25rem, 10vw, 3.3rem);
    }


    .support-card-text {

        margin-top:
            15px;

        font-size:
            0.86rem;

        line-height:
            1.6;
    }



    /* Newsletter */

    .newsletter-inner {

        padding-block:
            82px;

        gap:
            36px;
    }


    .newsletter-title {

        font-size:
            clamp(2.8rem, 13vw, 4.2rem);
    }


    .newsletter-description {

        margin-top:
            18px;

        font-size:
            0.92rem;

        line-height:
            1.65;
    }


    .newsletter-benefit {

        margin-top:
            22px;

        padding-top:
            20px;
    }


    .newsletter-input,
    .newsletter-submit {

        min-height:
            54px;

        height:
            54px;
    }

}



/* =========================================================
   62. SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .mercedes-section {

        min-height:
            700px;
    }


    .mercedes-content {

        padding-bottom:
            74px;
    }


    .support-card {

        min-height:
            400px;
    }


    .newsletter-benefit-icon {

        width:
            36px;

        height:
            36px;
    }


    .newsletter-success {

        padding:
            26px 20px;
    }

}


/* =========================================================
   AUTOREDUTA
   Homepage v3.0
   ---------------------------------------------------------
   PART 05
   Compact blog
   Social media
   Contact / footer
   Gradient map
   ========================================================= */


/* =========================================================
   63. BLOG SECTION
   ========================================================= */

.blog-section {

    position:
        relative;

    padding-block:
        clamp(92px, 9vw, 140px);

    background:
        var(--ar-background);
}


.blog-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        32px;

    margin-bottom:
        42px;
}


.blog-header-copy {

    max-width:
        720px;
}


.blog-title {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(2.9rem, 4.5vw, 5.2rem);

    font-weight:
        400;

    letter-spacing:
        -0.03em;

    line-height:
        0.98;
}



/* =========================================================
   64. BLOG GRID
   compact 3-column layout
   ========================================================= */

.blog-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(18px, 2vw, 30px);
}



/* =========================================================
   65. BLOG CARD
   ========================================================= */

.blog-card {

    display:
        block;

    color:
        var(--ar-white);

    margin-bottom:
        15px;
}


.blog-card-media {

    position:
        relative;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        #121315;
}


.blog-card-media img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 1.1s var(--ease-premium),
        filter 900ms var(--ease-premium);
}


.blog-card:hover .blog-card-media img {

    transform:
        scale(1.045);

    filter:
        brightness(0.9);
}


.blog-card-media::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(8, 9, 10, 0.34) 100%
        );
}


.blog-card-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        18px;

    color:
        var(--ar-muted);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.blog-card-meta .dot {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.3);
}


.blog-card-title {

    margin:
        12px 0 0;

    max-width:
        95%;

    font-family:
        var(--font-display);

    font-size:
        clamp(1.45rem, 2vw, 2.05rem);

    font-weight:
        400;

    letter-spacing:
        -0.018em;

    line-height:
        1.18;

    transition:
        color var(--transition-fast);
}


.blog-card:hover .blog-card-title {

    color:
        var(--ar-silver);
}



/* =========================================================
   66. SOCIAL SECTION
   ========================================================= */

.social-section {

    position:
        relative;

    padding-block:
        clamp(100px, 10vw, 160px);

    border-top:
        1px solid var(--ar-border-soft);

    background:
        var(--ar-background-soft);
}


.social-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        32px;

    margin-bottom:
        44px;
}


.social-title {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(3rem, 4.7vw, 5.5rem);

    font-weight:
        400;

    letter-spacing:
        -0.03em;

    line-height:
        0.98;
}



/* =========================================================
   67. SOCIAL BRAND BLOCK
   ========================================================= */

.social-brand-block {

    margin-top:
        58px;
}


.social-brand-block:first-of-type {

    margin-top:
        0;
}


.social-brand-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        22px;
}


.social-brand-name {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(2rem, 2.8vw, 3.2rem);

    font-weight:
        400;
}


.social-brand-handle {

    color:
        var(--ar-muted);

    font-size:
        10px;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}



/* =========================================================
   68. SOCIAL MOSAIC
   ========================================================= */

.social-mosaic {

    display:
        grid;

    grid-template-columns:
        2fr 1fr;

    grid-template-rows:
        repeat(2, minmax(190px, 1fr));

    gap:
        1px;

    min-height:
        520px;

    background:
        var(--ar-border-soft);

    border:
        1px solid var(--ar-border-soft);
}


.social-brand-block.is-reverse .social-mosaic {

    grid-template-columns:
        1fr 2fr;
}



/* =========================================================
   69. SOCIAL TILE
   ========================================================= */

.social-tile {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    background:
        #0d0e10;
}


.social-tile-large {

    grid-row:
        span 2;
}


.social-tile-media {

    position:
        absolute;

    inset:
        0;
}


.social-tile-media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 1.15s var(--ease-premium),
        filter 900ms var(--ease-premium);
}


.social-tile:hover .social-tile-media img {

    transform:
        scale(1.055);

    filter:
        brightness(0.78);
}


.social-tile::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            rgba(8, 9, 10, 0.08),
            rgba(8, 9, 10, 0.62) 100%
        );
}



/* =========================================================
   70. SOCIAL TILE CONTENT
   ========================================================= */

.social-tile-content {

    position:
        absolute;

    inset:
        auto 0 0;

    z-index:
        3;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        clamp(20px, 2.4vw, 34px);
}


.social-tile-info {

    min-width:
        0;
}


.social-tile-platform {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        0;

    color:
        var(--ar-white);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.social-tile-platform i {

    font-size:
        18px;
}


.social-tile-action {

    margin:
        8px 0 0;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        10px;

    line-height:
        1.4;

    transition:
        color var(--transition-fast);
}


.social-tile:hover .social-tile-action {

    color:
        var(--ar-white);
}


.social-tile-arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        42px;

    height:
        42px;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    border-radius:
        50%;

    color:
        var(--ar-white);

    background:
        rgba(8, 9, 10, 0.18);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}


.social-tile:hover .social-tile-arrow {

    background:
        var(--ar-white);

    color:
        var(--ar-black);

    transform:
        translate(3px, -3px);
}



/* =========================================================
   71. FOOTER / CONTACT
   ========================================================= */

.site-footer {

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--ar-black);
}


.footer-main {

    position:
        relative;

    min-height:
        590px;
}


.footer-grid {

    position:
        relative;

    z-index:
        5;

    display:
        grid;

    grid-template-columns:
        minmax(420px, 0.85fr)
        minmax(0, 1.25fr);

    min-height:
        590px;
}



/* =========================================================
   72. FOOTER INFO
   ========================================================= */

.footer-info {

    position:
        relative;

    z-index:
        8;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(70px, 7vw, 110px)
        clamp(48px, 5vw, 90px)
        clamp(70px, 7vw, 110px)
        var(--page-gutter);

    background:
        var(--ar-black);
}


.footer-logo {

    width:
        84px;

    margin-bottom:
        38px;
}


.footer-logo img {

    width:
        100%;

    height:
        auto;
}


.footer-company {

    max-width:
        450px;
}


.footer-company-name {

    margin:
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(2.4rem, 3.4vw, 4rem);

    font-weight:
        400;

    letter-spacing:
        -0.025em;

    line-height:
        1.02;
}


.footer-address {

    margin:
        26px 0 0;

    color:
        var(--ar-muted-light);

    font-size:
        0.92rem;

    line-height:
        1.75;
}


.footer-contact-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    margin-top:
        24px;
}


.footer-contact-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    width:
        fit-content;

    color:
        var(--ar-white);

    font-size:
        0.92rem;

    transition:
        color var(--transition-fast);
}


.footer-contact-link:hover {

    color:
        var(--ar-silver);
}


.footer-contact-link i {

    color:
        var(--ar-muted);
}



/* =========================================================
   73. ROUTE
   ========================================================= */

.footer-route {

    margin-top:
        30px;
}



/* =========================================================
   74. COMPANY LEGAL
   ========================================================= */

.footer-legal-data {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px 22px;

    margin-top:
        34px;

    padding-top:
        24px;

    border-top:
        1px solid var(--ar-border-soft);

    color:
        rgba(255, 255, 255, 0.38);

    font-size:
        9px;

    letter-spacing:
        0.08em;
}



/* =========================================================
   75. FOOTER MAP
   ========================================================= */

.footer-map {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    background:
        #101113;
}


.footer-map iframe,
.footer-map img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;

    filter:
        grayscale(1)
        contrast(0.95)
        brightness(0.62);

    opacity:
        0.94;
}



/*
 * Kluczowy element:
 * mapa nie może wyglądać jak doklejony prostokąt.
 */

.footer-map::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            var(--ar-black) 0%,
            rgba(8, 9, 10, 0.97) 4%,
            rgba(8, 9, 10, 0.78) 13%,
            rgba(8, 9, 10, 0.36) 27%,
            rgba(8, 9, 10, 0.07) 43%,
            transparent 62%
        ),

        linear-gradient(
            180deg,
            rgba(8, 9, 10, 0.12),
            transparent 30%,
            rgba(8, 9, 10, 0.1) 70%,
            rgba(8, 9, 10, 0.48)
        );
}



/*
 * Dodatkowe subtelne światło mapy.
 */

.footer-map::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        4;

    pointer-events:
        none;

    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.22);
}



/* =========================================================
   76. MAP MARKER / LOCATION LABEL
   ========================================================= */

.footer-map-label {

    position:
        absolute;

    right:
        clamp(28px, 4vw, 70px);

    bottom:
        clamp(30px, 4vw, 58px);

    z-index:
        6;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        12px 16px;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    background:
        rgba(8, 9, 10, 0.68);

    color:
        var(--ar-white);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


.footer-map-label i {

    font-size:
        15px;
}



/* =========================================================
   77. FOOTER BOTTOM
   ========================================================= */

.footer-bottom {

    position:
        relative;

    z-index:
        10;

    border-top:
        1px solid var(--ar-border-soft);

    background:
        var(--ar-black);
}


.footer-bottom-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

    min-height:
        76px;

    color:
        rgba(255, 255, 255, 0.36);

    font-size:
        9px;

    letter-spacing:
        0.08em;
}


.footer-bottom-links {

    display:
        flex;

    align-items:
        center;

    gap:
        24px;
}


.footer-bottom-links a {

    transition:
        color var(--transition-fast);
}


.footer-bottom-links a:hover {

    color:
        var(--ar-white);
}



/* =========================================================
   78. FLOATING CONTACT
   ========================================================= */

.floating-contact {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        900;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        9px;
}


.floating-contact-btn {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        0 18px;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius:
        var(--radius-pill);

    background:
        rgba(8, 9, 10, 0.78);

    color:
        var(--ar-white);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.08em;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.25);

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


.floating-contact-btn:hover {

    background:
        var(--ar-white);

    border-color:
        var(--ar-white);

    color:
        var(--ar-black);

    transform:
        translateY(-2px);
}


.floating-contact-btn i {

    font-size:
        15px;
}



/* =========================================================
   79. TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .blog-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .blog-card:last-child {

        grid-column:
            1 / -1;
    }


    .blog-card:last-child .blog-card-media {

        aspect-ratio:
            16 / 7;
    }


    .social-mosaic {

        min-height:
            450px;
    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .footer-info {

        padding-left:
            var(--page-gutter);

        padding-right:
            46px;
    }

}



/* =========================================================
   80. MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .blog-section {

        padding-block:
            82px;
    }


    .blog-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        margin-bottom:
            30px;
    }


    .blog-title {

        font-size:
            clamp(2.7rem, 12vw, 4rem);
    }


    .blog-grid {

        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .blog-card:last-child {

        grid-column:
            auto;
    }


    .blog-card:last-child .blog-card-media {

        aspect-ratio:
            16 / 10;
    }



    /* SOCIAL */

    .social-section {

        padding-block:
            84px;
    }


    .social-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        margin-bottom:
            36px;
    }


    .social-title {

        font-size:
            clamp(2.8rem, 13vw, 4.2rem);
    }


    .social-brand-block {

        margin-top:
            52px;
    }


    .social-brand-head {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            4px;
    }


    /*
     * Mobile: poziome przewijanie palcem.
     */

    .social-mosaic {

        display:
            flex;

        width:
            auto;

        min-height:
            0;

        margin-right:
            calc(var(--page-gutter) * -1);

        padding-right:
            var(--page-gutter);

        gap:
            12px;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        border:
            0;

        background:
            transparent;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;
    }


    .social-mosaic::-webkit-scrollbar {

        display:
            none;
    }


    .social-tile,
    .social-tile-large {

        flex:
            0 0 80vw;

        width:
            80vw;

        min-height:
            390px;

        scroll-snap-align:
            start;
    }


    .social-tile-content {

        padding:
            20px;
    }



    /* FOOTER */

    .footer-main {

        min-height:
            0;
    }


    .footer-grid {

        display:
            flex;

        flex-direction:
            column;

        min-height:
            0;
    }


    .footer-info {

        order:
            1;

        padding:
            76px
            var(--page-gutter)
            58px;
    }


    .footer-map {

        order:
            2;

        min-height:
            420px;
    }


    .footer-map::before {

        background:

            linear-gradient(
                180deg,
                var(--ar-black) 0%,
                rgba(8, 9, 10, 0.92) 6%,
                rgba(8, 9, 10, 0.55) 18%,
                rgba(8, 9, 10, 0.12) 36%,
                transparent 54%
            ),

            linear-gradient(
                0deg,
                rgba(8, 9, 10, 0.45),
                transparent 40%
            );
    }


    .footer-map-label {

        right:
            var(--page-gutter);

        bottom:
            24px;
    }


    .footer-bottom-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            10px;

        min-height:
            100px;

        padding-block:
            22px;
    }


    .footer-bottom-links {

        flex-wrap:
            wrap;

        gap:
            8px 18px;
    }



    /* FLOATING CONTACT */

    .floating-contact {

        right:
            14px;

        bottom:
            14px;
    }


    .floating-contact-btn {

        width:
            48px;

        height:
            48px;

        min-height:
            48px;

        padding:
            0;

        border-radius:
            50%;
    }


    .floating-contact-label {

        display:
            none;
    }

}



/* =========================================================
   81. SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .social-tile,
    .social-tile-large {

        flex-basis:
            84vw;

        width:
            84vw;

        min-height:
            360px;
    }


    .footer-logo {

        width:
            72px;
    }


    .footer-company-name {

        font-size:
            2.55rem;
    }


    .footer-map {

        min-height:
            380px;
    }


    .footer-map-label {

        left:
            var(--page-gutter);

        right:
            auto;
    }

}


/* =========================================================
   AUTOREDUTA
   Homepage v3.0
   ---------------------------------------------------------
   PART 06
   Reveal animations
   Motion
   Parallax hooks
   Sticky narrative refinements
   Responsive polishing
   Reduced motion
   Utilities
   Final fixes
   ========================================================= */


/* =========================================================
   82. REVEAL BASE
   ========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translate3d(0, 34px, 0);

    transition:
        opacity 900ms var(--ease-premium),
        transform 1100ms var(--ease-premium);

    will-change:
        opacity,
        transform;
}


.reveal.is-visible {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);
}



/* DELAYS */

.reveal-delay-1 {

    transition-delay:
        100ms;
}


.reveal-delay-2 {

    transition-delay:
        200ms;
}


.reveal-delay-3 {

    transition-delay:
        300ms;
}


.reveal-delay-4 {

    transition-delay:
        400ms;
}



/* =========================================================
   83. REVEAL VARIANTS
   ========================================================= */

.reveal-left {

    opacity:
        0;

    transform:
        translate3d(-42px, 0, 0);

    transition:
        opacity 900ms var(--ease-premium),
        transform 1100ms var(--ease-premium);
}


.reveal-left.is-visible {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);
}


.reveal-right {

    opacity:
        0;

    transform:
        translate3d(42px, 0, 0);

    transition:
        opacity 900ms var(--ease-premium),
        transform 1100ms var(--ease-premium);
}


.reveal-right.is-visible {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);
}


.reveal-scale {

    opacity:
        0;

    transform:
        scale(0.975);

    transition:
        opacity 1000ms var(--ease-premium),
        transform 1200ms var(--ease-premium);
}


.reveal-scale.is-visible {

    opacity:
        1;

    transform:
        scale(1);
}



/* =========================================================
   84. HERO ENTRANCE
   ========================================================= */

.hero .eyebrow,
.hero-title,
.hero-subtitle,
.hero-actions,
.hero-route {

    opacity:
        0;

    transform:
        translate3d(0, 24px, 0);

    animation:
        hero-content-in 1200ms var(--ease-premium)
        forwards;
}


.hero .eyebrow {

    animation-delay:
        120ms;
}


.hero-title {

    animation-delay:
        220ms;
}


.hero-subtitle {

    animation-delay:
        380ms;
}


.hero-actions {

    animation-delay:
        500ms;
}


.hero-route {

    animation-delay:
        620ms;
}


@keyframes hero-content-in {

    to {

        opacity:
            1;

        transform:
            translate3d(0, 0, 0);
    }
}



/* =========================================================
   85. HERO MEDIA INTRO
   ========================================================= */

.hero-media {

    animation:
        hero-media-in 1.8s var(--ease-premium)
        both;
}


@keyframes hero-media-in {

    from {

        opacity:
            0;

        transform:
            scale(1.035);
    }

    to {

        opacity:
            1;

        transform:
            scale(1);
    }
}



/* =========================================================
   86. HERO PARALLAX HOOKS
   ========================================================= */

/*
 * main.js może ustawiać:
 *
 * --hero-media-y
 * --hero-copy-y
 */

.hero-media {

    transform:
        translate3d(
            0,
            calc(var(--hero-media-y, 0) * 1px),
            0
        );
}


.hero-copy {

    transform:
        translate3d(
            0,
            calc(var(--hero-copy-y, 0) * 1px),
            0
        );

    will-change:
        transform;
}



/* =========================================================
   87. WORLDS SCROLL PROGRESS
   ========================================================= */

/*
 * JS ustawia --worlds-progress w zakresie 0–1
 */

.worlds-section {

    --worlds-progress:
        0;
}


/*
 * Bardzo subtelna zmiana światła całej sekcji
 * wraz ze scrollowaniem.
 */

.worlds-sticky {

    background:

        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                calc(var(--worlds-progress) * 0.008)
            ),
            transparent 50%
        ),

        var(--ar-black);
}



/* =========================================================
   88. WORLD COPY MICRO MOTION
   ========================================================= */

.world-copy.is-active .world-number {

    animation:
        world-detail-in 700ms var(--ease-premium)
        both;
}


.world-copy.is-active .world-title {

    animation:
        world-detail-in 850ms var(--ease-premium)
        both;

    animation-delay:
        60ms;
}


.world-copy.is-active .world-description {

    animation:
        world-detail-in 900ms var(--ease-premium)
        both;

    animation-delay:
        120ms;
}


.world-copy.is-active .world-features {

    animation:
        world-detail-in 950ms var(--ease-premium)
        both;

    animation-delay:
        170ms;
}


.world-copy.is-active .world-action {

    animation:
        world-detail-in 1000ms var(--ease-premium)
        both;

    animation-delay:
        220ms;
}


@keyframes world-detail-in {

    from {

        opacity:
            0;

        transform:
            translate3d(0, 18px, 0);
    }

    to {

        opacity:
            1;

        transform:
            translate3d(0, 0, 0);
    }
}



/* =========================================================
   89. WORLD MEDIA DEPTH
   ========================================================= */

.world-media-item::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 50% 45%,
            transparent 35%,
            rgba(0, 0, 0, 0.1) 70%,
            rgba(0, 0, 0, 0.25) 100%
        );

    opacity:
        0.45;
}



/* =========================================================
   90. PURCHASE FORM FEEDBACK
   ========================================================= */

.purchase-input.is-error,
.purchase-select.is-error,
.purchase-textarea.is-error {

    border-color:
        rgba(255, 120, 120, 0.7);
}


.purchase-field-error {

    display:
        none;

    margin-top:
        7px;

    color:
        rgba(255, 150, 150, 0.85);

    font-size:
        9px;

    line-height:
        1.5;
}


.purchase-field-error.is-visible {

    display:
        block;
}



/* =========================================================
   91. FORM LOADING
   ========================================================= */

.is-loading {

    pointer-events:
        none;

    opacity:
        0.7;
}


.btn-ar.is-loading {

    position:
        relative;
}


.btn-ar.is-loading::after {

    content:
        "";

    width:
        14px;

    height:
        14px;

    margin-left:
        2px;

    border:
        1px solid currentColor;

    border-right-color:
        transparent;

    border-radius:
        50%;

    animation:
        spinner 700ms linear infinite;
}


@keyframes spinner {

    to {

        transform:
            rotate(360deg);
    }
}



/* =========================================================
   92. LATEST CAR MICRO INTERACTION
   ========================================================= */

.car-card {

    transform:
        translateZ(0);
}


.car-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    border:
        1px solid rgba(255, 255, 255, 0);

    transition:
        border-color var(--transition);
}


.car-card:hover::before {

    border-color:
        rgba(255, 255, 255, 0.1);
}



/* =========================================================
   93. SUPPORT CARD FOCUS
   ========================================================= */

.support-card:focus-within::after {

    background:

        linear-gradient(
            180deg,
            rgba(8, 9, 10, 0.03),
            rgba(8, 9, 10, 0.68) 70%,
            rgba(8, 9, 10, 0.96) 100%
        );
}



/* =========================================================
   94. SOCIAL TILE FOCUS
   ========================================================= */

.social-tile:focus-visible {

    outline:
        1px solid rgba(255, 255, 255, 0.7);

    outline-offset:
        -1px;
}



/* =========================================================
   95. FOOTER MAP HOVER
   ========================================================= */

.footer-map iframe {

    transition:
        filter 900ms var(--ease-premium),
        opacity 900ms var(--ease-premium);
}


.footer-map:hover iframe {

    filter:
        invert(1)
        grayscale(1)
        brightness(1.05)
        contrast(1.08);

    opacity:
        1;
}



/* =========================================================
   96. NAV CURRENT SECTION
   ========================================================= */

.nav-link-site.is-current {

    color:
        var(--ar-white) !important;
}


.nav-link-site.is-current::after {

    transform:
        scaleX(1);

    transform-origin:
        left;
}



/* =========================================================
   97. HEADER EDGE STATE
   ========================================================= */

.site-nav.is-dark {

    background:
        rgba(8, 9, 10, 0.88);

    border-bottom-color:
        rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}



/* =========================================================
   98. FLOATING CONTACT VISIBILITY
   ========================================================= */

.floating-contact {

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate3d(0, 14px, 0);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}


.floating-contact.is-visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate3d(0, 0, 0);
}



/* =========================================================
   99. PAGE TRANSITIONS BETWEEN SECTIONS
   ========================================================= */

.section-transition {

    position:
        relative;
}


.section-transition::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        -80px;

    height:
        80px;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            transparent,
            currentColor
        );

    opacity:
        0.02;
}



/* =========================================================
   100. CINEMATIC BORDER
   ========================================================= */

.cinematic-border {

    position:
        relative;
}


.cinematic-border::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        10;

    border:
        1px solid rgba(255, 255, 255, 0.06);
}



/* =========================================================
   101. MEDIA QUALITY HELPERS
   ========================================================= */

.media-cover {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.media-contain {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.media-center {

    object-position:
        center;
}


.media-top {

    object-position:
        center top;
}


.media-bottom {

    object-position:
        center bottom;
}



/* =========================================================
   102. SIMPLE UTILITIES
   ========================================================= */

.w-100 {
    width:
        100%;
}


.h-100 {
    height:
        100%;
}


.position-relative {
    position:
        relative;
}


.overflow-hidden {
    overflow:
        hidden;
}


.text-center {
    text-align:
        center;
}


.text-left {
    text-align:
        left;
}


.text-right {
    text-align:
        right;
}


.d-none {
    display:
        none !important;
}



/* =========================================================
   103. Z-INDEX HELPERS
   ========================================================= */

.z-1 {
    z-index:
        1;
}


.z-2 {
    z-index:
        2;
}


.z-3 {
    z-index:
        3;
}


.z-10 {
    z-index:
        10;
}



/* =========================================================
   104. RESPONSIVE SPACING HELPERS
   ========================================================= */

.mt-section {

    margin-top:
        var(--section-space);
}


.mb-section {

    margin-bottom:
        var(--section-space);
}


.py-section {

    padding-block:
        var(--section-space);
}



/* =========================================================
   105. TABLET FINAL POLISH
   ========================================================= */

@media (max-width: 1199.98px) {

    :root {

        --section-space:
            clamp(88px, 9vw, 140px);
    }


    .display-xl {

        font-size:
            clamp(3.7rem, 8vw, 7.4rem);
    }


    .display-lg {

        font-size:
            clamp(3rem, 6vw, 5.7rem);
    }

}



/* =========================================================
   106. MOBILE FINAL POLISH
   ========================================================= */

@media (max-width: 767.98px) {

    :root {

        --section-space:
            82px;

        --page-gutter:
            1.5rem;
    }


    body {

        font-size:
            15px;
    }


    .eyebrow {

        margin-bottom:
            16px;

        font-size:
            8px;

        letter-spacing:
            0.22em;
    }


    .eyebrow::before {

        width:
            20px;
    }


    .btn-ar {

        min-height:
            52px;

        padding-inline:
            22px;

        font-size:
            10px;
    }


    .link-arrow {

        font-size:
            10px;
    }


    .reveal {

        transform:
            translate3d(0, 24px, 0);
    }


    .reveal-left {

        transform:
            translate3d(-24px, 0, 0);
    }


    .reveal-right {

        transform:
            translate3d(24px, 0, 0);
    }

}



/* =========================================================
   107. MOBILE SAFE AREAS
   ========================================================= */

@supports (
    padding:
        max(0px)
) {

    .site-nav .navbar {

        padding-left:
            max(
                1.5rem,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                1.5rem,
                env(safe-area-inset-right)
            );
    }


    @media (min-width: 768px) {

        .site-nav .navbar {

            padding-left:
                max(
                    2.5rem,
                    env(safe-area-inset-left)
                );

            padding-right:
                max(
                    2.5rem,
                    env(safe-area-inset-right)
                );
        }
    }


    @media (min-width: 992px) {

        .site-nav .navbar {

            padding-left:
                max(
                    4rem,
                    env(safe-area-inset-left)
                );

            padding-right:
                max(
                    4rem,
                    env(safe-area-inset-right)
                );
        }
    }


    .floating-contact {

        right:
            max(
                14px,
                env(safe-area-inset-right)
            );

        bottom:
            max(
                14px,
                env(safe-area-inset-bottom)
            );
    }


    .footer-bottom {

        padding-bottom:
            env(safe-area-inset-bottom);
    }

}



/* =========================================================
   108. VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 389.98px) {

    :root {

        --page-gutter:
            1.5rem;
    }


    .hero-title,
    .hero h1 {

        font-size:
            clamp(3.1rem, 16vw, 4.4rem);
    }


    .world-title {

        font-size:
            clamp(2.25rem, 12vw, 3.3rem);
    }


    .purchase-lead-title,
    .latest-title,
    .support-title,
    .newsletter-title,
    .social-title {

        font-size:
            clamp(2.55rem, 12vw, 3.7rem);
    }


    .footer-company-name {

        font-size:
            2.3rem;
    }

}



/* =========================================================
   109. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1800px) {

    :root {

        --container-max:
            1820px;
    }


    .hero-copy {

        max-width:
            920px;
    }


    .worlds-inner {

        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(470px, 0.72fr);
    }


    .world-title {

        font-size:
            clamp(4rem, 4vw, 5.8rem);
    }

}



/* =========================================================
   110. ULTRA WIDE
   ========================================================= */

@media (min-width: 2200px) {

    :root {

        --container-max:
            1980px;

        --page-gutter:
            88px;
    }


    .hero-title,
    .hero h1 {

        max-width:
            1100px;
    }


    .worlds-inner {

        grid-template-columns:
            1.7fr 0.7fr;
    }

}



/* =========================================================
   111. POINTER / TOUCH DEVICE OPTIMIZATION
   ========================================================= */

@media (hover: none) {

    .car-card:hover .car-card-media img,
    .support-card:hover .support-card-media img,
    .social-tile:hover .social-tile-media img {

        transform:
            none;

        filter:
            none;
    }


    .car-card:hover .car-card-arrow,
    .social-tile:hover .social-tile-arrow {

        background:
            rgba(8, 9, 10, 0.24);

        color:
            var(--ar-white);

        transform:
            none;
    }


    .footer-map:hover iframe {

        filter:
            grayscale(1)
            contrast(0.95)
            brightness(0.62);
    }

}



/* =========================================================
   112. REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    html {

        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        transition-delay:
            0ms !important;
    }


    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {

        opacity:
            1;

        transform:
            none;
    }


    .world-media-item {

        transform:
            none;
    }


    .world-media-item img,
    .world-media-item video {

        transform:
            none;
    }


    .hero-media,
    .hero-copy {

        transform:
            none !important;
    }


    .hero-scroll {

        display:
            none;
    }


    .world-scroll-hint {

        display:
            none;
    }

}



/* =========================================================
   113. PRINT
   ========================================================= */

@media print {

    .site-nav,
    .hero-scroll,
    .floating-contact,
    .latest-nav,
    .world-progress {

        display:
            none !important;
    }


    body {

        background:
            #fff;

        color:
            #000;
    }


    .hero,
    .worlds-sticky,
    .mercedes-section {

        min-height:
            auto;

        height:
            auto;
    }

}



/* =========================================================
   114. FINAL FIXES
   ========================================================= */

.swiper {

    overflow:
        hidden;
}


.latest-swiper {

    overflow:
        visible;
}


.swiper-slide {

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;
}


iframe {

    max-width:
        100%;
}


input,
select {

    border-radius:
        999px;
}


textarea {

    border-radius:
        24px;
}


/*
 * Safari fix dla backdrop-filter.
 */

@supports (
    -webkit-backdrop-filter:
    blur(10px)
) {

    .site-nav.is-scrolled,
    .phone-pill,
    .btn-ar-glass,
    .floating-contact-btn,
    .footer-map-label,
    .car-card-arrow,
    .social-tile-arrow {

        -webkit-backdrop-filter:
            blur(16px);
    }

}



/* =========================================================
   115. SCROLLBAR
   desktop only
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    html {

        scrollbar-color:
            rgba(255, 255, 255, 0.2)
            var(--ar-background);

        scrollbar-width:
            thin;
    }


    body::-webkit-scrollbar {

        width:
            7px;
    }


    body::-webkit-scrollbar-track {

        background:
            var(--ar-background);
    }


    body::-webkit-scrollbar-thumb {

        background:
            rgba(255, 255, 255, 0.18);

        border-radius:
            999px;
    }


    body::-webkit-scrollbar-thumb:hover {

        background:
            rgba(255, 255, 255, 0.3);
    }

}



/* =========================================================
   END PART 06
   END styles.css v3.0
   ========================================================= */
   
/* =========================================================
   AUTOREDUTA v3.1 — COMPATIBILITY / FIX LAYER
   This layer aligns the actual index.html markup with v3 CSS.
   ========================================================= */

/* aliases used by the actual HTML */
.bg-site{background:var(--ar-background)!important;color:var(--ar-white)}
.section-pad{padding-block:var(--section-space)}
.display-heading{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;line-height:.98;color:var(--ar-white);text-wrap:balance}
.body-muted{color:var(--ar-muted-light);line-height:1.75;text-wrap:pretty}
.btn-silver{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 28px;border:1px solid var(--ar-white);border-radius:999px;background:var(--ar-white);color:var(--ar-black);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:transform var(--transition),background var(--transition),border-color var(--transition)}
.btn-silver:hover{background:var(--ar-silver);border-color:var(--ar-silver);color:var(--ar-black);transform:translateY(-2px)}
.form-pill{width:100%;min-height:54px;padding:0 22px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.035);color:var(--ar-white);outline:none;transition:border-color var(--transition-fast),background var(--transition-fast)}
.form-pill::placeholder{color:rgba(255,255,255,.35)}
.form-pill:focus{border-color:rgba(255,255,255,.6);background-color:rgba(255,255,255,.055)}

/* navigation refinements */
@media (min-width:1400px){.site-nav .navbar-nav{display:flex!important}.nav-toggler{display:none!important}}
.mobile-phone-link{margin-top:18px!important;font-family:var(--font-ui)!important;font-size:1rem!important;color:var(--ar-white)!important;border-bottom:0!important}
.floating-phone-btn{position:fixed;right:24px;bottom:24px;z-index:920;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 19px;border:1px solid var(--ar-white);border-radius:999px;background:var(--ar-white);color:var(--ar-black);font-size:11px;font-weight:500;letter-spacing:.07em;box-shadow:0 14px 40px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity var(--transition),visibility var(--transition),transform var(--transition),background var(--transition),color var(--transition),border-color var(--transition)}
.floating-phone-btn.is-visible{opacity:1;visibility:visible;transform:none}
.floating-phone-btn:hover{background:var(--ar-silver);border-color:var(--ar-silver);color:var(--ar-black)}
.floating-phone-btn i{font-size:1rem}

/* Consentmanager colors are applied by a script so they stay after the CMP stylesheet. */

/* hero actual markup */
.hero-cinematic{height:100svh;min-height:680px}
.hero-cinematic .hero-copy{max-width:850px}
.hero-cinematic .hero-title{font-family:var(--font-display);font-size:clamp(4rem,7.8vw,8.5rem);font-weight:400;letter-spacing:-.04em;line-height:.88;max-width:1000px;margin:0;color:var(--ar-white)}
.hero-cinematic .hero-lead{max-width:620px;margin:28px 0 0;color:rgba(255,255,255,.72);font-size:clamp(.98rem,1.12vw,1.12rem);line-height:1.75}
.hero-cinematic .hero-actions{margin-top:34px}
.hero-scroll{position:absolute;z-index:5;left:50%;bottom:25px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.5);font-size:8px;letter-spacing:.24em;text-transform:uppercase}
.scroll-indicator{width:1px;height:42px;background:rgba(255,255,255,.18);overflow:hidden}
.scroll-line{display:block;width:100%;height:100%;background:rgba(255,255,255,.9);transform:translateY(-100%);animation:arScrollLine 2.2s var(--ease-premium) infinite}
@keyframes arScrollLine{0%{transform:translateY(-100%)}50%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* intro */
.section-intro{background:var(--ar-background);position:relative}
.intro-heading{font-size:clamp(3rem,4.8vw,5.6rem);max-width:1200px}
.intro-copy{max-width:1200px}
.stats-bar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  width:100%;
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--ar-border-soft);
}
.stats-bar .stat-item{
  padding:4px clamp(16px,2.2vw,36px);
  border-left:1px solid var(--ar-border-soft);
  background:transparent;
}
.stats-bar .stat-item:first-child{
  border-left:0;
  padding-left:0;
}
.stats-bar .stat-value{
  font-family:var(--font-display);
  font-size:clamp(1.55rem,2.1vw,2.35rem);
  font-weight:400;
  line-height:1;
  color:var(--ar-white);
  letter-spacing:-.02em;
}
.stats-bar .stat-label{
  margin-top:8px;
  color:var(--ar-muted);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
@media (max-width:767.98px){
  .stats-bar{grid-template-columns:1fr;gap:18px;padding-top:22px}
  .stats-bar .stat-item{border-left:0;padding:0;padding-top:16px;border-top:1px solid var(--ar-border-soft)}
  .stats-bar .stat-item:first-child{border-top:0;padding-top:0}
}

/* =========================================================
   STORY / SCROLL EXPERIENCE — ACTUAL MARKUP
   ========================================================= */
.story-section{position:relative;height:820vh;background:var(--ar-black);--story-progress:0}
.story-sticky{position:sticky;top:0;height:100svh;min-height:680px;overflow:hidden;background:var(--ar-black)}
.story-container{height:100%;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(390px,.78fr);padding-inline:0;max-width:none}
.story-media{position:relative;height:100%;overflow:hidden;background:#090a0b}
.story-image{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.075);filter:brightness(.78);transition:opacity .9s var(--ease-premium),visibility .9s,transform 1.45s var(--ease-premium),filter 1.2s var(--ease-premium);will-change:opacity,transform,filter}
.story-image.active{opacity:1;visibility:visible;transform:scale(1);filter:brightness(1)}
.story-image.leaving{opacity:0;visibility:visible;transform:scale(.99);filter:brightness(.58)}
.story-image img,.story-image video{width:100%;height:100%;object-fit:cover;object-position:center;transform:translate3d(0,calc(var(--story-media-y,0)*-18px),0) scale(1.035);will-change:transform}
.story-media::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,rgba(8,9,10,0) 55%,rgba(8,9,10,.12) 73%,rgba(8,9,10,.64) 100%),linear-gradient(180deg,rgba(8,9,10,.08),transparent 45%,rgba(8,9,10,.38) 100%)}
.story-content{position:relative;height:100%;display:flex;align-items:center;padding:calc(var(--nav-height) + 46px) clamp(52px,5vw,92px) 70px;border-left:1px solid var(--ar-border-soft);background:linear-gradient(145deg,rgba(20,21,24,.98),rgba(8,9,10,.995))}
.story-item{position:absolute;left:clamp(52px,5vw,92px);right:clamp(52px,5vw,92px);top:50%;opacity:0;visibility:hidden;transform:translateY(calc(-50% + 38px));pointer-events:none;transition:opacity .7s var(--ease-premium),visibility .7s,transform .9s var(--ease-premium)}
.story-item.active{opacity:1;visibility:visible;transform:translateY(-50%);pointer-events:auto}
.story-item.leaving{opacity:0;visibility:visible;transform:translateY(calc(-50% - 28px))}
.story-number{display:block;margin-bottom:22px;color:rgba(255,255,255,.37);font-size:10px;font-weight:500;letter-spacing:.24em}
.story-title{margin:0;max-width:min(100%,34rem);font-family:var(--font-display);font-size:clamp(2.6rem,3.6vw,4.6rem);font-weight:400;letter-spacing:-.03em;line-height:1.05;color:var(--ar-white);overflow-wrap:anywhere;text-wrap:balance}
.story-text{max-width:520px;margin:28px 0 0;color:var(--ar-muted-light);font-size:clamp(.92rem,1vw,1.05rem);line-height:1.75}
.story-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px}
.story-list li{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.62);font-size:12px;letter-spacing:.03em}
.story-list li::before{content:"";width:18px;height:1px;background:rgba(255,255,255,.48)}
.story-link{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding-bottom:5px;color:var(--ar-white);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.story-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform var(--transition)}
.story-link:hover::after{transform:scaleX(1)}
.story-progress{position:absolute;right:28px;top:50%;width:2px;height:220px;transform:translateY(-50%);background:rgba(255,255,255,.12);overflow:hidden;z-index:5}
.story-progress-line{display:block;width:100%;height:100%;background:var(--ar-white);transform:scaleY(var(--story-progress));transform-origin:top;will-change:transform}

/* purchase form actual markup */
.purchase-form-section{position:relative;background:var(--ar-background);overflow:hidden}
.purchase-form-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 8%,rgba(255,255,255,.035),transparent 30%)}
.purchase-card{position:relative;padding:clamp(32px,4vw,60px);border:1px solid var(--ar-border);border-radius:24px;background:linear-gradient(145deg,rgba(24,25,28,.98),rgba(10,11,13,.99));box-shadow:0 30px 90px rgba(0,0,0,.22)}
.purchase-card-header{max-width:720px;margin-bottom:36px}
.purchase-card-header .display-heading{font-size:clamp(3rem,4.4vw,5rem)}
.purchase-form.is-hidden{display:none}

/* Multi-step odkup quiz (algorytm jak odkup.autoreduta.pl / involve.me) */
.purchase-quiz{position:relative;min-height:280px}
.purchase-quiz-progress{height:2px;margin-bottom:28px;background:rgba(255,255,255,.1);overflow:hidden;border-radius:999px}
.purchase-quiz-progress-bar{display:block;height:100%;width:0;background:var(--ar-white);transform-origin:left;transition:width .45s var(--ease-premium)}
.purchase-step{display:none}
.purchase-step.is-active{display:block;animation:purchaseStepIn .45s var(--ease-premium) both}
@keyframes purchaseStepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.purchase-step-title{margin:0 0 28px;font-family:var(--font-display);font-size:clamp(1.55rem,2.4vw,2.35rem);font-weight:400;letter-spacing:-.02em;line-height:1.2;color:var(--ar-white);text-wrap:balance}
.purchase-choices{display:grid;gap:12px}
.purchase-choices-1{grid-template-columns:1fr}
.purchase-choices-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.purchase-choices-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.purchase-choice{
  min-height:56px;padding:14px 18px;border:1px solid rgba(255,255,255,.16);border-radius:16px;
  background:rgba(255,255,255,.03);color:var(--ar-white);font-size:.92rem;font-weight:500;letter-spacing:.01em;
  text-align:center;cursor:pointer;transition:border-color var(--transition),background var(--transition),color var(--transition),transform var(--transition);
}
.purchase-choice:hover,.purchase-choice:focus-visible{
  border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);outline:none;
}
.purchase-choice:active{transform:scale(.985)}
.purchase-fields{display:grid;gap:16px;margin-bottom:22px}
.purchase-field{display:grid;gap:8px}
.purchase-field span{color:rgba(255,255,255,.45);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.purchase-next{margin-top:4px}
.purchase-consent{display:flex;align-items:flex-start;gap:12px;margin:8px 0 18px;color:rgba(255,255,255,.62);font-size:.82rem;line-height:1.55}
.purchase-consent input[type="checkbox"],
.search-check input[type="checkbox"],
.cms-form-public input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin:0;flex:none;
  border:1px solid rgba(255,255,255,.22);border-radius:6px;
  background:rgba(255,255,255,.035);background-image:none;
  display:grid;place-content:center;cursor:pointer;
  transition:border-color var(--transition-fast),background var(--transition-fast);
}
.purchase-consent input[type="checkbox"]{margin-top:2px}
.purchase-consent input[type="checkbox"]:hover,
.search-check input[type="checkbox"]:hover,
.cms-form-public input[type="checkbox"]:hover{border-color:rgba(255,255,255,.5)}
.purchase-consent input[type="checkbox"]:focus-visible,
.search-check input[type="checkbox"]:focus-visible,
.cms-form-public input[type="checkbox"]:focus-visible{outline:none;border-color:rgba(255,255,255,.7)}
.purchase-consent input[type="checkbox"]:checked,
.search-check input[type="checkbox"]:checked,
.cms-form-public input[type="checkbox"]:checked{
  background:var(--ar-white);border-color:var(--ar-white);background-image:none;
}
.purchase-consent input[type="checkbox"]:checked::after,
.search-check input[type="checkbox"]:checked::after,
.cms-form-public input[type="checkbox"]:checked::after{
  content:"";width:5px;height:9px;
  border:solid #08090a;border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.purchase-qualify{margin:0;color:rgba(255,255,255,.78)!important;font-size:1rem;line-height:1.55}
@media (max-width:767.98px){
  .purchase-choices-2,.purchase-choices-3{grid-template-columns:1fr}
  .purchase-choice{text-align:left}
}
.purchase-success{padding:30px;border:1px solid var(--ar-border);background:rgba(255,255,255,.03)}

/* latest — listing cards (same as oferta / sprzedaż) */
.latest-section{background:var(--ar-background-soft);overflow:hidden}
.section-header{max-width:760px}
.section-header .display-heading{font-size:clamp(3rem,4.8vw,5.4rem)}
.latest-toolbar{display:flex;justify-content:flex-end;align-items:center;margin:0 0 18px}
.latest-slider{position:relative}
.latest-swiper{overflow:visible!important}
.latest-swiper .swiper-slide{width:min(78vw,320px);height:auto}
.latest-swiper .listing-card{height:100%;background:rgba(255,255,255,.03)}
.latest-controls{display:flex;justify-content:flex-end;gap:8px;margin:0}
.latest-controls button{width:48px;height:48px;border:1px solid rgba(255,255,255,.17);border-radius:50%;background:transparent;color:var(--ar-white);transition:background var(--transition),color var(--transition),border-color var(--transition)}
.latest-controls button:hover:not(:disabled){background:var(--ar-white);color:var(--ar-black);border-color:var(--ar-white)}
.latest-controls button:disabled{opacity:.3}
.latest-cta{margin-top:clamp(22px,3vw,32px)}

@media (min-width:768px){
  .latest-swiper .swiper-slide{width:min(52.5vw,425px)}
}
@media (min-width:1200px){
  .latest-swiper .swiper-slide{width:min(35vw,450px)}
}

/* service actual markup */
.service-band.service-cinematic{position:relative;min-height:760px;display:flex;align-items:center;overflow:hidden;background:var(--ar-black)}
.service-media{position:absolute;inset:0}
.service-media img,.service-media video{width:100%;height:100%;object-fit:cover;object-position:center}
.service-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,10,.94),rgba(8,9,10,.72) 38%,rgba(8,9,10,.18) 72%,rgba(8,9,10,.1)),linear-gradient(180deg,transparent 60%,rgba(8,9,10,.6));z-index:1}
.service-band .container-site{position:relative;z-index:2;width:100%}
.service-content{max-width:670px}
.service-content .display-heading{font-size:clamp(3.4rem,5.6vw,6.5rem)}

/* newsletter inserted by fix */
.newsletter-section{border-block:1px solid var(--ar-border-soft);background:linear-gradient(145deg,#111214,#0d0e10)}
.newsletter-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.75fr);gap:clamp(48px,7vw,110px);align-items:center;padding-block:clamp(80px,8vw,130px)}
.newsletter-title{font-size:clamp(2.15rem,3.6vw,3.65rem)!important}
.newsletter-form{display:grid;gap:12px}
.newsletter-input{width:100%;height:56px;padding:0 22px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.025);color:var(--ar-white);outline:none}
.newsletter-input:focus{border-color:rgba(255,255,255,.6)}
.newsletter-submit{width:100%}
.newsletter-success{display:none;padding:28px;border:1px solid var(--ar-border);background:rgba(255,255,255,.03);color:var(--ar-muted-light)}
.newsletter-success.is-visible{display:block}

/* compact blog actual markup */
.blog-compact{background:var(--ar-background)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.blog-card{display:block;color:var(--ar-white);margin-bottom:15px}
.blog-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:24px;background:#121315}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-premium),filter .9s var(--ease-premium)}
.blog-card:hover .blog-thumb img{transform:scale(1.045);filter:brightness(.9)}
.blog-body{padding-top:17px}
.blog-body span{color:var(--ar-muted);font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.blog-body h3{margin:10px 0 0;font-family:var(--font-display);font-size:clamp(1.45rem,1.9vw,2rem);font-weight:400;line-height:1.17;letter-spacing:-.018em}

/* social actual markup */
.social-section{background:var(--ar-background-soft);border-top:1px solid var(--ar-border-soft)}
.social-block{margin-top:54px}.social-block:first-of-type{margin-top:0}
.social-block-header{margin-bottom:20px}.social-block-header h3{margin:0;font-family:var(--font-display);font-size:clamp(2rem,2.8vw,3rem);font-weight:400}
.social-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(190px,1fr));min-height:500px;gap:1px;background:var(--ar-border-soft);border:1px solid var(--ar-border-soft);border-radius:24px;overflow:hidden}
.social-grid-reverse{grid-template-columns:1fr 2fr}
.social-card{position:relative;overflow:hidden;background:#0c0d0f;border-radius:0}
.social-grid>.social-card-large{grid-column:1;grid-row:1 / span 2}
.social-grid>.social-card:not(.social-card-large):nth-child(2){grid-column:2;grid-row:1}
.social-grid>.social-card:not(.social-card-large):nth-child(3){grid-column:2;grid-row:2}
.social-grid-reverse>.social-card:not(.social-card-large):nth-child(1){grid-column:1;grid-row:1}
.social-grid-reverse>.social-card:not(.social-card-large):nth-child(2){grid-column:1;grid-row:2}
.social-grid-reverse>.social-card-large{grid-column:2;grid-row:1 / span 2}
.social-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.15s var(--ease-premium),filter .9s var(--ease-premium)}
.social-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.04),rgba(8,9,10,.65));z-index:1}
.social-card span{position:absolute;left:24px;bottom:22px;z-index:2;color:var(--ar-white);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.social-card:hover img{transform:scale(1.055);filter:brightness(.78)}

/* footer actual markup — mapa po lewej, treść po prawej */
.footer-gradient{position:relative;overflow:hidden;border-top:1px solid var(--ar-border-soft);background:var(--ar-black)}
.footer-gradient>.footer-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,.85fr);max-width:none;padding-inline:0;min-height:560px}
.footer-info{display:flex;flex-direction:column;justify-content:center;padding:70px var(--page-gutter) 70px clamp(48px,5vw,90px);background:linear-gradient(90deg,rgba(8,9,10,.55),var(--ar-black) 28%);z-index:3}
.footer-logo{width:82px;height:auto;margin-bottom:30px}
.footer-info h3{margin:0;font-family:var(--font-display);font-size:clamp(2.4rem,3.3vw,3.9rem);font-weight:400}
.footer-address{margin:22px 0 0;color:var(--ar-muted-light);line-height:1.7}
.footer-contact-list{display:flex;flex-direction:column;gap:7px;margin-top:20px}.footer-contact-list a{width:fit-content;color:var(--ar-white)}
.footer-route{display:inline-flex;align-items:center;gap:9px;width:fit-content;margin-top:28px;color:var(--ar-white);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.footer-bottom{margin-top:30px;padding-top:22px;border-top:1px solid var(--ar-border-soft);color:rgba(255,255,255,.38);font-size:10px}
.footer-bottom p{display:inline;margin:0}
.footer-bottom-links{display:inline;margin:0;padding:0}
.footer-bottom-links a{color:rgba(255,255,255,.38)}
.footer-bottom-links a:hover{color:var(--ar-white)}
.footer-bottom p + .footer-bottom-links::before,
.footer-bottom-links a + a::before{content:"|";margin:0 .55em}
.footer-gradient>.footer-grid.is-text-only{grid-template-columns:1fr;min-height:0}
.footer-gradient>.footer-grid.is-text-only .footer-info{background:var(--ar-black);padding-left:var(--page-gutter)}
.footer-map{position:relative;min-height:560px;overflow:hidden;background:#0c0d0f}
.footer-map iframe{
  position:absolute;
  /* Crop Google chrome (logo / controls) that looks washed after invert */
  inset:-8% -6% -10% -6%;
  width:112%;
  height:118%;
  border:0;
  pointer-events:none;
  filter:invert(1) grayscale(1) brightness(.95) contrast(1.05);
  opacity:.92;
  transition:transform 1.2s var(--ease-premium),filter 1.2s var(--ease-premium),opacity .8s var(--ease-premium);
}
.footer-map-shield{
  position:absolute;
  inset:0;
  z-index:1;
  background:transparent;
  /* Blocks scroll/zoom on the embed — no Google “naciśnij i przewiń” overlay */
}
.footer-map:hover iframe{transform:scale(1.02);filter:invert(1) grayscale(1) brightness(1.05) contrast(1.08);opacity:1}
.footer-map::before,.footer-map-gradient{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,transparent 48%,rgba(8,9,10,.35) 72%,rgba(8,9,10,.92) 88%,var(--ar-black) 100%),
    radial-gradient(ellipse at 35% 50%,transparent 40%,rgba(8,9,10,.35) 100%),
    linear-gradient(180deg,transparent 78%,rgba(8,9,10,.55) 100%),
    linear-gradient(0deg,transparent 88%,rgba(8,9,10,.4) 100%);
}

/* story animation details */
.story-item.active .story-number,.story-item.active .story-title,.story-item.active .story-text,.story-item.active .story-list,.story-item.active .story-link{animation:storyDetailIn .8s var(--ease-premium) both}
.story-item.active .story-title{animation-delay:.05s}.story-item.active .story-text{animation-delay:.1s}.story-item.active .story-list{animation-delay:.15s}.story-item.active .story-link{animation-delay:.2s}
@keyframes storyDetailIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* responsive */
@media (max-width:1199.98px){
  .story-container{grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr)}
  .story-item{left:40px;right:50px}.story-content{padding-inline:40px 50px}
  .latest-swiper .swiper-slide{width:min(52.5vw,425px)}
}
@media (max-width:991.98px){
  .newsletter-inner{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-card:last-child{grid-column:1/-1}
  .footer-gradient>.footer-grid{grid-template-columns:1fr}
}
@media (max-width:767.98px){
  .floating-phone-btn{right:14px;bottom:14px;width:50px;height:50px;min-height:50px;padding:0;border-radius:50%;font-size:0;justify-content:center}.floating-phone-btn i{font-size:1.25rem}.floating-phone-label{display:none}
  .hero-cinematic{min-height:640px}.hero-cinematic .hero-title{font-size:clamp(3.45rem,16vw,5.4rem)}.hero-cinematic .hero-lead{max-width:94%;font-size:.92rem;line-height:1.65}
  .story-section{height:780vh}.story-sticky{min-height:620px}.story-container{display:block}.story-media{position:absolute;inset:0}.story-media::after{background:linear-gradient(180deg,rgba(8,9,10,.04),rgba(8,9,10,.06) 36%,rgba(8,9,10,.62) 62%,rgba(8,9,10,.97) 84%,#08090a 100%)}
  .story-content{position:absolute;inset:auto 0 0;height:auto;max-height:58svh;min-height:48svh;display:block;padding:72px var(--page-gutter) 40px;border-left:0;background:linear-gradient(180deg,transparent,rgba(8,9,10,.72) 16%,#08090a 48%);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .story-item{left:var(--page-gutter);right:calc(var(--page-gutter) + 20px);top:72px;bottom:auto;transform:translateY(28px);max-height:none}.story-item.active{transform:none}.story-item.leaving{transform:translateY(-22px)}
  .story-title{font-size:clamp(2.2rem,9.5vw,3.2rem);line-height:1.08}.story-text{margin-top:16px;font-size:.86rem;line-height:1.55}.story-list{margin-top:15px;gap:5px}.story-list li{font-size:10px}.story-link{margin-top:20px;font-size:10px}.story-number{display:none}
  .story-progress{right:12px;height:150px}
  .purchase-card{padding:28px 20px}.purchase-card-header .display-heading{font-size:clamp(2.7rem,12vw,4rem)}
  .latest-swiper .swiper-slide{width:min(78vw,300px)}.latest-toolbar,.latest-controls{display:none}
  .service-band.service-cinematic{min-height:700px;align-items:flex-end}.service-overlay{background:linear-gradient(180deg,rgba(8,9,10,.04),rgba(8,9,10,.08) 34%,rgba(8,9,10,.75) 68%,#08090a 100%)}.service-content{padding-bottom:74px}.service-content .display-heading{font-size:clamp(3rem,13vw,4.6rem)}
  .blog-grid{grid-template-columns:1fr}.blog-card:last-child{grid-column:auto}
  .social-grid,.social-grid-reverse{display:flex;min-height:0;overflow-x:auto;gap:12px;border:0;background:transparent;scroll-snap-type:x mandatory;scrollbar-width:none}.social-grid::-webkit-scrollbar{display:none}.social-card,.social-card-large{flex:0 0 82vw;min-height:370px;grid-column:auto;grid-row:auto;scroll-snap-align:start;border-radius:24px}
  .footer-gradient>.footer-grid{display:flex;flex-direction:column;min-height:0}.footer-map{order:0;min-height:360px}.footer-info{order:1;padding:56px var(--page-gutter) 48px;background:var(--ar-black)}.footer-map::before,.footer-map-gradient{background:linear-gradient(180deg,transparent 0%,transparent 45%,rgba(8,9,10,.45) 72%,var(--ar-black) 100%)}
}
@media (hover:none){.social-card:hover img{transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.story-image,.story-item{transition:none!important}.scroll-line{animation:none}.story-item.active .story-number,.story-item.active .story-title,.story-item.active .story-text,.story-item.active .story-list,.story-item.active .story-link{animation:none}}

/* =========================================================
   STORY CINEMATIC v4.1 — continuous morph / wipe / grade / bare
   ========================================================= */

.story-cinematic{
  position:relative;
  height:620vh;
  background:var(--ar-black);
  --story-progress:0;
  --story-local:0;
  --story-morph:0;
}

.story-cinematic .story-sticky{
  position:sticky;
  top:0;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  background:var(--ar-black);
}

.story-cinematic .story-media{
  position:absolute;
  inset:0;
  z-index:1;
  background:#090a0b;
}

.story-cinematic .story-media::after{display:none}

.story-cinematic .story-image{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  /* Kill legacy .story-image scale(1.075)→scale(1) on .active — that caused the jump */
  transform:none !important;
  filter:brightness(.9) contrast(1.03);
  will-change:opacity;
  transition:none !important;
}

.story-cinematic .story-image.active,
.story-cinematic .story-image.leaving{
  transform:none !important;
  filter:brightness(.9) contrast(1.03);
}

.story-cinematic .story-image img,
.story-cinematic .story-image video{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  /* Extra height so continuous pan across all scenes never hits an edge */
  height:136%;
  object-fit:cover;
  object-position:center center;
  /* Shared pan only — no scale */
  transform:translate3d(0,calc(var(--story-media-y,0) * -26.5%),0) !important;
  will-change:transform;
}

.story-cinematic .story-veil{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,9,10,.62) 0%,rgba(8,9,10,.22) 46%,rgba(8,9,10,.1) 100%),
    linear-gradient(180deg,rgba(8,9,10,.4) 0%,transparent 30%,transparent 58%,rgba(8,9,10,.58) 100%);
}

.story-cinematic .story-grade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:.55;
  transition:background .9s cubic-bezier(.22,1,.36,1),opacity .9s ease;
  background:rgba(140,160,180,.22);
}

.story-cinematic[data-grade="steel"] .story-grade{
  background:rgba(130,150,175,.28);
  opacity:.5;
}
.story-cinematic[data-grade="warm"] .story-grade{
  background:rgba(190,150,110,.3);
  opacity:.48;
}
.story-cinematic[data-grade="amber"] .story-grade{
  background:rgba(200,140,70,.32);
  opacity:.5;
}
.story-cinematic[data-grade="ice"] .story-grade{
  background:rgba(110,150,190,.3);
  opacity:.52;
}
.story-cinematic[data-grade="teal"] .story-grade{
  background:rgba(90,160,165,.3);
  opacity:.5;
}

.story-cinematic .story-stage{
  position:relative;
  z-index:3;
  height:100%;
  width:100%;
  max-width:1720px;
  margin-inline:auto;
  padding:calc(var(--nav-height) + 24px) 1.5rem 48px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  pointer-events:none;
}

@media (min-width:768px){
  .story-cinematic .story-stage{padding-inline:2.5rem;align-items:center}
}
@media (min-width:992px){
  .story-cinematic .story-stage{padding-inline:4rem}
}

.story-cinematic .story-content{
  position:relative;
  width:min(100%,520px);
  height:auto;
  min-height:min(520px,72vh);
  max-height:none;
  padding:0;
  border:0;
  background:transparent;
  display:block;
  pointer-events:auto;
}

.story-cinematic .story-panel,
.story-cinematic .story-item{
  --title-o:0;
  --body-o:0;
  position:absolute;
  left:0;
  right:0;
  top:auto;
  bottom:0;
  width:100%;
  margin:0;
  padding:28px 28px 30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:rgba(10,11,13,.32);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:0 28px 80px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:none;
}

.story-cinematic .story-item.is-visible{
  opacity:1;
  visibility:visible;
}

/* First paint before JS runs */
.story-cinematic .story-item.active:not(.is-visible){
  --title-o:1;
  --body-o:1;
  opacity:1;
  visibility:visible;
}

/* Desktop: bare typography — no glass card */
@media (min-width:768px){
  .story-cinematic .story-panel,
  .story-cinematic .story-item{
    top:50%;
    bottom:auto;
    transform:translate3d(0,-50%,0);
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
    max-width:540px;
  }
}

.story-cinematic .story-number{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
  color:rgba(255,255,255,.42);
  font-size:10px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  opacity:var(--title-o);
  transform:translate3d(0,calc((1 - var(--title-o)) * 14px),0);
  will-change:opacity,transform;
}
.story-cinematic .story-number::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
  opacity:.55;
  flex:none;
}

.story-cinematic .story-title{
  margin:0;
  max-width:none;
  font-family:var(--font-display);
  font-size:clamp(2.15rem,3.6vw,3.65rem);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.06;
  color:var(--ar-white);
  overflow-wrap:anywhere;
  text-wrap:balance;
  text-shadow:0 2px 28px rgba(0,0,0,.35);
  opacity:var(--title-o);
  transform:translate3d(0,calc((1 - var(--title-o)) * 22px),0);
  will-change:opacity,transform;
}

.story-cinematic .story-text{
  max-width:36em;
  margin:20px 0 0;
  color:rgba(255,255,255,.74);
  font-size:.95rem;
  line-height:1.65;
  opacity:var(--body-o);
  transform:translate3d(0,calc((1 - var(--body-o)) * 16px),0);
  will-change:opacity,transform;
}

.story-cinematic .story-list{display:none!important}

.story-cinematic .story-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  margin-top:28px;
  padding:0 22px;
  border:1px solid var(--ar-white);
  border-radius:999px;
  background:var(--ar-white);
  color:var(--ar-black);
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:var(--body-o);
  transform:translate3d(0,calc((1 - var(--body-o)) * 10px),0);
  transition:background .35s cubic-bezier(.22,1,.36,1),border-color .35s cubic-bezier(.22,1,.36,1),color .35s cubic-bezier(.22,1,.36,1),translate .35s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}

.story-cinematic .story-link::after{content:none}

.story-cinematic .story-link:hover{
  background:var(--ar-silver);
  border-color:var(--ar-silver);
  color:var(--ar-black);
  translate:0 -2px;
}

.story-cinematic .story-progress{
  position:absolute;
  left:1.5rem;
  top:50%;
  width:2px;
  height:min(220px,36vh);
  transform:translateY(-50%);
  background:rgba(255,255,255,.14);
  overflow:hidden;
  z-index:4;
  display:none;
}

@media (min-width:992px){
  .story-cinematic .story-progress{
    display:block;
    left:auto;
    right:4rem;
  }
}

.story-cinematic .story-progress-line{
  display:block;
  width:100%;
  height:100%;
  background:var(--ar-white);
  transform:scaleY(var(--story-progress));
  transform-origin:top;
  will-change:transform;
}

@media (max-width:767.98px){
  .story-cinematic{height:580vh}
  .story-cinematic .story-stage{
    align-items:flex-end;
    padding:calc(var(--nav-height) + 12px) 1.5rem max(28px,env(safe-area-inset-bottom));
  }
  .story-cinematic .story-content{width:100%;min-height:0}
  .story-cinematic .story-panel,
  .story-cinematic .story-item{
    position:relative;
    left:auto;right:auto;top:auto;bottom:auto;
    display:none;
    transform:none;
    padding:22px 20px 24px;
    max-height:none;
    opacity:1;
    visibility:visible;
  }
  /* Only the focused chapter — avoid stacking during morph */
  .story-cinematic .story-item.active{
    display:block;
  }
  .story-cinematic .story-item.is-visible:not(.active){
    display:none;
  }
  .story-cinematic .story-title{
    font-size:clamp(1.85rem,7.5vw,2.45rem);
    text-shadow:none;
  }
  .story-cinematic .story-text{margin-top:12px;font-size:.86rem}
  .story-cinematic .story-link{min-height:44px;margin-top:18px;padding:0 18px}
  .story-cinematic .story-list{display:none}
  .story-cinematic .story-number{display:flex}
  .story-cinematic .story-veil{
    background:
      linear-gradient(180deg,rgba(8,9,10,.25) 0%,transparent 30%,rgba(8,9,10,.45) 58%,rgba(8,9,10,.82) 100%);
  }
  .story-cinematic .story-grade{opacity:.35}
}

@media (prefers-reduced-motion:reduce){
  .story-cinematic .story-image{
    transition:opacity .01ms linear;
  }
  .story-cinematic .story-image.active{
    opacity:1!important;
    visibility:visible!important;
    clip-path:none!important;
  }
  .story-cinematic .story-image img,
  .story-cinematic .story-image video{
    transform:none!important;
  }
  .story-cinematic .story-grade{transition:none}
  .story-cinematic .story-number,
  .story-cinematic .story-title,
  .story-cinematic .story-text,
  .story-cinematic .story-list,
  .story-cinematic .story-link{
    transform:none!important;
  }
}