    <style>
/* ===================================== */
/* 0. GLOBÁLNÍ STYLY A PÍSMO */
/* ===================================== */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
    
    * { 
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body { 
        font-family: 'Roboto', sans-serif; 
        font-size: 18px;
    }
    
/* ===================================== */
/* 1. ANIMACE PŘI SCROLLOVÁNÍ */
/* ===================================== */
    /* ZVĚTŠENÍ ZE STŘEDU (Zoom In) - Preferovaný efekt */
    @keyframes zoomIn {
        from {
            opacity: 0;
            transform: scale(0.5); 
        }
        to {
            opacity: 1;
            transform: scale(1); 
        }
    }
    
    /* Nadpis Slide Down */
    @keyframes slide-down {
        from { 
            transform: translateY(-100%);
            opacity: 0; 
        }
        to { 
            transform: translateY(0); 
            opacity: 1;
        }
    }
    
    /* Nastavení pro Karusel, Info bloky a Formulář (Počáteční stav pro zoomIn) */
    .soptet-carousel-wrapper, 
    .main-feature-block, 
    .form-container {
        opacity: 0;
        transform: scale(0.5); 
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        transform-origin: center center; 
    }
    
    /* Spuštění animace, když je prvek viditelný */
    .soptet-carousel-wrapper.is-visible, 
    .main-feature-block.is-visible, 
    .form-container.is-visible {
        animation: zoomIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
        transform: scale(1); 
        opacity: 1;
    }
    
    /* Styly pro Nadpis */
    .soptet-header-wrapper {
        max-width: 1500px;
        margin: 40px auto 0 auto;
        position: relative;
    }

    .soptet-header-wrapper h2 {
        font-weight: 300;
        text-align: center; 
        color: #555; 
        transform: translateY(-100%); 
        opacity: 0;
        transition: transform 0.8s ease-out, opacity 0.8s ease-out;
        margin: 0 auto 20px auto;
        max-width: 1500px; 
        padding: 15px 20px; 
        background-color: #f7f7f7;
        border: 1px solid #ddd; 
        border-radius: 8px; 
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        font-size: 1.2em;
    }
    
    .soptet-header-wrapper.is-visible h2 {
        animation: slide-down 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        transform: translateY(0);
        opacity: 1;
    }

/* ===================================== */
/* 2. KARUSEL ZÁKLADNÍ STYLY A HOVER ZOOOM - ÚPRAVA FIT */
/* ===================================== */
    .soptet-carousel-wrapper {
        max-width: 1500px; 
        margin: 0 auto; 
        position: relative; 
        overflow: hidden; 
        border: 1px solid #ccc; 
        height: 33.33vh; 
        margin-bottom: 0; 
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: -20px; 
        background-color: #f0f0f0; /* Přidáno pro zobrazení pozadí, kde obrázek nepokrývá celou plochu */
    }
    .soptet-carousel-inner { 
        height: 100%;
    }
    @media (max-width: 600px) {
        .soptet-carousel-inner {
            height: 190px;
        }
    }
    .soptet-slide { 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        opacity: 0; 
        display: none;
        transition: opacity 0.5s ease-in-out; 
    }
    .soptet-slide.active { 
        opacity: 1; 
        display: block;
    }
    .soptet-slide a {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden; 
    }
    .soptet-slide img { 
        width: 100%; 
        height: 100%; 
        /* KLÍČOVÁ ZMĚNA: zajišťuje, že se obrázek nikdy neořízne */
        object-fit: contain; 
        
        display: block;
        transition: transform 0.5s ease-in-out; 
        transform-origin: center center; 
    }
    
    /* HOVER EFEKT */
    .soptet-slide a:hover img {
        transform: scale(1.05); 
    }
    
    /* Ovládací prvky */
    .soptet-control { 
        position: absolute; 
        top: 50%; 
        transform: translateY(-50%); 
        cursor: pointer; 
        width: 40px; 
        height: 40px; 
        display: flex; 
        justify-content: center;
        align-items: center;
        color: white; 
        font-size: 24px;
        font-weight: bold; 
        background-color: rgba(0, 0, 0, 0.5); 
        user-select: none; 
        border-radius: 4px; 
        z-index: 10; 
        border: none;
        transition: background-color 0.1s, transform 0.1s; 
    }
    .soptet-control.prev { 
        left: 10px; 
    }
    .soptet-control.next { 
        right: 10px;
    }

/* ===================================== */
/* 3. STYLY PRO POPIS A TLAČÍTKO */
/* ===================================== */
    .soptet-slide-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
        color: white;
        z-index: 5; 
        pointer-events: none; 
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 30px; 
    }
    .soptet-slide-caption p {
        margin: 0 0 15px 0;
        font-size: 1.2em;
        font-weight: 400;
        opacity: 0.95;
    }
    .soptet-explore-btn {
        display: inline-flex;
        align-items: center;
        padding: 12px 25px;
        background-color: #ffa60000;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-weight: 700;
        font-size: 1em;
        
        transition: background-color 0.3s ease, transform 0.3s ease;
        cursor: pointer;
        pointer-events: all; 
    }
    .soptet-explore-btn:hover {
        background-color: #ffa600; 
        transform: translateY(-2px); 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    .soptet-explore-btn::after {
        content: '»'; 
        font-size: 1.5em;
        line-height: 1;
        margin-left: 5px;
        transition: transform 0.3s ease;
    }
    .soptet-explore-btn:hover::after {
        transform: translateX(5px); 
    }

/* ===================================== */
/* 4. STYLY PRO INFO-BLOKY */
/* ===================================== */
    .main-feature-block {
        padding: 20px 0; 
        background-color: #ffffff; 
        max-width: 1500px; 
        margin: 0 auto; 
    }
    .card-container {
        display: flex; 
        flex-wrap: wrap; 
        gap: 20px; 
        justify-content: center; 
        max-width: 1200px; 
        margin: 0 auto; 
    }
    .card {
        flex: 1 1 300px; 
        max-width: 350px;
        height: 5vh; 
        min-height: 120px; 
        background-color: white;
        border-radius: 15px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        border: 1px solid #e0e0e0; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between; 
        padding: 5px;
        text-align: center;
        box-sizing: border-box;
    }
    .card-text {
        font-size: 0.8em; 
        font-weight: lighter; 
        text-transform: uppercase; 
        color: #333; 
        margin-bottom: 5px;
        padding-top: 5px; 
        padding-bottom: 10px; 
    }
    .card img {
        max-width: 80%;
        max-height: 70%;
        object-fit: contain;
        margin-bottom: 10px;
    }
    @media (max-width: 600px) {
        .card {
            flex: 1 1 100%;
            min-height: 100px;  
            height: 2vh;
            width: 100%;
        }
    }

/* ===================================== */
/* 5. STYLY PRO FORMULÁŘ */
/* ===================================== */
    .form-container { 
        max-width: 600px; 
        margin: 30px auto; 
        padding: 25px; 
        border: 1px solid #ddd; 
        border-radius: 10px; 
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease-in-out; 
    }
    .form-container:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
        transform: translateY(-3px) scale(1.005); 
    }
    .form-container h2 { 
        text-align: center; 
        color: #333; 
        margin-bottom: 20px; 
    }
    .form-container p { 
        text-align: center; 
        color: #555; 
        margin-bottom: 25px; 
    }
    input[type="text"], 
    input[type="email"], 
    input[type="tel"],
    textarea { 
        width: 100%; 
        padding: 12px; 
        margin-bottom: 15px; 
        box-sizing: border-box; 
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        transition: border-color 0.3s;
    }
    input:focus,
    textarea:focus {
        border-color: #007BFF; 
        outline: none;
    }
    textarea { 
        height: 150px; 
        resize: vertical; 
    }
    .form-container button { 
        background-color: #007BFF; 
        color: white; 
        padding: 12px 20px; 
        border: none; 
        border-radius: 5px; 
        cursor: pointer; 
        font-size: 17px; 
        width: 100%;
        transition: background-color 0.3s ease, transform 0.1s;
    }
    .form-container button:hover { 
        background-color: #0056b3; 
    }
    .form-note {
        margin-top: 20px; 
        font-size: 0.85em; 
        color: #777; 
        text-align: center;
    }
    </style>
