* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: #000;
    color: white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow: hidden;
}


/* =========================
   INTRO
========================= */

#intro {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 55%,
            #071526 0%,
            #02060d 35%,
            #000 75%
        );

    z-index: 100;
}


/* =========================
   CANVAS
========================= */

#spaceCanvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;
}


/* =========================
   SCENA
========================= */

#logoScene {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    transform:
        translate(-50%, -50%);

    z-index: 3;

    pointer-events: none;
}


/* =========================
   PLANETA
========================= */

.planet {
    position: absolute;

    left: 50%;
    top: 54%;

    width: min(46vw, 620px);

    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    transition:
        transform 0.15s ease-out;

    will-change:
        transform,
        opacity,
        filter;
}


.planet-atmosphere {
    position: absolute;

    inset: -15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(58, 208, 255, 0.22),
            rgba(24, 102, 255, 0.12) 40%,
            transparent 68%
        );

    filter: blur(40px);

    animation:
        atmospherePulse 4s
        ease-in-out
        infinite alternate;
}


.planet-body {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 23%,

            #53eaff 0%,
            #168cff 9%,
            #0b3e83 27%,
            #041b3d 47%,
            #010713 70%,
            #000 100%
        );

    box-shadow:
        inset
        -90px
        -65px
        130px
        rgba(0, 0, 0, 0.92),

        inset
        35px
        20px
        70px
        rgba(91, 226, 255, 0.12),

        0 0 70px
        rgba(0, 162, 255, 0.20);

    overflow: hidden;
}


.planet-body::before {
    content: "";

    position: absolute;

    width: 150%;
    height: 42%;

    left: -25%;
    top: 31%;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(86, 225, 255, 0.10),

            rgba(72, 87, 255, 0.16),

            transparent
        );

    transform:
        rotate(-13deg);

    filter:
        blur(17px);
}


/* =========================
   GRACIANO
========================= */

#logo {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    text-align: center;

    will-change:
        transform,
        filter,
        opacity;
}


#logo h1 {
    font-size:
        clamp(
            58px,
            10vw,
            155px
        );

    font-weight: 800;

    letter-spacing: 0.11em;

    margin-right: -0.11em;

    line-height: 0.85;

    color: transparent;

    background:
        linear-gradient(
            110deg,

            #ffffff 5%,
            #dffcff 20%,
            #62eaff 38%,
            #168cff 55%,
            #765dff 72%,
            #ffffff 95%
        );

    background-size:
        250% 250%;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    filter:
        drop-shadow(
            0 0 22px
            rgba(53, 204, 255, 0.20)
        );

    animation:
        logoGradient 5s
        linear infinite;
}


#logo span {
    display: block;

    margin-top: 22px;

    color: #70eaff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.3em;

    margin-right: -1.3em;

    text-shadow:
        0 0 15px
        rgba(58, 216, 255, 0.8);
}


/* =========================
   INSTRUKCJA
========================= */

.instruction {
    position: absolute;

    left: 50%;
    bottom: 38px;

    transform:
        translateX(-50%);

    width: 260px;

    text-align: center;

    z-index: 10;

    pointer-events: none;
}


.instruction span {
    display: block;

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

    font-size: 8px;

    letter-spacing: 0.38em;

    margin-right: -0.38em;
}


.instruction-line {
    width: 100%;
    height: 1px;

    margin: 13px 0;

    background:
        linear-gradient(
            90deg,

            transparent,
            #48e5ff,
            transparent
        );

    box-shadow:
        0 0 10px
        rgba(52, 220, 255, 0.8);
}


.instruction small {
    color:
        rgba(
            255,
            255,
            255,
            0.25
        );

    font-size: 6px;

    letter-spacing: 0.35em;
}


/* =========================
   ANIMACJE INTRO
========================= */

@keyframes logoGradient {

    0% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

    100% {
        background-position:
            0% 50%;
    }
}


@keyframes atmospherePulse {

    from {
        transform:
            scale(0.93);

        opacity: 0.65;
    }

    to {
        transform:
            scale(1.08);

        opacity: 1;
    }
}


/* =========================
   TELEFON - INTRO
========================= */

@media (max-width: 700px) {

    .planet {
        width: 85vw;
    }


    #logo h1 {
        font-size: 13vw;
    }


    #logo span {
        font-size: 10px;

        margin-top: 16px;
    }


    .instruction {
        bottom: 28px;
    }

}


/* ========================================
   STRONA GŁÓWNA
======================================== */

#website {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: block;

    background: #030303;

    opacity: 0;
    visibility: hidden;

    transform: none;
    transform-origin: center top;

    overflow: visible;

    scroll-behavior: smooth;
}


#website.active {
    opacity: 1;
    visibility: visible;
    transform: none;
}


.hero {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(0, 153, 255, 0.13),
            transparent 27%
        ),

        radial-gradient(
            circle at 30% 70%,
            rgba(83, 49, 255, 0.08),
            transparent 32%
        ),

        #020305;
}


.hero-background {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 55%,
            rgba(39, 203, 255, 0.035) 70%,
            transparent 100%
        );

    pointer-events: none;
}


/* ========================================
   NAVBAR
======================================== */

.navbar {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;

    height: 90px;

    padding: 0 6vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 5;

    opacity: 0;

    transform:
        translateY(-20px);
}


.brand {
    display: flex;

    align-items: baseline;

    gap: 9px;
}


.brand strong {
    font-size: 18px;

    letter-spacing: 0.08em;
}


.brand span {
    color: #65eaff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.18em;
}


.nav-links {
    display: flex;

    gap: 38px;
}
.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: #5deaff;

    box-shadow:
        0 0 8px
        rgba(93, 234, 255, 0.8);

    transition:
        width 0.35s
        cubic-bezier(.16, 1, .3, 1);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a {
    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    text-decoration: none;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.12em;

    transition:
        0.3s ease;
}


.nav-links a:hover {
    color: white;
}


.nav-button {
    padding:
        13px 20px;

    border:
        1px solid
        rgba(
            94,
            226,
            255,
            0.35
        );

    border-radius:
        100px;

    color: white;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
        0.1em;

    transition:
        0.3s ease;
}


.nav-button:hover {
    background:
        #55e7ff;

    color:
        #001018;

    box-shadow:
        0 0 30px
        rgba(
            58,
            220,
            255,
            0.25
        );
}


/* ========================================
   HERO
======================================== */

.hero-content {
    position: relative;

    width: 100%;

    padding-left:
        8vw;

    z-index: 4;
}


.hero-label {
    display:
        inline-block;

    margin-bottom:
        28px;

    color:
        #66e9ff;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.35em;

    opacity: 0;

    transform:
        translateY(20px);
}


.hero-content h2 {
    max-width:
        1050px;

    color:
        white;

    font-size:
        clamp(
            52px,
            7.5vw,
            120px
        );

    font-weight:
        800;

    line-height:
        0.98;

    letter-spacing:
        -0.055em;

    opacity: 0;

    transform:
        translateY(70px);

    filter:
        blur(12px);
}


.hero-content h2 span {
    color:
        transparent;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #65eaff,
            #168cff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;
}


.hero-content p {
    max-width:
        520px;

    margin-top:
        35px;

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

    font-size:
        14px;

    line-height:
        1.7;

    opacity: 0;

    transform:
        translateY(25px);
}


.hero-buttons {
    display: flex;

    gap: 15px;

    margin-top:
        35px;

    opacity: 0;

    transform:
        translateY(25px);
}


.primary-button,
.secondary-button {
    padding:
        15px 22px;

    border-radius:
        100px;

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.primary-button {
    background:
        linear-gradient(
            90deg,
            #1595ff,
            #62eaff
        );

    color:
        #001018;

    box-shadow:
        0 0 35px
        rgba(
            31,
            184,
            255,
            0.20
        );
}


.secondary-button {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    color:
        white;
}


/* ========================================
   SCROLL
======================================== */

.scroll-indicator {
    position:
        absolute;

    right:
        5vw;

    bottom:
        45px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    opacity:
        0;
}


.scroll-indicator span {
    color:
        rgba(
            255,
            255,
            255,
            0.32
        );

    font-size:
        7px;

    letter-spacing:
        0.3em;
}


.scroll-indicator div {
    width:
        55px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            #5deaff,
            transparent
        );
}


/* ========================================
   WEJŚCIE ELEMENTÓW HOME
======================================== */

#website.active .navbar {
    animation:
        homeNavbar
        0.9s
        cubic-bezier(.16, 1, .3, 1)
        forwards
        0.5s;
}


#website.active .hero-label {
    animation:
        homeElement
        0.8s
        cubic-bezier(.16, 1, .3, 1)
        forwards
        0.7s;
}


#website.active .hero-content h2 {
    animation:
        homeTitle
        1.2s
        cubic-bezier(.16, 1, .3, 1)
        forwards
        0.8s;
}


#website.active .hero-content p {
    animation:
        homeElement
        0.9s
        cubic-bezier(.16, 1, .3, 1)
        forwards
        1.05s;
}


#website.active .hero-buttons {
    animation:
        homeElement
        0.9s
        cubic-bezier(.16, 1, .3, 1)
        forwards
        1.2s;
}


#website.active .scroll-indicator {
    animation:
        fadeIn
        1s
        ease
        forwards
        1.5s;
}


/* ========================================
   ANIMACJE HOME
======================================== */

@keyframes homeNavbar {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes homeElement {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes homeTitle {

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}


@keyframes fadeIn {

    to {
        opacity: 1;
    }
}


/* ========================================
   WYJŚCIE INTRO
======================================== */

#intro.exit {
    animation:
        introFinalExit
        1.4s
        cubic-bezier(.76, 0, .24, 1)
        forwards;

    pointer-events:
        none;
}


#intro.exit #logo {
    animation:
        logoFinalExit
        1.35s
        cubic-bezier(.76, 0, .24, 1)
        forwards;
}


#intro.exit .planet {
    animation:
        planetFinalExit
        1.4s
        cubic-bezier(.76, 0, .24, 1)
        forwards;
}


/* LOGO LECI W STRONĘ UŻYTKOWNIKA */

@keyframes logoFinalExit {

    0% {
        opacity: 1;
    }

    45% {
        opacity: 1;

        filter:
            brightness(2)
            blur(0);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(5);

        filter:
            brightness(4)
            blur(25px);
    }
}


/* PLANETA LECI W STRONĘ UŻYTKOWNIKA */

@keyframes planetFinalExit {

    0% {
        opacity: 1;
    }

    35% {
        opacity: 1;

        filter:
            brightness(1.25)
            blur(0);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(3.5);

        filter:
            brightness(2)
            blur(20px);
    }
}


/* CAŁE INTRO ZNIKA */

@keyframes introFinalExit {

    0% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    75% {
        opacity: 0.9;

        background:
            #ffffff;
    }

    100% {
        opacity: 0;

        visibility:
            hidden;

        background:
            #ffffff;
    }
}


/* ========================================
   MOBILE - HOME
======================================== */

@media (max-width: 800px) {

    .navbar {
        height:
            75px;

        padding:
            0 22px;
    }


    .nav-links {
        display:
            none;
    }


    .nav-button {
        font-size:
            7px;

        padding:
            11px 14px;
    }


    .hero-content {
        padding:
            0 24px;
    }


    .hero-content h2 {
        font-size:
            clamp(
                43px,
                14vw,
                75px
            );
    }


    .hero-content p {
        max-width:
            90%;

        font-size:
            12px;
    }


    .hero-buttons {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .scroll-indicator {
        display:
            none;
    }
}
/* ========================================
   USŁUGI
======================================== */

.services {
    position: relative;

    min-height: 100vh;

    padding:
        130px
        7vw
        150px;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(0, 174, 255, 0.07),
            transparent 28%
        ),
        #020305;

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


/* HEADER */

.services-header {
    max-width: 1200px;

    margin-bottom: 90px;
}


.section-number {
    display: block;

    margin-bottom: 28px;

    color: #5deaff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.35em;
}


.services-header h3 {
    max-width: 900px;

    font-size:
        clamp(
            45px,
            6vw,
            95px
        );

    line-height: 0.95;

    letter-spacing: -0.05em;

    font-weight: 800;
}


.services-header h3 span {
    color: #5deaff;
}


.services-header p {
    max-width: 520px;

    margin-top: 32px;

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

    font-size: 13px;

    line-height: 1.8;
}


/* GRID */

.services-grid {
    display: grid;

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

    gap: 14px;

    max-width: 1500px;
}


/* KARTA */

.service-card {
    position: relative;

    min-height: 480px;

    padding: 32px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

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

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

    transition:
        transform 0.5s
        cubic-bezier(.16, 1, .3, 1),

        border-color 0.5s ease,

        background 0.5s ease;
}


/* POŚWIATA */

.service-card::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -180px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(52, 219, 255, 0.20),
            transparent 68%
        );

    opacity: 0;

    transition:
        opacity 0.5s ease,
        transform 0.7s
        cubic-bezier(.16, 1, .3, 1);

    pointer-events: none;
}


.service-card:hover {
    transform:
        translateY(-10px);

    border-color:
        rgba(91, 230, 255, 0.35);

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


.service-card:hover::before {
    opacity: 1;

    transform:
        scale(1.25);
}


/* GÓRA KARTY */

.service-top {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.service-top > span {
    color:
        rgba(
            255,
            255,
            255,
            0.30
        );

    font-size: 10px;

    letter-spacing: 0.2em;
}


.service-arrow {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

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

    font-size: 18px;

    transition:
        0.4s
        cubic-bezier(.16, 1, .3, 1);
}


.service-card:hover
.service-arrow {
    color: #001018;

    background: #5deaff;

    border-color: #5deaff;

    transform:
        rotate(45deg);
}


/* TREŚĆ */

.service-content {
    position: relative;

    z-index: 2;
}


.service-content h4 {
    margin-bottom: 24px;

    font-size:
        clamp(
            28px,
            2.7vw,
            48px
        );

    line-height: 0.95;

    letter-spacing: -0.04em;
}


.service-content p {
    max-width: 330px;

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

    font-size: 12px;

    line-height: 1.7;
}


/* LINIA */

.service-line {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 0%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #62eaff
        );

    box-shadow:
        0 0 20px
        rgba(64, 222, 255, 0.5);

    transition:
        width 0.65s
        cubic-bezier(.16, 1, .3, 1);
}


.service-card:hover
.service-line {
    width: 100%;
}


/* ========================================
   USŁUGI - MOBILE
======================================== */

@media (max-width: 900px) {

    .services {
        padding:
            100px
            22px;
    }


    .services-header {
        margin-bottom:
            60px;
    }


    .services-grid {
        grid-template-columns:
            1fr;
    }


    .service-card {
        min-height:
            390px;
    }

}
/* ========================================
   SCROLL REVEAL
======================================== */

.services-header,
.service-card {
    opacity: 0;
    transform: translateY(70px);
    filter: blur(8px);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.16, 1, .3, 1),
        filter 1s ease;
}


/* HEADER */

.services-header.reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}


/* KARTY */

.service-card.reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}


/* OPÓŹNIENIA */

.service-card:nth-child(1) {
    transition-delay: 0.05s;
}

.service-card:nth-child(2) {
    transition-delay: 0.15s;
}

.service-card:nth-child(3) {
    transition-delay: 0.25s;
}


/* zachowujemy unoszenie po najechaniu */

.service-card.reveal:hover {
    transform: translateY(-10px);
}
/* ========================================
   DLACZEGO GRACIANO WEB
======================================== */

.about {
    position: relative;

    min-height: 100vh;

    padding:
        130px
        7vw
        150px;

    background:
        radial-gradient(
            circle at 15% 45%,
            rgba(0, 174, 255, 0.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(91, 66, 255, 0.06),
            transparent 30%
        ),
        #010204;

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

    overflow: hidden;
}


/* MAŁY NAPIS */

.about-label {
    color: #5deaff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.35em;
}


/* GRID */

.about-grid {
    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    gap: 8vw;

    align-items: center;

    min-height: 70vh;

    margin-top: 70px;
}


/* ========================================
   WIELKIE 20
======================================== */

.about-number {
    position: relative;
}


.big-number {
    display: block;

    font-size:
        clamp(
            180px,
            27vw,
            470px
        );

    font-weight: 800;

    line-height: 0.75;

    letter-spacing: -0.1em;

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(103, 230, 255, 0.30);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(58, 213, 255, 0.03)
        );

    -webkit-background-clip: text;
    background-clip: text;

    text-shadow:
        0 0 80px
        rgba(0, 174, 255, 0.08);

    user-select: none;

    will-change: transform;
}


.number-description {
    position: relative;

    margin-top: 45px;

    padding-left: 20px;

    border-left:
        1px solid
        rgba(93, 234, 255, 0.35);
}


.number-description span {
    display: block;

    margin-bottom: 8px;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.25em;
}


.number-description span:first-child {
    color: #5deaff;
}


/* ========================================
   TREŚĆ
======================================== */

.about-content h3 {
    max-width: 800px;

    font-size:
        clamp(
            43px,
            5.2vw,
            88px
        );

    line-height: 0.98;

    letter-spacing: -0.05em;

    font-weight: 800;
}


.about-content h3 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #61eaff,
            #168cff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


/* OPIS */

.about-text {
    display: grid;

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

    gap: 40px;

    max-width: 780px;

    margin-top: 55px;
}


.about-text p {
    color:
        rgba(
            255,
            255,
            255,
            0.43
        );

    font-size: 12px;

    line-height: 1.8;
}


/* ========================================
   WARTOŚCI
======================================== */

.about-values {
    margin-top: 65px;

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


.about-values > div {
    display: flex;

    align-items: center;

    gap: 30px;

    padding:
        20px
        0;

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

    transition:
        padding-left 0.4s
        cubic-bezier(.16, 1, .3, 1);
}


.about-values > div:hover {
    padding-left: 12px;
}


.about-values span {
    color: #5deaff;

    font-size: 8px;

    letter-spacing: 0.2em;
}


.about-values strong {
    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size: 10px;

    letter-spacing: 0.15em;

    transition:
        color 0.3s ease;
}


.about-values > div:hover strong {
    color: white;
}


/* ========================================
   ANIMACJA SCROLL
======================================== */

.about-label,
.about-number,
.about-content {
    opacity: 0;

    transform:
        translateY(60px);

    filter:
        blur(8px);

    transition:
        opacity 1s ease,
        transform 1.1s cubic-bezier(.16, 1, .3, 1),
        filter 1s ease;
}


.about-label.reveal,
.about-number.reveal,
.about-content.reveal {
    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}


.about-number {
    transition-delay:
        0.1s;
}


.about-content {
    transition-delay:
        0.2s;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 900px) {

    .about {
        padding:
            100px
            22px;
    }


    .about-grid {
        grid-template-columns:
            1fr;

        gap:
            80px;

        margin-top:
            70px;
    }


    .big-number {
        font-size:
            clamp(
                180px,
                65vw,
                350px
            );
    }


    .about-text {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }

}
/* ========================================
   PROCES WSPÓŁPRACY
======================================== */

.process {
    position: relative;

    min-height: 100vh;

    padding: 140px 7vw 170px;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(0, 157, 255, 0.08),
            transparent 30%
        ),
        #020305;

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

    overflow: hidden;
}


/* HEADER */

.process-header {
    max-width: 950px;

    margin-bottom: 130px;
}


.process-label {
    display: block;

    margin-bottom: 30px;

    color: #5deaff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.35em;
}


.process-header h3 {
    font-size:
        clamp(
            48px,
            6vw,
            100px
        );

    line-height: 0.98;

    letter-spacing: -0.055em;

    font-weight: 800;
}


.process-header h3 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #5deaff,
            #168cff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


.process-header p {
    max-width: 500px;

    margin-top: 35px;

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

    font-size: 13px;

    line-height: 1.8;
}


/* ========================================
   TIMELINE
======================================== */

.process-timeline {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 50px;

    max-width: 1500px;

    padding-top: 50px;
}


/* SZARA LINIA */

.process-line {
    position: absolute;

    left: 0;
    right: 0;

    top: 0;

    height: 1px;

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

    overflow: visible;
}


/* ŚWIECĄCA LINIA */

.process-line-progress {
    position: absolute;

    left: 0;
    top: 0;

    width: 0%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #5deaff,
            #ffffff
        );

    box-shadow:
        0 0 8px #5deaff,
        0 0 25px rgba(60, 219, 255, 0.55);

   
}


/* ========================================
   KROKI
======================================== */

.process-step {
    position: relative;

    padding-right: 20px;

    opacity: 0.25;

    transform:
        translateY(25px);

    transition:
        opacity 0.6s ease,
        transform 0.7s cubic-bezier(.16, 1, .3, 1);
}


.process-step.active {
    opacity: 1;

    transform:
        translateY(0);
}


/* PUNKT NA LINII */

.process-point {
    position: absolute;

    width: 9px;
    height: 9px;

    top: -54px;
    left: 0;

    border-radius: 50%;

    background: #101216;

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

    transform:
        translateY(50%);

    transition:
        0.4s ease;
}


.process-step.active
.process-point {
    background: #5deaff;

    border-color: #5deaff;

    box-shadow:
        0 0 10px #5deaff,
        0 0 30px rgba(62, 222, 255, 0.65);
}


/* NUMER */

.process-number {
    display: block;

    margin-bottom: 40px;

    color: #5deaff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.25em;
}


/* TYTUŁ */

.process-step h4 {
    margin-bottom: 25px;

    font-size:
        clamp(
            28px,
            3vw,
            48px
        );

    letter-spacing: -0.04em;

    line-height: 1;
}


/* OPIS */

.process-step p {
    max-width: 270px;

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

    font-size: 12px;

    line-height: 1.8;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 900px) {

    .process {
        padding:
            100px
            22px
            130px;
    }


    .process-header {
        margin-bottom:
            90px;
    }


    .process-timeline {
        grid-template-columns:
            1fr;

        gap:
            70px;

        padding-top:
            0;

        padding-left:
            35px;
    }


    .process-line {
        left: 0;
        right: auto;

        top: 0;
        bottom: 0;

        width: 1px;
        height: 100%;
    }


    .process-line-progress {
        width: 2px;
        height: 0%;
    }


    .process-point {
        left: -39px;
        top: 5px;
    }

}
/* ========================================
   KONTAKT / WYCENA
======================================== */

.contact {
    position: relative;
    min-height: 100vh;

    padding:
        140px
        7vw
        150px;

    background:
        radial-gradient(
            circle at 80% 60%,
            rgba(0, 170, 255, 0.10),
            transparent 30%
        ),
        #010204;

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

    overflow: hidden;
}


/* POŚWIATA */

.contact-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    right: -350px;
    bottom: -350px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56, 220, 255, 0.13),
            transparent 67%
        );

    filter: blur(25px);

    pointer-events: none;
}


/* HEADER */

.contact-header {
    position: relative;
    z-index: 2;

    max-width: 1100px;

    margin-bottom: 100px;
}


.contact-label {
    display: block;

    margin-bottom: 30px;

    color: #5deaff;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.35em;
}


.contact-header h3 {
    font-size:
        clamp(
            48px,
            6.5vw,
            105px
        );

    line-height: 0.98;

    letter-spacing: -0.055em;

    font-weight: 800;
}


.contact-header h3 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #5deaff,
            #168cff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


.contact-header p {
    max-width: 520px;

    margin-top: 35px;

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

    font-size: 13px;

    line-height: 1.8;
}


/* ========================================
   GRID
======================================== */

.contact-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap: 9vw;

    max-width: 1450px;
}


/* ========================================
   LEWA STRONA
======================================== */

.contact-small {
    color: #5deaff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.3em;
}


.contact-info h4 {
    margin-top: 30px;

    font-size:
        clamp(
            35px,
            4vw,
            68px
        );

    line-height: 0.98;

    letter-spacing: -0.05em;
}


.contact-info h4 span {
    color: #5deaff;
}


.contact-details {
    margin-top: 70px;

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


.contact-details > div {
    display: flex;

    justify-content: space-between;

    gap: 30px;

    padding:
        18px
        0;

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


.contact-details span {
    color:
        rgba(255, 255, 255, 0.25);

    font-size: 8px;

    letter-spacing: 0.2em;
}


.contact-details strong {
    color:
        rgba(255, 255, 255, 0.65);

    font-size: 8px;

    letter-spacing: 0.12em;

    text-align: right;
}


/* ========================================
   FORMULARZ
======================================== */

.contact-form {
    padding: 45px;

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

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

    backdrop-filter:
        blur(15px);
}


.form-row {
    display: grid;

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

    gap: 30px;
}


.form-field {
    position: relative;

    margin-bottom: 38px;
}


.form-field label {
    display: block;

    margin-bottom: 13px;

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

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.22em;
}


.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    padding:
        15px
        0;

    border: none;

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

    outline: none;

    border-radius: 0;

    background: transparent;

    color: white;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.form-field textarea {
    resize: vertical;

    min-height: 120px;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
    color:
        rgba(255, 255, 255, 0.20);
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #5deaff;

    box-shadow:
        0 8px 15px -15px
        rgba(93, 234, 255, 0.9);
}


.form-field select {
    cursor: pointer;
}


.form-field select option {
    background: #07090d;

    color: white;
}


/* ========================================
   PRZYCISK
======================================== */

.contact-submit {
    width: 100%;

    min-height: 65px;

    padding:
        0
        25px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    border: none;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #5deaff
        );

    color: #001018;

    cursor: pointer;

    font-family: inherit;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.14em;

    transition:
        transform 0.4s
        cubic-bezier(.16, 1, .3, 1),

        box-shadow 0.4s ease;
}


.contact-submit:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 50px
        rgba(46, 204, 255, 0.20);
}


.submit-arrow {
    font-size: 22px;

    transition:
        transform 0.4s
        cubic-bezier(.16, 1, .3, 1);
}


.contact-submit:hover
.submit-arrow {
    transform:
        translate(
            4px,
            -4px
        );
}


.form-note {
    margin-top: 18px;

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

    font-size: 8px;

    line-height: 1.6;

    letter-spacing: 0.08em;
}


/* ========================================
   SCROLL REVEAL KONTAKT
======================================== */

.contact-header,
.contact-info,
.contact-form {
    opacity: 0;

    transform:
        translateY(60px);

    filter: blur(8px);

    transition:
        opacity 1s ease,
        transform 1.1s
        cubic-bezier(.16, 1, .3, 1),
        filter 1s ease;
}


.contact-header.reveal,
.contact-info.reveal,
.contact-form.reveal {
    opacity: 1;

    transform:
        translateY(0);

    filter: blur(0);
}


.contact-info {
    transition-delay: 0.1s;
}


.contact-form {
    transition-delay: 0.2s;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 900px) {

    .contact {
        padding:
            100px
            22px;
    }


    .contact-header {
        margin-bottom:
            70px;
    }


    .contact-grid {
        grid-template-columns:
            1fr;

        gap:
            70px;
    }


    .form-row {
        grid-template-columns:
            1fr;

        gap: 0;
    }


    .contact-form {
        padding:
            30px
            22px;
    }


    .contact-details > div {
        align-items:
            flex-start;
    }

}
/* ========================================
   FAQ
======================================== */

.faq {
    position: relative;

    padding:
        140px
        7vw
        150px;

    background: #020305;

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


.faq-header {
    margin-bottom: 90px;
}


.faq-label {
    display: block;

    margin-bottom: 30px;

    color: #5deaff;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.35em;
}


.faq-header h3 {
    font-size:
        clamp(
            48px,
            6vw,
            100px
        );

    line-height: 0.98;

    letter-spacing: -0.055em;

    font-weight: 800;
}


.faq-header h3 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #5deaff,
            #168cff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


/* FAQ LISTA */

.faq-list {
    max-width: 1200px;

    margin-left: auto;
}


.faq-item {
    border-top:
        1px solid
        rgba(255, 255, 255, 0.10);
}


.faq-item:last-child {
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.10);
}


.faq-question {
    width: 100%;

    padding:
        30px
        0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border: none;

    background: transparent;

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

    cursor: pointer;

    text-align: left;

    font-family: inherit;

    font-size:
        clamp(
            13px,
            1.4vw,
            19px
        );

    font-weight: 700;

    letter-spacing: 0.04em;

    transition:
        color 0.3s ease,
        padding-left 0.4s cubic-bezier(.16, 1, .3, 1);
}


.faq-question:hover {
    color: white;

    padding-left: 12px;
}


.faq-plus {
    flex-shrink: 0;

    color: #5deaff;

    font-size: 25px;

    font-weight: 300;

    transition:
        transform 0.45s
        cubic-bezier(.16, 1, .3, 1);
}


.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.5s
        cubic-bezier(.16, 1, .3, 1);
}


.faq-answer p {
    overflow: hidden;

    max-width: 720px;

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

    font-size: 12px;

    line-height: 1.8;
}


.faq-item.active
.faq-answer {
    grid-template-rows: 1fr;
}


.faq-item.active
.faq-answer p {
    padding-bottom: 30px;
}


.faq-item.active
.faq-plus {
    transform:
        rotate(45deg);
}


/* ========================================
   FOOTER
======================================== */

.footer {
    position: relative;

    padding:
        120px
        7vw
        40px;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(0, 174, 255, 0.11),
            transparent 35%
        ),
        #000;

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

    overflow: hidden;
}


.footer-main {
    min-height: 50vh;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.footer-brand {
    display: flex;

    align-items: baseline;

    gap: 10px;
}


.footer-brand strong {
    font-size: 18px;

    letter-spacing: 0.08em;
}


.footer-brand span {
    color: #5deaff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.18em;
}


.footer-main h2 {
    margin-top: 100px;

    font-size:
        clamp(
            55px,
            8vw,
            135px
        );

    line-height: 0.9;

    letter-spacing: -0.06em;

    font-weight: 800;
}


.footer-main h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #5deaff,
            #168cff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


/* DÓŁ FOOTERA */

.footer-bottom {
    margin-top: 100px;

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

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


.footer-bottom span,
.footer-bottom a {
    color:
        rgba(255, 255, 255, 0.30);

    font-size: 7px;

    letter-spacing: 0.2em;

    text-decoration: none;
}


.footer-bottom a {
    transition:
        color 0.3s ease;
}


.footer-bottom a:hover {
    color: #5deaff;
}


/* ========================================
   FAQ MOBILE
======================================== */

@media (max-width: 900px) {

    .faq {
        padding:
            100px
            22px;
    }


    .faq-header {
        margin-bottom:
            60px;
    }


    .faq-question {
        padding:
            25px
            0;
    }


    .footer {
        padding:
            90px
            22px
            30px;
    }


    .footer-main {
        min-height:
            45vh;
    }


    .footer-main h2 {
        margin-top:
            80px;
    }


    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;

        margin-top:
            70px;
    }

}
/* ========================================
   PŁYNNE PRZEWIJANIE
======================================== */

html {
    scroll-behavior: smooth;
}

#start,
#uslugi,
#onas,
#proces,
#kontakt,
#faq {
    scroll-margin-top: 90px;
}

/* ========================================
   FINALNE USTAWIENIA NAWIGACJI / SCROLL
======================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body.website-ready {
    overflow-x: hidden;
    overflow-y: auto;
}

#website {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: none;
    overflow: visible;
}

#website.active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.hero,
#start {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
}

.hero {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
}

#start,
#uslugi,
#onas,
#proces,
#kontakt,
#faq {
    scroll-margin-top: 90px;
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

@media (max-width: 900px) {
    html {
        scroll-padding-top: 75px;
    }

    #start,
    #uslugi,
    #onas,
    #proces,
    #kontakt,
    #faq {
        scroll-margin-top: 75px;
    }
}
/* ========================================
   HERO → USŁUGI
   CINEMATIC SCROLL
======================================== */

.hero-content {
    will-change:
        transform,
        opacity,
        filter;

    transform-origin: center center;
}

.hero-background {
    will-change: transform;
    transform-origin: center center;
}

.scroll-indicator {
    will-change:
        transform,
        opacity;
}
/* ========================================
   USŁUGI - INTERAKTYWNE KARTY 3D
======================================== */

.service-card {
    position: relative;
    overflow: hidden;

    transform-style: preserve-3d;

    transition:
        transform 0.35s cubic-bezier(.16, 1, .3, 1),
        border-color 0.35s ease;

    will-change: transform;
}


/* ŚWIATŁO POD KURSOREM */

.service-card::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(93, 234, 255, 0.13) 0%,
            rgba(22, 140, 255, 0.06) 35%,
            transparent 70%
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease;

    z-index: 0;
}


.service-card:hover::before {
    opacity: 1;
}


/* TREŚĆ NAD POŚWIATĄ */

.service-card > * {
    position: relative;
    z-index: 1;
}


/* STRZAŁKA */

.service-arrow {
    transition:
        transform 0.4s cubic-bezier(.16, 1, .3, 1),
        color 0.3s ease;
}


.service-card:hover .service-arrow {
    transform:
        translate(4px, -4px);

    color: #5deaff;
}


/* DELIKATNIE JAŚNIEJSZA RAMKA */

.service-card:hover {
    border-color:
        rgba(93, 234, 255, 0.22);
}


/* TELEFON - BEZ EFEKTU 3D */

@media (max-width: 900px) {

    .service-card {
        transform: none !important;
    }

}
/* ========================================
   NAVBAR - GLASS PREMIUM
======================================== */

.navbar {
    position: fixed !important;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: transparent;

    border-bottom:
        1px solid transparent;

    transition:
        background 0.45s ease,
        backdrop-filter 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


/* PO PRZEWINIĘCIU */

.navbar.navbar-scrolled {

    background:
        rgba(3, 5, 10, 0.72);

    backdrop-filter:
        blur(18px);

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

    border-bottom:
        1px solid rgba(
            255,
            255,
            255,
            0.07
        );

    box-shadow:
        0 10px 40px
        rgba(0, 0, 0, 0.22);
}


/* DELIKATNA NIEBIESKA POŚWIATA */

.navbar.navbar-scrolled::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -1px;

    transform:
        translateX(-50%);

    width: 45%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(82, 223, 255, 0.35),
            transparent
        );

    pointer-events: none;
}


/* LINKI */

.nav-links a {

    position: relative;
}


/* LINIA POD LINKIEM */

.nav-links a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -7px;

    width: 0;
    height: 1px;

    transform:
        translateX(-50%);

    background: #52dfff;

    box-shadow:
        0 0 8px
        rgba(82, 223, 255, 0.6);

    transition:
        width 0.35s
        cubic-bezier(.16, 1, .3, 1);
}


.nav-links a:hover::after {

    width: 100%;
}
/* ========================================
   NAVBAR - AKTYWNA SEKCJA
======================================== */

.nav-links a.active {
    color: #52dfff;
}


/* wykorzystujemy linię, którą
   przed chwilą dodaliśmy */

.nav-links a.active::after {
    width: 100%;
}


/* delikatny glow aktywnego linku */

.nav-links a.active {
    text-shadow:
        0 0 18px
        rgba(82, 223, 255, 0.28);
}
/* ========================================
   GRACIANO WEB - MAGNETIC BUTTONS
======================================== */

.nav-button,
.primary-button,
.secondary-button,
.contact-submit {

    will-change: transform;

    transition:
        transform 0.45s cubic-bezier(.16, 1, .3, 1),
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
}


/* WYŁĄCZAMY EFEKT NA TELEFONIE */

@media (pointer: coarse) {

    .nav-button,
    .primary-button,
    .secondary-button,
    .contact-submit {

        transform: none !important;

    }

}
/* ========================================
   GRACIANO WEB — MOBILE
   NAVBAR + HERO
======================================== */

@media (max-width: 768px) {

    /* =========================
       NAVBAR
    ========================= */

    .navbar {
        height: 72px;

        padding:
            0 20px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 15px;
    }


    /* Logo */

    .brand {
        flex-shrink: 0;
    }

    .brand strong {
        font-size: 14px;
        letter-spacing: 0.12em;
    }

    .brand span {
        font-size: 8px;
        letter-spacing: 0.45em;
    }


    /* Na telefonie chowamy klasyczne menu */

    .nav-links {
        display: none;
    }


    /* Darmowa wycena */

    .nav-button {
        padding:
            11px 15px;

        font-size: 8px;

        letter-spacing: 0.12em;

        white-space: nowrap;
    }



    /* =========================
       HERO
    ========================= */

    .hero {
        min-height: 100svh !important;

        padding:
            100px 20px
            50px 20px !important;

        display: flex;

        align-items: center;

        overflow: hidden;
    }


    .hero-content {
        width: 100%;

        max-width: none;

        margin: 0;

        position: relative;

        z-index: 5;
    }


    /* Mały napis */

    .hero-label {
        display: block;

        margin-bottom: 22px;

        font-size: 8px;

        letter-spacing: 0.22em;

        line-height: 1.5;
    }


    /* Główny nagłówek */

    .hero-content h2 {
        max-width: 100%;

        margin: 0;

        font-size:
            clamp(
                42px,
                12vw,
                66px
            );

        line-height: 0.94;

        letter-spacing: -0.055em;
    }


    /* Opis */

    .hero-content > p {
        max-width: 500px;

        margin-top: 26px;

        font-size: 13px;

        line-height: 1.7;
    }



    /* =========================
       PRZYCISKI HERO
    ========================= */

    .hero-buttons {
        width: 100%;

        margin-top: 32px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }


    .primary-button,
    .secondary-button {
        width: 100%;

        min-height: 52px;

        display: flex;

        align-items: center;

        justify-content: center;

        padding:
            15px 18px;

        text-align: center;

        font-size: 9px;

        letter-spacing: 0.12em;
    }



    /* =========================
       PRZEWIŃ
    ========================= */

    .scroll-indicator {
        bottom: 18px;

        transform: scale(0.85);
    }



    /* =========================
       MOBILE — BEZ MAGNETIC
    ========================= */

    .nav-button,
    .primary-button,
    .secondary-button {
        transform: none !important;
    }

}



/* ========================================
   BARDZO MAŁE TELEFONY
======================================== */

@media (max-width: 390px) {

    .navbar {
        padding:
            0 15px;
    }


    .brand strong {
        font-size: 12px;
    }


    .nav-button {
        padding:
            10px 11px;

        font-size: 7px;
    }


    .hero {
        padding-left:
            16px !important;

        padding-right:
            16px !important;
    }


    .hero-content h2 {
        font-size:
            clamp(
                38px,
                11.5vw,
                52px
            );
    }


    .hero-content > p {
        font-size: 12px;
    }

}
/* ========================================
   MOBILE MENU
======================================== */

.menu-toggle,
.mobile-menu {
    display: none;
}


@media (max-width: 768px) {

    /* Na telefonie wycena zostaje,
       ale dodajemy hamburger */

    .navbar {
        z-index: 5000;
    }


    .menu-toggle {
        width: 42px;
        height: 42px;

        flex-shrink: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 7px;

        padding: 0;

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

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

        border-radius: 50%;

        cursor: pointer;

        position: relative;

        z-index: 5002;
    }


    .menu-toggle span {
        display: block;

        width: 16px;
        height: 1px;

        background: #ffffff;

        transition:
            transform 0.4s cubic-bezier(.16, 1, .3, 1),
            opacity 0.3s ease;
    }


    /* X po otwarciu */

    .menu-toggle.active span:first-child {
        transform:
            translateY(4px)
            rotate(45deg);
    }


    .menu-toggle.active span:last-child {
        transform:
            translateY(-4px)
            rotate(-45deg);
    }


    /* =========================
       FULLSCREEN MENU
    ========================= */

    .mobile-menu {
        position: fixed;

        inset: 0;

        z-index: 4000;

        display: flex;

        background:
            radial-gradient(
                circle at 80% 15%,
                rgba(22, 140, 255, 0.13),
                transparent 35%
            ),
            rgba(2, 4, 9, 0.97);

        backdrop-filter:
            blur(22px);

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

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-15px);

        transition:
            opacity 0.45s ease,
            visibility 0.45s ease,
            transform 0.6s cubic-bezier(.16, 1, .3, 1);
    }


    .mobile-menu.active {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }


    .mobile-menu-inner {
        width: 100%;

        padding:
            125px 22px
            45px;

        display: flex;
        flex-direction: column;

        justify-content: space-between;
    }


    .mobile-menu-label {
        color:
            rgba(255, 255, 255, 0.35);

        font-size: 8px;

        letter-spacing: 0.3em;
    }


    .mobile-menu-links {
        margin-top: 45px;

        display: flex;
        flex-direction: column;
    }


    .mobile-menu-links a {
        position: relative;

        display: flex;
        align-items: center;

        gap: 18px;

        padding:
            20px 0;

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

        color: #ffffff;

        text-decoration: none;

        font-size:
            clamp(34px, 11vw, 55px);

        font-weight: 700;

        line-height: 1;

        letter-spacing: -0.04em;

        transform:
            translateY(25px);

        opacity: 0;

        transition:
            transform 0.6s cubic-bezier(.16, 1, .3, 1),
            opacity 0.5s ease,
            color 0.3s ease;
    }


    .mobile-menu-links a span {
        width: 25px;

        color: #52dfff;

        font-size: 8px;

        font-weight: 500;

        letter-spacing: 0.1em;
    }


    /* Linki wchodzą kolejno */

    .mobile-menu.active
    .mobile-menu-links a {

        transform:
            translateY(0);

        opacity: 1;
    }


    .mobile-menu.active
    .mobile-menu-links a:nth-child(1) {
        transition-delay: 0.08s;
    }

    .mobile-menu.active
    .mobile-menu-links a:nth-child(2) {
        transition-delay: 0.13s;
    }

    .mobile-menu.active
    .mobile-menu-links a:nth-child(3) {
        transition-delay: 0.18s;
    }

    .mobile-menu.active
    .mobile-menu-links a:nth-child(4) {
        transition-delay: 0.23s;
    }


    .mobile-menu-links a:active {
        color: #52dfff;
    }


    /* Gdy menu otwarte */

    body.mobile-menu-open {
        overflow: hidden !important;
    }

}
/* ========================================
   MOBILE — USŁUGI + O NAS
======================================== */

@media (max-width: 768px) {

    /* =====================================
       USŁUGI
    ===================================== */

    .services {
        padding:
            95px 20px
            100px;
    }


    .services-header {
        width: 100%;
        max-width: none;
    }


    .section-number {
        font-size: 8px;
        letter-spacing: 0.25em;
    }


    .services-header h3 {
        margin-top: 20px;

        font-size:
            clamp(
                40px,
                11vw,
                58px
            );

        line-height: 0.96;

        letter-spacing: -0.055em;
    }


    .services-header p {
        max-width: 100%;

        margin-top: 24px;

        font-size: 13px;
        line-height: 1.7;
    }


    /* KARTY JEDNA POD DRUGĄ */

    .services-grid {
        width: 100%;

        margin-top: 55px;

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

        gap: 14px;
    }


    .service-card {
        width: 100%;

        min-height: 340px;

        padding:
            25px 22px;

        transform: none !important;
    }


    .service-top {
        margin-bottom: 55px;
    }


    .service-top > span {
        font-size: 9px;
    }


    .service-arrow {
        font-size: 20px;
    }


    .service-content h4 {
        font-size:
            clamp(
                28px,
                8vw,
                38px
            );

        line-height: 0.98;

        letter-spacing: -0.04em;
    }


    .service-content p {
        margin-top: 20px;

        max-width: 95%;

        font-size: 12px;
        line-height: 1.65;
    }



    /* =====================================
       O NAS
    ===================================== */

    .about {
        padding:
            95px 20px
            105px;

        overflow: hidden;
    }


    .about-label {
        font-size: 8px;
        letter-spacing: 0.25em;
    }


    .about-grid {
        margin-top: 50px;

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

        gap: 60px;
    }


    /* =========================
       DUŻE 20
    ========================= */

    .about-number {
        position: relative;

        width: 100%;

        min-height: 260px;

        display: flex;

        align-items: center;
        justify-content: center;

        overflow: visible;
    }


    .big-number {
        display: block;

        font-size:
            clamp(
                170px,
                53vw,
                260px
            );

        line-height: 0.72;

        letter-spacing: -0.09em;

        text-align: center;

    }


    .number-description {
        position: absolute;

        left: 0;
        bottom: 0;

        z-index: 2;

        display: flex;
        flex-direction: column;

        gap: 3px;
    }


    .number-description span {
        font-size: 8px;

        letter-spacing: 0.17em;
    }



    /* =========================
       TEKST O NAS
    ========================= */

    .about-content {
        width: 100%;
    }


    .about-content h3 {
        font-size:
            clamp(
                38px,
                10.5vw,
                56px
            );

        line-height: 0.96;

        letter-spacing: -0.055em;
    }


    .about-text {
        margin-top: 32px;

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

        gap: 20px;
    }


    .about-text p {
        max-width: 100%;

        font-size: 13px;
        line-height: 1.7;
    }



    /* =========================
       WARTOŚCI
    ========================= */

    .about-values {
        margin-top: 45px;

        display: flex;
        flex-direction: column;
    }


    .about-values > div {
        width: 100%;

        padding:
            18px 0;

        display: flex;
        align-items: center;

        gap: 18px;

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


    .about-values > div:first-child {
        border-top:
            1px solid
            rgba(255, 255, 255, 0.08);
    }


    .about-values span {
        color: #52dfff;

        font-size: 8px;
    }


    .about-values strong {
        font-size: 10px;

        letter-spacing: 0.1em;
    }

}


/* ========================================
   BARDZO MAŁE TELEFONY
======================================== */

@media (max-width: 390px) {

    .services,
    .about {
        padding-left: 16px;
        padding-right: 16px;
    }


    .service-card {
        min-height: 320px;

        padding:
            22px 18px;
    }


    .big-number {
        font-size:
            clamp(
                155px,
                52vw,
                210px
            );
    }


    .about-number {
        min-height: 230px;
    }

}
/* ========================================
   MOBILE — O NAS / 20 FINAL
======================================== */

@media (max-width: 768px) {

    .about {
        padding: 90px 20px 100px;
        overflow: hidden;
    }

    .about-grid {
        margin-top: 45px;

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

        gap: 55px;
    }


    /* =========================
       BLOK 20 + OPIS
    ========================= */

    .about-number {
        position: relative;

        width: 100%;
        min-height: 300px;

        display: flex;
        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;

        overflow: visible;
    }


    /* =========================
       LICZBA 20
    ========================= */

    .big-number {
        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        display: block;

        width: auto;

        margin: 0;
        margin-left: 0;

        font-size: clamp(
            165px,
            52vw,
            215px
        );

        font-weight: 800;

        line-height: 0.78;

        letter-spacing: -0.09em;

        transform: none;

        transform-origin: left center;

        opacity: 0.9;

        user-select: none;

        will-change: transform;
    }


    /* =========================
       LAT.
       DUŻE AMBICJE.
       JESZCZE WIĘKSZE PLANY.
    ========================= */

    .number-description {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        z-index: 5;

        margin: 28px 0 0 0;

        padding-left: 18px;

        border-left:
            1px solid
            rgba(93, 234, 255, 0.45);

        display: flex;
        flex-direction: column;

        gap: 4px;
    }


    .number-description span {
        display: block;

        margin: 0;

        font-size: 8px;

        line-height: 1.5;

        letter-spacing: 0.17em;
    }


    .number-description span:first-child {
        color: #5deaff;
    }


    /* =========================
       TEKST O NAS
    ========================= */

    .about-content {
        position: relative;

        width: 100%;

        z-index: 3;

        margin: 0;
    }


    .about-content h3 {
        margin: 0;

        font-size:
            clamp(
                38px,
                10vw,
                52px
            );

        line-height: 0.96;

        letter-spacing: -0.05em;
    }


    .about-text {
        margin-top: 32px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .about-text p {
        max-width: 100%;

        font-size: 13px;

        line-height: 1.7;
    }


    /* =========================
       WARTOŚCI
    ========================= */

    .about-values {
        margin-top: 45px;
    }

}


/* ========================================
   BARDZO MAŁE TELEFONY
======================================== */

@media (max-width: 390px) {

    .about {
        padding-left: 16px;
        padding-right: 16px;
    }


    .about-number {
        min-height: 270px;
    }


    .big-number {
        font-size:
            clamp(
                145px,
                50vw,
                180px
            );
    }


    .number-description {
        margin-top: 24px;
    }

}
/* ========================================
   MOBILE — PROCES WSPÓŁPRACY
======================================== */

@media (max-width: 768px) {

    .process {
        min-height: auto;

        padding:
            95px 20px
            110px;

        overflow: hidden;
    }


    /* HEADER */

    .process-header {
        width: 100%;

        max-width: none;

        margin-bottom: 75px;
    }


    .process-label {
        margin-bottom: 22px;

        font-size: 8px;

        letter-spacing: 0.25em;
    }


    .process-header h3 {
        max-width: 100%;

        font-size:
            clamp(
                40px,
                11vw,
                56px
            );

        line-height: 0.96;

        letter-spacing: -0.05em;
    }


    .process-header p {
        max-width: 100%;

        margin-top: 25px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* =====================================
       PIONOWY TIMELINE
    ===================================== */

    .process-timeline {
        position: relative;

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 0;

        padding:
            0 0 0 34px;

        margin: 0;
    }


    /* SZARA LINIA */

    .process-line {
        position: absolute;

        left: 4px;
        top: 0;
        bottom: 0;

        width: 1px;
        height: 100%;

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


    /* NIEBIESKI PROGRESS */

    .process-line-progress {
        position: absolute;

        left: 0;
        top: 0;

        width: 2px;
        height: 0%;

        background:
            linear-gradient(
                180deg,
                #168cff,
                #5deaff,
                #ffffff
            );

        box-shadow:
            0 0 8px #5deaff,
            0 0 22px
            rgba(60, 219, 255, 0.45);
    }


    /* =====================================
       POSZCZEGÓLNE KROKI
    ===================================== */

    .process-step {
        position: relative;

        width: 100%;

        min-height: 210px;

        padding:
            0 0
            65px 10px;

        opacity: 0.25;
    }


    .process-step:last-child {
        min-height: auto;

        padding-bottom: 0;
    }


    /* KROPKA */

    .process-point {
        position: absolute;

        left: -34px;
        top: 3px;

        width: 9px;
        height: 9px;

        transform: none;
    }


    /* NUMER */

    .process-number {
        display: block;

        margin-bottom: 20px;

        font-size: 8px;

        letter-spacing: 0.22em;
    }


    /* TYTUŁ */

    .process-step h4 {
        max-width: 100%;

        margin-bottom: 17px;

        font-size:
            clamp(
                28px,
                8vw,
                38px
            );

        line-height: 1;

        letter-spacing: -0.04em;
    }


    /* OPIS */

    .process-step p {
        max-width: 290px;

        font-size: 12px;

        line-height: 1.7;
    }

}


/* ========================================
   MAŁE TELEFONY — PROCES
======================================== */

@media (max-width: 390px) {

    .process {
        padding-left: 16px;
        padding-right: 16px;
    }


    .process-timeline {
        padding-left: 30px;
    }


    .process-step {
        padding-left: 9px;
    }


    .process-point {
        left: -30px;
    }

}
/* ========================================
   MOBILE — KONTAKT + FORMULARZ
======================================== */

@media (max-width: 768px) {

    /* =========================
       SEKCJA KONTAKT
    ========================= */

    .contact {
        min-height: auto;

        padding:
            95px 20px
            105px;

        overflow: hidden;
    }


    .contact-grid {
        width: 100%;

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

        gap: 60px;
    }


    /* =========================
       LEWA STRONA
    ========================= */

    .contact-content {
        width: 100%;
        max-width: none;
    }


    .contact-label {
        display: block;

        margin-bottom: 22px;

        font-size: 8px;

        letter-spacing: 0.25em;
    }


    .contact-content h3 {
        max-width: 100%;

        margin: 0;

        font-size:
            clamp(
                40px,
                11vw,
                56px
            );

        line-height: 0.96;

        letter-spacing: -0.055em;
    }


    .contact-content > p {
        max-width: 100%;

        margin-top: 25px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* =========================
       FORMULARZ
    ========================= */

    .contact-form {
        width: 100%;

        margin: 0;
    }


    .form-row {
        width: 100%;

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

        gap: 0;
    }


    .form-group {
        width: 100%;

        margin-bottom: 25px;
    }


    .form-group label {
        display: block;

        margin-bottom: 10px;

        font-size: 8px;

        letter-spacing: 0.18em;
    }


    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        width: 100%;

        min-height: 54px;

        padding:
            15px 16px;

        font-size: 16px;

        border-radius: 0;
    }


    /*
       16px jest celowe:
       iPhone nie będzie automatycznie
       przybliżał strony po kliknięciu pola.
    */


    .contact-form textarea {
        min-height: 150px;

        resize: vertical;

        line-height: 1.6;
    }


    /* =========================
       WYŚLIJ ZAPYTANIE
    ========================= */

    .contact-submit {
        width: 100%;

        min-height: 58px;

        margin-top: 10px;

        display: flex;

        align-items: center;

        justify-content: center;

        padding:
            16px 20px;

        font-size: 9px;

        letter-spacing: 0.14em;

        transform: none !important;
    }


    /* =========================
       DANE / DODATKOWE ELEMENTY
    ========================= */

    .contact-details {
        width: 100%;

        margin-top: 40px;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }


    .contact-detail {
        width: 100%;
    }

}


/* ========================================
   MAŁE TELEFONY — KONTAKT
======================================== */

@media (max-width: 390px) {

    .contact {
        padding-left: 16px;
        padding-right: 16px;
    }


    .contact-grid {
        gap: 50px;
    }


    .contact-content h3 {
        font-size:
            clamp(
                37px,
                10.5vw,
                48px
            );
    }

}
/* ========================================
   MOBILE — FAQ + FOOTER
======================================== */

@media (max-width: 768px) {

    /* =====================================
       FAQ
    ===================================== */

    .faq {
        padding:
            95px 20px
            105px;

        overflow: hidden;
    }


    .faq-header {
        width: 100%;
        max-width: none;

        margin-bottom: 50px;
    }


    .faq-label {
        display: block;

        margin-bottom: 22px;

        font-size: 8px;

        letter-spacing: 0.25em;
    }


    .faq-header h3 {
        max-width: 100%;

        margin: 0;

        font-size:
            clamp(
                40px,
                11vw,
                56px
            );

        line-height: 0.96;

        letter-spacing: -0.055em;
    }


    .faq-header p {
        max-width: 100%;

        margin-top: 25px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* =========================
       PYTANIA
    ========================= */

    .faq-list {
        width: 100%;

        max-width: none;

        margin: 0;
    }


    .faq-item {
        width: 100%;
    }


    .faq-question {
        width: 100%;

        min-height: 75px;

        padding:
            22px 0;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 20px;

        text-align: left;
    }


    .faq-question span:first-child {
        max-width: calc(100% - 45px);

        font-size: 12px;

        line-height: 1.45;

        letter-spacing: 0.04em;
    }


    /* PLUS */

    .faq-icon {
        width: 32px;
        height: 32px;

        flex-shrink: 0;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    /* ODPOWIEDŹ */

    .faq-answer p {
        max-width: 100%;

        padding:
            0 45px
            24px 0;

        font-size: 12px;

        line-height: 1.7;
    }



    /* =====================================
       FOOTER
    ===================================== */

    .footer {
        padding:
            70px 20px
            30px;
    }


    .footer-main {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 50px;
    }


    /* LOGO / MARKA */

    .footer-brand {
        width: 100%;
    }


    .footer-brand strong {
        font-size: 18px;

        letter-spacing: 0.08em;
    }


    .footer-brand span {
        font-size: 8px;

        letter-spacing: 0.35em;
    }


    .footer-brand p {
        max-width: 290px;

        margin-top: 20px;

        font-size: 11px;

        line-height: 1.7;
    }


    /* KOLUMNY */

    .footer-links {
        width: 100%;

        display: grid;

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

        gap:
            40px 25px;
    }


    .footer-column {
        display: flex;

        flex-direction: column;

        align-items: flex-start;
    }


    .footer-column h4 {
        margin-bottom: 18px;

        font-size: 8px;

        letter-spacing: 0.2em;
    }


    .footer-column a {
        margin-bottom: 12px;

        font-size: 10px;
    }



    /* =====================================
       DOLNA CZĘŚĆ
    ===================================== */

    .footer-bottom {
        width: 100%;

        margin-top: 60px;

        padding-top: 25px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }


    .footer-bottom p,
    .footer-bottom span,
    .footer-bottom a {
        font-size: 8px;

        line-height: 1.6;
    }

}


/* ========================================
   MAŁE TELEFONY — FAQ + FOOTER
======================================== */

@media (max-width: 390px) {

    .faq,
    .footer {
        padding-left: 16px;
        padding-right: 16px;
    }


    .footer-links {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .faq-question span:first-child {
        font-size: 11px;
    }

}
/* ========================================
   ZGODA — POLITYKA PRYWATNOŚCI
======================================== */

.privacy-consent {
    width: 100%;

    margin-top: 22px;
    margin-bottom: 18px;
}


.privacy-checkbox {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    cursor: pointer;

    user-select: none;
}


/* UKRYWAMY STANDARDOWY CHECKBOX */

.privacy-checkbox input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* NASZ CHECKBOX */

.checkmark {
    position: relative;

    width: 18px;
    height: 18px;

    flex-shrink: 0;

    margin-top: 1px;

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

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

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* PTASZEK */

.checkmark::after {
    content: "";

    position: absolute;

    left: 5px;
    top: 2px;

    width: 5px;
    height: 9px;

    border:
        solid #020409;

    border-width:
        0 2px 2px 0;

    transform:
        rotate(45deg)
        scale(0);

    transition:
        transform 0.25s ease;
}


/* ZAZNACZONY */

.privacy-checkbox
input:checked + .checkmark {

    background: #5deaff;

    border-color: #5deaff;

    box-shadow:
        0 0 15px
        rgba(93, 234, 255, 0.25);
}


.privacy-checkbox
input:checked + .checkmark::after {

    transform:
        rotate(45deg)
        scale(1);
}


/* FOCUS KLAWIATURY */

.privacy-checkbox
input:focus-visible + .checkmark {

    outline:
        2px solid #5deaff;

    outline-offset: 3px;
}


/* TEKST */

.privacy-text {
    color:
        rgba(255, 255, 255, 0.45);

    font-size: 9px;

    line-height: 1.65;

    letter-spacing: 0.04em;
}


.privacy-text a {
    color: #5deaff;

    text-decoration: none;

    transition:
        opacity 0.3s ease;
}


.privacy-text a:hover {
    opacity: 0.7;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

    .privacy-consent {
        margin-top: 18px;
    }


    .privacy-text {
        font-size: 10px;

        line-height: 1.6;
    }


    .checkmark {
        width: 20px;
        height: 20px;
    }


    .checkmark::after {
        left: 6px;
        top: 3px;
    }

}
/* ========================================
   FIX FAQ MOBILE
======================================== */

@media (max-width: 768px) {

    .faq-answer {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;

        opacity: 0;

        transition:
            grid-template-rows 0.5s cubic-bezier(.16, 1, .3, 1),
            opacity 0.35s ease;
    }

    .faq-answer p {
        min-height: 0;
        overflow: hidden;

        max-width: 100%;

        padding:
            0 45px 0 0;

        margin: 0;

        font-size: 12px;
        line-height: 1.7;

        transition:
            padding-bottom 0.5s cubic-bezier(.16, 1, .3, 1);
    }

    .faq-item.active .faq-answer {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    .faq-item.active .faq-answer p {
        padding-bottom: 24px;
    }

    .faq-item.active .faq-plus {
        transform: rotate(45deg);
    }

}
/* ========================================
   FOOTER — POPRAWA GŁÓWNEGO NAPISU
======================================== */

@media (min-width: 901px) {

    .footer-main h2 {
        width: fit-content;
        max-width: 1150px;

        font-size: clamp(72px, 7.2vw, 132px);
        line-height: 0.82;

        letter-spacing: -0.065em;

        text-wrap: balance;
    }

    .footer-main h2 span {
        display: inline-block;

        background:
            linear-gradient(
                90deg,
                #5deaff 0%,
                #168cff 100%
            );

        -webkit-background-clip: text;
        background-clip: text;

        color: transparent;
    }

}