/* --- 1. IMPORT FONTŮ (Základ pro funkční Pacifico) --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;400;600&family=Playfair+Display:ital,wght@0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

:root {
    --sage-green: #a3b18a;
    --dark-green: #3a5a40;
    --earth-brown: #582f0e;
    --off-white: #fdfdfb;
    --pure-white: #ffffff;
    --line-color: rgba(58, 90, 64, 0.1);
    --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 2. ZÁKLAD A ANIMACE --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Outfit', sans-serif; 
    background-color: var(--off-white); 
    color: var(--dark-green); 
    overflow-x: hidden; 
}

/* Animace pozadí - Ken Burns efekt */
@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* Animace vynoření obsahu */
@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.reveal { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.8s ease, transform 0.8s ease; 
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- 3. HEADER & LOGO --- */
header { 
    position: fixed; top: 0; left: 0; width: 100%; height: 130px; 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 14%; background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px); z-index: 1000; 
    border-bottom: 1px solid var(--line-color); 
}

.logo img { 
    height: 80px; /* Dominantní logo dle tvého zadání */
    width: auto; 
    transition: var(--transition); 
    margin-top: 10px;
}

nav ul { display: flex; list-style: none; gap: 30px; }
nav a { 
    text-decoration: none; color: var(--dark-green); 
    font-size: 0.75rem; text-transform: uppercase; 
    letter-spacing: 0.15em; font-weight: 600; 
    transition: var(--transition); opacity: 0.7; 
}
nav a:hover, nav a.active { opacity: 1; color: var(--sage-green); }

/* --- 4. STRUKTURA --- */
.side-line { position: fixed; top: 0; bottom: 0; width: 1px; background: var(--line-color); z-index: 10; }
.line-left { left: 12%; }
.line-right { right: 12%; }
.main-wrapper { 
    max-width: 76%; margin: 130px auto 0; 
    position: relative; background: var(--pure-white); min-height: 100vh; 
}

/* --- 5. HERO SEKCE (Klíčová oprava Pacifico fontu) --- */
.hero { 
    height: 65vh; position: relative; display: flex; 
    justify-content: center; align-items: center; text-align: center; overflow: hidden; 
}

.hero-bg { 
    position: absolute; inset: 0; 
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.4)), 
                      url('https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?auto=format&fit=crop&q=80&w=1600'); 
    background-size: cover; background-position: center;
    animation: kenBurns 20s infinite alternate ease-in-out; 
}

.hero-content { position: relative; z-index: 1; animation: fadeInUp 1.2s ease-out forwards; }

/* OPRAVA FONTU PRO NechSeNést® */
.hero-content h1 {
    font-family: 'Pacifico', cursive !important;
    font-size: 5.5rem;
    letter-spacing: normal !important;
    text-transform: none !important; /* Vypne velká písmena, aby Pacifico fungovalo */
    color: var(--dark-green);
    margin-bottom: 10px;
}

/* Styl pro znak ® v nápisu, aby nerozhodil font Pacifico */
.hero-content h1 span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.4em;
    vertical-align: super;
    margin-left: 5px;
}

.tagline { 
    font-size: 0.85rem; letter-spacing: 0.5em; text-transform: uppercase; 
    color: var(--earth-brown); margin-bottom: 40px; font-weight: 600; 
}

.btn-main { 
    padding: 18px 50px; background: var(--dark-green); color: white; border: none; 
    text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.75rem; 
    cursor: pointer; transition: var(--transition); 
}
.btn-main:hover { background: var(--sage-green); transform: translateY(-2px); }

/* --- 6. SEKCE POD HERO --- */
section { padding: 80px 20px; text-align: center; border-bottom: 1px solid var(--line-color); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-item span { font-size: 2.2rem; display: block; margin-bottom: 15px; transition: 0.3s; }
.step-item:hover span { transform: scale(1.3) rotate(5deg); }
.step-item p { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; }

/* LOKACE A CENÍK */
.location-pricing h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--earth-brown); margin-bottom: 15px; }
.price-table { max-width: 500px; margin: 40px auto 0; }
.price-row { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 20px; border-bottom: 1px solid var(--line-color); transition: var(--transition); 
}
.price-row:hover { padding-left: 10px; color: var(--sage-green); }

/* --- 7. MODAL --- */
.modal { 
    position: fixed; inset: 0; background: rgba(253, 253, 251, 0.98); 
    display: none; justify-content: center; align-items: center; z-index: 2000; opacity: 0; 
    transition: opacity 0.3s ease; 
}
.modal.show { display: flex; opacity: 1; }
.modal-inner { width: 90%; max-width: 420px; text-align: center; }

footer { padding: 50px; text-align: center; font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 0.1em; }

@media (max-width: 768px) {
    .side-line { display: none; }

    .main-wrapper {
        max-width: 100%;
        margin: 80px auto 0;
    }

    header {
        padding: 0 5%;
        height: 80px;
    }

    .logo img {
        height: 30px;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

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

    nav ul {
        gap: 15px;
    }

    nav a {
        font-size: 0.65rem;
    }
}