/* --- Zmienne Globalne i Reset --- */
:root {
    --bg-color: #0f172a; --primary-accent: #0ea5e9; --secondary-accent: #8b5cf6;
    --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1);
    --text-color: #e2e8f0; --text-muted: #94a3b8; --font-family: 'Poppins', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); line-height: 1.7; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
section { padding: 80px 0; }
h1, h2, h3 { line-height: 1.2; font-weight: 600; }
h1 { font-size: 3rem; } h2 { font-size: 2.5rem; text-align: center; margin-bottom: 60px; }
a { color: var(--primary-accent); text-decoration: none; }

@keyframes auto-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* --- Nawigacja --- */
.navbar { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
    background: rgba(15, 23, 42, 0.8); 
    backdrop-filter: blur(10px); 
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border); 
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
    padding: 0 20px;
}
.logo { font-size: 1.5rem; font-weight: 700; color: #fff; }
.logo span { color: var(--primary-accent); }
.nav-links { display: flex; gap: 25px; align-items: center; }
.nav-link { color: var(--text-color); font-weight: 500; transition: color 0.3s; }
.nav-link:hover { color: var(--primary-accent); }
.nav-button { 
    background: var(--primary-accent); 
    color: #fff; 
    padding: 8px 20px; 
    border-radius: 50px; 
    font-weight: 600; 
    transition: transform 0.3s, box-shadow 0.3s; 
    white-space: nowrap;
}
.nav-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(14, 165, 233, 0.3); }

/* Language Switcher */
.language-switcher { display: flex; gap: 10px; margin-left: 20px; }
.lang-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-color); padding: 5px 10px; border-radius: 5px; cursor: pointer; transition: background 0.3s, border-color 0.3s; }
.lang-btn.active { background: var(--primary-accent); border-color: var(--primary-accent); }
.lang-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.1); border-color: var(--primary-accent); }

/* Hamburger Menu */
.hamburger { display: none; font-size: 2rem; color: var(--text-color); cursor: pointer; margin-left: 20px; }
.mobile-nav-button, .mobile-lang-switcher { display: none; }
.desktop-nav-button, .desktop-lang-switcher { display: flex; }

/* --- Sekcja Hero --- */
.hero { height: 100vh; display: flex; align-items: center; text-align: center; background: linear-gradient(rgba(15, 23, 42, 0.9), var(--bg-color)), url('images/ev3_3.png') no-repeat center center/cover; }
.hero p { font-size: 1.1rem; max-width: 600px; margin: 20px auto 30px; color: var(--text-muted); }
.cta-button { display: inline-block; background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent)); color: #fff; padding: 15px 35px; border-radius: 50px; font-size: 1.1rem; font-weight: 700; transition: transform 0.3s, box-shadow 0.3s; }
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2); }
.blog-button { margin-top: 40px; }

/* --- Sekcja Liczników --- */
.stats { padding: 60px 0; background-color: #0c1222; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.counter-item { text-align: center; }
.counter-circle { width: 150px; height: 150px; margin: 0 auto 20px; position: relative; }
.counter-item h3 { font-size: 1.1rem; color: var(--text-muted); font-weight: 400; }
.progressbar-text { color: var(--text-color) !important; font-weight: 600; font-size: 2rem; }

/* --- Sekcja O NAS --- */
.about-us { background-color: #0c1222; }
.about-content { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
.about-text { flex: 1; min-width: 300px; }
.about-text h3 { font-size: 2rem; margin-bottom: 20px; }
.about-text p { margin-bottom: 15px; color: var(--text-muted); }
.about-image { flex: 1; min-width: 300px; text-align: center; }
.about-image img { max-width: 100%; height: auto; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

/* --- Sekcja DLACZEGO ROBOFUN (Korzyści) --- */
.dlaczego-robofun { background-color: var(--bg-color); }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.benefit-item { text-align: center; }
.benefit-item i { font-size: 2.5rem; color: var(--primary-accent); margin-bottom: 15px; }
.benefit-item h3 { font-size: 1.3rem; margin-bottom: 10px; }
.benefit-item p { color: var(--text-muted); }

/* --- Sekcja Kursów --- */
.courses { background-color: #0c1222; }
.course-list { display: flex; flex-direction: column; gap: 80px; }
.course-item { display: flex; flex-direction: column; gap: 30px; }
.course-main-content { display: flex; align-items: center; gap: 40px; }
.course-item > .course-main-content > img { 
    width: 400px; 
    height: 400px; 
    object-fit: contain; 
    flex-shrink: 0; 
    border-radius: 10px;
    border: 2px solid var(--glass-border);
    padding: 10px;
}
.course-description { display: flex; flex-direction: column; }
.course-description h3 { font-size: 1.8rem; }
.course-description .age { color: var(--text-muted); font-style: italic; margin: 5px 0 15px; }
.course-description .details { color: var(--text-color); margin-bottom: 20px; }
.price { margin-top: auto; padding-top: 15px; font-size: 2rem; font-weight: 700; color: var(--primary-accent); border-top: 1px solid var(--glass-border); }

/* --- Style Galerii --- */
.gallery-wrapper { position: relative; }
.gallery-container { overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; }
.gallery-container::-webkit-scrollbar { display: none; }
.gallery-scroll { display: flex; gap: 15px; padding-bottom: 10px; }
.gallery-scroll img { width: 300px; object-fit: cover; border-radius: 10px; border: 2px solid var(--glass-border); transition: transform 0.3s; }
.gallery-scroll img:hover { transform: scale(1.05); }

/* --- Sekcja DLA KOGO --- */
#for-whom-section { background-color: var(--bg-color); }

/* --- Sekcja OPINIE KLIENTÓW --- */
.testimonials { background-color: var(--bg-color); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.testimonial-item { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 30px; border-radius: 15px; text-align: center; }
.testimonial-item .quote { font-style: italic; color: var(--text-color); margin-bottom: 20px; font-size: 1.1rem; }
.testimonial-item .client-info { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 20px; }
.testimonial-item .client-info img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-accent); }
.testimonial-item .client-info h4 { font-size: 1rem; color: var(--primary-accent); font-weight: 600; }

/* --- Sekcja FAQ --- */
.faq { background-color: #0c1222; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 20px 30px; border-radius: 10px; margin-bottom: 15px; cursor: pointer; transition: background 0.3s; overflow: hidden; }
.faq-item:hover { background: rgba(255, 255, 255, 0.07); }
.faq-question { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.1rem; color: var(--text-color); }
.faq-question i { transition: transform 0.3s; }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; opacity: 0; transition: max-height 0.5s ease-out, opacity 0.5s ease-out; color: var(--text-muted); padding-top: 0; }
.faq-item.active .faq-answer { max-height: 200px; opacity: 1; padding-top: 15px; }

/* --- Sekcja BLOG / AKTUALNOŚCI --- */
.blog { background-color: var(--bg-color); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.blog-post { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; }
.blog-post img { width: 100%; height: 200px; object-fit: cover; }
.blog-post h3 { font-size: 1.4rem; margin: 20px 20px 10px; color: var(--primary-accent); }
.blog-post .post-meta { font-size: 0.9rem; color: var(--text-muted); margin: 0 20px 15px; }
.blog-post p { margin: 0 20px 20px; color: var(--text-muted); flex-grow: 1; }
.blog-post .read-more { display: inline-flex; align-items: center; gap: 5px; color: var(--secondary-accent); font-weight: 600; padding: 0 20px 20px; transition: color 0.3s; }
.blog-post .read-more:hover { color: var(--primary-accent); }
.text-center { text-align: center; }

/* --- Sekcja HARMONOGRAM ZAJĘĆ --- */
.harmonogram { background-color: var(--bg-color); }
.harmonogram-wrapper { display: flex; gap: 30px; margin-top: 60px; flex-wrap: wrap; }
.harmonogram-kurs { flex: 1; min-width: 300px; background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 30px; border-radius: 15px; }
.harmonogram-kurs h3 { font-size: 1.5rem; color: var(--primary-accent); margin-bottom: 20px; border-bottom: 1px solid var(--glass-border); padding-bottom: 15px; }
.schedule-toggle-btn { background: var(--primary-accent); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.3s; margin-bottom: 20px; }
.schedule-toggle-btn:hover { background: var(--secondary-accent); }
.schedule-content { list-style: none; padding-left: 0; counter-reset: zajecia-counter; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.7s ease-out, opacity 0.5s ease-out, margin-top 0.7s ease-out; }
.schedule-content.expanded { max-height: 1000px; opacity: 1; margin-top: 20px; }
.schedule-content li { margin-bottom: 25px; position: relative; padding-left: 50px; }
.schedule-content li::before { counter-increment: zajecia-counter; content: counter(zajecia-counter); position: absolute; left: 0; top: -5px; width: 35px; height: 35px; background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent)); border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; }
.schedule-content li strong { display: block; font-size: 1.2rem; color: var(--text-color); margin-bottom: 5px; }
.schedule-content li p { color: var(--text-muted); font-size: 0.95rem; }

/* Style dla wyróżnienia dat */
.terminy-info p {
    color: var(--text-color);
    margin-bottom: 5px;
    font-size: 1.1rem;
}
.terminy-info p strong {
    color: var(--text-muted);
    font-weight: 400;
}
.terminy-daty {
    margin-top: 15px;
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--primary-accent);
    border-radius: 8px;
    padding: 15px 20px;
}
.terminy-daty h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: var(--text-color);
    padding: 0;
    border-bottom: none;
}
.terminy-daty ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.terminy-daty li {
    padding: 8px 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
    border-top: 1px solid var(--glass-border);
}
.terminy-daty li:first-child {
    border-top: none;
}
.terminy-daty li i {
    color: var(--primary-accent);
    font-size: 1.3rem;
    margin-right: 12px;
}

/* --- Formularz Rejestracyjny --- */
.form-wrapper { background-color: #0c1222; }
#registration-form { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 50px; border-radius: 15px; backdrop-filter: blur(10px); max-width: 800px; margin: 0 auto; }
#registration-form h2 { text-align: left; }
#registration-form p { color: var(--text-muted); margin-bottom: 30px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { margin-bottom: 8px; font-weight: 600; }
.form-group input, .form-group select, .form-group textarea { background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); padding: 12px; border-radius: 8px; color: var(--text-color); font-size: 1rem; width: 100%; box-sizing: border-box; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-accent); box-shadow: 0 0 10px rgba(14, 165, 233, 0.3); }
.form-group select option { background: #fff; color: #000; }
.consent-group { margin: 20px 0; }
.form-group-checkbox { display: flex; align-items: center; margin-bottom: 10px; }
.form-group-checkbox input { width: 18px; height: 18px; margin-right: 12px; }
.p24-button { width: 100%; padding: 15px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor: pointer; color: #fff; margin-top: 20px; background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent)); transition: transform 0.3s, box-shadow 0.3s; }
.p24-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2); }
.p24-button:disabled { background: var(--text-muted); cursor: not-allowed; transform: none; box-shadow: none; }
.error-box { background: #5c2020; color: #ffc2c2; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; display: none; }
.info-box { background: #1c3c54; color: #a4d3f5; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; display: none; }

/* --- Sekcja KONTAKT --- */
.contact { background-color: #0c1222; }
.contact-content { max-width: 800px; margin: 0 auto; text-align: center; }
.contact-content p { margin-bottom: 30px; color: var(--text-muted); }
#contact-form { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 40px; border-radius: 15px; backdrop-filter: blur(10px); text-align: left; }
#contact-form .cta-button { width: 100%; margin-top: 30px; }
#contact-status-message { margin-top: 20px; }

/* --- Stopka i Cookies --- */
footer { text-align: center; padding: 40px 0; border-top: 1px solid var(--glass-border); color: var(--text-muted); }
#cookie-banner { position: fixed; bottom: 20px; left: 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 20px; border-radius: 10px; backdrop-filter: blur(10px); z-index: 1001; display: none; align-items: center; gap: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
#accept-cookies { background: var(--primary-accent); color: #fff; padding: 8px 16px; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s; }
#accept-cookies:hover { background: var(--secondary-accent); }

/* --- Responsywność --- */
@media (max-width: 992px) {
    .navbar .container { flex-wrap: nowrap; justify-content: space-between; }
    .nav-links { order: 3; width: 100%; flex-direction: column; gap: 15px; align-items: flex-start; background: rgba(15, 23, 42, 0.95); padding: 20px; position: absolute; top: 100%; left: 0; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.3s ease-out, opacity 0.3s ease-out; border-top: 1px solid var(--glass-border); }
    .nav-links.active { transform: translateY(0); opacity: 1; pointer-events: all; }
    .nav-links .nav-link { width: 100%; text-align: left; }
    .logo { order: 1; }
    .desktop-nav-button, .desktop-lang-switcher { display: none; }
    .hamburger { display: flex; order: 4; margin-left: 15px; }
    .mobile-nav-button { display: flex; order: 2; padding: 8px 15px; font-size: 0.9rem; margin-left: auto; }
    .mobile-lang-switcher { display: flex; justify-content: flex-start; width: 100%; margin-left: 0; margin-top: 10px; }
    .form-grid { grid-template-columns: 1fr; }
    .course-main-content { flex-direction: column; text-align: center; }
    .about-content { flex-direction: column; }
    .about-text, .about-image { min-width: unset; width: 100%; }
    .blog-grid { grid-template-columns: 1fr; }
    .form-group input, .form-group select, .form-group textarea { padding: 10px; }
}
@media (max-width: 768px) {
    h1 { font-size: 2.2rem; } h2 { font-size: 2rem; }
    .hero { height: auto; padding: 150px 0 100px; }
    .course-item > .course-main-content > img {  max-width: 90%; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .counter-circle { width: 120px; height: 120px; }
    .progressbar-text { font-size: 1.5rem; }
    .counter-item h3 { font-size: 0.9rem; }
    
    .testimonials-grid { 
        position: relative;
        min-height: 420px;
        display: block;
    }
    .testimonial-item {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 0.7s ease-in-out;
        pointer-events: none;
    }
    .testimonial-item.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .gallery-wrapper {
        overflow: hidden;
    }
    .gallery-container {
        overflow: hidden;
    }
    .gallery-scroll {
        animation: auto-scroll 5s linear infinite;
    }
    .gallery-scroll:hover {
        animation-play-state: paused;
    }

    #registration-form, #contact-form { padding: 30px; }
    .faq-item { padding: 15px 20px; }
    .faq-question { font-size: 1rem; }
    .blog-post h3 { font-size: 1.2rem; }
    .navbar { padding: 10px 0; }
    .nav-button { padding: 6px 15px; }
    #cookie-banner { flex-direction: column; text-align: center; left: 10px; right: 10px; bottom: 10px; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 1rem; }
    .cta-button { padding: 12px 25px; font-size: 1rem; }
    h2 { font-size: 1.8rem; margin-bottom: 40px; }
    .form-grid { grid-template-columns: 1fr; }
}