/* =====================================================================
   SPA LUXURY MOBILE – MOTYW „ZŁOTY LUX" (ładowany jako ostatni arkusz)

   Rozświetlone tło SPA (ciepłe złote światło, szmaragdowa zieleń, rośliny,
   mokre kamienie, świece, smartfony, laptop i mikroskop), lustrzane złoto
   napisu głównego i neonowo-złote przyciski.
   Wyłącznie CSS i statyczne grafiki, bez animowanego tła –
   stara aura („słońce" za napisem hero i rozmyte plamy tła) została
   usunięta z krolewski-motyw.css i index.html.
   Arkusz podpinamy tylko na stronie głównej i podstronach klienta –
   Panel Szefa (szef.html) zostaje przy motywie królewskim.
   ===================================================================== */

/* --- ROZŚWIETLONE TŁO SPA: CIEPŁE ZŁOTE ŚWIATŁO I SUBTELNA ZIELEŃ ---
   Jedna nieruchoma scena (body::before / body::after, position: fixed) leży
   pod całym serwisem, a sekcje są przezroczyste – tło nie powtarza się
   w każdej sekcji i nie zużywa animacji. Scena to trzy statyczne grafiki
   WebP: panorama SPA-laboratorium (body::before) i dwa boczne pasy
   z kamieniami, świecami, smartfonami, laptopem i mikroskopem (body::after).
   Grafiki nie są rozciągane: panorama skaluje się proporcjonalnie (cover),
   a pasy mają wysokość ekranu i szerokość wynikającą z proporcji. */
html {
    background-color: #07100b !important;
}
body, main, section, .hero-section {
    background: transparent !important;
    color: #ffffff !important;
}
body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
}
body::before {
    background:
        /* przyciemnienie środka – czytelność tekstów i formularzy */
        radial-gradient(ellipse 48% 72% at 50% 46%, rgba(4, 10, 6, 0.80), rgba(4, 10, 6, 0.46) 64%, rgba(4, 10, 6, 0.12) 100%),
        /* ciepłe złote światło świec i limonkowy refleks */
        radial-gradient(ellipse 50% 30% at 50% 0%, rgba(255, 200, 100, 0.18), transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 100%, rgba(170, 230, 40, 0.12), transparent 70%),
        url('../img/tlo/spa-panorama-1920.webp') center / cover no-repeat,
        #07100b;
}
body::after {
    background:
        url('../img/tlo/spa-bok-lewy.webp') left top / auto 100% no-repeat,
        url('../img/tlo/spa-bok-prawy.webp') right top / auto 100% no-repeat;
}
/* Wąskie ekrany: pasy boczne zwężone i przygaszone, żeby nie wchodziły
   pod teksty; mniejsza panorama oszczędza transfer na telefonie. */
@media (max-width: 960px) {
    body::after {
        background-size: auto 78%, auto 78%;
        background-position: left top, right bottom;
        opacity: 0.6;
    }
}
@media (max-width: 760px) {
    body::before {
        background:
            linear-gradient(180deg, rgba(4, 10, 6, 0.6), rgba(4, 10, 6, 0.74) 50%, rgba(4, 10, 6, 0.6)),
            radial-gradient(ellipse 80% 30% at 50% 0%, rgba(255, 200, 100, 0.18), transparent 70%),
            url('../img/tlo/spa-panorama-1100.webp') center / cover no-repeat,
            #07100b;
    }
    body::after {
        background-size: auto 62%, auto 62%;
        opacity: 0.42;
    }
}

/* Złota neonowa poświata zamiast błękitnej – ten sam zestaw zmiennych
   motywu królewskiego, więc przyciski i karty zachowują kształt i ramki.
   Tryb Szefa (body.boss-mode) ma własną paletę i zostaje bez zmian. */
body:not(.boss-mode) {
    --kr-b-rgb: 255 196 90;     /* ciepłe, neonowe złoto */
    --kr-wave-rgb: 255 226 150; /* jasna fala złota na hover / dotyk */
    --nx-neon: #f3d58d;
    --nx-neon-soft: rgba(243, 213, 141, 0.22);
}
body:not(.boss-mode) .nx-btn--ghost {
    background: rgba(18, 14, 8, 0.5);
}

/* --- EFEKT WOW: LUKSUSOWE, LUSTRZANE ZŁOTO DLA "SPA DLA TWOJEGO SMARTFONA" --- */
.hero-title, h1, #spa-dla-twojego-smartfona, [data-identity="hero-title"] {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    background: linear-gradient(
        to bottom,
        #cf9e1d 0%,
        #fbf3cd 22%,
        #b38106 45%,
        #fffffc 50%,
        #b38106 55%,
        #f9e497 80%,
        #a17200 100%
    ) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: mirrorGoldGlance 4s ease-in-out infinite !important;
    filter:
        drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.8))
        drop-shadow(0px 4px 20px rgba(212, 175, 55, 0.5)) !important;
}

@keyframes mirrorGoldGlance {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- BŁYSZCZĄCE ZŁOTE GUZIKI I NEONOWE ZŁOTE NAPISY --- */
.btn, button, .sacred-button, .bottom-nav-item, [onclick*="Jaccuzzi"], .cta-button, .nav-link {
    background: linear-gradient(135deg, #161512 0%, #282419 100%) !important;
    border: 2px solid #d4af37 !important;
    color: #fff4cc !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 8px rgba(249, 228, 151, 0.7) !important;
    letter-spacing: 1px !important;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.3), inset 0 0 8px rgba(212, 175, 55, 0.15) !important;
    animation: goldGlowPulse 2.5s infinite alternate ease-in-out !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transform: none !important;
}

@keyframes goldGlowPulse {
    0% {
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.3), inset 0 0 5px rgba(212, 175, 55, 0.1);
        border-color: #baa045;
    }
    100% {
        box-shadow: 0 0 25px rgba(212, 175, 55, 0.65), inset 0 0 12px rgba(212, 175, 55, 0.3);
        border-color: #fbe69d;
    }
}

.btn:hover, button:hover, .bottom-nav-item:hover, .sacred-button:hover {
    transform: none !important;
    background: #d4af37 !important;
    color: #050505 !important;
    text-shadow: none !important;
    box-shadow: 0 0 35px rgba(212, 175, 55, 0.9), inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
}

/* --- Zgodność z dotychczasowym motywem -------------------------------- */
/* Hero strony głównej składa się z dwóch nałożonych warstw napisu.
   Warstwę głębi ukrywamy, a złotej zdejmujemy własny gradient – dzięki temu
   lustrzane złoto nagłówka h1 widać w całym napisie „SPA dla Twojego Smartfona". */
.kr-hero__depth {
    visibility: hidden !important;
}
.kr-hero__gold {
    background: none !important;
    color: inherit !important;
    animation: none !important;
    text-shadow: none !important;
}

/* --- ZDJĘCIE WŁAŚCICIELA W HERO -----------------------------------------
   Telefon: zdjęcie nad tytułem. Komputer: zdjęcie obok tytułu. Proporcje
   zdjęcia zostają nienaruszone (width/height w HTML, height: auto). */
header.nx-hero {
    flex-direction: column;
    gap: 28px;
}
.kr-hero__portrait {
    order: -1;
    width: min(64vw, 280px);
    margin: 0;
    padding: 6px;
    border: 2px solid #d4af37;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 228, 160, 0.18), rgba(18, 14, 8, 0.6));
    box-shadow:
        0 0 0 1px rgba(255, 240, 190, 0.25) inset,
        0 0 14px rgba(255, 200, 90, 0.45),
        0 0 42px rgba(255, 190, 80, 0.25),
        0 22px 50px rgba(0, 0, 0, 0.55);
    animation: kr-reveal 1.2s ease 0.6s both;
}
.kr-hero__portrait img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}
@media (min-width: 960px) {
    header.nx-hero {
        flex-direction: row;
        gap: clamp(36px, 4vw, 72px);
    }
    .kr-hero__portrait {
        order: 0;
        flex: 0 0 auto;
        width: clamp(320px, 30vw, 440px);
    }
    .nx-hero__inner {
        flex: 0 1 720px;
        margin: 0;
    }
    .nx-hero__inner .kr-hero__title {
        font-size: clamp(2.6rem, 5.2vw, 5rem);
    }
}

/* Dostępność: bez ruchu dla osób, które go wyłączyły */
@media (prefers-reduced-motion: reduce) {
    .kr-hero__portrait,
    .hero-title, h1, #spa-dla-twojego-smartfona, [data-identity="hero-title"],
    .btn, button, .sacred-button, .bottom-nav-item, [onclick*="Jaccuzzi"], .cta-button, .nav-link {
        animation: none !important;
    }
}