/* --- Global Styles (Dark Mode Defaults) --- */
:root {
    /* Boje - Prema priloženoj paleti */
    --color-teal-font: #64b7d0;
    --color-teal: #006989; /* Tamna tirkizna/cijan - Primarna boja / Akcent */
    --color-blue-grey: #A3BAC3; /* Svijetlo plavo-siva - Sekundarna boja / Pozadina */
    --color-dark-navy: #202030; /* Vrlo tamna siva/gotovo crna - Boja teksta / Pozadina u dark mode */
    --white: #fff; /* Bijela */
    --color-light-grey: #f4f4f4; /* Svijetlo siva za pozadinu u light mode */
    /* Tipografija */
    --font-heading: 'Lato', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-logo-text: 'Montserrat', sans-serif; /* Font za tekst uz logo */
    /* Razmaci */
    --spacing-small: 1rem;
    --spacing-medium: 2rem;
    --spacing-large: 3rem;
    /* Boje za tamni način (DEFAULT) */
    --color-price: var(--color-teal-font);
    --body-bg: var(--color-dark-navy);
    --body-color: var(--color-blue-grey); /* Svijetlo plavo-siva za tekst */
    --heading-color: var(--color-teal-font); /* Tamna tirkizna za naslove */
    --link-color: var(--color-teal-font);
    --link-hover-color: var(--color-blue-grey);
    --header-bg: var(--color-dark-navy);
    --header-shadow: rgba(255, 255, 255, 0.1); /* Svjetlija sjena u dark mode */
    --hero-bg: #2a2a3c; /* Malo svjetlija nijansa od pozadine */
    --section-bg: var(--color-dark-navy);
    --feature-item-bg: #2a2a3c;
    --feature-item-shadow: rgba(255, 255, 255, 0.05);
    --feature-item-border: 1px solid var(--color-blue-grey); /* Border za feature iteme u dark mode */
    --cta-section-bg: var(--color-teal);
    --cta-section-color: var(--white); /* Tekst na CTA sekciji */
    --cta-btn-secondary-color: var(--white); /* Sekundarni gumb na CTA */
    --cta-btn-secondary-border: 2px solid var(--white); /* Sekundarni gumb na CTA */
    --cta-btn-secondary-hover-bg: var(--white); /* Sekundarni gumb na CTA hover */
    --cta-btn-secondary-hover-color: var(--color-teal); /* Sekundarni gumb na CTA hover */

    --faq-item-bg: #2a2a3c;
    --faq-item-border: var(--color-blue-grey);
    --faq-question-bg: #2a2a3c;
    --faq-question-color: var(--color-blue-grey);
    --faq-question-hover-bg: #3a3a4c;
    --faq-answer-bg: #2a2a3c;
    --faq-answer-color: var(--color-blue-grey);
    --contact-form-bg: #2a2a3c;
    --contact-form-shadow: rgba(255, 255, 255, 0.05);
    --form-input-border: var(--color-blue-grey);
    --form-input-bg: #3a3a4c; /* Tamnija pozadina inputa u dark mode */
    --form-input-color: var(--color-blue-grey);
    --footer-bg: #1a1a2a; /* Još tamnija nijansa za footer */
    --footer-color: var(--color-blue-grey);
    --footer-link-color: var(--color-teal-font);
    --footer-link-hover-color: var(--color-blue-grey);
    /* Boje za Modal */
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
    --modal-bg: var(--color-dark-navy);
    --modal-color: var(--body-color);
    --modal-heading-color: var(--heading-color);
    --modal-package-bg: #2a2a3c;
    --modal-package-border: 1px solid var(--color-blue-grey);
    --modal-package-shadow: rgba(255, 255, 255, 0.05);
    --modal-package-button-bg: var(--color-teal);
    --modal-package-button-color: var(--white);
    --modal-package-button-hover-bg: #004a63;
}

/* Boje za svijetli način (override ako body ima klasu 'light-mode') */
body.light-mode {
    --color-teal-font: var(--color-teal);
    --body-color: var(--color-dark-navy);
    --heading-color: var(--color-teal);
    --link-color: var(--color-teal);
    --link-hover-color: var(--color-dark-navy);
    --header-bg: var(--white);
    --header-shadow: rgba(0, 0, 0, 0.1);
    --hero-bg: var(--color-light-grey); /* Svijetlo siva za hero */
    --section-bg: var(--white);
    --feature-item-bg: var(--white);
    --feature-item-shadow: rgba(0, 0, 0, 0.05);
    --feature-item-border: 1px solid var(--color-blue-grey); /* Border za feature iteme u light mode */
    --cta-section-bg: var(--color-teal);
    --cta-section-color: var(--white); /* Tekst na CTA sekciji */
    --cta-btn-secondary-color: var(--white); /* Sekundarni gumb na CTA */
    --cta-btn-secondary-border: 2px solid var(--white); /* Sekundarni gumb na CTA */
    --cta-btn-secondary-hover-bg: var(--white); /* Sekundarni gumb na CTA hover */
    --cta-btn-secondary-hover-color: var(--color-teal); /* Sekundarni gumb na CTA hover */

    --faq-item-bg: var(--white);
    --faq-item-border: var(--color-blue-grey);
    --faq-question-bg: var(--color-blue-grey);
    --faq-question-color: var(--color-teal);
    --faq-question-hover-bg: #92aab5;
    --faq-answer-bg: var(--white);
    --faq-answer-color: var(--color-dark-navy);
    --contact-form-bg: var(--white);
    --contact-form-shadow: rgba(0, 0, 0, 0.05);
    --form-input-border: var(--color-blue-grey);
    --form-input-bg: var(--white);
    --form-input-color: var(--color-dark-navy);
    --footer-bg: var(--color-dark-navy); /* Footer background u light mode */
    --footer-color: var(--white); /* Promijenjena boja teksta u footeru u light mode na bijelu */
    --footer-link-color: var(--color-teal); /* Promijenjena boja linkova u footeru u light mode */
    --footer-link-hover-color: var(--white); /* Footer link hover boja u light mode */
    /* Boje za Modal u svijetlom načinu */
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
    --modal-bg: var(--white);
    --modal-color: var(--body-color);
    --modal-heading-color: var(--heading-color);
    --modal-package-bg: var(--color-light-grey);
    --modal-package-border: 1px solid var(--color-blue-grey);
    --modal-package-shadow: rgba(0, 0, 0, 0.05);
    --modal-package-button-bg: var(--color-teal);
    --modal-package-button-color: var(--white);
    --modal-package-button-hover-bg: #004a63;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--body-color);
    background-color: var(--body-bg);
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Stil za onemogućavanje skrolanja tijela kada je modal otvoren */
    body.modal-open {
        overflow: hidden;
    }


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-medium);
}

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    line-height: 1.2;
    margin-bottom: var(--spacing-small);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: var(--spacing-small);
    font-size: 1.1rem;
    color: var(--body-color); /* Paragrafi koriste boju tijela */
}

a {
    text-decoration: none;
    color: var(--link-color);
    transition: color 0.3s ease;
}

    a:hover {
        color: var(--link-hover-color);
    }

/* Gumbi - Pozivi na akciju */
.btn {
    display: inline-block;
    padding: var(--spacing-small) var(--spacing-medium);
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
}

.btn-primary {
    background-color: var(--color-teal);
    color: var(--white);
}

    .btn-primary:hover {
        background-color: #004a63; /* Tamnija nijansa tirkizne */
        color: var(--white);
    }

.btn-secondary {
    background-color: transparent;
    color: var(--color-teal); /* Sekundarni gumb koristi primarnu boju */
    border: 2px solid var(--color-teal);
}

    .btn-secondary:hover {
        background-color: var(--color-teal);
        color: var(--white);
    }

/* Sekcije */
section {
    padding: var(--spacing-large) 0;
}

#hero {
    background-color: var(--hero-bg);
    padding: var(--spacing-large) 0 calc(var(--spacing-large) * 1.5);
    transition: background-color 0.3s ease;
}

#znacajke, #faq {
    background-color: var(--section-bg);
    transition: background-color 0.3s ease;
}

.cta-section {
    background-color: var(--cta-section-bg);
    color: var(--cta-section-color); /* Tekst na CTA sekciji (bijela) */
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .cta-section h2, .cta-section p {
        color: inherit; /* Nasljeđuje boju teksta sekcije (bijela) */
    }

    /* Stilovi za sekundarni gumb unutar CTA sekcije */
    .cta-section .btn-secondary {
        color: var(--cta-btn-secondary-color); /* Bijela boja teksta */
        border: var(--cta-btn-secondary-border); /* Bijeli obrub */
        background-color: transparent; /* Prozirna pozadina */
    }

        .cta-section .btn-secondary:hover {
            background-color: var(--cta-btn-secondary-hover-bg); /* Bijela pozadina na hover */
            color: var(--cta-btn-secondary-hover-color); /* Tamna tirkizna boja teksta na hover */
            border-color: var(--cta-btn-secondary-hover-bg); /* Bijeli obrub na hover */
        }


/* --- Header --- */
header {
    background-color: var(--header-bg);
    padding: var(--spacing-small) 0;
    box-shadow: 0 2px 5px var(--header-shadow);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.logo-container {
    display: flex; /* Omogućuje slaganje loga i teksta u red */
    align-items: center; /* Vertikalno poravnanje */
    gap: 10px; /* Razmak između loga i teksta */
}

.logo img {
    height: 40px;
    display: block;
}

.logo-text {
    font-family: var(--font-logo-text); /* Koristi novi font za tekst */
    font-size: 1.5rem; /* Veličina fonta */
    color: var(--color-teal-font); /* Boja teksta (primarna boja) */
    font-weight: 600; /* Debljina fonta (prilagodite po potrebi) */
}


/* --- Navigacija --- */
nav ul {
    list-style: none;
    display: flex; /* Prikaz linkova u redu na velikim ekranima */
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease-out; /* Animacija za otvaranje/zatvaranje */
}

    nav ul li {
        margin-left: var(--spacing-medium);
    }

        nav ul li a {
            color: var(--body-color); /* Boja linkova u navigaciji */
            font-weight: bold;
            transition: color 0.3s ease;
        }

            nav ul li a.cta-button {
                color: var(--color-teal);
                border: 2px solid var(--color-teal);
                padding: 8px 15px;
                border-radius: 5px;
                transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
            }

                nav ul li a.cta-button:hover {
                    background-color: var(--color-teal);
                    color: var(--white);
                }

/* Gumb za otvaranje/zatvaranje navigacije na malim ekranima */
.menu-toggle {
    display: none; /* Skriveno na velikim ekranima */
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--body-color);
    padding: 0.5rem;
    transition: color 0.3s ease;
}

    .menu-toggle:focus {
        outline: none;
    }

/* Tema Switcher Stilovi */
.theme-switcher {
    margin-left: var(--spacing-medium); /* Razmak od ostalih linkova */
}

    .theme-switcher button {
        background: none;
        border: none;
        color: var(--body-color); /* Boja ikone/teksta */
        cursor: pointer;
        font-size: 1.2rem;
        padding: 0.5rem;
        transition: color 0.3s ease;
    }

        .theme-switcher button:hover {
            color: var(--link-hover-color);
        }


/* --- Hero Section --- */
#hero .container {
    display: flex;
    align-items: center;
    gap: var(--spacing-large);
}

.hero-content {
    flex: 1;
}

    .hero-content h1 {
        font-size: 3rem;
        margin-bottom: var(--spacing-small);
        color: var(--body-color); /* Naslov u hero sekciji */
    }

    .hero-content .subtitle {
        font-size: 1.3rem;
        color: var(--body-color); /* Podnaslov u hero sekciji */
        margin-bottom: var(--spacing-medium);
    }

        .hero-content .subtitle .highlight {
            color: var(--color-teal); /* Istaknuti tekst tamna tirkizna */
            font-weight: bold;
        }


.hero-ctas .btn {
    margin-right: var(--spacing-small);
}

.hero-image {
    flex: 1;
    text-align: center;
}

    .hero-image img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 5px 15px var(--feature-item-shadow); /* Koristi istu sjenu kao feature itemi */
    }


/* --- Features Section --- */
#znacajke h2 {
    text-align: center;
    margin-bottom: var(--spacing-large);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-large);
}

.feature-item {
    background-color: var(--feature-item-bg);
    padding: var(--spacing-medium);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--feature-item-shadow);
    border: var(--feature-item-border); /* Dodan border */
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%; /* Osigurava jednake visine u gridu */
    display: flex; /* Koristi flexbox za centriranje sadržaja unutar itema */
    flex-direction: column;
    justify-content: flex-start; /* Poravnaj sadržaj na vrh */
}

    .feature-item:hover {
        transform: translateY(-5px);
    }

    .feature-item img {
        height: 100px;
        margin-bottom: var(--spacing-small);
        display: block; /* Osigurava da slika zauzima vlastiti red */
        margin-left: auto; /* Centriranje slike */
        margin-right: auto; /* Centriranje slike */
    }

    .feature-item h3 {
        color: var(--heading-color);
        margin-top: 0.5rem; /* Mali razmak iznad naslova */
        margin-bottom: 0.5rem; /* Mali razmak ispod naslova */
    }

    .feature-item p {
        color: var(--body-color);
        margin-bottom: 0; /* Ukloni donju marginu ako je zadnji element */
    }

    .feature-item .keyword {
        font-weight: bold;
        color: var(--body-color);
    }


/* --- CTA Sections --- */
.cta-section {
    padding: var(--spacing-large) 0;
    transition: background-color 0.3s ease;
}

    .cta-section h2 {
        margin-bottom: var(--spacing-small);
    }

    .cta-section p {
        margin-bottom: var(--spacing-medium);
        font-size: 1.2rem;
    }

.cta-buttons .btn {
    margin: var(--spacing-small) var(--spacing-small);
}


/* --- FAQ Section --- */
#faq h2 {
    text-align: center;
    margin-bottom: var(--spacing-large);
}

.faq-items {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--faq-item-bg);
    border: 1px solid var(--faq-item-border);
    margin-bottom: var(--spacing-small);
    border-radius: 5px;
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.faq-question {
    padding: var(--spacing-small) var(--spacing-medium);
    background-color: var(--faq-question-bg);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: var(--faq-question-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Poboljšanje razmaka u FAQ pitanju */
    word-break: break-word; /* Omogućuje prekid riječi ako je potrebno */
    hyphens: auto; /* Omogućuje rastavljanje riječi */
    text-align: left; /* Poravnaj tekst lijevo */
    flex-grow: 1; /* Omogući tekstu da zauzme raspoloživi prostor */
    margin-right: 10px; /* Mali razmak prije ikone */
}

    .faq-question .toggle-icon {
        font-size: 1.5rem;
        transition: transform 0.3s ease;
        flex-shrink: 0; /* Spriječi smanjivanje ikone */
    }

.faq-item.active .faq-question .toggle-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 var(--spacing-medium);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: var(--faq-answer-bg);
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: var(--spacing-small) var(--spacing-medium) var(--spacing-medium);
    transition: max-height 0.4s ease-in;
}

.faq-answer p {
    color: var(--faq-answer-color);
    margin-bottom: 0;
    font-size: 1rem;
}

/* --- Kontakt Section --- */
#kontakt h2 {
    text-align: center;
    margin-bottom: var(--spacing-small);
}

#kontakt p {
    text-align: center;
    margin-bottom: var(--spacing-large);
}

.contact-form {
    max-width: 600px;
    margin: 0 auto var(--spacing-medium); /* Dodan donji razmak */
    background-color: var(--contact-form-bg);
    padding: var(--spacing-large);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--contact-form-shadow);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* Premješteni stilovi za grid i gap */
    display: grid;
    gap: var(--spacing-small); /* Koristi --spacing-small za razmak */
}


    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        width: 100%;
        padding: var(--spacing-small);
        border: 1px solid var(--form-input-border);
        border-radius: 4px;
        font-family: var(--font-body);
        font-size: 1rem;
        color: var(--form-input-color);
        background-color: var(--form-input-bg);
        transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }

    .contact-form textarea {
        resize: vertical;
    }

    .contact-form button {
        width: 100%;
        padding: var(--spacing-small);
        font-size: 1.1rem;
    }

/* Stil za karticu poduzeća unutar kontakt sekcije */
#kontakt .feature-item {
    max-width: 600px; /* Ograniči širinu kao forma */
    margin: var(--spacing-medium) auto; /* Gornji i donji razmak, centriranje */
    /* Nasljeđuje ostale stilove od .feature-item */
}

    #kontakt .feature-item h3 {
        margin-top: 0; /* Ukloni gornju marginu ako je prva stvar nakon paddinga */
        margin-bottom: var(--spacing-small); /* Dodaj mali razmak ispod naslova */
    }

    /* Smanji razmak između p tagova unutar kartice poduzeća */
    #kontakt .feature-item p {
        margin-bottom: 0.2rem; /* Smanjena donja margina */
        line-height: 1.4; /* Možda malo smanjiti visinu reda ako je potrebno */
    }

        #kontakt .feature-item p:last-child {
            margin-bottom: 0; /* Ukloni donju marginu zadnjeg p taga */
        }


.contact-info {
    text-align: center;
    margin-top: var(--spacing-medium);
    font-size: 1.1rem;
    color: var(--body-color);
}

    .contact-info a {
        color: var(--link-color);
        font-weight: bold;
    }

/* --- Footer --- */
footer {
    background-color: var(--footer-bg);
    color: var(--footer-color); /* Koristi footer boju za tekst */
    text-align: center;
    padding: var(--spacing-medium) 0;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    footer p {
        color: var(--footer-color); /* Eksplicitno postavi boju za p tagove u footeru */
    }

    footer a {
        color: var(--footer-link-color); /* Koristi footer link boju */
        margin: 0 5px;
        transition: color 0.3s ease;
    }

        footer a:hover {
            color: var(--footer-link-hover-color); /* Koristi footer link hover boju */
        }

.social-links a {
    display: inline-block;
    margin: 0 10px;
    /* Dodajte stilove za ikone društvenih mreža ovdje */
}

/* --- Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Iznad svega ostalog */
    visibility: hidden; /* Skriveno po defaultu */
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .modal-overlay.visible {
        visibility: visible;
        opacity: 1;
    }

.modal-content {
    background-color: var(--modal-bg);
    color: var(--modal-color);
    padding: var(--spacing-large);
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto; /* Omogući skrolanje ako je sadržaj predugačak */
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-50px); /* Početna pozicija za animaciju */
    transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-content {
    transform: translateY(0); /* Završna pozicija za animaciju */
}


.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--modal-color); /* Boja križića */
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px;
    line-height: 1;
    transition: color 0.3s ease;
}

    .modal-close:hover {
        color: var(--heading-color); /* Boja na hover */
    }

.modal-content h2 {
    color: var(--modal-heading-color);
    text-align: center;
    margin-bottom: var(--spacing-small); /* Smanjen razmak ispod naslova modala */
}

/* Stil za tekst s informacijama o cijenama u modalu */
.modal-pricing-info {
    text-align: center;
    margin-bottom: var(--spacing-large); /* Razmak ispod teksta i iznad paketa */
    font-size: 1rem;
    color: var(--body-color); /* Boja teksta */
}


.pricing-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Default: jedna kolona na malim ekranima */
    gap: var(--spacing-medium);
}

/* CSS za skrivanje honeypot polja */
.honeypot-field {
    display: none !important; /* Važno: Koristite !important da nadjačate druge stilove */
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important; /* Pomaknite ga izvan vidljivog područja */
}

/* Prilagodba za veće ekrane: dvije kolone */
@media (min-width: 768px) {
    .pricing-packages {
        grid-template-columns: repeat(2, 1fr); /* Dvije kolone na ekranima >= 768px */
    }
    /* Prilagodba širine modala za dvije kolone */
    .modal-content {
        max-width: 700px; /* Povećaj maksimalnu širinu modala */
    }
}

/* Prilagodba za još veće ekrane ako želite 3 ili više kolona */
@media (min-width: 1024px) {
    .pricing-packages {
        grid-template-columns: repeat(3, 1fr); /* Tri kolone na ekranima >= 1024px */
    }

    .modal-content {
        max-width: 1000px; /* Povećaj maksimalnu širinu modala */
    }
}


.package-item {
    background-color: var(--modal-package-bg);
    border: var(--modal-package-border);
    border-radius: 8px;
    padding: var(--spacing-medium);
    text-align: center;
    box-shadow: 0 2px 8px var(--modal-package-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

    .package-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px var(--modal-package-shadow);
    }

    .package-item h3 {
        color: var(--heading-color); /* Naslov paketa koristi heading boju */
        margin-top: 0;
        margin-bottom: var(--spacing-small);
    }

    .package-item .price {
        font-size: 2rem;
        font-weight: bold;
        color: var(--color-price); /* Cijena koristi primarnu boju */
        margin-bottom: 0.3rem; /* Dodatno smanjena donja margina */
        line-height: 1.1; /* Dodatno smanjena visina reda */
        position: relative; /* Potrebno za pozicioniranje pseudo-elementa */
        padding-bottom: 1rem; /* Dodajte padding na dno za prostor za crtu */
    }

        /* Stil za dekorativnu crtu ispod cijene */
        .package-item .price::after {
            content: '';
            position: absolute;
            bottom: 0; /* Postavite crtu na dno .price elementa */
            left: 50%; /* Centrirajte crtu horizontalno */
            transform: translateX(-50%); /* Precizno centriranje */
            width: 60px; /* Širina crte */
            height: 3px; /* Visina crte */
            background-color: var(--color-teal); /* Boja crte */
            border-radius: 2px; /* Zaobljeni rubovi crte */
        }


        .package-item .price span {
            font-size: 1rem;
            font-weight: normal;
            color: var(--body-color); /* Manji tekst (npr. /mjesečno) */
            /* Nema potrebe za marginom ovdje jer line-height roditelja kontrolira razmak */
        }


    .package-item ul {
        list-style: none;
        padding: 0;
        margin-bottom: var(--spacing-medium);
        text-align: left;
        flex-grow: 1; /* Omogući listi da zauzme prostor */
    }

        .package-item ul li {
            margin-bottom: 8px;
            padding-left: 1.5rem; /* Prostor za ikonu */
            position: relative;
            color: var(--modal-color); /* Boja teksta liste */
        }

            .package-item ul li:before {
                content: '✓'; /* Ili neka druga ikona, npr. Font Awesome */
                position: absolute;
                left: 0;
                color: green; /* Boja kvačice */
                font-weight: bold;
            }

    .package-item .btn {
        width: 100%;
        margin-top: auto; /* Gurni gumb na dno */
        background-color: var(--modal-package-button-bg);
        color: var(--modal-package-button-color);
    }

        .package-item .btn:hover {
            background-color: var(--modal-package-button-hover-bg);
        }

/* --- Success Modal Specific Styles --- */
#success-modal .modal-content {
    max-width: 400px; /* Manja širina za poruku o uspjehu */
    text-align: center;
}

    #success-modal .modal-content h2 {
        color: var(--heading-color); /* Naslov modala koristi heading boju */
        margin-bottom: var(--spacing-small);
    }

    #success-modal .modal-content p {
        color: var(--body-color); /* Tekst modala koristi body boju */
        margin-bottom: var(--spacing-medium);
        font-size: 1.1rem;
    }

    #success-modal .modal-content .btn {
        width: auto; /* Gumb ne zauzima cijelu širinu */
        padding: 10px 20px;
    }


/* --- Responsivnost --- */
@media (max-width: 767px) { /* Prilagodba za ekrane manje od 768px */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    .container {
        padding: 0 var(--spacing-small);
    }

    #hero .container {
        flex-direction: column;
        text-align: center;
    }

    .hero-ctas {
        display: flex;
        justify-content: center;
        gap: var(--spacing-small);
        flex-wrap: wrap;
    }

        .hero-ctas .btn {
            margin: 0;
        }

    /* Navigacija na malim ekranima */
    header .container {
        flex-direction: column; /* Logo i navigacija idu jedan ispod drugog */
        align-items: flex-start; /* Poravnaj na lijevo */
    }

    /* Navigacija na malim ekranima */
    header .container {
        /* **PROMIJENJENO:** Postavi na column za slaganje elemenata headera vertikalno */
        flex-direction: column;
        /*    align-items: center; /* Centriraj sadržaj headera horizontalno */
        justify-content: flex-start; /* Poravnaj sadržaj headera na vrh */
        flex-wrap: nowrap; /* **PROMIJENJENO:** Onemogući prelamanje na glavnom kontejneru */
    }

    /* **DODANO:** Novi kontejner za logo i menu toggle */
    .header-top {
        display: flex; /* Postavi kao flex kontejner */
        justify-content: space-between; /* Razmak između loga i gumba */
        align-items: center; /* **PROMIJENJENO:** Vertikalno poravnaj logo i gumb */
        width: 100%; /* Zauzmi cijelu širinu kontejnera */
        padding: 5px 0; /* Dodaj malo paddinga gore/dolje */
    }


    nav {
        width: 100%; /* Navigacija zauzima cijelu širinu */
        flex-basis: 100%; /* Zauzmi cijelu širinu */
        order: 1; /* Postavi ga kao drugi element u flex kontejneru (iza header-top) */
        /* **PROMIJENJENO:** Ukloni gornju marginu s nav, sada je na header-top */
        margin-top: 0;
    }

        nav ul {
            flex-direction: column; /* Linkovi idu u stupac */
            width: 100%; /* Lista zauzima cijelu širinu */
            text-align: center; /* Centriraj tekst linkova */
            margin-top: var(--spacing-small);
            border-top: 1px solid var(--faq-item-border); /* Dodaj liniju iznad menija */
            padding-top: var(--spacing-small);
            /* Skriveno po defaultu */
            max-height: 0;
            overflow: hidden;
            transform: translateY(-10px); /* Mali pomak prema gore kad je skriveno */
            opacity: 0; /* Skriveno */
            pointer-events: none; /* Onemogući klikove kad je skriveno */
        }

            nav ul.show {
                max-height: 500px; /* Dovoljno veliko da prikaže sve linkove, prilagodite po potrebi */
                transform: translateY(0); /* Vrati na početnu poziciju */
                opacity: 1; /* Prikazano */
                pointer-events: auto; /* Omogući klikove */
                transition: max-height 0.4s ease-in-out, transform 0.3s ease-out, opacity 0.3s ease-out;
            }


            nav ul li {
                margin: 10px 0; /* Veći razmak između stavki u meniju */
            }

                nav ul li a.cta-button {
                    margin-top: var(--spacing-small);
                }

    /* Tema switcher na malim ekranima */
    .theme-switcher {
        margin-left: 0; /* Ukloni lijevu marginu */
        margin-top: var(--spacing-small); /* Dodaj gornju marginu */
    }


    /* Prikaži gumb za menu na malim ekranima */
    .menu-toggle {
        display: block;
        position: absolute; /* Postavi gumb apsolutno */
        top: auto; /* Poravnaj s vrhom headera */
        right: var(--spacing-medium); /* Poravnaj s desnom stranom headera */
        color: var(--body-color); /* Boja gumba */
    }

    /* Smanji padding headera na malim ekranima */

    header {
        padding: 10px 0; /* **PROMIJENJENO:** Smanjen gornji i donji padding */
    }


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

    .faq-question {
        font-size: 1.1rem;
    }

    /* Modal responsivnost na malim ekranima */
    .modal-content {
        padding: var(--spacing-medium);
    }

    .pricing-packages {
        grid-template-columns: 1fr; /* Jedna kolona na malim ekranima */
    }

    /* Success Modal responsivnost na malim ekranima */
    #success-modal .modal-content {
        max-width: 90%; /* Zauzmi većinu širine ekrana */
        padding: var(--spacing-medium);
    }
}