/* ==========================================================================
   AKADEMIA RADOŚCI JAROCIN — ARKUSZ STYLÓW
   Kierunek: "kredkowy plac zabaw" — pastelowa, ręcznie rysowana energia
   dziecięcej radości ujęta w czystą, dopracowaną typografię i szkło.
   Display: Fredoka (zaokrąglony, radosny) • Body: Nunito (czytelny, ciepły)
   ========================================================================== */

/* ==========================================================================
   1. ZMIENNE GLOBALNE
   ========================================================================== */
:root {
    /* Paleta marki */
    --bubblegum: #ff6fa5;   /* główny, radosny róż (CTA) */
    --blush:     #ffb5c6;   /* miękki róż */
    --magenta:   #d81b60;   /* głęboki akcent / nagłówki / linki */
    --sky:       #8ecae6;   /* błękit */
    --sunshine:  #ffd166;   /* słoneczny żółty */
    --mint:      #a8e6cf;   /* mięta */
    --paper:     #fffaf3;   /* ciepła kremowa biel */

    /* Zgodność wstecz (stare nazwy używane w wielu miejscach) */
    --primary-pink: #ffb5c6;
    --hover-pink: #ff9fb4;
    --secondary-blue: #d4e6f1;
    --accent-yellow: #ffdfba;
    --accent-green: #baffc9;

    /* Typografia — Baloo 2 ma pełne polskie znaki diakrytyczne (ś, ć, ż, ń, ł, ą, ę),
       jest zaokrąglony i przyjazny dzieciom, a zarazem czytelny i profesjonalny. */
    --font-display: 'Baloo 2', 'Nunito', 'Quicksand', sans-serif;
    --font-body: 'Nunito', 'Quicksand', system-ui, sans-serif;
    --text-dark: #2b2b3a;
    --text-light: #5b5b6b;

    /* Szkło i UI */
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-border: 1px solid rgba(255, 255, 255, 0.65);
    --glass-blur: blur(12px);

    --radius-lg: 24px;
    --radius-sm: 12px;
    --soft-shadow: 0 10px 30px rgba(43, 43, 58, 0.06);
    --hover-shadow: 0 18px 40px rgba(255, 111, 165, 0.22);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   2. RESET & TŁO
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: #fdfbfb;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, .section-title, .modal-title, .hero__title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.crayon-background {
    background-image: url('images/tlo.svg');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
section { padding: 90px 0; }

.section-title {
    text-align: center;
    font-size: 2.7rem;
    margin-bottom: 25px;
    color: var(--text-dark);
    font-weight: 700;
    position: relative;
}
.subtitle { text-align: center; color: var(--text-light); font-size: 1.15rem; margin-bottom: 50px; }

/* ==========================================================================
   3. PRZYCISKI & KARTY (SZKŁO)
   ========================================================================== */
.card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--soft-shadow);
    padding: 30px;
    transition: var(--transition);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--hover-shadow); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 35px; font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 600; text-decoration: none;
    border-radius: 50px; transition: var(--transition); cursor: pointer;
    border: none; text-align: center;
}
.btn-primary { background-color: var(--bubblegum); color: #fff; box-shadow: 0 12px 24px rgba(255, 111, 165, 0.35); }
.btn-primary:hover { background-color: var(--magenta); transform: translateY(-3px); box-shadow: var(--hover-shadow); }
.btn-secondary { background: var(--glass-bg); border: var(--glass-border); color: var(--text-dark); box-shadow: var(--soft-shadow); }
.btn-secondary:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.btn-outline { background: transparent; border: 2px solid var(--blush); color: var(--magenta); padding: 10px 25px; }
.btn-outline:hover { background: var(--bubblegum); border-color: var(--bubblegum); color: #fff; }
.btn-sm { font-size: 0.95rem; padding: 9px 22px; }
.btn-glow { animation: glow 2.5s infinite alternate; }
@keyframes glow {
    from { box-shadow: 0 0 12px rgba(255, 111, 165, 0.4); }
    to   { box-shadow: 0 0 28px rgba(255, 111, 165, 0.85); }
}
@media (prefers-reduced-motion: reduce) { .btn-glow { animation: none; } html { scroll-behavior: auto; } }

/* ==========================================================================
   4. NAGŁÓWEK + WORDMARK Z ISKIERKAMI
   ========================================================================== */
.header {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: var(--glass-border);
    height: 104px; position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center;
}
.header__inner { display: flex; justify-content: space-between; align-items: center; height: 100%; }

/* Wordmark = nasze logo — duży, elegancki, profesjonalny tekst */
.brand-wordmark {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: flex-start;
    text-decoration: none; line-height: 0.98; padding: 6px 4px;
    font-family: var(--font-display);
    isolation: isolate;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; touch-action: manipulation;
    cursor: pointer;
}
.brand-wordmark__main {
    font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em;
    background: linear-gradient(100deg, var(--magenta) 0%, var(--bubblegum) 45%, var(--sky) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--magenta);
}
.brand-wordmark__sub {
    font-size: 1.02rem; font-weight: 700; letter-spacing: 0.5em; text-transform: uppercase;
    color: var(--text-light); margin-top: 4px; padding-left: 4px;
}
.brand-wordmark:hover .brand-wordmark__main { filter: saturate(1.15); }

/* Pasek postępu przy przytrzymaniu (sekretne wejście do panelu) */
.brand-wordmark__hold {
    position: absolute; left: 4px; right: 4px; bottom: -6px; height: 4px;
    border-radius: 4px; background: linear-gradient(90deg, var(--magenta), var(--bubblegum), var(--sunshine));
    transform: scaleX(0); transform-origin: left center; opacity: 0;
    transition: opacity 0.2s ease;
}
.brand-wordmark.holding .brand-wordmark__hold { opacity: 1; transform: scaleX(1); transition: transform 4s linear, opacity 0.2s ease; }

/* Warstwa iskierek (SparklesText – port) */
.spark-layer { position: absolute; inset: -10px -16px; pointer-events: none; z-index: -1; }
.spark { will-change: transform, opacity; }
@keyframes spark-flicker {
    0%, 100% { opacity: 0; transform: scale(0) rotate(75deg); }
    50%      { opacity: 1; transform: scale(var(--spark-scale, 0.6)) rotate(120deg); }
}

/* Flagi i dropdown */
.header__controls { display: flex; align-items: center; gap: 15px; }
.lang-toggle-btn { display: none; background: transparent; border: none; font-size: 1.8rem; cursor: pointer; transition: var(--transition); }
.lang-dropdown { display: flex; gap: 12px; }
.lang-dropdown a { opacity: 0.5; transition: var(--transition); display: inline-flex; }
.lang-dropdown a:hover, .lang-dropdown a.active { opacity: 1; transform: scale(1.12); }

/* ==========================================================================
   5. HERO (czytelność ponad kredkowym tłem)
   ========================================================================== */
.hero { text-align: center; padding: 110px 20px 120px; position: relative; }
.hero__content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
/* Miękki świetlny "oddech" unoszący tekst znad gęstego tła */
.hero::before {
    content: ''; position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
    width: min(1100px, 96%); height: 620px; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.7) 42%, rgba(255,255,255,0) 72%);
    filter: blur(6px);
}

.badge-pill {
    display: inline-block; background: var(--sunshine); color: #5a4300;
    padding: 12px 28px; border-radius: 50px; font-size: 1.05rem; font-weight: 700;
    margin-bottom: 22px; box-shadow: 0 10px 24px rgba(255, 209, 102, 0.4);
}
.hero__eyebrow {
    font-family: var(--font-display); font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; font-size: 0.9rem; color: var(--magenta); margin-bottom: 10px;
}
/* GooeyText – rotujące hasła */
.hero__gooey {
    position: relative; height: 3.4rem; margin: 4px auto 14px; min-width: 280px;
    filter: url(#gooey-threshold);
}
.gooey-word {
    position: absolute; left: 0; right: 0; top: 0; margin: 0 auto;
    font-family: var(--font-display); font-weight: 700; font-size: 2.6rem;
    color: var(--bubblegum); white-space: nowrap; text-align: center;
}
.hero__gooey.gooey-static .gooey-word { position: relative; filter: none; }

.hero__title {
    position: relative; font-size: 3.4rem; line-height: 1.1; margin: 8px auto 26px;
    max-width: 18ch; color: var(--text-dark); font-weight: 700;
    text-shadow: 0 1px 0 #fff, 0 2px 14px rgba(255,255,255,0.85);
}

.hero-glass-panel, .about-glass-panel {
    background: rgba(255, 255, 255, 0.86);
    padding: 34px; border-radius: 22px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 36px rgba(43,43,58,0.10);
    border: 1px solid rgba(255,255,255,0.75); margin: 0 auto;
}
.hero-glass-panel { max-width: 950px; margin-bottom: 32px; }
.hero__subtitle { color: #2b2b3a; font-weight: 600; line-height: 1.75; margin: 0; font-size: 1.18rem; }
.about-glass-panel { max-width: 1000px; }
.about__text { font-weight: 600; color: #333; font-size: 1.2rem; line-height: 1.8; margin: 0; }
.hero__actions { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.about { padding-top: 20px; }

/* ==========================================================================
   6. NAGŁÓWKI SEKCJI (W SZKLE) + kredkowe podkreślenie
   ========================================================================== */
.section-header-glass {
    display: inline-block; background: rgba(255, 255, 255, 0.92);
    padding: 16px 46px; border-radius: 50px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(43,43,58,0.08);
    border: 1px solid rgba(255,255,255,0.85); margin-bottom: 42px;
}
.section-header-glass .section-title { margin-bottom: 0; }
.section-header-glass.large { border-radius: 25px; padding: 26px 46px; }

/* Tytuł stref jako animowany gradient (zachowany efekt) */
.zones .section-title {
    background: linear-gradient(135deg, #ff6fa5, #ffb5c6, #ffd166, #a8e6cf);
    background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: gradientShine 6s linear infinite;
}
@keyframes gradientShine { to { background-position: 300% center; } }
@media (prefers-reduced-motion: reduce) { .zones .section-title { animation: none; } }

/* ==========================================================================
   7. STREFY
   ========================================================================== */
.zones-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.zone-card { flex: 1 1 320px; max-width: 400px; text-align: center; cursor: pointer; display: flex; flex-direction: column; }
.zone-card__image-wrapper { width: 100%; height: 220px; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 20px; }
.zone-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.zone-card:hover .zone-card__image { transform: scale(1.1); }
.zone-card h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--text-dark); }
.zone-card p { color: var(--text-light); margin-bottom: 20px; flex-grow: 1; }

/* ==========================================================================
   8. DLACZEGO WARTO — KARTY PREMIUM
   ========================================================================== */
.benefits-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; }
.benefit-item.premium-benefit-card {
    flex: 1 1 350px; max-width: 500px;
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(145deg, #ffffff, #fdfbfb);
    border-left: 6px solid var(--blush);
    box-shadow: 0 15px 35px rgba(43,43,58,0.06);
    border-radius: 16px; padding: 25px; transition: var(--transition);
}
.premium-benefit-card:hover { transform: translateY(-8px); box-shadow: 0 25px 45px rgba(255, 111, 165, 0.28); border-left-color: var(--magenta); }
.premium-icon-wrapper {
    background: linear-gradient(135deg, var(--bubblegum), var(--blush));
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 8px 20px rgba(255, 111, 165, 0.45); flex-shrink: 0;
}
.benefit-item__text { font-weight: 700; color: #333; font-size: 1.12rem; margin: 0; }

/* ==========================================================================
   9. OFERTA
   ========================================================================== */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }
.offer-card { background: rgba(255,255,255,0.92); padding: 30px; border-radius: 20px; box-shadow: var(--soft-shadow); border-top: 5px solid var(--blush); transition: var(--transition); text-align: left; }
.offer-card:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(255, 111, 165, 0.22); border-top-color: var(--bubblegum); }
.offer-card h4 { display: flex; align-items: center; gap: 12px; color: var(--magenta); font-size: 1.35rem; margin-bottom: 15px; font-weight: 700; }
.offer-ico { flex-shrink: 0; width: 48px; height: 48px; display: inline-flex; }
.offer-ico svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 5px 10px rgba(43,43,58,0.10)); transition: transform 0.35s ease; }
.offer-card:hover .offer-ico svg { transform: rotate(-6deg) scale(1.08); }
.offer-title-text { line-height: 1.15; }
.offer-emoji { font-size: 2.1rem; display: inline-block; margin-right: 10px; line-height: 1; }
.offer-card p { font-weight: 700; color: #444; margin-bottom: 10px; }
.offer-card ul { list-style: none; padding: 0; color: #555; font-weight: 600; }
.offer-card li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.offer-card li::before { content: '✔️'; position: absolute; left: 0; top: 1px; font-size: 0.9rem; }

/* ==========================================================================
   9b. CO ZYSKUJESZ TY I TWOJE DZIECKO
   ========================================================================== */
.value-intro { max-width: 720px; margin: -18px auto 42px; font-weight: 700; color: var(--text-light); font-size: 1.14rem; }
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.value-card { background: rgba(255,255,255,0.95); border-radius: var(--radius-lg); box-shadow: var(--soft-shadow); padding: 36px 34px; text-align: left; border: 1px solid rgba(255,255,255,0.7); transition: var(--transition); }
.value-card:hover { transform: translateY(-8px); box-shadow: var(--hover-shadow); }
.value-card--parent { border-top: 6px solid var(--bubblegum); }
.value-card--child { border-top: 6px solid var(--sky); }
.value-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.value-card__icon { width: 64px; height: 64px; flex-shrink: 0; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bubblegum), var(--blush)); box-shadow: 0 10px 22px rgba(255,111,165,0.4); }
.value-card__icon--child { background: linear-gradient(135deg, var(--sky), var(--mint)); box-shadow: 0 10px 22px rgba(142,202,230,0.45); }
.value-card__icon svg { width: 42px; height: 42px; }
.value-card__head h3 { font-size: 1.5rem; color: var(--text-dark); }
.value-list { list-style: none; padding: 0; margin: 0; }
.value-list li { position: relative; padding-left: 36px; margin-bottom: 16px; font-weight: 600; color: #444; line-height: 1.5; }
.value-list li:last-child { margin-bottom: 0; }
.value-list li::before { content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--bubblegum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: 0 4px 10px rgba(255,111,165,0.35); }
.value-card--child .value-list li::before { background-color: var(--sky); box-shadow: 0 4px 10px rgba(142,202,230,0.4); }
@media (max-width: 768px) { .value-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   10. DLA KOGO + GALERIA
   ========================================================================== */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.audience-item { text-align: center; padding: 40px 20px; }
.audience-item svg { margin-bottom: 15px; }
.audience-item h4 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text-dark); }
.audience-item p { color: var(--text-light); }

.masonry-grid { column-count: 3; column-gap: 20px; padding: 20px 0; }
.masonry-item { break-inside: avoid; margin-bottom: 20px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--soft-shadow); }
.gallery-img-trigger { width: 100%; display: block; transition: transform 0.4s ease; cursor: zoom-in; }
.masonry-item:hover .gallery-img-trigger { transform: scale(1.05); }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item {
    background: rgba(255, 255, 255, 0.98); border-radius: var(--radius-sm);
    margin-bottom: 15px; box-shadow: 0 10px 25px rgba(43,43,58,0.08);
    border: 1px solid rgba(255, 181, 198, 0.4); overflow: hidden;
}
.faq-question { width: 100%; text-align: left; padding: 20px 25px; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--text-dark); background: transparent; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: var(--transition); }
.faq-question:hover { color: var(--magenta); }
.faq-icon { font-size: 1.5rem; transition: transform 0.3s ease; flex-shrink: 0; }
.faq-answer { max-height: 0; overflow: hidden; padding: 0 25px; color: var(--text-light); transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-item.active .faq-answer { padding: 0 25px 20px; max-height: 500px; }
.faq-item.active .faq-icon { transform: rotate(45deg); }

/* ==========================================================================
   12. KONTAKT + WIZYTÓWKA PREMIUM + FORMULARZ
   ========================================================================== */
.contact-container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: stretch; }

.contact-business-card.premium-contact-card {
    background: #ffffff; border: none; border-radius: 30px;
    box-shadow: 0 20px 40px rgba(216, 27, 96, 0.10), inset 0 0 0 4px rgba(255, 181, 198, 0.3);
    position: relative; overflow: hidden; padding: 50px 40px; z-index: 1; text-align: center;
    display: flex; flex-direction: column; justify-content: center;
}
.premium-contact-card::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,181,198,0.16) 50%, rgba(255,255,255,0) 100%);
    animation: rotateCardLight 10s linear infinite; z-index: -1;
}
@keyframes rotateCardLight { 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .premium-contact-card::after { animation: none; } }
.premium-card-avatar { margin-bottom: 25px; display: flex; justify-content: center; }
.avatar-circle { width: 100px; height: 100px; background: linear-gradient(135deg, var(--bubblegum), var(--blush)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; box-shadow: 0 15px 25px rgba(255, 111, 165, 0.45); border: 5px solid white; }
.contact-card__title { font-size: 2rem; color: var(--magenta); font-weight: 700; margin-bottom: 30px; line-height: 1.2; }
.contact-card__details { margin-bottom: 30px; }
.contact-card__person strong { font-size: 1.6rem; color: #333; display: block; }
.contact-card__role { display: block; font-weight: 800; color: var(--magenta); margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.95rem; }
.contact-card__phone { margin-top: 14px; margin-bottom: 30px; }
.contact-card__phone a { font-size: 2.1rem; font-family: var(--font-display); font-weight: 700; background: linear-gradient(135deg, var(--magenta), var(--bubblegum)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; display: inline-block; transition: var(--transition); }
.contact-card__phone a:hover { transform: scale(1.05); }
.btn-facebook { background: #1877F2; color: white; width: 100%; box-shadow: 0 10px 20px rgba(24, 119, 242, 0.3); }
.btn-facebook:hover { background: #166FE5; }

/* Plamy farby przy formularzu */
.paint-splatters { position: relative; }
.paint-splatters::before, .paint-splatters::after { content: ''; position: absolute; width: 250px; height: 250px; background-repeat: no-repeat; background-size: contain; z-index: -1; opacity: 0.7; }
.paint-splatters::before { top: -60px; left: -60px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffb5c6' d='M45.7,-76.3C58.9,-69.3,69.1,-55.3,77.5,-40.7C85.9,-26.1,92.5,-11,90.4,3.2C88.3,17.4,77.5,30.7,66.8,42.8C56.1,54.9,45.4,65.8,32.2,73.1C19,80.4,3.3,84.1,-11.5,82.4C-26.3,80.7,-40.2,73.6,-52.1,64.1C-64,54.6,-73.9,42.7,-80.1,28.8C-86.3,14.9,-88.8,-1.1,-85.2,-15.8C-81.6,-30.5,-71.9,-44,-60,-52.8C-48.1,-61.6,-34,-65.7,-20.5,-68.8C-7,-71.9,5.9,-74,19.6,-76.2C33.3,-78.4,45.7,-76.3Z' transform='translate(100 100)' /%3E%3C/svg%3E"); }
.paint-splatters::after { bottom: -60px; right: -60px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23d4e6f1' d='M58,-70.6C72.8,-60.8,81.1,-41.8,82.3,-23.5C83.4,-5.3,77.4,12.3,67.6,28.2C57.8,44.1,44.2,58.4,28.2,65.6C12.3,72.8,-6.1,72.9,-22.4,67.2C-38.7,61.4,-53.1,49.8,-63.3,35C-73.5,20.2,-79.6,2.2,-75.6,-13.7C-71.6,-29.6,-57.6,-43.3,-41.9,-53.4C-26.1,-63.5,-8.6,-70,10.6,-72.6C29.7,-75.3,43.2,-80.4,58,-70.6Z' transform='translate(100 100)' /%3E%3C/svg%3E"); }

.form-card { padding: 40px; background: rgba(255, 255, 255, 0.94); border-radius: var(--radius-lg); box-shadow: var(--soft-shadow); border: 1px solid rgba(255,255,255,0.7); }
.form-card__heading { font-family: var(--font-display); font-weight: 700; color: var(--magenta); text-align: left; font-size: 2rem; margin-bottom: 6px; }
.form-card__intro { color: var(--text-light); font-weight: 600; margin-bottom: 24px; }

.form-row { display: flex; gap: 20px; }
.form-row .form-group { flex: 1; }
.form-group { margin-bottom: 18px; }
input, select, textarea { width: 100%; max-width: 100%; min-width: 0; padding: 16px; border: 2px solid transparent; border-radius: var(--radius-sm); background: #f4f6f8; font-family: var(--font-body); font-size: 1rem; color: var(--text-dark); transition: var(--transition); -webkit-appearance: none; appearance: none; }
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; }
input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: var(--bubblegum); box-shadow: 0 0 0 4px rgba(255, 111, 165, 0.15); }

/* Zestaw daty + godzin pod Google Calendar */
.form-fieldset { background: linear-gradient(180deg, rgba(255,209,102,0.10), rgba(168,230,207,0.08)); border: 1px dashed rgba(255, 111, 165, 0.4); border-radius: var(--radius-sm); padding: 18px; margin-bottom: 18px; }
.form-fieldset__legend { display: block; font-family: var(--font-display); font-weight: 600; color: var(--magenta); margin-bottom: 12px; font-size: 1rem; }
.form-row--3 { gap: 14px; }
.field-label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-light); margin-bottom: 6px; padding-left: 4px; }
.form-hint { margin: 10px 2px 0; font-size: 0.85rem; color: var(--text-light); font-weight: 600; }

/* Kalendarz dostępności w formularzu */
.availability { background: #fff; border: 1px solid rgba(255,111,165,0.25); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 18px; box-shadow: var(--soft-shadow); }
.availability__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.availability__title { font-family: var(--font-display); font-weight: 700; color: var(--magenta); }
.availability__legend { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; font-weight: 700; color: var(--text-light); }
.availability__legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot--free { background: #a8e6cf; }
.dot--busy { background: #ff6fa5; }
.availability__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.availability__month { font-weight: 700; font-family: var(--font-display); text-transform: capitalize; color: var(--text-dark); }
.availability__nav { background: #fff0f5; border: none; color: var(--magenta); width: 34px; height: 34px; border-radius: 10px; font-size: 1.3rem; cursor: pointer; font-weight: 800; line-height: 1; transition: var(--transition); }
.availability__nav:hover { background: var(--bubblegum); color: #fff; }
.availability__weekdays, .availability__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.availability__weekdays span { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; padding: 4px 0; }
.cal-cell { aspect-ratio: 1 / 1; border: none; border-radius: 9px; background: #f4f6f8; font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; color: var(--text-dark); cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 0; }
.cal-cell--empty { background: transparent; cursor: default; }
.cal-cell--free { background: #e8f8f0; color: #2e8b6b; }
.cal-cell--free:hover { background: #a8e6cf; transform: translateY(-2px); }
.cal-cell--busy { background: #ffe0ec; color: #d81b60; }
.cal-cell--past { background: transparent; color: #c7c7cf; cursor: not-allowed; }
.cal-cell--selected { background: var(--bubblegum) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(255,111,165,0.45); }
.availability__hint { margin: 10px 2px 0; font-size: 0.82rem; color: var(--text-light); font-weight: 600; }
.availability__note { margin: 8px 0 0; padding: 8px 12px; background: #ffe0ec; color: #d81b60; border-radius: 8px; font-size: 0.85rem; font-weight: 700; }
.availability__note[hidden] { display: none; }

.modern-datepicker { cursor: pointer; }
.modern-datepicker::-webkit-calendar-picker-indicator { background-color: var(--bubblegum); padding: 8px; border-radius: 8px; cursor: pointer; background-image: url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/></svg>'); transition: var(--transition); }
.modern-datepicker::-webkit-calendar-picker-indicator:hover { background-color: var(--magenta); transform: scale(1.1); }
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(38%) sepia(72%) saturate(2600%) hue-rotate(310deg); cursor: pointer; }

.custom-checkbox { display: flex; align-items: center; position: relative; padding-left: 35px; cursor: pointer; font-size: 0.95rem; user-select: none; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: #eee; border-radius: 6px; transition: var(--transition); }
.custom-checkbox:hover input ~ .checkmark { background-color: #ccc; }
.custom-checkbox input:checked ~ .checkmark { background-color: var(--bubblegum); }
.checkmark:after { content: ""; position: absolute; display: none; left: 8px; top: 4px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.checkbox-text a { color: var(--text-dark); text-decoration: underline; }
.btn-submit { width: 100%; margin-top: 10px; font-size: 1.2rem; }

/* ==========================================================================
   13. MODALE I LIGHTBOX
   ========================================================================== */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 20px; }
.modal.show { display: flex; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content { width: 100%; max-width: 600px; position: relative; padding: 50px 40px 40px; max-height: 90vh; overflow-y: auto; animation: slideUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.legal-content { max-width: 800px; }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.close-modal { position: absolute; top: 15px; right: 15px; background: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 10; color: var(--magenta); font-size: 2rem; font-weight: 700; cursor: pointer; transition: var(--transition); }
.close-modal:hover { color: #fff; background: var(--bubblegum); transform: rotate(90deg); }
.modal-title { font-size: 2.3rem; margin-bottom: 15px; color: var(--magenta); font-weight: 700; text-shadow: 0 2px 5px rgba(216, 27, 96, 0.15); }
.modal-desc { margin-bottom: 20px; font-size: 1.1rem; }
.modal-includes h4 { margin-bottom: 10px; }
.modal-includes p { color: var(--text-light); margin-bottom: 20px; }
.price-tag { display: inline-block; background: var(--mint); padding: 8px 15px; border-radius: var(--radius-sm); font-weight: 700; margin-bottom: 25px; }
.legal-text-scrollable { max-height: 400px; overflow-y: auto; padding-right: 15px; color: var(--text-light); }
.legal-text-scrollable p { margin-bottom: 12px; }
.mt-20 { margin-top: 20px; }

.lightbox { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; }
.lightbox.show { display: flex; }
.lightbox-content { max-width: 90%; max-height: 90%; border-radius: var(--radius-sm); border: 10px solid white; }
.close-lightbox { position: absolute; top: 30px; right: 40px; color: white; font-size: 40px; cursor: pointer; }

/* ==========================================================================
   14. STOPKA + KOMUNIKAT DEWELOPERSKI + SUKCES
   ========================================================================== */
.main-footer { background: rgba(255,255,255,0.92); padding: 30px 0; color: var(--text-light); border-top: 1px solid rgba(0,0,0,0.05); }
.db-status { position: fixed; bottom: 10px; right: 10px; background: rgba(0,0,0,0.82); color: #fff; padding: 10px 18px; border-radius: 18px; font-size: 0.85rem; z-index: 9999; max-width: 320px; }
.db-status code { color: #ffd166; }

.success-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; animation: fadeInOverlay 0.5s ease forwards; padding: 20px; }
.success-box { background: #fff; padding: 50px; border-radius: 30px; text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,0.15); max-width: 500px; transform: scale(0.5); animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; position: relative; overflow: hidden; }
.success-icon { font-size: 5rem; display: block; margin-bottom: 20px; animation: bounceIcon 1s infinite alternate ease-in-out; }
.success-box h2 { color: var(--magenta); font-size: 2.2rem; margin-bottom: 15px; font-weight: 700; }
.success-box p { font-size: 1.15rem; color: #555; margin-bottom: 30px; font-weight: 600; }
@keyframes fadeInOverlay { to { opacity: 1; } }
@keyframes popIn { to { transform: scale(1); } }
@keyframes bounceIcon { from { transform: translateY(0); } to { transform: translateY(-10px) scale(1.1); } }

/* ==========================================================================
   15. EFEKTY SCROLLA: REVEAL + VAPORIZE
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.25,0.8,0.25,1), transform 0.7s cubic-bezier(0.25,0.8,0.25,1); }
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* Element z efektem vaporize */
[data-vaporize] { position: relative; }
.vaporize-canvas { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 0.15s linear; z-index: 2; }
.is-vaporizing { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; }
/* Wariant awaryjny (mobile / reduced motion): czysty zanik przy scrollu nie jest stosowany,
   element pozostaje normalnie widoczny */
.vaporize-fade-fallback { }

/* ==========================================================================
   16. RESPONSYWNOŚĆ
   ========================================================================== */
@media (max-width: 1024px) {
    .contact-container { grid-template-columns: 1fr; }
    .paint-splatters::before, .paint-splatters::after { display: none; }
}

@media (max-width: 768px) {
    body { font-size: 1.05rem; }
    .header { height: 92px; }
    .brand-wordmark__main { font-size: 2.1rem; }
    .brand-wordmark__sub { font-size: 0.78rem; letter-spacing: 0.4em; }

    .lang-toggle-btn { display: block; color: var(--text-dark); }
    .lang-dropdown { display: none; position: absolute; top: 92px; right: 20px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: var(--glass-border); padding: 15px; border-radius: var(--radius-sm); flex-direction: column; box-shadow: var(--soft-shadow); }
    .lang-dropdown.show { display: flex; }

    .hero__title { font-size: 2.5rem; }
    .gooey-word { font-size: 2rem; }
    .hero__gooey { height: 2.6rem; }
    .section-title { font-size: 2.1rem; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
    .masonry-grid { column-count: 2; }
    .form-row { flex-direction: column; gap: 0; }
    .form-row--3 { flex-direction: row; gap: 10px; }
    .form-row--3 .form-group { margin-bottom: 0; }
    .hero__actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .masonry-grid { column-count: 1; }
    .grid-4 { grid-template-columns: 1fr; }
    .brand-wordmark__main { font-size: 1.78rem; }
    .brand-wordmark__sub { font-size: 0.68rem; letter-spacing: 0.34em; }
    .hero { padding: 70px 16px 90px; }
    .hero__title { font-size: 2.1rem; }
    .form-row--3 { flex-direction: column; gap: 0; }
    .form-row--3 .form-group { margin-bottom: 14px; }
    .contact-business-card { padding: 30px 20px; }
    .section-header-glass { padding: 14px 28px; }
}