/* ==========================================================================
   4. GLOBALNE PASTELOWE TŁO STRONY (PASTELOWY DYM / MESH GRADIENT)
   ========================================================================== */
.page-bg-wrapper {
    position: relative;
    overflow: hidden;
    
    /* Podstawowe jasne tło jako baza */
    background-color: #FFF8F9; 
    
    /* 
       EFEKT DYMU DS2: Nakładające się na siebie ogromne, rozmyte chmury pastelowe.
       Używamy kolorów: delikatny róż, pastelowy błękit i jasny pomarańcz z dużą przezroczystością.
    */
    background-image: 
        radial-gradient(at 0% 0%, rgba(255, 240, 243, 0.9) 0px, transparent 50%),   /* Róż z menu w lewym górnym rogu */
        radial-gradient(at 90% 20%, rgba(255, 94, 36, 0.08) 0px, transparent 45%), /* Ciepły pomarańcz po prawej */
        radial-gradient(at 20% 60%, rgba(13, 110, 253, 0.06) 0px, transparent 50%), /* Subtelny błękit w środkowej strefie */
        radial-gradient(at 80% 80%, rgba(255, 227, 232, 0.7) 0px, transparent 50%);  /* Miękka plama różu na dole */
    
    font-family: 'Comfortaa', cursive;
    color: var(--color-primary-dark);
    z-index: 1;
}

/* Tworzymy warstwę "żyjącego dymu", która będzie powoli pływać w tle całej strony */
.page-bg-wrapper::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -20%;
    width: 140%;
    height: 140%;
    background-image: 
        radial-gradient(at 40% 30%, rgba(255, 94, 36, 0.05) 0px, transparent 40%),
        radial-gradient(at 70% 70%, rgba(13, 110, 253, 0.05) 0px, transparent 40%);
    animation: liquidSmoke 25s infinite alternate ease-in-out;
    z-index: -1;
    opacity: 0.8;
    pointer-events: none;
}

/* Animacja powolnego mieszania się i falowania kłębów dymu */
@keyframes liquidSmoke {
    0% {
        transform: translate(0px, 0px) rotate(0deg) scale(1);
    }
    50% {
        transform: translate(40px, -60px) rotate(45deg) scale(1.05);
    }
    100% {
        transform: translate(-20px, 20px) rotate(90deg) scale(0.98);
    }
}

/* Wszelkie kontenery wewnątrz sekcji muszą być nad tłem */
.page-bg-wrapper > section {
    position: relative;
    z-index: 2;
    background: transparent !important; /* Wymuszamy przezroczystość sekcji, by dym przebijał */
}

/* Stylizacja elementów tekstowych i szklanych kafelków */
.page-bg-wrapper h1, 
.page-bg-wrapper h2, 
.page-bg-wrapper h3, 
.page-bg-wrapper h4 {
    font-family: 'Comfortaa', cursive;
}

.google-reviews-box {
    background-color: rgba(255, 255, 255, 0.85); /* Subtelna przezroczystość */
    backdrop-filter: blur(10px); /* Efekt matowego szkła */
    border: 1px solid rgba(255, 94, 36, 0.1);
    box-shadow: 0 10px 30px rgba(17, 11, 85, 0.04) !important;
}

.feature-badge {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 94, 36, 0.08);
    box-shadow: 0 10px 25px rgba(17, 11, 85, 0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 94, 36, 0.1) !important;
}

.feature-icon-wrapper {
    background: linear-gradient(135deg, #FF5E24, #FF8052) !important;
    border-radius: 12px !important;
}

/* ==========================================================================
   6. EFEKT BOKEH: 15 MIĘKKICH KULECZEK ROZRZUCONYCH PIONOWO PO CAŁEJ STRONIE
   ========================================================================== */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px); 
    pointer-events: none;
    z-index: 0;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    mix-blend-mode: multiply; 
}

/* Wartości 'top' zostały zmapowane od góry do dołu całej witryny (5% - 97%) */
.orb:nth-child(1) { top: 5%; left: 8%; width: 22px; height: 22px; animation: smoothDrift 15s infinite alternate ease-in-out; background: rgba(255, 94, 36, 0.45); }
.orb:nth-child(2) { top: 12%; left: 78%; width: 14px; height: 14px; animation: smoothDrift 20s infinite alternate ease-in-out; background: rgba(13, 110, 253, 0.45); }
.orb:nth-child(3) { top: 20%; left: 15%; width: 34px; height: 34px; animation: smoothDrift 18s infinite alternate ease-in-out; background: rgba(255, 140, 160, 0.55); }
.orb:nth-child(4) { top: 28%; left: 48%; width: 18px; height: 18px; animation: smoothDrift 25s infinite alternate ease-in-out; background: rgba(255, 94, 36, 0.35); }
.orb:nth-child(5) { top: 38%; left: 82%; width: 26px; height: 26px; animation: smoothDrift 12s infinite alternate ease-in-out; background: rgba(13, 110, 253, 0.4); }
.orb:nth-child(6) { top: 48%; left: 28%; width: 16px; height: 16px; animation: smoothDrift 22s infinite alternate ease-in-out; background: rgba(255, 160, 180, 0.5); }
.orb:nth-child(7) { top: 58%; left: 90%; width: 20px; height: 20px; animation: smoothDrift 16s infinite alternate ease-in-out; background: rgba(255, 94, 36, 0.35); }
.orb:nth-child(8) { top: 65%; left: 42%; width: 24px; height: 24px; animation: smoothDrift 19s infinite alternate ease-in-out; background: rgba(13, 110, 253, 0.35); }
.orb:nth-child(9) { top: 72%; left: 12%; width: 16px; height: 16px; animation: smoothDrift 14s infinite alternate ease-in-out; background: rgba(255, 150, 170, 0.5); }
.orb:nth-child(10) { top: 78%; left: 5%; width: 30px; height: 30px; animation: smoothDrift 28s infinite alternate ease-in-out; background: rgba(255, 94, 36, 0.45); }
.orb:nth-child(11) { top: 84%; left: 62%; width: 12px; height: 12px; animation: smoothDrift 11s infinite alternate ease-in-out; background: rgba(13, 110, 253, 0.45); }
.orb:nth-child(12) { top: 90%; left: 88%; width: 22px; height: 22px; animation: drift 24s infinite alternate ease-in-out; background: rgba(255, 170, 190, 0.45); }
.orb:nth-child(13) { top: 42%; left: 10%; width: 18px; height: 18px; animation: smoothDrift 17s infinite alternate ease-in-out; background: rgba(255, 94, 36, 0.4); }
.orb:nth-child(14) { top: 55%; left: 74%; width: 14px; height: 14px; animation: smoothDrift 21s infinite alternate ease-in-out; background: rgba(13, 110, 253, 0.4); }
.orb:nth-child(15) { top: 97%; left: 35%; width: 24px; height: 24px; animation: smoothDrift 13s infinite alternate ease-in-out; background: rgba(255, 160, 180, 0.55); }

/* NOWA, HIPNOTYZUJĄCA I PŁYNNA ANIMACJA DRYFU DROBIN */
@keyframes smoothDrift {
    0% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.35; 
    }
    50% {
        opacity: 0.75; 
    }
    100% { 
        transform: translate(35px, -35px) scale(1.15); 
        opacity: 0.45; 
    }
}