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

   ZÁKLAD

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



@font-face {

    font-family: 'Reigo';

    src: url('../fonts/Reigo-Black.ttf') format('truetype');

    font-weight: 900;

    font-style: normal;

}



@font-face {

    font-family: 'Nunito';

    src: url('../fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');

    font-weight: 100 900;

    font-style: normal;

}



:root {

    --blue: #102a43;

    --green: #193f2d;

    --brown: #571C0C;

    --orange: #d27a35;

    --cream: #fff7eb;

    --sand: #F1A766;

    --white: #ffffff;

    --text: #263238;



    --shadow: 0 24px 70px rgba(16, 42, 67, 0.15);

}



* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    min-height: 100%;

}



body {

    margin: 0;

    padding: 0;



    font-family: 'Nunito', sans-serif;



    color: var(--text);

    background: var(--cream);



    overflow-x: hidden;

}



img {

    display: block;

    max-width: 100%;

}



a {

    color: inherit;

    text-decoration: none;

}





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

   OBECNÉ

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



.section-padding {

    padding: 90px 7%;

}



.section-heading {

    max-width: 760px;

}



.center {

    text-align: center;

    margin-inline: auto;

}



h1,

h2 {

    font-family: 'Reigo', serif;

    color: var(--blue);

    line-height: 1.05;

    margin: 20px;

}



h1 {

    font-size: clamp(2.2rem, 5vw, 4.8rem);

    max-width: 900px;

}



h2 {

    font-size: clamp(2rem, 4vw, 3.8rem);

}



h3 {

    color: var(--brown);

    margin: 0 0 10px;

    font-size: 1.35rem;

}



p {

    line-height: 1.75;

}



.eyebrow {

    font-family: 'Nunito', sans-serif;

    font-weight: 900;

    margin: 0 0 50px;

    text-transform: uppercase;

    letter-spacing: .14em;

    font-size: .78rem;

    color: var(--orange);

}





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

   TLAČÍTKA

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



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    padding: 15px 24px;



    border-radius: 999px;

    font-weight: 900;

    border: 0;



    cursor: pointer;



    transition:

        transform .2s ease,

        box-shadow .2s ease;

}



.btn:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow);

}



.btn-primary {

    background: var(--brown);

    color: white;

}



.btn-secondary {

    background: white;

    color: var(--green);



    border:

        1px solid rgba(25, 63, 45, .22);

}





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

   HLAVIČKA

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



.site-header {

    position: sticky;

    top: 0;

    z-index: 50;



    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 30px;



    padding: 24px 7%;



    background:

        rgba(255, 247, 235, 0.92);



    backdrop-filter: blur(14px);



    border-bottom:

        1px solid rgba(90, 31, 15, 0.12);

}





/* LOGO */



.brand {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}



.brand img {

    display: block;



    width: 350px;

    max-width: 100%;

    height: auto;

}





/* DESKTOP MENU */



.main-nav {

    display: flex;

    align-items: center;



    gap: 28px;



    font-family: 'Nunito', sans-serif;

    font-weight: 800;



    color: var(--blue);

}



.main-nav a {

    transition: color .2s ease;

}



.main-nav a:hover {

    color: var(--orange);

}



.nav-cta {

    padding: 12px 20px;



    border-radius: 999px;



    background: var(--green);



    color: white !important;

}





/* HAMBURGER */



.nav-toggle {

    display: none;



    align-items: center;

    justify-content: center;



    flex-direction: column;



    gap: 5px;



    width: 44px;

    height: 44px;



    padding: 8px;



    background: transparent;

    border: 0;



    cursor: pointer;

}



.nav-toggle span {

    display: block;



    width: 27px;

    height: 3px;



    background: var(--blue);



    border-radius: 20px;

}





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

   HERO

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



.hero {

    min-height: calc(100vh - 100px);



    padding-top: 30px;

    padding-bottom: 70px;



    display: grid;



    grid-template-columns:

        1.05fr .95fr;



    align-items: center;



    gap: 40px;



    background:

        radial-gradient(

            circle at 80% 20%,

            rgba(210, 122, 53, .18),

            transparent 32%

        ),

        linear-gradient(

            135deg,

            #fff7eb 0%,

            #f1dfc2 100%

        );

}



.hero-text {

    max-width: 660px;

    font-size: 1.18rem;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;



    gap: 16px;



    margin-top: 34px;

}



.hero-visual {

    position: relative;



    display: grid;

    place-items: center;

}



.hero-visual img {

    position: relative;

    z-index: 2;



    width: 80%;

    max-height: 400px;



    margin: 0 auto;



    object-fit: contain;



    filter:

        drop-shadow(

            0 30px 30px rgba(90,31,15,.16)

        );

}



.blob {

    position: absolute;



    width: 78%;

    aspect-ratio: 1;



    border-radius:

        39% 61% 55% 45%;



    background:

        linear-gradient(

            135deg,

            var(--green),

            var(--blue)

        );



    opacity: .16;

}





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

   INTRO

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



.intro {

    display: grid;



    grid-template-columns:

        .9fr 1.1fr;



    gap: 60px;



    align-items: start;



    max-width: 1000px;



    margin: 0 auto;



    text-align: center;



    background: white;

}



.intro .section-heading {

    max-width: 100%;

}



.intro-text {

    max-width: 700px;



    margin: 0 auto;



    font-size: 1.18rem;

}





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

   PRODUKTY

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



.products {

    background: var(--cream);

}



.product-grid {

    margin-top: 48px;



    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 22px;

}



.product-card {

    position: relative;



    padding: 32px;



    border-radius: 28px;



    background: white;



    box-shadow:

        0 12px 35px rgba(90,31,15,.07);



    border:

        1px solid rgba(90,31,15,.08);

}



.product-card span {

    display: inline-flex;



    margin-bottom: 22px;



    color: var(--orange);



    font-weight: 900;

}



.product-card p {

    margin-bottom: 0;

}



.klasa-badge-image {

    position: absolute;



    top: -18px;

    right: -18px;



    width: 75px;

    height: auto;



    z-index: 5;



    transform: rotate(5deg);



    filter:

        drop-shadow(

            0 4px 5px rgba(0, 0, 0, 0.18)

        );

}





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

   ROZVOZ

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



.delivery {

    display: grid;



    grid-template-columns:

        1fr 1fr;



    gap: 54px;



    align-items: center;



    background: white;

}



.delivery-list {

    display: grid;

    gap: 14px;

}



.delivery-list div {

    padding: 18px 22px;



    border-radius: 18px;



    background: var(--cream);



    font-weight: 900;



    color: var(--green);



    border-left:

        6px solid var(--orange);

}



.delivery-hero {

    background:

        radial-gradient(

            circle at 20% 20%,

            rgba(210, 122, 53, 0.14),

            transparent 32%

        ),

        linear-gradient(

            135deg,

            #fff7eb 0%,

            #f4e4c9 100%

        );

}



.delivery-hero .section-heading {

    max-width: 900px;

    margin-bottom: 60px;

}



.delivery-hero .section-heading p:last-child {

    font-size: 1.15rem;



    max-width: 760px;



    margin-inline: auto;

}





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

   MAPA

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



.delivery-map-wrap {

    display: grid;



    grid-template-columns:

        1.15fr .85fr;



    gap: 45px;



    align-items: center;

}



.delivery-map {

    position: relative;



    min-height: 520px;



    border-radius: 38px;



    overflow: hidden;



    background:

        linear-gradient(

            135deg,

            rgba(25,63,45,.88),

            rgba(16,42,67,.88)

        ),

        url("../images/mapa-cr.svg");



    background-size: cover;

    background-position: center;



    box-shadow: var(--shadow);



    border:

        1px solid rgba(255,255,255,.35);

}



.delivery-map::before {

    content: "";



    position: absolute;



    inset: 24px;



    border:

        1px solid rgba(255,255,255,.22);



    border-radius: 28px;



    pointer-events: none;

}



.map-pin {

    position: absolute;



    width: 22px;

    height: 22px;



    border-radius: 50%;



    border: 4px solid white;



    background: var(--orange);



    cursor: pointer;



    box-shadow:

        0 0 0 10px rgba(210,122,53,.22);



    animation:

        pulsePin 2.4s infinite;

}



.map-pin span {

    position: absolute;



    left: 50%;

    bottom: 34px;



    transform:

        translateX(-50%)

        translateY(8px);



    opacity: 0;



    white-space: nowrap;



    background: white;



    color: var(--green);



    padding: 9px 14px;



    border-radius: 999px;



    font-weight: 900;



    box-shadow:

        0 10px 25px rgba(0,0,0,.16);



    transition: all .25s ease;



    pointer-events: none;

}



.map-pin:hover span {

    opacity: 1;



    transform:

        translateX(-50%)

        translateY(0);

}



.pin-brno {

    left: 42%;

    top: 56%;

}



.pin-jmk {

    left: 36%;

    top: 64%;

}



.pin-zlin {

    left: 55%;

    top: 58%;

}



.pin-msk {

    left: 68%;

    top: 42%;

}



.pin-sk {

    left: 74%;

    top: 72%;

}



@keyframes pulsePin {



    0% {

        box-shadow:

            0 0 0 0 rgba(210,122,53,.45);

    }



    70% {

        box-shadow:

            0 0 0 18px rgba(210,122,53,0);

    }



    100% {

        box-shadow:

            0 0 0 0 rgba(210,122,53,0);

    }

}



.delivery-info-panel {

    background: white;



    border-radius: 34px;



    padding: 38px;



    box-shadow: var(--shadow);



    border:

        1px solid rgba(90,31,15,.08);

}



.delivery-info-panel h2 {

    margin: 0 0 20px;

}



.delivery-tags {

    display: flex;



    flex-wrap: wrap;



    gap: 12px;



    margin: 24px 0 28px;

}



.delivery-tags span {

    padding: 11px 16px;



    border-radius: 999px;



    background: var(--cream);



    color: var(--green);



    font-weight: 900;



    border:

        1px solid rgba(25,63,45,.12);

}



.delivery-tag {

    cursor: pointer;



    border: none;



    background: #f2f2f2;



    padding: 10px 18px;



    border-radius: 999px;



    transition: .2s;



    font: inherit;

}



.delivery-tag:hover {

    background: #dbe8c6;

}



.delivery-tag.active {

    background: #6d8c3d;

    color: #fff;

}





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

   GOOGLE MAP

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



.google-map-layout {

    display: grid;



    grid-template-columns:

        1.2fr .8fr;



    gap: 45px;



    align-items: center;

}



.google-map-card {

    overflow: hidden;



    border-radius: 38px;



    box-shadow: var(--shadow);



    border: 10px solid white;



    background: white;

}



.google-map-card iframe {

    display: block;



    width: 100%;



    min-height: 520px;

}



.map-container {

    margin-top: 40px;



    overflow: hidden;



    border-radius: 20px;

}



.map-container iframe {

    display: block;



    width: 100%;



    border-radius: 20px;

}



.map-caption {

    margin-top: 20px;



    padding: 18px 24px;



    background: #f3f1e8;



    border-radius: 16px;



    font-size: 15px;



    line-height: 1.6;



    color: #333;

}



.map-caption strong {

    display: block;

    margin-bottom: 8px;

}



.pickup-name {

    display: block;



    font-size: 1.25rem;



    font-weight: 700;



    margin-bottom: 6px;

}



.map-caption span:last-child {

    display: block;

}





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

   PROČ MY

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



.why {

    background:

        linear-gradient(

            135deg,

            var(--green),

            var(--blue)

        );



    color: white;

}



.why h2,

.why h3 {

    color: white;

}



.why-grid {

    margin-top: 46px;



    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 22px;

}



.why-grid article {

    padding: 32px;



    border-radius: 28px;



    background:

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



    border:

        1px solid rgba(255,255,255,.16);

}



.why-grid p {

    color:

        rgba(255,255,255,.82);

}



.why-new {

    background:

        radial-gradient(

            circle at 10% 20%,

            rgba(210, 122, 53, 0.12),

            transparent 30%

        ),

        linear-gradient(

            135deg,

            #fff7eb 0%,

            #f4e4c9 100%

        );



    color: var(--text);

}



.why-layout {

    max-width: 1300px;



    margin: 0 auto;



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 50px;

}



.why-content {

    max-width: 900px;



    text-align: center;

}



.why-content h1 {

    color: var(--blue);



    margin: 0 0 28px;

}



.why-lead {

    max-width: 680px;



    font-size: 1.16rem;



    margin:

        0 auto 38px;

}



.why-grid-new {

    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 18px;



    width: 100%;

}



.why-grid-new article {

    text-align: center;



    background:

        rgba(255,255,255,0.82);



    border:

        1px solid rgba(90,31,15,.08);



    border-radius: 26px;



    padding: 26px;



    box-shadow:

        0 12px 35px rgba(90,31,15,.07);

}



.why-grid-new span {

    display: inline-flex;



    margin-bottom: 12px;



    color: var(--orange);



    font-weight: 900;

}



.why-grid-new h3 {

    color: var(--green);

}





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

   CAROUSEL

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



.why-carousel {

    width: 100%;



    max-width: 1200px;



    margin: 0 auto;



    overflow: hidden;



    border-radius: 34px;



    box-shadow: var(--shadow);



    background: white;

}



.carousel-track {

    display: flex;



    width: max-content;



    animation:

        carouselMove 18s linear infinite;

}



.carousel-track img {

    width: 360px;

    height: 460px;



    object-fit: cover;



    flex-shrink: 0;

}



@keyframes carouselMove {



    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



.why-carousel:hover .carousel-track {

    animation-play-state: paused;

}





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

   O NÁS

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



.about-company {

    display: grid;



    grid-template-columns:

        1fr 260px 1.1fr;



    gap: 55px;



    align-items: center;



    background:

        radial-gradient(

            circle at 50% 50%,

            rgba(210, 122, 53, 0.12),

            transparent 34%

        ),

        #ffffff;

}



.about-heading h2 {

    margin: 0;



    color: var(--blue);



    max-width: 520px;

}



.about-logo-card {

    width: 260px;

    height: 260px;



    border-radius: 50%;



    background: var(--cream);



    display: flex;



    flex-direction: column;



    align-items: center;

    justify-content: center;



    text-decoration: none;



    box-shadow: var(--shadow);



    border:

        1px solid rgba(90,31,15,.08);



    transition: all .35s ease;



    position: relative;



    overflow: hidden;



    animation:

        floatLogo 4s ease-in-out infinite;

}



.about-logo-card:hover {

    transform: translateY(-8px);



    box-shadow:

        0 30px 60px rgba(16,42,67,.18);

}



.about-logo-card img {

    width: 72%;



    max-width: 190px;



    transition:

        transform .4s ease;

}



.about-logo-card:hover img {

    transform:

        scale(1.08)

        rotate(4deg);

}



.logo-hint {

    margin-top: 12px;



    font-size: 0.85rem;



    font-weight: 800;



    color: var(--green);



    opacity: 0;



    transform: translateY(10px);



    transition:

        all .3s ease;

}



.about-logo-card:hover .logo-hint {

    opacity: 1;



    transform:

        translateY(0);

}



@keyframes floatLogo {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-8px);

    }

}



.about-text {

    display: grid;

    gap: 20px;

}



.about-point {

    padding: 24px 26px;



    border-radius: 26px;



    background: var(--cream);



    border-left:

        6px solid var(--orange);



    box-shadow:

        0 12px 35px rgba(90,31,15,.06);

}



.about-point span {

    display: inline-flex;



    margin-bottom: 10px;



    color: var(--orange);



    font-weight: 900;

}



.about-point h3 {

    color: var(--green);



    margin-bottom: 8px;

}



.about-point p {

    margin: 0;

}





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

   ROZVOZ – PROCES

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



.delivery-process {

    background: white;



    text-align: center;

}



.delivery-process .section-heading {

    margin-inline: auto;

}





/* 

   PRVNÍ DVA BLOKY + DODÁVKA

   Vše je vycentrované.

*/



.delivery-process-grid {

    display: grid;



    grid-template-columns:

        minmax(260px, 360px)

        260px

        minmax(260px, 360px);



    gap: 35px;



    align-items: center;

    justify-content: center;



    max-width: 1100px;



    margin: 55px auto 0;

}





/* BUBLINY */



.delivery-box {

    background: var(--cream);



    padding: 32px 30px;



    border-radius: 32px;



    box-shadow:

        0 12px 35px rgba(90,31,15,.08);



    border:

        1px solid rgba(90,31,15,.08);



    text-align: center;



    transition:

        transform .25s ease,

        box-shadow .25s ease;

}



.delivery-box:hover {

    transform: translateY(-5px);



    box-shadow:

        0 20px 45px rgba(90,31,15,.12);

}



.delivery-box span {

    display: inline-flex;



    align-items: center;

    justify-content: center;



    width: 44px;

    height: 44px;



    margin-bottom: 16px;



    border-radius: 50%;



    background: var(--orange);



    color: white;



    font-weight: 900;



    font-size: 1rem;

}



.delivery-box h3 {

    color: var(--green);



    margin-bottom: 12px;

}



.delivery-box p {

    margin: 0;

}





/* DODÁVKA */



.delivery-van {

    display: flex;



    justify-content: center;

    align-items: center;

}



.delivery-van img {

    width: 100%;



    max-width: 260px;



    margin: 0 auto;



    animation:

        vanFloat 4s ease-in-out infinite;



    filter:

        drop-shadow(

            0 20px 30px rgba(0,0,0,.12)

        );

}



@keyframes vanFloat {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-10px);

    }

}





/* TŘETÍ BUBLINKA – UPROSTŘED */



.delivery-bottom {

    display: flex;



    justify-content: center;



    margin-top: 38px;

}



.delivery-box.wide {

    width: min(700px, 100%);



    margin: 0 auto;



    text-align: center;

}





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

   CENÍK

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



.pricing {

    background: var(--sand);

}



.pricing-card {

    max-width: 900px;



    margin: auto;



    padding: 50px;



    background: white;



    border-radius: 34px;



    box-shadow: var(--shadow);



    text-align: center;

}





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

   KONTAKT

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



.contact {

    display: grid;



    grid-template-columns:

        .85fr 1.15fr;



    gap: 38px;



    background: var(--cream);

}



.contact-card,

.contact-form {

    background: white;



    border-radius: 32px;



    padding: 38px;



    box-shadow:

        0 12px 35px rgba(90,31,15,.08);

}



.contact-card {

    max-width: 800px;



    margin: 0 auto;

}



.contact-form {

    display: grid;



    gap: 18px;

}



.contact-info {

    display: grid;



    gap: 12px;



    margin-top: 28px;



    font-weight: 900;



    color: var(--green);

}



.company-info,

.contact-info {

    margin-top: 32px;

}



.contact-info h3,

.company-info h3 {

    margin-bottom: 12px;

}



.contact-info a {

    display: block;



    margin: 0;

    padding: 0;



    line-height: 1.5;



    color: inherit;



    text-decoration: none;

}



.contact-info a:hover {

    text-decoration: underline;

}



.contact-person {

    margin-bottom: 6px;

}



label {

    display: grid;



    gap: 8px;



    font-weight: 900;



    color: var(--blue);

}



input,

textarea {

    width: 100%;



    padding: 15px 16px;



    border:

        1px solid rgba(16,42,67,.18);



    border-radius: 16px;



    font: inherit;



    background: #fffdf8;

}



textarea {

    resize: vertical;

}





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

   FORMULÁŘ CENOVÉ NABÍDKY

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



.quote-hero {

    display: grid;



    grid-template-columns:

        1.1fr .9fr;



    gap: 50px;



    align-items: center;



    background:

        radial-gradient(

            circle at 20% 20%,

            rgba(210,122,53,.14),

            transparent 32%

        ),

        linear-gradient(

            135deg,

            #fff7eb 0%,

            #f4e4c9 100%

        );

}



.quote-hero-content {

    max-width: 760px;

}



.quote-hero-content h1 {

    margin: 0 0 26px;

}



.quote-hero-content p:last-child {

    font-size: 1.16rem;

}



.quote-hero-card {

    background: white;



    border-radius: 34px;



    padding: 38px;



    box-shadow: var(--shadow);



    border:

        1px solid rgba(90,31,15,.08);

}



.quote-hero-card h3 {

    color: var(--green);



    margin-bottom: 22px;

}



.quote-factors {

    display: grid;

    gap: 14px;

}



.quote-factors span {

    padding: 16px 18px;



    border-radius: 18px;



    background: var(--cream);



    color: var(--green);



    font-weight: 900;



    border-left:

        5px solid var(--orange);

}



.quote-calculator {

    background: white;

}



.quote-calculator .section-heading {

    margin-bottom: 45px;

}



.quote-calculator .section-heading p:last-child {

    max-width: 760px;

    margin-inline: auto;

}



.quote-form {

    max-width: 1050px;



    margin: 0 auto;



    background: var(--cream);



    border-radius: 36px;



    padding: 42px;



    box-shadow: var(--shadow);



    border:

        1px solid rgba(90,31,15,.08);



    display: grid;



    gap: 26px;

}



.quote-form-grid {

    display: grid;



    grid-template-columns:

        1fr 1fr;



    gap: 22px;

}



.quote-form select {

    width: 100%;



    padding: 15px 16px;



    border:

        1px solid rgba(16,42,67,.18);



    border-radius: 16px;



    font: inherit;



    background: #fffdf8;

}



.quote-products {

    background: white;



    border-radius: 28px;



    padding: 28px;



    border:

        1px solid rgba(90,31,15,.08);

}



.quote-products h3 {

    color: var(--green);



    margin-bottom: 20px;

}



.product-checkbox-grid {

    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 14px;

}



.product-checkbox-grid label {

    display: flex;



    flex-direction: row;



    align-items: center;



    gap: 10px;



    background: var(--cream);



    padding: 13px 15px;



    border-radius: 16px;



    color: var(--text);



    font-weight: 800;

}



.product-checkbox-grid input {

    width: auto;

}



.quote-note {

    background: white;



    padding: 24px;



    border-radius: 24px;



    border-left:

        6px solid var(--orange);

}



.quote-note strong {

    color: var(--green);



    font-size: 1.1rem;

}



.quote-note p {

    margin-bottom: 0;

}





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

   SOCIÁLNÍ LIŠTA

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



.social-strip {

    display: flex;



    align-items: center;

    justify-content: center;



    gap: 24px;



    padding: 22px 7%;



    background: var(--cream);



    border-top:

        1px solid rgba(90,31,15,.08);



    border-bottom:

        1px solid rgba(90,31,15,.08);

}



.social-strip p {

    margin: 0;



    font-weight: 900;



    color: var(--green);

}



.social-icons {

    display: flex;



    align-items: center;



    gap: 16px;

}



.social-icons a {

    width: 42px;

    height: 42px;



    border-radius: 50%;



    background: white;



    display: flex;



    align-items: center;

    justify-content: center;



    box-shadow:

        0 8px 22px rgba(90,31,15,.08);



    transition:

        transform .25s ease,

        box-shadow .25s ease;

}



.social-icons a:hover {

    transform: translateY(-4px);



    box-shadow:

        0 14px 30px rgba(90,31,15,.14);

}



.social-icons img {

    width: 22px;

    height: 22px;

}





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

   PATIČKA

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



.site-footer {

    display: flex;



    align-items: center;

    justify-content: space-between;



    gap: 20px;



    padding: 20px 5%;



    background: var(--blue);



    color: white;

}



.site-footer p {

    margin: 0;

}



.site-footer a {

    font-weight: 900;



    color: var(--sand);

}



.footer-credit {

    display: flex;



    align-items: center;



    gap: 5px;



    margin: 0;

}



.footer-credit a {

    color: inherit;



    text-decoration: none;



    font-weight: 600;



    transition:

        opacity 0.2s ease;

}



.footer-credit a:hover {

    opacity: 0.7;



    text-decoration: underline;

}



.site-footer > a {

    white-space: nowrap;

}





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

   DĚKOVACÍ STRÁNKA

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



html {

    min-height: 100%;

}



body.thank-you-page {

    min-height: 100vh;

    min-height: 100dvh;



    margin: 0;



    display: grid;



    grid-template-rows:

        auto

        minmax(0, 1fr)

        auto;

}



body.thank-you-page .site-header {

    grid-row: 1;



    position: sticky;

    top: 0;

}



body.thank-you-page .thank-you-main {

    grid-row: 2;



    min-height: 0;



    width: 100%;

}



body.thank-you-page .thank-you-section {

    min-height: 100%;



    display: flex;



    align-items: center;

    justify-content: center;

}



body.thank-you-page .site-footer {

    grid-row: 3;



    width: 100%;



    margin: 0;



    flex-shrink: 0;

}





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

   TABLET

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



@media (max-width: 1024px) {



    .section-padding {

        padding-left: 6%;

        padding-right: 6%;

    }



    .site-header {

        padding: 20px 6%;

    }



    .brand img {

        width: 300px;

    }



    .main-nav {

        gap: 20px;

    }



    .hero {

        gap: 40px;

    }



    .hero-content h1 {

        font-size:

            clamp(2.5rem, 5vw, 4rem);

    }



    .product-grid {

        grid-template-columns:

            repeat(2, 1fr);



        gap: 24px;

    }



    .why-grid-new {

        grid-template-columns:

            repeat(2, 1fr);



        gap: 25px;

    }



    .contact {

        gap: 30px;

    }

}





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

   MENŠÍ DESKTOP / TABLET

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



@media (max-width: 920px) {



    .section-padding {

        padding: 70px 6%;

    }



    .nav-toggle {

        display: flex;

    }



    .main-nav {

        position: absolute;



        top: 100%;



        left: 0;

        right: 0;



        display: none;



        flex-direction: column;



        align-items: stretch;



        padding: 22px 7%;



        background: var(--cream);



        border-bottom:

            1px solid rgba(90, 31, 15, 0.12);

    }



    .main-nav.active {

        display: flex;

    }



    .hero,

    .intro,

    .delivery,

    .contact {

        grid-template-columns: 1fr;

    }



    .hero {

        min-height: auto;

    }



    .hero-visual {

        order: -1;

    }



    .hero-visual img {

        max-height: 420px;

    }



    .product-grid,

    .why-grid {

        grid-template-columns:

            1fr 1fr;

    }



    .why-grid-new {

        grid-template-columns: 1fr;

    }



    .carousel-track img {

        width: 300px;

        height: 360px;

    }



    .about-company {

        grid-template-columns: 1fr;



        text-align: center;



        gap: 38px;

    }



    .about-heading h2 {

        margin-inline: auto;

    }



    .about-logo-card {

        margin-inline: auto;



        width: 220px;

        height: 220px;

    }



    .about-point {

        text-align: left;

    }



    .delivery-map-wrap {

        grid-template-columns: 1fr;

    }



    .delivery-map {

        min-height: 430px;

    }



    .google-map-layout {

        grid-template-columns: 1fr;

    }



    .google-map-card iframe {

        min-height: 420px;

    }



    /* ROZVOZ – PROCES TABLET */



    .delivery-process-grid {

        grid-template-columns:

            1fr 1fr;



        max-width: 760px;



        gap: 25px;

    }



    .delivery-van {

        grid-column: 1 / -1;



        grid-row: 2;



        order: 0;

    }



    .delivery-van img {

        max-width: 260px;

    }



    .delivery-box.wide {

        max-width: 650px;

    }



    .quote-hero {

        grid-template-columns: 1fr;

    }



    .quote-form-grid {

        grid-template-columns: 1fr;

    }



    .product-checkbox-grid {

        grid-template-columns:

            1fr 1fr;

    }

}





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

   MOBIL

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



@media (max-width: 700px) {



    .section-padding {

        padding: 60px 20px;

    }





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

       HLAVIČKA – MOBIL

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



    .site-header {

        min-height: 82px;



        padding: 14px 20px;



        gap: 12px;

    }



    .brand {

        display: flex;



        align-items: center;



        flex: 1;



        min-width: 0;

    }



    .brand img {

        display: block;



        width: 230px;



        max-width: 100%;



        height: auto;

    }





    /* HAMBURGER */



    .nav-toggle {

        display: flex;



        flex-direction: column;



        align-items: center;

        justify-content: center;



        gap: 5px;



        width: 44px;

        height: 44px;



        flex-shrink: 0;



        padding: 8px;



        background: transparent;



        border: none;



        cursor: pointer;

    }



    .nav-toggle span {

        display: block;



        width: 26px;

        height: 3px;



        background: var(--blue);



        border-radius: 20px;

    }





    /* MOBILNÍ MENU */



    .main-nav {

        display: none;



        position: absolute;



        top: 82px;



        left: 0;



        width: 100%;



        padding: 20px;



        flex-direction: column;



        align-items: stretch;



        gap: 5px;



        background: white;



        z-index: 100;



        box-shadow:

            0 8px 20px rgba(0,0,0,0.08);

    }



    .main-nav.active {

        display: flex;

    }



    .main-nav a {

        padding: 14px 10px;



        text-align: center;

    }



    .main-nav .nav-cta {

        margin-top: 5px;

    }





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

       HERO

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



    .hero {

        min-height: auto;



        display: flex;



        flex-direction: column;



        gap: 40px;



        padding-top: 50px;

        padding-bottom: 60px;

    }



    .hero-content {

        width: 100%;

    }



    .hero-content h1 {

        font-size:

            clamp(2.3rem, 10vw, 3.5rem);



        line-height: 1.05;



        margin-left: 0;

        margin-right: 0;

    }



    .hero-text {

        font-size: 1rem;



        line-height: 1.7;

    }



    .hero-actions {

        display: flex;



        flex-direction: column;



        gap: 12px;

    }



    .hero-actions .btn {

        width: 100%;



        text-align: center;

    }



    .hero-visual {

        width: 100%;



        max-width: 450px;



        margin: 0 auto;

    }



    .hero-visual img {

        width: 90%;

    }





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

       NADPISY

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



    .section-heading h1,

    .section-heading h2 {

        font-size:

            clamp(2rem, 8vw, 2.8rem);



        line-height: 1.1;

    }



    .section-heading p {

        line-height: 1.6;

    }





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

       PRODUKTY

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



    .product-grid {

        grid-template-columns: 1fr;



        gap: 25px;

    }



    .product-card {

        width: 100%;

    }



    .product-card h3 {

        font-size: 1.4rem;

    }



    .product-image {

        width: 100%;

        height: auto;

    }





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

       PROČ MY

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



    .why-grid-new {

        grid-template-columns: 1fr;



        gap: 20px;

    }



    .why-grid-new article {

        padding: 25px 20px;

    }





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

       O NÁS

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



    .about-company {

        grid-template-columns: 1fr;



        text-align: center;



        gap: 30px;

    }



    .about-logo-card {

        width: 230px;

        height: 230px;



        margin-inline: auto;

    }



    .about-logo-card img {

        width: 75%;



        max-width: 175px;

    }



    .about-point {

        text-align: left;

    }





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

       ROZVOZ – PROCES – MOBIL

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



    .delivery-process {

        text-align: center;

    }



    .delivery-process-grid {

        display: flex;



        flex-direction: column;



        align-items: center;



        gap: 28px;



        margin-top: 40px;

    }



    .delivery-box {

        width: 100%;



        max-width: 430px;



        padding: 28px 24px;



        border-radius: 28px;



        text-align: center;

    }



    .delivery-van {

        order: 0;



        width: 100%;

    }



    .delivery-van img {

        width: 80%;



        max-width: 250px;

    }



    .delivery-bottom {

        margin-top: 28px;

    }



    .delivery-box.wide {

        width: 100%;



        max-width: 430px;



        margin: 0 auto;

    }





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

       KONTAKT

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



    .contact {

        display: flex;



        flex-direction: column;

    }



    .contact-card,

    .map-container {

        width: 100%;

    }



    .contact-card {

        padding: 30px 24px;

    }



    .map-container iframe {

        height: 300px;

    }





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

       CENÍK

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



    .pricing-card {

        padding: 30px 20px;

    }



    .pricing-card h2 {

        font-size: 2rem;



        line-height: 1.15;

    }





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

       MAPA

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



    .delivery-map {

        min-height: 360px;



        border-radius: 28px;

    }



    .delivery-info-panel {

        padding: 28px;



        border-radius: 26px;

    }



    .map-pin span {

        font-size: .78rem;

    }



    .google-map-card {

        border-radius: 26px;



        border-width: 6px;

    }



    .google-map-card iframe {

        min-height: 340px;

    }





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

       FORMULÁŘ

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



    .quote-form {

        padding: 28px;



        border-radius: 26px;

    }



    .product-checkbox-grid {

        grid-template-columns: 1fr;

    }





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

       SOCIÁLNÍ LIŠTA

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



    .social-strip {

        flex-direction: column;



        text-align: center;



        gap: 14px;

    }





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

       PATIČKA

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



    .site-footer {

        flex-direction: column;



        text-align: center;



        gap: 10px;



        padding: 30px 20px;

    }



    .site-footer p {

        margin: 0;

    }



    .footer-credit {

        display: flex;



        justify-content: center;

        align-items: center;



        gap: 5px;

    }



    .site-footer > a {

        white-space: nowrap;

    }





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

       DĚKOVACÍ STRÁNKA

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



    body.thank-you-page .thank-you-section {

        padding: 50px 20px;

    }



    body.thank-you-page .section-heading {

        width: 100%;

    }

}





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

   MENŠÍ TELEFONY

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



@media (max-width: 400px) {



    .section-padding {

        padding-left: 16px;

        padding-right: 16px;

    }



    .site-header {

        padding-left: 16px;

        padding-right: 16px;

    }



    .brand img {

        width: 200px;



        max-width: 100%;

    }



    .nav-toggle {

        width: 42px;

        height: 42px;

    }



    .nav-toggle span {

        width: 25px;

    }



    .hero-content h1 {

        font-size: 2.3rem;

    }



    .btn {

        padding: 13px 18px;

    }





    /* ROZVOZ – PROCES – MALÝ TELEFON */



    .delivery-box {

        max-width: 100%;



        padding: 26px 20px;

    }



    .delivery-van img {

        width: 85%;



        max-width: 230px;

    }

}

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

   PŘEPÍNAČ JAZYKA

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



.language-switcher {

    display: flex;



    align-items: center;



    gap: 6px;



    margin-left: 8px;



    font-family: 'Nunito', sans-serif;



    font-weight: 900;



    font-size: .85rem;

}



.language-switcher span {

    color: rgba(16, 42, 67, .35);

}



.language {

    color: var(--blue);



    opacity: .55;



    transition:

        color .2s ease,

        opacity .2s ease;

}



.language:hover {

    color: var(--orange);



    opacity: 1;

}



.language.active {

    color: var(--orange);



    opacity: 1;

}

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

   PŘEPÍNAČ JAZYKA – MOBIL

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



@media (max-width: 920px) {



    .main-nav .language-switcher {

        width: 100%;



        display: flex;



        align-items: center;

        justify-content: center;



        gap: 8px;



        margin: 12px 0 4px;



        padding-top: 14px;



        border-top: 1px solid rgba(16, 42, 67, 0.10);



        font-size: 0.9rem;



        transform: none;

    }



    .main-nav .language-switcher .language {

        display: inline-flex;



        align-items: center;

        justify-content: center;



        padding: 6px 8px;

    }



    .main-nav .language-switcher span {

        display: inline-block;



        margin: 0 2px;

    }



}