:root {
    --primary: #052e16;
    /* Bardzo ciemna zieleń (zamiast granatu) */
    --secondary: #22c55e;
    /* Soczysta zieleń (zamiast pomarańczu) */
    --accent: #86efac;
    /* Jasna mięta */
    --text-dark: #1e293b;
    --text-light: #64748b;
    --text-white: #f8fafc;
    --bg-light: #f0fdf4;
    /* Lekko zielonkawe tło */
    --transition: all 0.3s ease;
    --shadow: 0 10px 30px -10px rgba(20, 83, 45, 0.5);
    --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.12);
}

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

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.highlight {
    color: var(--secondary);
    position: relative;
    display: inline-block;

    /* Gradient: Zielony -> Jasny -> Zielony */
    background: linear-gradient(120deg, var(--secondary) 40%, #ecfccb 50%, var(--secondary) 60%);
    background-size: 200% auto;

    /* Przycięcie tła do tekstu */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Ciągła animacja */
    animation: shine 4s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.logo {
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(5, 46, 22, 0.95);
    /* Ciemna zieleń */
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

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

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-white);
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: var(--text-white);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
}

.nav-links a:not(.btn-primary)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--secondary);
    transition: var(--transition);
}

.nav-links a:not(.btn-primary):hover::after {
    width: 100%;
}

.btn-primary {
    background-color: var(--secondary);
    color: white !important;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.mobile-menu-btn {
    display: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    background: url('hero-bg.jpg') no-repeat center center/cover;
    /* Zielony gradient overlay - teraz mniej intensywny bo mamy canvas */
    background-image: linear-gradient(rgba(5, 46, 22, 0.9), rgba(5, 46, 22, 0.8)), url('./hero.png');
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-overlay {
    /* Overlay moves to z-index 1 or removed if handled by bg image, let's keep it but ensure canvas is visible */
    z-index: 1;
}

.hero-content {
    color: white;
    max-width: 800px;
    z-index: 2;
    /* Content above canvas */
}

.hero-subtitle {
    color: var(--secondary);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: block;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    max-width: 600px;
}

.hero-btns {
    display: flex;
    gap: 1rem;
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

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

/* Stats */
.stats {
    background-color: var(--primary);
    color: white;
    padding: 4rem 0;
    position: relative;
    z-index: 10;
    margin-top: -50px;
}

.stats-container {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat-item h3 {
    font-size: 2.5rem;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.stat-item p {
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Services */
.services {
    padding: 6rem 0;
    background-color: var(--bg-light);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Tilt 3D Effect for Service Cards */
.service-card {
    background: white;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border-top: 4px solid transparent;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.service-card:hover {
    transform: translateY(-5px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1), -20px -20px 60px rgba(255, 255, 255, 0.5);
    border-top: 4px solid var(--secondary);
    z-index: 10;
}

.icon-box {
    font-size: 2.5rem;
    color: var(--secondary);
    margin-bottom: 1.5rem;
}

.service-card h3 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.service-card p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.service-link {
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.service-link:hover {
    color: var(--secondary);
}

/* Contact */
.contact {
    padding: 6rem 0;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-item i {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--secondary);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.full-width {
    width: 100%;
    justify-content: center;
}

/* Footer */
footer {
    background-color: var(--primary);
    color: #94a3b8;
    padding: 4rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    color: white;
    margin-bottom: 1.5rem;
}

.footer-col ul li {
    margin-bottom: 0.8rem;
}

.footer-col ul li a:hover {
    color: var(--secondary);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .stats-container {
        flex-direction: column;
        gap: 2rem;
    }

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

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }
}

/* Live Chat Widget */
.chat-widget {
    position: fixed;
    bottom: 90px;
    /* Wyżej, bo niżej będzie WhatsApp */
    right: 30px;
    z-index: 9998;
}

.chat-toggle {
    background-color: var(--primary);
    /* Ciemny, żeby się różnił od WhatsApp */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.chat-toggle:hover {
    transform: scale(1.1);
}

.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: slideIn 0.3s ease;
}

.chat-window.active {
    display: flex;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-header {
    background-color: var(--primary);
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h3 {
    font-size: 1.1rem;
    margin: 0;
}

.close-chat {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.2s;
}

.close-chat:hover {
    opacity: 1;
}

.chat-body {
    height: 300px;
    background-color: #f9f9f9;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message {
    max-width: 80%;
    padding: 0.8rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.message.received {
    background-color: white;
    border: 1px solid #eee;
    border-bottom-left-radius: 2px;
    align-self: flex-start;
    color: var(--text-dark);
}

.message.sent {
    background-color: var(--secondary);
    color: white;
    border-bottom-right-radius: 2px;
    align-self: flex-end;
}

.chat-input-area {
    padding: 1rem;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    gap: 0.5rem;
}

.chat-input-area input {
    flex: 1;
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
}

.chat-input-area button {
    background: var(--secondary);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

/* Language Switcher */
.lang-switcher {
    position: relative;
    display: inline-block;
    margin-left: 1rem;
}

.current-lang {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}

.current-lang:hover {
    border-color: var(--secondary);
    color: var(--secondary);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    color: var(--text-dark);
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    min-width: 100px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    margin-top: 5px;
}

.lang-switcher:hover .lang-dropdown {
    display: flex;
}

.lang-dropdown span {
    padding: 8px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    font-size: 0.9rem;
}

.lang-dropdown span:hover {
    background-color: var(--bg-light);
    color: var(--secondary);
}

/* Service Details Expansion */
.service-details {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: var(--text-dark);
    display: block;
    max-height: 500px;
    opacity: 1;
    transition: all 0.5s ease;
    overflow: hidden;
}

.service-details.hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.details-intro {
    font-weight: 500;
    margin-bottom: 0.8rem;
    color: var(--primary);
}

.service-details ul li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-details ul li i {
    color: var(--secondary);
    font-size: 0.8rem;
}

.toggle-details {
    cursor: pointer;
    margin-top: 1rem;
    display: inline-flex;
}

.toggle-details.active i {
    transform: rotate(90deg);
}

/* === NOWE ELEMENTY === */

/* WhatsApp Button */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 10000;
    /* Zawsze na wierzchu */
    transition: all 0.3s ease;
    animation: pulse-green 2s infinite;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
    background-color: #20b85a;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--primary);
    color: white;
    padding: 1rem;
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.5s ease;
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-text {
    font-size: 0.9rem;
    max-width: 800px;
    line-height: 1.4;
}

.cookie-btn {
    background-color: var(--secondary);
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: 0.3s;
}

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

@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .whatsapp-btn {
        bottom: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .chat-widget {
        bottom: 80px;
        /* Adjust for mobile */
    }
}

/* Trust Section - IDENTYCZNE JAK SERVICES */
.trust {
    padding: 6rem 0;
    background-color: var(--bg-light);
}

.trust .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secondary);
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.trust .section-header h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.trust-intro {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.trust-intro p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    text-align: center;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.trust-card {
    background: white;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border-top: 4px solid transparent;
}

.trust-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--secondary);
}

.trust-card .icon-box {
    font-size: 2.5rem;
    color: var(--secondary);
    margin-bottom: 1.5rem;
}

.trust-card h3 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.trust-card p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.trust-card ul {
    list-style: none;
    padding: 0;
}

.trust-card ul li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.trust-card ul li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--secondary);
    font-weight: bold;
    font-size: 1.2rem;
    top: -2px;
}

/* Map */
.map-container {
    margin-top: 2rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    background: #e5e3df;
    /* Kolor tła mapy przed załadowaniem */
}

.map-container iframe {
    width: 100%;
    height: 100%;
    /* Trik na Dark Mode bez API Key */
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
    mix-blend-mode: multiply;
    /* Opcjonalne: lepsze wtapianie, ale filter robi główną robotę */
    display: block;
}

/* Scroll Animations */
.animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    top: 90px;
    right: 20px;
    background: white;
    color: var(--text-dark);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10001;
    transform: translateX(150%);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-left: 5px solid var(--secondary);
    min-width: 300px;
}

.toast-notification.show {
    transform: translateX(0);
}

.toast-notification.error {
    border-left-color: #ef4444;
}

.toast-notification .toast-icon {
    font-size: 1.5rem;
}

.toast-notification.success .toast-icon {
    color: var(--secondary);
}

.toast-notification.error .toast-icon {
    color: #ef4444;
}

.toast-content h4 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.toast-content p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
}

/* --- NEW STYLES --- */

/* Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
}

.loader {
    text-align: center;
    color: white;
}

.loader .truck-icon {
    font-size: 3rem;
    color: var(--secondary);
    animation: drive 1.5s infinite linear;
    margin-bottom: 1rem;
}

@keyframes drive {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(50px);
        opacity: 0;
    }
}

/* Sticky Quote Button */
.sticky-quote {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: var(--secondary);
    color: white;
    padding: 15px 10px;
    border-radius: 0 8px 8px 0;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
}

.sticky-quote:hover {
    padding-left: 20px;
    background: #16a34a;
}

.sticky-quote i {
    font-size: 1.5rem;
}

.sticky-quote span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    margin-top: 5px;
}

/* Page Hero (dla podstron) */
.page-hero {
    height: 40vh;
    background: linear-gradient(rgba(5, 46, 22, 0.9), rgba(5, 46, 22, 0.8)), url('./hero.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding-top: 80px;
}

.page-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-hero p {
    font-size: 1.2rem;
    color: var(--accent);
}

/* Fleet Gallery Large */
.fleet-gallery {
    padding: 6rem 0;
    background: white;
}

.fleet-grid-large {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.fleet-card-large {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: #f9f9f9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* fix var definitions if needed or rely on fallback */
}

.fleet-card-large:nth-child(even) {
    /* Odwróć kolejność dla co drugiego elementu */
    direction: rtl;
}

.fleet-card-large:nth-child(even)>* {
    direction: ltr;
    /* Reset tekstu */
}

.fleet-img {
    height: 400px;
}

.fleet-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.fleet-card-large:hover .fleet-img img {
    transform: scale(1.05);
}

.fleet-info {
    padding: 2.5rem;
}

.fleet-info h3 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.fleet-info p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.fleet-info ul {
    list-style: none;
    padding: 0;
}

.fleet-info ul li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text-dark);
}

.fleet-info ul li i {
    color: var(--secondary);
}

.cta-box {
    text-align: center;
    margin-top: 5rem;
    padding: 3rem;
    background: #fdfdfd;
    /* fallback */
    border-radius: 12px;
}

.cta-box h2 {
    color: var(--primary);
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .fleet-card-large {
        grid-template-columns: 1fr;
        direction: ltr !important;
    }

    .fleet-img {
        height: 250px;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(5px);
}

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

.modal-content {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
}

.close-modal:hover {
    color: var(--primary);
}

.modal-form .form-group {
    margin-bottom: 1rem;
}

.modal-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.9rem;
}

.modal-form input,
.modal-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
}


.modal-form button {
    margin-top: 1rem;
}

/* Modern Testimonials Section */
.testimonials {
    padding: 8rem 0;
    /* Subtelny gradient tła */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

/* Dekoracyjne koła w tle */
.testimonials::before,
.testimonials::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    z-index: 0;
    filter: blur(80px);
    opacity: 0.1;
}

.testimonials::before {
    background: var(--primary);
    top: -50px;
    left: -50px;
}

.testimonials::after {
    background: var(--secondary);
    bottom: -50px;
    right: -50px;
}

.testimonials .container {
    position: relative;
    z-index: 1;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.stars {
    color: #f59e0b;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.quote-text {
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.client-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.client-avatar {
    width: 50px;
    height: 50px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: bold;
}

.client-info h4 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.client-info span {
    font-size: 0.85rem;
    color: var(--text-light);
    display: block;
}


/* Modern FAQ Section */
.faq {
    padding: 8rem 0;
    background: white;
}

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

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.faq-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.faq-item:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    border-color: var(--secondary);
}

.faq-item.active {
    border-color: var(--secondary);
    background: #fdfdfd;
}

.faq-question {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--primary);
    font-size: 1.1rem;
    transition: color 0.3s;
}

.faq-question i {
    color: var(--secondary);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-size: 0.9rem;
    background: rgba(34, 197, 94, 0.1);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    background: var(--secondary);
    color: white;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    padding: 0 2rem;
    color: var(--text-light);
    line-height: 1.7;
    opacity: 0;
}

.faq-item.active .faq-answer {
    padding-bottom: 2rem;
    opacity: 1;
}

/* Privacy Policy Page Styles (Simple clean) */
.privacy-page {
    padding: 6rem 0;
    background: #fff;
}

.privacy-content {
    max-width: 800px;
    margin: 0 auto;
}

.privacy-content h2 {
    color: var(--primary);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    border-left: 4px solid var(--secondary);
    padding-left: 1rem;
}

.privacy-content p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
    color: var(--text-dark);
    font-size: 1.05rem;
}

/* --- EcoAssistant 2.0 Chat Styles --- */

.chat-assistant-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    background: #fff;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10b981;
    /* Green status */
    border-radius: 50%;
    margin-right: 4px;
    box-shadow: 0 0 5px #10b981;
}

/* Chat Options (Buttons) */
.chat-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 15px;
    animation: fadeIn 0.5s ease;
}

.chat-options button {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 12px 15px;
    border-radius: 12px;
    color: var(--primary);
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-options button:hover {
    background: #f0fdf4;
    /* Light green bg */
    border-color: var(--secondary);
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.1);
}

.chat-options button:active {
    transform: scale(0.98);
}

/* Adjust Chat Body for options */
.chat-body {
    padding-bottom: 10px;
    /* Ensure scrolling works if options push content */
    display: flex;
    flex-direction: column;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- Coverage Map Section --- */
.coverage-section {
    padding: 80px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.coverage-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
}

.map-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.map-point {
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.map-point .pulse {
    width: 12px;
    height: 12px;
    background: var(--secondary);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: mapPulse 2s infinite;
}

.map-point:hover .pulse {
    background: var(--primary);
    animation-play-state: paused;
    transform: translate(-50%, -50%) scale(1.2);
}

.map-point:hover::after {
    content: attr(data-country);
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark);
    color: #fff;
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
}

.delay-1 {
    animation-delay: 0.5s;
}

.delay-2 {
    animation-delay: 1.0s;
}

.delay-3 {
    animation-delay: 1.5s;
}

@keyframes mapPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }

    70% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 15px rgba(74, 222, 128, 0);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

.coverage-stats {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.cov-card {
    background: #fff;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-align: center;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    transition: var(--transition);
    border: 1px solid #f0f0f0;

    /* 3D Effect Base */
    position: relative;
    overflow: hidden;
    border-top: 4px solid transparent;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.cov-card:hover {
    transform: translateY(-5px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1), -20px -20px 60px rgba(255, 255, 255, 0.5);
    border-top: 4px solid var(--secondary);
    border-color: var(--secondary);
    z-index: 10;
}

.cov-card i {
    font-size: 2rem;
    color: var(--secondary);
    margin-bottom: 15px;
}

.cov-card h4 {
    margin-bottom: 5px;
    color: var(--primary);
    /* fixed var */
    font-weight: 600;
}

.cov-card p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}


/* --- Documents Section --- */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.doc-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    border: 1px solid #eee;
    transition: var(--transition);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

    /* 3D Effect Base */
    position: relative;
    overflow: hidden;
    border-top: 4px solid transparent;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.doc-card:hover {
    transform: translateY(-5px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1), -20px -20px 60px rgba(255, 255, 255, 0.5);
    border-top: 4px solid var(--secondary);
    border-color: var(--secondary);
    z-index: 10;
}

.doc-icon {
    font-size: 2rem;
    color: #ef4444;
    /* PDF Red */
}

.doc-info {
    flex: 1;
}

.doc-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.doc-info span {
    font-size: 0.8rem;
    color: #888;
}

.doc-action {
    width: 35px;
    height: 35px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    transition: background 0.3s;
}

.doc-card:hover .doc-action {
    background: var(--secondary);
    color: #fff;
}

/* Fix: Hide old SVG map and points, show only the new image */
.map-wrapper svg {
    display: none !important;
}

.map-wrapper .map-point {
    display: none !important;
}


/* --- JS TILT SUPPORT --- */
/* Important: We remove the CSS-based generic hover transform so JS can control it precisely. */
.service-card:hover,
.trust-card:hover,
.testimonial-card:hover,
.cov-card:hover,
.doc-card:hover {
    /* We do NOT effectively disable transform here, we just stop the static CSS one.
       The JS applies inline styles which have higher specificity than CSS classes usually,
       BUT !important in previous CSS block might override JS.
       So we need to reset the previous !important rules if possible or overwrite them.
    */
    /* Actually, inline styles from JS are overridden by !important in CSS. 
       So I must remove the !important from the previous block or override it here 
       but inline style cannot be !important easily.
       
       Strategy: I will reset transform to 'none' here but WITHOUT !important 
       wait... the previous block used !important. This is tricky.
       
       I must edit the file to REMOVE the !important I added in the previous step.
    */
}
/* --- ENABLE JS TILT --- */
/* Reset CSS hover transforms to allow JS to drive the rotation */
.service-card:hover, 
.trust-card:hover, 
.testimonial-card:hover, 
.cov-card:hover, 
.doc-card:hover {
    transform: none; 
}