:root {

    --yellow: #ffc400;

    --yellow-2: #ffd329;

    --yellow-dark: #dca700;

    --black: #111315;

    --black-2: #191c1f;

    --black-3: #24282c;

    --cream: #f4f3ed;

    --cream-2: #ecebe4;

    --white: #ffffff;

    --text: #151719;

    --grey: #72777c;

    --grey-light: #a3a6a8;

}

/* =========================================================

   RESET

========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family:

        "Inter",

        sans-serif;

    background:

        var(--cream);

    color:

        var(--text);

    overflow-x:

        hidden;

}

a {

    color: inherit;

    text-decoration: none;

}

img {

    display: block;

    max-width: 100%;

}

button,

input,

textarea {

    font: inherit;

}

button {

    border: none;

}

svg {

    width: 18px;

    height: 18px;

    stroke-width: 1.8;

}

::selection {

    background:

        var(--yellow);

    color:

        var(--black);

}

/* =========================================================

   PROGRESS

========================================================= */

.scroll-progress {

    position: fixed;

    z-index: 10000;

    top: 0;

    left: 0;

    width: 0;

    height: 3px;

    background:

        var(--yellow);

}

/* =========================================================

   NAV

========================================================= */

.site-header {

    position: relative;

    z-index: 5000;

}

.nav {

    position: fixed;

    top: 18px;

    left: 50%;

    transform:

        translateX(-50%);

    width:

        min(

            930px,

            calc(100% - 40px)

        );

    height: 66px;

    padding:

        8px 9px 8px 20px;

    display: grid;

    grid-template-columns:

        1fr auto 1fr;

    align-items: center;

    border-radius: 14px;

    color: white;

    background:

        rgba(17,19,21,.91);

    backdrop-filter:

        blur(20px);

    -webkit-backdrop-filter:

        blur(20px);

    box-shadow:

        0 15px 45px

        rgba(0,0,0,.14);

    transition:

        .3s ease;

}

.nav.scrolled {

    top: 9px;

    background:

        rgba(17,19,21,.97);

    box-shadow:

        0 18px 50px

        rgba(0,0,0,.20);

}

.nav-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family:

        "Manrope",

        sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

}

.nav-mark {

    width: 9px;

    height: 9px;

    background:

        var(--yellow);

    transform:

        rotate(45deg);

}

.nav-links {

    display: flex;

    align-items: center;

    gap: 23px;

}

.nav-links a {

    font-size: 10px;

    color:

        rgba(255,255,255,.65);

    transition:

        color .2s ease;

}

.nav-links a:hover {

    color:

        var(--yellow);

}

.nav-cta {

    justify-self: end;

    min-height: 48px;

    padding:

        0 18px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 13px;

    background:

        var(--yellow);

    color:

        var(--black);

    font-size: 10px;

    font-weight: 800;

    transition:

        .25s ease;

}

.nav-cta:hover {

    transform:

        translateY(-2px);

    background:

        var(--yellow-2);

}

.menu-button {

    display: none;

    justify-self: end;

    width: 44px;

    height: 44px;

    border-radius: 8px;

    align-items: center;

    justify-content: center;

    background:

        var(--yellow);

    color:

        var(--black);

    cursor: pointer;

}

/* =========================================================

   MOBILE MENU

========================================================= */

.mobile-menu {

    display: none;

    position: fixed;

    z-index: 4900;

    top: 84px;

    left: 12px;

    right: 12px;

    padding: 18px;

    border-radius: 14px;

    flex-direction: column;

    background:

        var(--black);

    box-shadow:

        0 25px 60px

        rgba(0,0,0,.2);

}

.mobile-menu.open {

    display: flex;

}

.mobile-menu a {

    padding:

        13px 10px;

    color:

        rgba(255,255,255,.72);

    font-size: 12px;

}

/* =========================================================

   KICKER

========================================================= */

.section-kicker {

    display: inline-block;

    font-size: 8px;

    font-weight: 800;

    letter-spacing:

        2px;

    color:

        #7b8084;

}

.section-kicker.yellow {

    color:

        var(--yellow);

}

.section-kicker.dark {

    color:

        var(--black);

}

/* =========================================================

   HERO

========================================================= */

.hero {

    position: relative;

    min-height: 810px;

    display: grid;

    grid-template-columns:

        44% 56%;

    overflow: hidden;

    background:

        radial-gradient(

            circle at 14% 45%,

            rgba(255,196,0,.11),

            transparent 31%

        ),

        linear-gradient(

            135deg,

            #faf9f5 0%,

            #f4f3ed 52%,

            #ecebe5 100%

        );

}

.hero-grid {

    position: absolute;

    inset: 0;

    background-image:

        radial-gradient(

            rgba(17,19,21,.1) 1px,

            transparent 1px

        );

    background-size:

        26px 26px;

    opacity: .20;

    pointer-events: none;

}

.hero-yellow-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    right: -130px;

    bottom: -160px;

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            rgba(255,196,0,.15),

            transparent 68%

        );

}

.hero-left,

.hero-right {

    position: relative;

    z-index: 2;

    min-height: 810px;

}

.hero-left {

    padding:

        145px 6vw 65px 7vw;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.hero-right {

    padding:

        140px 7vw 75px 5vw;

    display: flex;

    align-items: center;

}

.hero-logo-box {

    width: 100%;

    max-width: 475px;

}

.hero-logo {

    width: 100%;

    max-width: 455px;

}

.hero-services {

    margin-top: 38px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.hero-services div {

    min-height: 47px;

    padding:

        0 14px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    gap: 9px;

    background:

        rgba(255,255,255,.68);

    box-shadow:

        0 12px 35px

        rgba(17,19,21,.05);

    font-size: 9px;

    font-weight: 700;

}

.hero-services svg {

    color:

        var(--yellow-dark);

}

.hero-copy {

    width: 100%;

    max-width: 640px;

}

.hero-label {

    margin-bottom: 23px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing:

        2px;

}

.hero-label span {

    width: 35px;

    height: 4px;

    border-radius: 4px;

    background:

        var(--yellow);

}

.hero h1 {

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            43px,

            5vw,

            72px

        );

    line-height: 1;

    letter-spacing:

        -3.5px;

    font-weight: 800;

}

.hero h1 strong {

    display: block;

    margin-top: 6px;

    color:

        var(--yellow-dark);

}

.hero-copy > p {

    max-width: 530px;

    margin-top: 25px;

    color:

        var(--grey);

    font-size: 13px;

    line-height: 1.8;

}

.hero-actions {

    margin-top: 32px;

    display: flex;

    align-items: center;

    gap: 23px;

}

.button {

    min-height: 55px;

    padding:

        0 20px;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;

    gap: 28px;

    font-size: 10px;

    font-weight: 800;

    transition:

        .25s ease;

}

.button-dark {

    background:

        var(--black);

    color:

        white;

}

.button-dark:hover {

    transform:

        translateY(-3px);

    background:

        var(--yellow);

    color:

        var(--black);

}

.text-button {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    font-size: 10px;

    font-weight: 800;

}

.hero-mini-panel {

    position: absolute;

    right: 7vw;

    bottom: 50px;

    padding:

        11px 14px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    gap: 12px;

    background:

        rgba(255,255,255,.76);

    box-shadow:

        0 15px 40px

        rgba(17,19,21,.065);

}

.hero-mini-icon {

    width: 41px;

    height: 41px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        var(--yellow);

}

.hero-mini-panel small {

    display: block;

    margin-bottom: 4px;

    font-size: 7px;

    color:

        var(--grey);

}

.hero-mini-panel strong {

    font-size: 10px;

}

.hero-scroll {

    position: absolute;

    z-index: 4;

    left: 50%;

    bottom: 22px;

    transform:

        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 7px;

    letter-spacing:

        1.5px;

    color:

        var(--grey);

}

/* =========================================================

   INTRO

========================================================= */

.intro {

    width:

        min(

            1360px,

            calc(100% - 90px)

        );

    margin:

        0 auto;

    padding:

        82px 0;

    display: grid;

    grid-template-columns:

        .9fr 1.1fr;

    gap: 75px;

    align-items: center;

}

.intro-copy h2 {

    margin-top: 17px;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            35px,

            4vw,

            54px

        );

    line-height: 1.03;

    letter-spacing:

        -2.8px;

}

.intro-copy h2 span {

    display: block;

    color:

        var(--yellow-dark);

}

.intro-copy p {

    max-width: 510px;

    margin-top: 22px;

    color:

        var(--grey);

    font-size: 12px;

    line-height: 1.8;

}

.intro-features {

    display: grid;

    gap: 10px;

}

.feature {

    padding: 18px;

    border-radius: 14px;

    display: grid;

    grid-template-columns:

        auto 1fr;

    gap: 15px;

    align-items: center;

    background:

        rgba(255,255,255,.62);

}

.feature-icon {

    width: 45px;

    height: 45px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        var(--yellow);

}

.feature strong {

    font-size: 12px;

}

.feature p {

    margin-top: 4px;

    font-size: 10px;

    line-height: 1.55;

    color:

        var(--grey);

}

/* =========================================================

   RENTAL

========================================================= */

.rental-section {

    position: relative;

    overflow: hidden;

    padding:

        85px

        max(

            45px,

            calc((100% - 1360px) / 2)

        )

        78px;

    background:

        var(--yellow);

    color:

        var(--black);

}

.rental-word {

    position: absolute;

    top: -42px;

    left: 50%;

    transform:

        translateX(-50%);

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            130px,

            20vw,

            285px

        );

    line-height: 1;

    letter-spacing:

        -14px;

    font-weight: 800;

    white-space: nowrap;

    color:

        rgba(17,19,21,.045);

    pointer-events: none;

}

.rental-header {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:

        1fr .72fr;

    gap: 80px;

    align-items: end;

}

.rental-header h2 {

    margin-top: 14px;

    max-width: 720px;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            42px,

            5vw,

            67px

        );

    line-height: .98;

    letter-spacing:

        -4px;

}

.rental-header h2 span {

    display: block;

}

.rental-header-right p {

    font-size: 11px;

    line-height: 1.75;

    color:

        rgba(17,19,21,.63);

}

.rental-header-right p + p {

    margin-top: 13px;

}

.rental-content {

    position: relative;

    z-index: 2;

    margin-top: 48px;

    display: grid;

    grid-template-columns:

        .85fr 1.15fr;

    gap: 14px;

}

.rental-main-card {

    min-height: 445px;

    padding: 34px;

    border-radius: 21px;

    display: flex;

    flex-direction: column;

    background:

        var(--black);

    color:

        white;

}

.rental-main-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.rental-big-icon {

    width: 54px;

    height: 54px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        var(--yellow);

    color:

        var(--black);

}

.rental-main-top > span {

    font-size: 8px;

    letter-spacing:

        2px;

    color:

        var(--yellow);

}

.rental-main-card h3 {

    max-width: 520px;

    margin-top: auto;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            28px,

            3vw,

            40px

        );

    line-height: 1.02;

    letter-spacing:

        -2.2px;

}

.rental-main-card p {

    max-width: 530px;

    margin-top: 17px;

    font-size: 10px;

    line-height: 1.75;

    color:

        rgba(255,255,255,.54);

}

.rental-main-card a {

    width: fit-content;

    margin-top: 25px;

    display: flex;

    align-items: center;

    gap: 10px;

    color:

        var(--yellow);

    font-size: 10px;

    font-weight: 800;

}

.rental-options {

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 11px;

}

.rental-option {

    min-height: 215px;

    padding: 21px;

    border-radius: 17px;

    display: flex;

    flex-direction: column;

    background:

        rgba(255,255,255,.31);

}

.rental-option-icon {

    width: 43px;

    height: 43px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        rgba(17,19,21,.09);

}

.rental-option > span {

    margin:

        19px 0 8px;

    font-size: 8px;

    color:

        rgba(17,19,21,.46);

}

.rental-option h4 {

    font-family:

        "Manrope",

        sans-serif;

    font-size: 16px;

}

.rental-option p {

    margin-top: 7px;

    font-size: 10px;

    line-height: 1.55;

    color:

        rgba(17,19,21,.58);

}

.rental-bottom {

    position: relative;

    z-index: 2;

    margin-top: 15px;

    padding:

        19px 23px;

    border-radius: 15px;

    display: grid;

    grid-template-columns:

        repeat(4, 1fr);

    gap: 28px;

    background:

        rgba(17,19,21,.075);

}

.rental-bottom div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.rental-bottom small {

    font-size: 7px;

    color:

        rgba(17,19,21,.47);

}

.rental-bottom strong {

    font-size: 11px;

}

/* =========================================================

   PRODUCTS HEAD

========================================================= */

.products-head {

    width:

        min(

            1360px,

            calc(100% - 90px)

        );

    margin:

        0 auto;

    padding:

        70px 0 58px;

    display: grid;

    grid-template-columns:

        200px 1fr;

    gap: 40px;

}

.products-head-main {

    display: flex;

    justify-content:

        space-between;

    align-items:

        flex-end;

    gap: 55px;

}

.products-head h2 {

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            37px,

            4.2vw,

            58px

        );

    line-height: 1.02;

    letter-spacing:

        -3px;

}

.products-head h2 span {

    display: block;

    color:

        var(--yellow-dark);

}

.products-head p {

    max-width: 310px;

    font-size: 11px;

    line-height: 1.7;

    color:

        var(--grey);

}

/* =========================================================

   PRODUCT SHOWCASE

========================================================= */

.product-showcase {

    padding:

        62px

        max(

            45px,

            calc((100% - 1360px) / 2)

        )

        82px;

    /*

       USUNIĘTY ZOSTAŁ OKRĄGŁY RADIAL-GRADIENT

       ZZA ZDJĘCIA PRODUKTU.

    */

    background:

        linear-gradient(

            180deg,

            #f4f3ed,

            #f8f7f2

        );

}

.product-showcase-alt {

    background:

        linear-gradient(

            180deg,

            #f8f7f2,

            #efeee8

        );

}

.product-top {

    display: flex;

    align-items: flex-end;

    justify-content:

        space-between;

}

.product-top > div:first-child > span {

    font-size: 8px;

    letter-spacing:

        3px;

    color:

        var(--grey);

}

.product-top h3 {

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            52px,

            6vw,

            80px

        );

    line-height: .95;

    letter-spacing:

        -4px;

}

.product-badge {

    padding:

        10px 13px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 8px;

    background:

        var(--yellow);

    font-size: 9px;

    font-weight: 800;

}

.product-content {

    display: grid;

    grid-template-columns:

        1.25fr .75fr;

    gap: 45px;

    align-items: center;

}

/* =========================================================

   PRODUCT VISUAL

   BRAK KÓŁ / HALO

========================================================= */

.product-visual {

    position: relative;

    min-height: 445px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.product-image {

    position: relative;

    z-index: 3;

    max-width: 80%;

    max-height: 400px;

    object-fit: contain;

    filter:

        drop-shadow(

            0 30px 35px

            rgba(17,19,21,.15)

        );

}

/* =========================================================

   FLOATING SPECS

========================================================= */

.floating-spec {

    position: absolute;

    z-index: 4;

    padding:

        10px 12px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    gap: 9px;

    background:

        rgba(255,255,255,.8);

    backdrop-filter:

        blur(12px);

    box-shadow:

        0 12px 35px

        rgba(17,19,21,.06);

}

.floating-spec svg {

    color:

        var(--yellow-dark);

}

.floating-spec span {

    display: flex;

    flex-direction: column;

    gap: 3px;

    font-size: 7px;

    color:

        var(--grey);

}

.floating-spec strong {

    font-size: 8px;

    color:

        var(--black);

}

.floating-left {

    left: 2%;

    bottom: 75px;

}

.floating-right {

    right: 1%;

    top: 95px;

}

/* =========================================================

   PRODUCT INFO

========================================================= */

.product-info {

    padding:

        26px;

    border-radius: 18px;

    background:

        rgba(255,255,255,.65);

    backdrop-filter:

        blur(15px);

    box-shadow:

        0 18px 55px

        rgba(17,19,21,.05);

}

.product-description > span {

    font-size: 8px;

    font-weight: 800;

    letter-spacing:

        2px;

    color:

        var(--yellow-dark);

}

.product-description h4 {

    margin-top: 12px;

    font-family:

        "Manrope",

        sans-serif;

    font-size: 19px;

    line-height: 1.15;

}

.product-description p {

    margin-top: 12px;

    color:

        var(--grey);

    font-size: 11px;

    line-height: 1.7;

}

/* =========================================================

   SPECS

========================================================= */

.product-spec-grid {

    margin-top: 26px;

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 9px;

}

.product-spec {

    min-height: 84px;

    padding: 14px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    gap: 12px;

    background:

        rgba(17,19,21,.045);

}

.product-spec > svg {

    width: 21px;

    height: 21px;

    flex-shrink: 0;

    color:

        var(--yellow-dark);

}

.product-spec span {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.product-spec small {

    font-size: 7px;

    color:

        var(--grey);

}

.product-spec strong {

    font-family:

        "Manrope",

        sans-serif;

    font-size: 14px;

    font-weight: 800;

}

/* =========================================================

   AVAILABILITY

========================================================= */

.product-availability {

    margin-top: 22px;

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

}

.product-availability > div {

    min-height: 37px;

    padding:

        0 13px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 8px;

    background:

        rgba(17,19,21,.045);

    font-size: 9px;

    font-weight: 600;

}

.product-availability svg {

    width: 15px;

    height: 15px;

}

.availability-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:

        var(--yellow-dark);

}

/* =========================================================

   PRICING

========================================================= */

.pricing {

    margin-top: 20px;

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 15px;

}

.price-card {

    min-height: 405px;

    padding: 29px;

    border-radius: 18px;

    display: flex;

    flex-direction: column;

}

.price-buy {

    background:

        white;

    box-shadow:

        0 18px 55px

        rgba(17,19,21,.055);

}

.price-rent {

    background:

        var(--yellow);

    color:

        var(--black);

}

.price-card-top {

    display: flex;

    justify-content:

        space-between;

    align-items: center;

    font-size: 9px;

    font-weight: 800;

}

.price-value {

    margin-top: 27px;

    display: flex;

    align-items: baseline;

    gap: 8px;

}

.price-value small {

    font-size: 11px;

    color:

        var(--grey);

}

.price-value strong {

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            42px,

            4vw,

            57px

        );

    line-height: 1;

    letter-spacing:

        -3px;

}

.price-value > span {

    font-size: 9px;

    font-weight: 700;

}

.price-description {

    margin-top: 14px;

    color:

        var(--grey);

    font-size: 10px;

    line-height: 1.6;

}

.price-features {

    margin-top: 22px;

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap:

        10px 18px;

}

.price-features > div {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 10px;

}

.price-features svg {

    width: 15px;

    height: 15px;

}

.price-footer {

    margin-top: auto;

    padding-top: 24px;

    display: flex;

    align-items: center;

    justify-content:

        space-between;

    gap: 20px;

}

.price-footer > span {

    font-size: 8px;

    color:

        var(--grey);

}

.price-footer a {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 10px;

    font-weight: 800;

}

/* =========================================================

   PRODUCTION

========================================================= */

.production {

    position: relative;

    overflow: hidden;

    padding:

        85px

        max(

            45px,

            calc((100% - 1360px) / 2)

        )

        80px;

    background:

        var(--black);

    color:

        white;

}

.production-bg-word {

    position: absolute;

    right: 3%;

    top: -45px;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            120px,

            18vw,

            260px

        );

    line-height: 1;

    letter-spacing:

        -13px;

    font-weight: 800;

    color:

        rgba(255,255,255,.025);

}

.production-head {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:

        65px 1fr .7fr;

    gap: 35px;

    align-items: end;

}

.production-number {

    width: 47px;

    height: 47px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        var(--yellow);

    color:

        var(--black);

    font-size: 11px;

    font-weight: 800;

}

.production-head h2 {

    margin-top: 14px;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            37px,

            4vw,

            55px

        );

    line-height: 1.02;

    letter-spacing:

        -3px;

}

.production-head h2 span {

    display: block;

    color:

        var(--yellow);

}

.production-head > p {

    color:

        rgba(255,255,255,.52);

    font-size: 11px;

    line-height: 1.75;

}

.production-layout {

    position: relative;

    z-index: 2;

    margin-top: 48px;

    display: grid;

    grid-template-columns:

        .85fr 1.15fr;

    gap: 15px;

}

.production-main-card {

    min-height: 410px;

    padding: 34px;

    border-radius: 21px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background:

        var(--black-2);

}

.production-main-icon {

    width: 56px;

    height: 56px;

    margin-bottom: auto;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        var(--yellow);

    color:

        var(--black);

}

.production-main-card > span {

    font-size: 8px;

    color:

        var(--yellow);

}

.production-main-card h3 {

    margin-top: 12px;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            30px,

            3vw,

            42px

        );

}

.production-main-card p {

    margin-top: 16px;

    color:

        rgba(255,255,255,.52);

    font-size: 10px;

    line-height: 1.75;

}

.production-main-card a {

    margin-top: 24px;

    color:

        var(--yellow);

    font-size: 10px;

    font-weight: 800;

}

.production-steps {

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 10px;

}

.production-step {

    min-height: 195px;

    padding: 20px;

    border-radius: 17px;

    display: grid;

    grid-template-columns:

        auto auto 1fr;

    gap: 13px;

    background:

        var(--black-2);

}

.step-number {

    font-size: 8px;

    color:

        rgba(255,255,255,.3);

}

.step-icon {

    width: 41px;

    height: 41px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        rgba(255,196,0,.1);

    color:

        var(--yellow);

}

.production-step strong {

    font-size: 12px;

}

.production-step p {

    margin-top: 6px;

    color:

        rgba(255,255,255,.44);

    font-size: 9px;

    line-height: 1.6;

}

.production-tags {

    position: relative;

    z-index: 2;

    margin-top: 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.production-tags span {

    min-height: 39px;

    padding:

        0 13px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    gap: 8px;

    background:

        var(--black-2);

    color:

        rgba(255,255,255,.62);

    font-size: 9px;

}

.production-tags svg {

    color:

        var(--yellow);

}

/* =========================================================

   APPLICATIONS

========================================================= */

.applications {

    width:

        min(

            1360px,

            calc(100% - 90px)

        );

    margin:

        0 auto;

    padding:

        75px 0;

}

.applications-head h2 {

    margin-top: 12px;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            35px,

            4vw,

            52px

        );

    line-height: 1;

    letter-spacing:

        -2.8px;

}

.applications-head h2 span {

    display: block;

    color:

        var(--yellow-dark);

}

.applications-grid {

    margin-top: 34px;

    display: grid;

    grid-template-columns:

        repeat(4, 1fr);

    gap: 10px;

}

.application {

    min-height: 165px;

    padding: 21px;

    border-radius: 15px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background:

        rgba(255,255,255,.6);

}

.application svg {

    width: 24px;

    height: 24px;

    margin-bottom: auto;

}

.application strong {

    font-size: 12px;

}

.application span {

    margin-top: 5px;

    color:

        var(--grey);

    font-size: 9px;

}

/* =========================================================

   FAQ

========================================================= */

.faq {

    padding:

        80px

        max(

            45px,

            calc((100% - 1360px) / 2)

        );

    background:

        #ecebe5;

}

.faq-head {

    display: grid;

    grid-template-columns:

        1fr .55fr;

    gap: 70px;

    align-items: end;

}

.faq-head h2 {

    margin-top: 13px;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            37px,

            4vw,

            55px

        );

    line-height: 1;

    letter-spacing:

        -3px;

}

.faq-head h2 span {

    display: block;

    color:

        var(--yellow-dark);

}

.faq-head > p {

    color:

        var(--grey);

    font-size: 11px;

    line-height: 1.75;

}

.faq-layout {

    margin-top: 42px;

    display: grid;

    grid-template-columns:

        .6fr 1.4fr;

    gap: 18px;

}

.faq-side {

    min-height: 340px;

    padding: 28px;

    border-radius: 18px;

    display: flex;

    flex-direction: column;

    background:

        var(--yellow);

}

.faq-side-icon {

    width: 52px;

    height: 52px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        var(--black);

    color:

        var(--yellow);

}

.faq-side > strong {

    margin-top: auto;

    font-family:

        "Manrope",

        sans-serif;

    font-size: 24px;

}

.faq-side p {

    margin-top: 10px;

    color:

        rgba(17,19,21,.62);

    font-size: 10px;

    line-height: 1.65;

}

.faq-side a {

    margin-top: 20px;

    font-size: 10px;

    font-weight: 800;

}

.faq-list {

    display: grid;

    gap: 8px;

}

.faq-item {

    border-radius: 13px;

    overflow: hidden;

    background:

        rgba(255,255,255,.65);

}

.faq-item.open {

    background:

        white;

}

.faq-question {

    width: 100%;

    min-height: 68px;

    padding:

        0 20px;

    display: flex;

    align-items: center;

    justify-content:

        space-between;

    gap: 20px;

    background:

        transparent;

    color:

        var(--text);

    cursor: pointer;

    text-align: left;

    font-size: 12px;

    font-weight: 700;

}

.faq-question svg {

    color:

        var(--yellow-dark);

    transition:

        transform .3s ease;

}

.faq-item.open .faq-question svg {

    transform:

        rotate(45deg);

}

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:

        max-height .35s ease;

}

.faq-answer p {

    padding:

        0 20px 20px;

    color:

        var(--grey);

    font-size: 10px;

    line-height: 1.75;

}

/* =========================================================

   CTA

========================================================= */

.cta-section {

    position: relative;

    min-height: 445px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

    background:

        #f1f0ea;

}

.cta-symbol {

    position: absolute;

    font-family:

        "Manrope",

        sans-serif;

    font-size: 390px;

    line-height: 1;

    font-weight: 800;

    color:

        rgba(17,19,21,.023);

}

.cta-content {

    position: relative;

    z-index: 2;

}

.cta-content > span {

    font-size: 8px;

    letter-spacing:

        2px;

}

.cta-content h2 {

    margin-top: 14px;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            37px,

            4.5vw,

            59px

        );

    line-height: 1.08;

    letter-spacing:

        -3px;

}

.cta-content h2 strong {

    display: block;

    margin-top: 5px;

    color:

        var(--yellow-dark);

}

.cta-content p {

    margin-top: 20px;

    font-size: 12px;

    line-height: 1.6;

    color:

        var(--grey);

}

.cta-content a {

    width: fit-content;

    min-height: 51px;

    margin:

        28px auto 0;

    padding:

        0 18px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 13px;

    background:

        var(--black);

    color:

        white;

    font-size: 9px;

    font-weight: 800;

}

/* =========================================================

   CONTACT

========================================================= */

.contact {

    padding:

        80px

        max(

            45px,

            calc((100% - 1360px) / 2)

        );

    display: grid;

    grid-template-columns:

        .85fr 1.15fr;

    gap: 80px;

    align-items: center;

    background:

        var(--black);

    color:

        white;

}

.contact-copy h2 {

    margin-top: 14px;

    font-family:

        "Manrope",

        sans-serif;

    font-size:

        clamp(

            37px,

            4vw,

            54px

        );

    line-height: 1;

    letter-spacing:

        -3px;

}

.contact-copy h2 span {

    display: block;

    color:

        var(--yellow);

}

.contact-copy > p {

    margin-top: 19px;

    color:

        rgba(255,255,255,.52);

    font-size: 10px;

    line-height: 1.75;

}

.contact-details {

    margin-top: 25px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.contact-details a {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 10px;

}

.contact-details svg {

    color:

        var(--yellow);

}

.contact-form {

    padding: 30px;

    border-radius: 19px;

    display: flex;

    flex-direction: column;

    gap: 21px;

    background:

        var(--black-2);

}

.form-row {

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 19px;

}

.contact-form label {

    display: flex;

    flex-direction: column;

    gap: 7px;

}

.contact-form label > span {

    font-size: 7px;

    color:

        rgba(255,255,255,.42);

}

.contact-form input,

.contact-form textarea {

    width: 100%;

    padding:

        12px 0;

    border: none;

    border-bottom:

        1px solid

        rgba(255,255,255,.16);

    background:

        transparent;

    color:

        white;

    outline: none;

    font-size: 12px;

}

.contact-form input:focus,

.contact-form textarea:focus {

    border-color:

        var(--yellow);

}

.contact-form textarea {

    resize: vertical;

}

.contact-form button {

    min-height: 54px;

    padding:

        0 18px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    justify-content:

        space-between;

    background:

        var(--yellow);

    color:

        var(--black);

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;

}

/* =========================================================
   FOOTER
   WSPÓLNY DLA INDEX I POLITYKI PRYWATNOŚCI
========================================================= */

.site-footer {
    min-height: 105px;
    padding: 27px 45px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;

    background: #0a0b0c;
    color: rgba(255,255,255,.40);

    font-family:
        "Inter",
        sans-serif;
}

.site-footer .footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.site-footer .footer-brand-name {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1px;
}

.site-footer .footer-subtitle {
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,.40);
    font-family: "Inter", sans-serif;
    font-size: 7px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 1px;
}

.site-footer .footer-credit {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    color: rgba(255,255,255,.18);
    font-family: "Inter", sans-serif;
    font-size: 6px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: .7px;
}

.site-footer .footer-credit a {
    color: rgba(255,255,255,.28);
    font-family: "Inter", sans-serif;
    font-size: 6px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .7px;
    transition: color .2s ease;
}

.site-footer .footer-credit a:hover { color: var(--yellow); }

.site-footer .footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 400;
    line-height: 1.3;
}

.site-footer .footer-links a {
    color: rgba(255,255,255,.40);
    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    transition: color .2s ease;
}

.site-footer .footer-links a:hover { color: var(--yellow); }

.site-footer .footer-copy {
    justify-self: end;
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,.40);
    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
}

@media (max-width: 700px) {
    .site-footer {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 30px 20px;
        text-align: center;
    }
    .site-footer .footer-left { align-items: center; }
    .site-footer .footer-links { justify-content: center; gap: 10px 16px; }
    .site-footer .footer-copy { justify-self: center; }
}

/* =========================================================

   REVEAL

========================================================= */

.reveal {

    opacity: 0;

    transform:

        translateY(22px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.visible {

    opacity: 1;

    transform:

        translateY(0);

}

/* =========================================================

   TABLET

========================================================= */

@media (max-width: 1050px) {

    .nav {

        grid-template-columns:

            1fr auto;

    }

    .nav-links,

    .nav-cta {

        display: none;

    }

    .menu-button {

        display: flex;

    }

    .hero {

        min-height: auto;

        grid-template-columns:

            1fr;

    }

    .hero-left,

    .hero-right {

        min-height: auto;

    }

    .hero-left {

        padding:

            120px 40px 40px;

    }

    .hero-right {

        padding:

            40px 40px 95px;

    }

    .intro {

        grid-template-columns:

            1fr;

        gap: 45px;

    }

    .rental-header {

        grid-template-columns:

            1fr;

        gap: 25px;

    }

    .rental-content {

        grid-template-columns:

            1fr;

    }

    .products-head {

        grid-template-columns:

            1fr;

        gap: 25px;

    }

    .products-head-main {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }

    .product-content {

        grid-template-columns:

            1fr;

    }

    .product-info {

        max-width: 800px;

        margin:

            0 auto;

    }

    .production-head {

        grid-template-columns:

            auto 1fr;

    }

    .production-head > p {

        grid-column:

            2;

    }

    .production-layout {

        grid-template-columns:

            1fr;

    }

    .applications-grid {

        grid-template-columns:

            1fr 1fr;

    }

    .faq-head {

        grid-template-columns:

            1fr;

    }

    .faq-layout {

        grid-template-columns:

            1fr;

    }

    .contact {

        grid-template-columns:

            1fr;

    }

}

/* =========================================================

   MOBILE

========================================================= */

@media (max-width: 700px) {

    .nav {

        top: 10px;

        width:

            calc(100% - 22px);

        height: 58px;

    }

    .hero-left {

        padding:

            100px 20px 30px;

    }

    .hero-right {

        padding:

            28px 20px 80px;

    }

    .hero-logo {

        max-width: 290px;

    }

    .hero h1 {

        font-size: 41px;

        letter-spacing:

            -2.6px;

    }

    .hero-actions {

        flex-direction: column;

        align-items: flex-start;

    }

    .button {

        width: 100%;

        justify-content:

            space-between;

    }

    .hero-mini-panel,

    .hero-scroll {

        display: none;

    }

    .intro {

        width:

            calc(100% - 40px);

        padding:

            65px 0;

    }

    .rental-section {

        padding:

            65px 20px;

    }

    .rental-word {

        top: 10px;

        font-size: 92px;

        letter-spacing:

            -6px;

    }

    .rental-header h2 {

        font-size: 40px;

    }

    .rental-options {

        grid-template-columns:

            1fr;

    }

    .rental-bottom {

        grid-template-columns:

            1fr 1fr;

    }

    .products-head {

        width:

            calc(100% - 40px);

    }

    .product-showcase {

        padding:

            55px 20px 68px;

    }

    .product-top h3 {

        font-size: 50px;

    }

    .product-visual {

        min-height: 350px;

    }

    .product-image {

        max-width: 92%;

        max-height: 300px;

    }

    .floating-spec {

        display: none;

    }

    .product-spec-grid {

        grid-template-columns:

            1fr 1fr;

    }

    .pricing {

        grid-template-columns:

            1fr;

    }

    .price-features {

        grid-template-columns:

            1fr;

    }

    .price-footer {

        flex-direction: column;

        align-items: flex-start;

    }

    .production {

        padding:

            65px 20px;

    }

    .production-head {

        grid-template-columns:

            1fr;

    }

    .production-head > p {

        grid-column:

            auto;

    }

    .production-steps {

        grid-template-columns:

            1fr;

    }

    .applications {

        width:

            calc(100% - 40px);

    }

    .applications-grid {

        grid-template-columns:

            1fr 1fr;

    }

    .faq {

        padding:

            65px 20px;

    }

    .contact {

        padding:

            65px 20px;

    }

    .form-row {

        grid-template-columns:

            1fr;

    }

    .site-footer {

        grid-template-columns:

            1fr;

        text-align: center;

    }

    .site-footer .footer-left {

        align-items: center;

    }

    .site-footer .footer-links {

        justify-content: center;

        flex-wrap: wrap;

    }

    .site-footer .footer-copy {

        justify-self: center;

    }

}