/* ==================== JEDEN dla przemysłu ==================== */

/* ============================================================
   SMALL DESKTOP (1344px / 16 = 84em)
   ============================================================ */
@media (max-width: 84em) {
    .container {
        max-width: 110rem;
        width: 100%;
    }

    .section-hero,
    .section-problem,
    .section-quote,
    .section-solution,
    .section-objections,
    .section-air-com,
    .section-faq,
    .section-form,
    .section-comparison,
    .section-ticker {
        padding-left: 3.6rem;
        padding-right: 3.6rem;
    }

    .nav-links ul {
        gap: 1.2rem !important;
    }

    .nav-links li {
        font-size: 1.2rem !important;
    }

    .hero-title {
        font-size: 5.4rem;
    }

    .solution-box {
        aspect-ratio: auto;
    }

    .nav-links li {
        font-size: 1.2rem;
    }
}

/* ============================================================
   LANDSCAPE TABLETS (1200px / 16 = 75em)
   ============================================================ */
@media (max-width: 75em) {

    /* NAVIGATION */
    .nav {
        padding: 1.2rem 2.4rem;
    }

    .btn-mobile-nav {
        display: flex !important;
    }

    .nav-links {
        background-color: rgba(255, 255, 255, 0.97);
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        z-index: 999;
    }

    .nav.nav-open .nav-links {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }

    .nav-links ul {
        flex-direction: column;
        gap: 4.8rem !important;
        align-items: center;
    }

    .nav-links a:link,
    .nav-links a:visited {
        font-size: 1.8rem;
    }

    /* HERO SECTION */
    .carousel-container {
        max-width: 32rem;
        height: 24rem;
    }

    .hero-title {
        max-width: 60rem;
        line-height: 1.2;
    }

    /* SOLUTION SECTION */
    .solution-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* OBJECTIONS SECTION */
    .objection-text {
        font-size: 1.4rem;
    }

    .objection-arrow {
        font-size: 3.6rem;
    }
}

/* ============================================================
   TABLETS (944px / 16 = 59em)
   ============================================================ */
@media (max-width: 59em) {

    /* HERO SECTION */
    .section-hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 4.8rem;
    }

    .hero-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn-box {
        justify-content: center;
    }

    .hero-right {
        order: 2;
    }

    .carousel-container {
        width: 75%;
        max-width: none;
        height: 28rem;
    }

    .quote-text {
        font-size: 2.4rem;
    }

    .section-quick-info .subtitle {
        font-size: 2rem;
        padding: 0 1.2rem;
    }

    .scenario-desc {
        font-size: 1.6rem;
    }

    /* FAQ SECTION */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* FOOTER SECTION */
    .footer-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4.8rem;
    }

    .footer-col-info,
    .footer-col-contact {
        width: 100%;
        align-items: center;
    }

    .footer-col-contact {
        order: -1;
    }

    .footer-col-info {
        order: -2;
    }

    .footer-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.4rem;
        text-align: left;
    }

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

/* ============================================================
   MOBILE (544px / 16 = 34em)
   ============================================================ */
@media (max-width: 34em) {
    .nav {
        padding: 1rem 1.6rem;
    }

    .logo {
        height: 4.8rem;
    }

    .container {
        padding: 0 2rem;
    }

    .section-hero,
    .section-problem,
    .section-quote,
    .section-solution,
    .section-objections,
    .section-air-com,
    .section-faq,
    .section-form,
    .section-comparison,
    .section-ticker {
        padding-left: 0;
        padding-right: 0;
    }

    /* SCENARIO BOX */
    .scenario-btn {
        display: none;
    }

    .scenario-viewport {
        touch-action: pan-y;
    }

    .scenario-content {
        flex-direction: column;
        gap: 2.4rem;
        text-align: center;
    }

    .scenario-img {
        width: 100%;
        max-width: 30rem;
        height: auto;
    }

    .scenario-top {
        padding: 3.2rem 2rem;
        text-align: center;
    }

    /* TYPOGRAPHY */
    .hero-title {
        font-size: 2.8rem;
    }

    .carousel-container {
        width: 100%;
        height: auto;
        min-height: 28rem;
    }

    .carousel-slide {
        padding: 2.4rem 1.6rem;
    }

    p,
    .problem-desc,
    .scenario-desc,
    .solution-desc,
    .objection-text,
    .footer-text,
    .faq-answer,
    .subtitle-subtext {
        font-size: 1.6rem !important;
    }

    .ticker-value {
        font-size: 2rem !important;
    }

    .ticker-text {
        font-size: 1.4rem !important;
    }

    .ticker-item {
        padding: 0 1.6rem !important;
    }

    /* HERO SECTION */
    .btn-box {
        flex-direction: column;
        gap: 1.6rem;
        width: 100%;
    }

    .section-box {
        flex-direction: column;
        gap: 2.4rem;
        text-align: center;
    }

    .hero-btn {
        width: 100%;
        min-height: 4.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.2rem 2.4rem;
        font-size: 1.6rem;
    }

    /* SOLUTION SECTION */
    .solution-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .solution-box {
        padding: 2.4rem;
    }

    .s-icon-box {
        margin: 0 auto 2.4rem auto;
    }

    .solution-title,
    .solution-desc,
    .solution-link {
        text-align: center;
    }

    /* OBJECTION SECTION */
    .objection-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .objection-box:nth-child(3n) {
        background-color: #276DCD;
        margin-bottom: 9.6rem;
        position: relative;
    }

    .objection-box:nth-child(3n)::after {
        content: "";
        position: absolute;
        bottom: -4.8rem;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #D9E1EC;
    }

    .objection-box:last-child {
        margin-bottom: 0;
    }

    .objection-box:last-child::after {
        display: none;
    }

    .objection-box:nth-child(3n) .objection-text {
        color: #fff;
    }

    .objection-arrow {
        transform: rotate(90deg);
        margin: 1.2rem 0;
        font-size: 3.2rem;
    }

    /* QUOTE SECTION */
    .quote-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.4rem;
    }

    .quote-img {
        grid-column: auto;
        grid-row: auto;
        width: 20rem;
        height: 20rem;
    }

    .quote-author-info {
        grid-column: auto;
        grid-row: auto;
        text-align: center;
    }

    .quote-text-box {
        grid-column: auto;
        padding: 0;
    }

    .quote-text {
        font-size: 2rem;
        text-align: center;
    }

    .quote-mark {
        font-size: 4.8rem;
    }
}


/* ==================== JEDEN wartości ==================== */

/* ============================================================
   SMALL DESKTOP (1344px / 16 = 84em)
   ============================================================ */
@media (max-width: 84em) {

    .section-hero-value,
    .section-sticky-scroll {
        padding-left: 3.6rem;
        padding-right: 3.6rem;
    }

    .sticky-container {
        grid-template-columns: 3fr 7fr;
    }

    .hero-title-value {
        font-size: 7.4rem;
    }
}

/* ============================================================
   LANDSCAPE TABLETS (1200px / 16 = 75em)
   ============================================================ */
@media (max-width: 75em) {
    .scroll-right {
        gap: 15vh;
    }

    .sticky-container {
        grid-template-columns: 3.5fr 6.5fr;
    }

    .card-negative .comparison-list li,
    .card-positive .comparison-list li {
        font-size: 1.6rem;
    }
}

/* ============================================================
   TABLETS (944px / 16 = 59em)
   ============================================================ */
@media (max-width: 59em) {
    .hero-title-value {
        font-size: 5.2rem;
    }

    /* --- Sekcja PWE --- */
    .sticky-container {
        display: flex;
        flex-direction: column;
    }

    .section-hero-value,
    .section-sticky-scroll {
        padding: 3.6rem;
    }

    .sticky-left {
        transform: none;
        position: sticky;
        top: 0;
        background: #102c52;
        z-index: 100;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 3.2rem;
        padding: 2.4rem 1.6rem;
        border-bottom: 2px solid #1a4f9c;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    .sticky .sticky-left {
        top: 8rem;
    }

    .sticky-heading {
        font-size: 2.4rem;
        transform: scale(0.9);
        transform-origin: center center;
    }

    .sticky-heading.active {
        transform: scale(1);
    }

    .scroll-right {
        gap: 10rem;
        padding-top: 5rem;
        padding-bottom: 10rem;
    }

    .scroll-card {
        min-height: 50vh;
        padding: 3.2rem;
    }

    /* --- Sekcja Dlaczego JEDEN? --- */
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MOBILE (544px / 16 = 34em)
   ============================================================ */
@media (max-width: 34em) {

    /* --- Sticky Navigation --- */
    .sticky .nav {
        height: 7rem;
    }

    .sticky .logo {
        height: 4.2rem;
    }

    /* --- Sekcja Hero --- */
    .section-hero-value,
    .section-sticky-scroll {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .hero-title-value {
        font-size: 3rem;
    }

    .hero-cta-btn:link,
    .hero-cta-btn:visited {
        display: flex;
        width: 100%;
        justify-content: center;
        font-size: 1.2rem;
        padding: 1.6rem;
    }

    .hero-cta-btn span {
        font-size: 2rem;
    }


    /* --- Sekcja PWE --- */
    .sticky-heading {
        font-size: 1.8rem;
    }

    .sticky .sticky-left {
        top: 7rem;
    }

    .card-title {
        font-size: 2rem;
    }

    .card-description {
        font-size: 1.4rem !important;
    }

    .comparison-title {
        font-size: 3rem;
    }

    .comparison-card {
        padding: 2.4rem;
    }
}