/* =========================================================
   GLOBAL
========================================================= */


/* =========================
   TABLET / SMALL LAPTOP
========================= */

@media (max-width: 992px) {

    .brand-tagline {
        display: none;
    }

}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .container {
        width: min(100% - 40px, var(--container-width));
    }


    /* Header */

    .navbar {
        padding: 0;
    }

    .logo-image {
        height: 60px;
    }

    .nav-list {
        gap: 26px;
    }


    /* ==========================================
       LANDING
    ========================================== */

    .hero {
        padding: 64px 0 60px;
    }

    .hero-wrapper {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }

    .hero-content {
        max-width: 760px;
    }

    .hero-badge {
        margin-bottom: 38px;
        transform: none;
    }

    .hero-description {
        margin-inline: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-visual {
        transform: none;
    }

    .hero-brain-icon {
        width: 220px;
        height: 220px;
    }


    /* Highlights */

    .highlights-wrapper {
        gap: 24px;
        flex-wrap: wrap;
    }


    /* Why TEMION */

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


    /* Services */

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Realizacja usług */

    .service-logistics-flow {
        gap: 16px;
    }

    .service-logistics-line {
        min-width: 50px;
    }

    .service-logistics-details {
        transform: translateX(0);
        max-width: 100%;
    }


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

    .service-item {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-item ul {
        grid-template-columns: 1fr;
    }

    .service-icon {
        margin-top: 0;
    }


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

    .about-hero-grid {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .about-hero-visual {
        order: 2;
    }

    .about-hero-icon {
        width: 180px;
        height: 180px;
    }

    .about-philosophy-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-philosophy-content {
        max-width: 760px;
        margin-left: 0;
    }

    .about-philosophy-visual {
        order: 2;
    }

    .about-philosophy-icon-image {
        width: 180px;
        height: 180px;
    }


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

    .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-hero-visual {
        order: 2;
    }

    .contact-hero-icon {
        width: 180px;
        height: 180px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .contact-info {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 640px) {

    .container {
        width: min(100% - 32px, var(--container-width));
    }


    /* ==========================================
       GLOBAL
    ========================================== */

    .site-header {
        padding: 14px 0;
    }

    .logo-image {
        height: 52px;
    }

    .navbar {
        gap: 16px;
    }

    .nav-list {
        gap: 16px;
    }

    .nav-list a {
        font-size: .88rem;
    }


    /* ==========================================
       LANDING
    ========================================== */

    .hero {
        padding: 52px 0 48px;
    }

    .hero-wrapper {
        gap: 38px;
    }

    .hero-badge {
        margin-bottom: 28px;
        padding: 11px 18px;
        font-size: .85rem;
    }

    .hero-title {
        margin-bottom: 20px;
        font-size: clamp(2.65rem, 12vw, 3.5rem);
        line-height: 1.04;
    }

    .hero-break {
        height: 14px;
    }

    .hero-description {
        margin-bottom: 30px;
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-buttons .button {
        width: 100%;
    }

    .hero-brain-icon {
        width: 170px;
        height: 170px;
    }


    /* Highlights */

    .highlights {
        padding: 16px 0 60px;
    }

    .highlights-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 14px;
        padding: 22px 18px;
    }

    .highlight-item {
        gap: 9px;
    }

    .highlight-item p {
        font-size: .9rem;
    }

    .highlight-icon {
        width: 18px;
        height: 18px;
    }


    /* Shared section headings */

    .section-heading {
        margin-bottom: 42px;
    }

    .section-heading h2 {
        font-size: 2.1rem;
        line-height: 1.12;
    }

    .section-heading p {
        font-size: 1rem;
        line-height: 1.7;
    }


    /* Why TEMION */

    .why-temion {
        padding: 12px 0 64px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .why-card {
        padding: 26px;
    }


    /* Services */

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

    .service-card {
        padding: 26px;
    }

    .services-cta {
        padding: 32px 24px;
    }


    /* Realizacja usług */

    .service-logistics {
        padding: 20px 0 56px;
    }

    .service-logistics .section-heading h2 {
        font-size: 2.1rem;
    }

    .service-logistics .section-heading p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .service-logistics-flow {
        flex-direction: column;
        gap: 0;
    }

    .service-logistics-step {
        width: 100%;
    }

    .service-logistics-line {
        flex: none;

        width: 1px;
        height: 42px;

        min-width: 0;

        margin: 12px 0 12px 27px;

        background: rgba(74,147,226,.25);
    }


    /* Landing navigation */

    .landing-navigation {
        padding: 20px 0 72px;
    }

    .landing-navigation-header {
        margin-bottom: 36px;
    }

    .landing-navigation-header h2 {
        font-size: 2.1rem;
    }

    .landing-navigation-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .landing-navigation-button {
        width: 100%;
        min-width: 0;
        padding: 17px 24px;
    }


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

    .page-hero {
        padding: 36px 0 12px;
    }

    .services-list {
        padding: 16px 0 28px;
    }

    .service-item {
        grid-template-columns: 1fr;
        gap: 18px;

        padding: 28px 22px;
        margin-bottom: 18px;

        border-radius: 20px;
    }

    .service-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .service-icon-image {
        width: 28px;
        height: 28px;
    }

    .service-box__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .service-box__header h3,
    .service-item h3 {
        font-size: 1.45rem;
    }

    .service-price {
        padding: 7px 12px;
        font-size: .88rem;
    }

    .service-item p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .service-item ul {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-left: 18px;
    }

    .service-item li {
        font-size: .98rem;
        line-height: 1.7;
    }


    /* FAQ */

    .faq-section {
        padding: 12px 0 28px;
    }

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

    .faq-header h2 {
        font-size: 2.1rem;
    }

    .faq-header p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .faq-question {
        gap: 16px;
        padding: 22px 0;
        font-size: 1rem;
        line-height: 1.45;
    }

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

    .faq-item.is-open .faq-answer {
        padding: 0 44px 24px 0;
    }

    .faq-answer p {
        font-size: .96rem;
        line-height: 1.75;
    }


    /* CTA */

    .cta-section {
        margin: 24px 0 56px;
    }

    .cta-box {
        padding: 32px 24px;
        border-radius: 22px;
    }

    .cta-box h2 {
        font-size: 2rem;
    }

    .cta-box p {
        margin-bottom: 30px;
        font-size: 1rem;
        line-height: 1.75;
    }


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

    .page-hero {
        padding: 38px 0 48px;
    }

    .page-hero .container {
        max-width: none;
    }

    .page-hero .hero-tag {
        margin-bottom: 20px;
    }

    .page-hero h1 {
        font-size: clamp(2.5rem, 11vw, 3.4rem);
        line-height: 1.08;
        margin-bottom: 22px;
    }

    .about-intro {
        max-width: none;
    }

    .about-intro p {
        font-size: 1rem;
        line-height: 1.75;
        margin-bottom: 16px;
    }

    .about-hero-grid {
        gap: 38px;
    }

    .about-hero-icon {
        width: 150px;
        height: 150px;
    }

    .about-hero-visual::before {
        width: 300px;
        height: 300px;
    }


    /* Workflow */

    .workflow-section,
    .about-philosophy {
        padding: 44px 0;
    }

    .workflow {
        max-width: none;
    }

    .workflow-item {
        gap: 18px;
        padding: 26px 0;
    }

    .workflow-item:hover {
        transform: none;
    }

    .workflow-number {
        width: 46px;
        height: 46px;
    }

    .workflow-content h3 {
        padding-left: 14px;
        font-size: 1.25rem;
    }

    .workflow-content h3::before {
        width: 5px;
        height: 28px;
    }

    .workflow-content p {
        font-size: .96rem;
        line-height: 1.75;
    }


    /* Philosophy */

    .philosophy-header {
        margin-bottom: 32px;
    }

    .philosophy-header h2 {
        font-size: 2.1rem;
        line-height: 1.1;
    }

    .philosophy-text {
        max-width: none;
        margin-top: 14px;
    }

    .philosophy-text p {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 18px;
    }

    .about-philosophy {
        padding: 52px 0 72px;
    }

    .about-philosophy-grid {
        gap: 42px;
    }

    .about-philosophy-content {
        max-width: none;
    }

    .about-philosophy-visual {
        order: 2;
    }

    .about-philosophy-icon {
        width: 150px;
        height: 150px;
    }

    .about-philosophy-icon-image {
        width: 160px;
        height: 160px;
    }

    .about-philosophy-icon::before {
        width: 320px;
        height: 320px;
    }


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

    .contact-hero-grid {
        gap: 34px;
    }

    .contact-intro {
        max-width: none;
        margin-top: 18px;
    }

    .contact-intro p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .contact-hero-visual::before {
        width: 300px;
        height: 300px;
    }

    .contact-hero-icon {
        width: 150px;
        height: 150px;
    }

    .contact-section {
        padding: 24px 0 72px;
    }

    .contact-grid {
        gap: 22px;
    }

    .contact-form-card {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .contact-form-header p {
        margin-bottom: 28px;
        line-height: 1.7;
    }

    .contact-divider {
        margin: 14px 0 24px;
    }

    .contact-form {
        gap: 18px;
    }

    .contact-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-field {
        gap: 8px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 16px 17px;
        border-radius: 16px;
    }

    .contact-form textarea {
        min-height: 190px;
    }

    .upload-box {
        min-height: 170px;
        padding: 26px 18px;
    }

    .contact-helper {
        font-size: .84rem;
    }

    .contact-counter {
        font-size: .78rem;
    }

    .contact-form .button {
        width: 100%;
        align-self: stretch;
    }

    .contact-info {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-card {
        padding: 24px;
        border-radius: 22px;
    }


    /* Success modal */

    .success-modal-box {
        width: calc(100% - 32px);
        padding: 34px 24px;
        border-radius: 22px;
    }

    .success-icon {
        width: 64px;
        height: 64px;
    }


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

    .footer-top {
        padding: 34px 0;
    }

    .footer-logo {
        width: 160px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 18px;
        padding: 20px 0;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .container {
        width: min(100% - 28px, var(--container-width));
    }

    .nav-list {
        gap: 11px;
    }

    .nav-list a {
        font-size: .82rem;
    }

    .logo-image {
        height: 48px;
    }


    /* Landing */

    .highlights-wrapper {
        grid-template-columns: 1fr;
    }

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


    /* O nas */

    .workflow-item {
        gap: 14px;
    }

    .workflow-number {
        width: 42px;
        height: 42px;
        font-size: .9rem;
    }


    /* Kontakt */

    .contact-form-card,
    .contact-card {
        padding: 22px 18px;
    }

}

/* Footer – dane firmy */

@media (max-width: 640px) {

    .footer-company-info {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .footer-company-data {
        gap: 12px;
        white-space: nowrap;
    }

}

/* POLITYKA PRYWATNOŚCI */

@media (max-width:900px){

    .legal-hero{

        padding:96px 0 60px;
    }

    .legal-document{

        padding:40px;
    }
}


@media (max-width:640px){

    .legal-hero{

        padding:78px 0 48px;
    }

    .legal-hero h1{

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

        letter-spacing:-.04em;
    }

    .legal-hero > .container > p:not(.legal-updated){

        margin-top:18px;

        font-size:.98rem;

        line-height:1.7;
    }

    .legal-content{

        padding:24px 0 72px;
    }

    .legal-document{

        padding:28px 22px;

        border-radius:22px;
    }

    .legal-section{

        padding-bottom:34px;

        margin-bottom:34px;
    }

    .legal-section h2{

        margin-bottom:16px;

        font-size:1.22rem;
    }

    .legal-section p,
    .legal-section ul,
    .legal-section ol{

        font-size:.94rem;

        line-height:1.78;
    }

    .legal-company{

        padding:19px;

        margin:22px 0;
    }
}


@media (max-width:380px){

    .legal-document{

        padding:24px 18px;
    }

    .legal-hero{

        padding-top:70px;
    }

    .legal-section h2{

        font-size:1.12rem;
    }
}


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

    .legal-document a{

        transition:none;
    }
}