/* ==========================================================================
   SKANER KONDYCJI – żywy "Smartpotwór" + neonowa stopka kontaktowa
   Stan telefonu sterują trzy liczby ustawiane przez assets/js/loyalty.js:
     --glow    (1 → 0)  złota/diamentowa poświata dzieła sztuki
     --crack   (0 → 1)  pęknięcia i gasnący ekran
     --monster (0 → 1)  transformacja w zdechłego Smartpotwora
   Każdy ruch suwaka przesuwa te wartości, więc przejścia są płynne.
   Dodatkowo data-tier (10 przedziałów co 5%) wybiera animację telefonu,
   a klasy .neon-luxury-* nadają tekstom świecący kolor neonu.
   ========================================================================== */

@property --glow    { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --crack   { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --monster { syntax: '<number>'; inherits: true; initial-value: 0; }

.battery-section .battery-scan.sp-scan {
    max-width: 1060px;
}

.sp-scan {
    --glow: 1;
    --crack: 0;
    --monster: 0;
    --fill: 100%;
    --level: 100%;
    --toxic: #7dff6a;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    overflow: hidden;
    transition: --glow 0.35s ease, --crack 0.35s ease, --monster 0.35s ease,
                border-color 0.6s ease, box-shadow 0.6s ease;
    border-color: rgba(223, 186, 107, calc(0.25 + var(--glow) * 0.45));
    box-shadow:
        0 0 calc(var(--glow) * 60px) rgba(223, 186, 107, calc(var(--glow) * 0.18)),
        inset 0 0 calc(var(--monster) * 90px) rgba(125, 255, 106, calc(var(--monster) * 0.08));
}
@media (min-width: 860px) {
    .sp-scan { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; }
}

/* --- Odczyt i suwak ------------------------------------------------------ */
.sp-readout {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 18px 0 8px;
}
.sp-readout__value,
.sp-readout__unit {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    line-height: 1;
    color: #fff4d2;
    transition: color 0.5s ease, text-shadow 0.5s ease;
    text-shadow: 0 0 10px rgba(223, 186, 107, 0.9), 0 0 28px rgba(223, 186, 107, 0.55);
}
.sp-readout__value { font-size: clamp(3.4rem, 9vw, 4.8rem); font-variant-numeric: tabular-nums; }
.sp-readout__unit { font-size: 2rem; margin-left: -12px; }
.sp-readout__state {
    font-family: 'Cinzel', serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--gold);
    padding: 6px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    transition: color 0.5s ease;
}
.sp-scan[data-state="tired"] .sp-readout__value,
.sp-scan[data-state="tired"] .sp-readout__unit {
    color: #ffd79a;
    text-shadow: 0 0 8px rgba(232, 150, 60, 0.7);
}
.sp-scan[data-state="monster"] .sp-readout__value,
.sp-scan[data-state="monster"] .sp-readout__unit {
    color: #eaffdf;
    text-shadow: 0 0 10px var(--toxic), 0 0 30px rgba(255, 60, 40, 0.6);
    animation: spGlitch 1.8s steps(1) infinite;
}
.sp-scan[data-state="monster"] .sp-readout__state { animation: spAlarm 0.9s ease-in-out infinite; }

.sp-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    margin: 6px 0 0;
    background: transparent;
    cursor: grab;
    touch-action: pan-y;
}
.sp-range:active { cursor: grabbing; }
.sp-range:focus-visible { outline: 2px solid var(--nx-neon, #3fc8ff); outline-offset: 4px; border-radius: 12px; }
.sp-range::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(223, 186, 107, 0.45);
    background:
        linear-gradient(90deg, transparent var(--fill), rgba(0, 0, 0, 0.62) var(--fill)),
        linear-gradient(90deg, #6b1a10 0%, #c6532a 30%, #e3a24c 50%, var(--gold) 70%, #fff3cc 100%);
    box-shadow: 0 0 16px rgba(223, 186, 107, calc(0.15 + var(--glow) * 0.35));
}
.sp-range::-moz-range-track {
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(223, 186, 107, 0.45);
    background:
        linear-gradient(90deg, transparent var(--fill), rgba(0, 0, 0, 0.62) var(--fill)),
        linear-gradient(90deg, #6b1a10 0%, #c6532a 30%, #e3a24c 50%, var(--gold) 70%, #fff3cc 100%);
}
.sp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 34px;
    height: 34px;
    margin-top: -12px;
    border-radius: 50%;
    border: 2px solid #fff6dc;
    background: radial-gradient(circle at 35% 30%, #fffaf0, var(--gold) 45%, #8a6a24 100%);
    box-shadow: 0 0 0 6px rgba(223, 186, 107, 0.18), 0 0 22px rgba(223, 186, 107, 0.85);
    transition: transform 0.2s ease;
}
.sp-range::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff6dc;
    background: radial-gradient(circle at 35% 30%, #fffaf0, var(--gold) 45%, #8a6a24 100%);
    box-shadow: 0 0 0 6px rgba(223, 186, 107, 0.18), 0 0 22px rgba(223, 186, 107, 0.85);
}
.sp-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.sp-scan[data-state="monster"] .sp-range::-webkit-slider-thumb {
    background: radial-gradient(circle at 35% 30%, #f4ffe8, var(--toxic) 45%, #2a5a1c 100%);
    box-shadow: 0 0 0 6px rgba(125, 255, 106, 0.16), 0 0 22px rgba(125, 255, 106, 0.8);
}
.sp-scan[data-state="monster"] .sp-range::-moz-range-thumb {
    background: radial-gradient(circle at 35% 30%, #f4ffe8, var(--toxic) 45%, #2a5a1c 100%);
}
.sp-range__scale {
    position: relative;
    height: 18px;
    margin: 0 17px 6px;
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.sp-range__scale span { position: absolute; transform: translateX(-50%); }
.sp-range__scale span:nth-child(1) { left: 0; }
.sp-range__scale span:nth-child(2) { left: 20%; }
.sp-range__scale span:nth-child(3) { left: 50%; }
.sp-range__scale span:nth-child(4) { left: 80%; }
.sp-range__scale span:nth-child(5) { left: 100%; }

.sp-scan .battery-gauge { margin-top: 14px; min-height: 170px; }
.sp-cta { margin-top: 18px; display: inline-flex; }
.sp-scan[data-state="monster"] .sp-cta {
    background: linear-gradient(135deg, #ff6a4a, #c21f1f);
    color: #fff;
    border-color: #ff8a70;
    animation: spAlarmBtn 1.4s ease-in-out infinite;
}

/* --- Scena z telefonem --------------------------------------------------- */
.sp-stage {
    position: relative;
    height: 440px;
    display: grid;
    place-items: center;
    isolation: isolate;
}
/* Mobile: telefon ląduje tuż nad odczytem i suwakiem, żeby kciuk widział efekt */
@media (max-width: 859px) {
    .sp-scan { gap: 0; }
    .sp-scan__controls { display: contents; }
    .sp-scan__controls > * { order: 3; }
    .sp-scan__controls > .luxe-title,
    .sp-scan__controls > .luxe-note { order: 1; }
    .sp-stage { order: 2; height: 340px; margin: 6px 0 0; }
    .sp-phone { width: 150px; height: 290px; }
}

.sp-aura {
    position: absolute;
    inset: 4% 8%;
    z-index: -1;
    border-radius: 50%;
    opacity: var(--glow);
    background:
        radial-gradient(circle, rgba(255, 244, 205, 0.55) 0%, rgba(223, 186, 107, 0.35) 30%, transparent 65%),
        conic-gradient(from 0deg, transparent, rgba(190, 230, 255, 0.35), transparent 25%, rgba(255, 220, 140, 0.4), transparent 50%, rgba(190, 230, 255, 0.35), transparent 75%, rgba(255, 220, 140, 0.4), transparent);
    filter: blur(14px);
    animation: spSpin 14s linear infinite;
}

.sp-phone {
    position: relative;
    width: 170px;
    height: 330px;
    top: 0;
    rotate: 0deg;
    scale: calc(1 + var(--glow) * 0.04);
    animation: spFloat 5s ease-in-out infinite;
    transition: rotate 0.9s cubic-bezier(0.34, 1.4, 0.64, 1), top 0.9s ease;
}

.sp-body {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 8px;
    border-radius: 32px;
    background:
        linear-gradient(145deg, #fff3c8 0%, var(--gold) 22%, #8f6c25 50%, #f1d58f 78%, #7a5a1a 100%);
    filter: saturate(calc(1 - var(--monster) * 0.6));
    box-shadow:
        0 0 calc(var(--glow) * 46px) rgba(255, 222, 140, calc(var(--glow) * 0.75)),
        0 0 calc(var(--glow) * 110px) rgba(190, 230, 255, calc(var(--glow) * 0.25)),
        0 0 calc(var(--monster) * 40px) rgba(125, 255, 106, calc(var(--monster) * 0.45)),
        0 24px 40px rgba(0, 0, 0, 0.6);
}
.sp-rust {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: var(--monster);
    background:
        radial-gradient(circle at 20% 15%, #b3521f 0 10%, transparent 11%),
        radial-gradient(circle at 80% 40%, #6e2e12 0 12%, transparent 13%),
        radial-gradient(circle at 30% 75%, #a44a1b 0 9%, transparent 10%),
        radial-gradient(circle at 70% 90%, #5b260f 0 11%, transparent 12%),
        linear-gradient(160deg, #4a2c1a, #7d3b17 40%, #2d1b10 70%, #5d3317);
}

.sp-screen {
    position: relative;
    height: 100%;
    border-radius: 25px;
    overflow: hidden;
    background: #020203;
}
.sp-wall {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 236, 180, 0.55), transparent 45%),
        radial-gradient(circle at 75% 80%, rgba(63, 200, 255, 0.35), transparent 50%),
        linear-gradient(170deg, #2a1b3d 0%, #121022 55%, #0a1a24 100%);
    filter: brightness(calc(1 - var(--crack) * 0.35 - var(--monster) * 0.45)) saturate(calc(1 - var(--crack) * 0.5));
}
.sp-wall::after {
    content: '';
    position: absolute;
    inset: -40% -60%;
    opacity: var(--glow);
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
    animation: spSheen 3.6s ease-in-out infinite;
}
.sp-scan[data-state="monster"] .sp-wall {
    background:
        radial-gradient(circle at 50% 45%, rgba(125, 255, 106, 0.28), transparent 60%),
        linear-gradient(170deg, #0c1a0c, #050805 60%, #1a0606);
}
.sp-notch {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 54px;
    height: 16px;
    translate: -50% 0;
    border-radius: 999px;
    background: #000;
}

.sp-lux {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: calc(1 - var(--monster) * 1.4);
}
.sp-lux__crown {
    font-size: 2.6rem;
    color: #fff1c4;
    text-shadow: 0 0 calc(4px + var(--glow) * 18px) rgba(255, 214, 120, 0.95);
}
.sp-lux__brand {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 4px;
    color: var(--gold);
}
.sp-lux__bat {
    position: relative;
    width: 58px;
    height: 24px;
    border: 2px solid rgba(255, 244, 210, 0.8);
    border-radius: 6px;
    padding: 2px;
}
.sp-lux__bat::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 6px;
    width: 4px;
    height: 8px;
    border-radius: 0 2px 2px 0;
    background: rgba(255, 244, 210, 0.8);
}
.sp-lux__bat i {
    display: block;
    height: 100%;
    width: var(--level);
    border-radius: 3px;
    background: linear-gradient(90deg, #f0c56b, #fff3cc);
    transition: width 0.2s ease;
}
.sp-scan[data-state="tired"] .sp-lux__bat i { background: linear-gradient(90deg, #d0662f, #f0b25a); }

/* Nakładka ekranu: ściemnienie, żółknięcie i całkowite zgaśnięcie (data-tier) */
.sp-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: #000;
    opacity: 0;
    mix-blend-mode: normal;
    transition: opacity 0.7s ease, background-color 0.7s ease;
}

.sp-cracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(230, 245, 255, 0.85);
    stroke-width: 1.1;
    stroke-linejoin: bevel;
    opacity: calc(var(--crack) * 1.5);
    filter: drop-shadow(0 0 2px rgba(190, 230, 255, 0.8));
}
.sp-cracks path {
    stroke-dasharray: 100px;
    stroke-dashoffset: calc(100px - var(--crack) * 100px);
}
.sp-cracks path:nth-child(n+4) { stroke-dashoffset: calc(100px - var(--monster) * 100px); }

.sp-face {
    position: absolute;
    inset: 0;
    opacity: var(--monster);
}
.sp-eye {
    position: absolute;
    top: 34%;
    width: 38px;
    height: 26px;
    border-radius: 50% 50% 45% 45%;
    background: radial-gradient(circle at 50% 55%, #fff 0 10%, #ff3b2f 12% 45%, #6b0000 70%);
    box-shadow: 0 0 18px #ff3b2f, 0 0 38px rgba(255, 59, 47, 0.6);
    scale: var(--monster);
    animation: spBlink 3.4s infinite;
}
.sp-eye--l { left: 22px; rotate: 18deg; }
.sp-eye--r { right: 22px; rotate: -18deg; }
.sp-mouth {
    position: absolute;
    left: 50%;
    top: 56%;
    width: 104px;
    height: calc(8px + var(--monster) * 38px);
    translate: -50% 0;
    border-radius: 12px 12px 50px 50px;
    background: radial-gradient(ellipse at 50% 30%, #3b0000, #0a0000);
    box-shadow: 0 0 20px rgba(125, 255, 106, 0.35), inset 0 -6px 14px rgba(125, 255, 106, 0.35);
    overflow: hidden;
    animation: spChomp 1.6s ease-in-out infinite;
}
.sp-mouth::before,
.sp-mouth::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    background-size: 13px 12px;
    background-repeat: repeat-x;
}
.sp-mouth::before { top: 0; background-image: conic-gradient(from -45deg at 50% 100%, #f3eed6 90deg, transparent 0); }
.sp-mouth::after { bottom: 0; background-image: conic-gradient(from 135deg at 50% 0, #d9d2b6 90deg, transparent 0); }

/* Potworne wyrostki – rosną z wnętrza obudowy razem z --monster */
.sp-horn {
    position: absolute;
    z-index: 2;
    top: -34px;
    width: 34px;
    height: 58px;
    background: linear-gradient(180deg, #e8e0c2, #7a1f12 60%, #2a0a06);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform-origin: 50% 100%;
    scale: 1 var(--monster);
    opacity: min(1, calc(var(--monster) * 3));
}
.sp-horn--l { left: 14px; rotate: -22deg; }
.sp-horn--r { right: 14px; rotate: 22deg; }

.sp-claw {
    position: absolute;
    z-index: 2;
    top: 44%;
    width: 60px;
    height: 70px;
    opacity: min(1, calc(var(--monster) * 3));
}
.sp-claw--l { left: -8px; transform-origin: 100% 50%; translate: calc(var(--monster) * -46px) 0; }
.sp-claw--r { right: -8px; transform-origin: 0 50%; translate: calc(var(--monster) * 46px) 0; scale: -1 1; }
.sp-claw i {
    position: absolute;
    right: 0;
    width: 56px;
    height: 12px;
    border-radius: 60% 0 0 60%;
    background: linear-gradient(90deg, #f1ecd9, #5e3a1c 55%, #2b180c);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    animation: spClaw 1.2s ease-in-out infinite;
}
.sp-claw i:nth-child(1) { top: 6px; rotate: 22deg; }
.sp-claw i:nth-child(2) { top: 29px; animation-delay: -0.3s; }
.sp-claw i:nth-child(3) { top: 52px; rotate: -22deg; animation-delay: -0.6s; }

.sp-tentacle {
    position: absolute;
    z-index: 1;
    bottom: 36px;
    width: 30px;
    height: 160px;
    border-radius: 50% 50% 40% 40% / 12% 12% 60% 60%;
    clip-path: polygon(42% 0, 58% 0, 80% 40%, 100% 100%, 0 100%, 20% 40%);
    background:
        radial-gradient(circle at 50% 50%, #c9ffb0 0 14%, #5c1f5e 16% 26%, transparent 28%) 0 0 / 30px 22px,
        linear-gradient(180deg, #8a3f8c, #3d2a5e 45%, #1f4a16 75%, #0e2408);
    box-shadow: 0 0 16px rgba(125, 255, 106, 0.35);
    transform-origin: 50% 100%;
    scale: 1 var(--monster);
    opacity: min(1, calc(var(--monster) * 2.5));
    animation: spWiggle 2.4s ease-in-out infinite;
}
.sp-tentacle--l { left: -26px; --tilt: -38deg; }
.sp-tentacle--r { right: -26px; --tilt: 38deg; animation-delay: -1.2s; }

.sp-cables {
    position: absolute;
    z-index: 1;
    left: -15px;
    right: -15px;
    top: calc(100% - 10px);
    width: calc(100% + 30px);
    height: 90px;
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    transform-origin: 50% 0;
    scale: 1 var(--monster);
    opacity: min(1, calc(var(--monster) * 2.5));
}
.sp-cables path { stroke: #7a3a17; filter: drop-shadow(0 2px 0 #2d1509); }
.sp-cables path:nth-child(2) { stroke: #5e5e52; stroke-dasharray: 9 4; }
.sp-cables path:nth-child(3) { stroke: #9c4a1c; }

.sp-sparks {
    position: absolute;
    z-index: 4;
    inset: 0;
    opacity: min(1, calc(var(--monster) * 2));
    pointer-events: none;
}
.sp-sparks i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff6b0;
    box-shadow: 0 0 8px #ffd23f, 0 0 16px #ff8a1f;
    opacity: 0;
    animation: spSpark 1.1s ease-out infinite paused;
}
.sp-scan[data-state="monster"] .sp-sparks i { animation-play-state: running; }
.sp-sparks i:nth-child(1) { left: 12%; top: 20%; --dx: -40px; --dy: -30px; }
.sp-sparks i:nth-child(2) { left: 86%; top: 30%; --dx: 44px; --dy: -24px; animation-delay: -0.25s; }
.sp-sparks i:nth-child(3) { left: 30%; top: 102%; --dx: -30px; --dy: 30px; animation-delay: -0.5s; }
.sp-sparks i:nth-child(4) { left: 64%; top: 104%; --dx: 36px; --dy: 26px; animation-delay: -0.7s; }
.sp-sparks i:nth-child(5) { left: 92%; top: 72%; --dx: 40px; --dy: 12px; animation-delay: -0.9s; }
.sp-sparks i:nth-child(6) { left: 6%; top: 64%; --dx: -42px; --dy: 8px; animation-delay: -0.4s; }

.sp-smoke {
    position: absolute;
    z-index: 5;
    top: -10px;
    left: 50%;
    width: 200px;
    height: 160px;
    translate: -50% 0;
    opacity: var(--monster);
    pointer-events: none;
}
.sp-smoke i {
    position: absolute;
    bottom: 0;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 195, 180, 0.85), rgba(110, 115, 100, 0.35) 45%, rgba(90, 95, 85, 0) 70%);
    filter: blur(4px);
    opacity: 0;
    animation: spSmoke 3.6s ease-out infinite paused;
}
.sp-scan[data-state="monster"] .sp-smoke i { animation-play-state: running; }
.sp-smoke i:nth-child(1) { left: 20px; }
.sp-smoke i:nth-child(2) { left: 70px; animation-delay: -0.7s; }
.sp-smoke i:nth-child(3) { left: 110px; animation-delay: -1.4s; }
.sp-smoke i:nth-child(4) { left: 45px; animation-delay: -2.1s; }
.sp-smoke i:nth-child(5) { left: 95px; animation-delay: -2.8s; }

.sp-diamonds {
    position: absolute;
    z-index: 4;
    inset: -30px;
    opacity: var(--glow);
    pointer-events: none;
}
.sp-diamonds i {
    position: absolute;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #fff 0 18%, rgba(210, 240, 255, 0.9) 22%, transparent 60%);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: spTwinkle 2.4s ease-in-out infinite;
}
.sp-diamonds i:nth-child(1) { left: 6%; top: 12%; }
.sp-diamonds i:nth-child(2) { right: 4%; top: 22%; width: 22px; height: 22px; animation-delay: -0.6s; }
.sp-diamonds i:nth-child(3) { left: 0; top: 62%; width: 12px; height: 12px; animation-delay: -1.2s; }
.sp-diamonds i:nth-child(4) { right: 10%; bottom: 10%; animation-delay: -1.8s; }
.sp-diamonds i:nth-child(5) { left: 44%; top: -2%; width: 20px; height: 20px; animation-delay: -0.9s; }

.sp-floor {
    position: absolute;
    bottom: 12px;
    left: 50%;
    width: 240px;
    height: 34px;
    translate: -50% 0;
    border-radius: 50%;
    z-index: -1;
    background:
        radial-gradient(ellipse, rgba(125, 255, 106, calc(var(--monster) * 0.45)), transparent 70%),
        radial-gradient(ellipse, rgba(223, 186, 107, calc(var(--glow) * 0.5)), transparent 70%);
    filter: blur(3px);
}

/* --- Neonowe teksty: 6 kolorów dla 10 przedziałów kondycji --------------- */
.neon-luxury-green,
.neon-luxury-gold,
.neon-luxury-blue,
.neon-luxury-purple,
.neon-luxury-orange,
.neon-luxury-red,
.sp-scan .sp-verdict__title,
.sp-scan .sp-verdict__text,
.sp-scan .sp-readout__state {
    color: var(--neon-ink, #fff);
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.55),
        0 0 8px var(--neon, transparent),
        0 0 18px var(--neon, transparent),
        0 0 38px var(--neon-soft, transparent);
    transition: color 0.8s ease, text-shadow 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease;
}
/* Głęboka, luksusowa zieleń z miętową poświatą */
.neon-luxury-green  { --neon: #19f5a0; --neon-soft: rgba(0, 200, 120, 0.55); --neon-ink: #dcfff0; }
/* Ciepłe, szampańskie złoto o wysokim połysku */
.neon-luxury-gold   { --neon: #ffd873; --neon-soft: rgba(230, 180, 80, 0.55); --neon-ink: #fff8e4; }
/* Lodowaty cyjan w stylu cyber-premium */
.neon-luxury-blue   { --neon: #2fe3ff; --neon-soft: rgba(30, 140, 255, 0.6); --neon-ink: #e2fbff; }
/* Magnetyczny, klubowy fiolet i głęboki róż */
.neon-luxury-purple { --neon: #e04bff; --neon-soft: rgba(255, 40, 170, 0.55); --neon-ink: #fbe6ff; }
/* Ostrzegawczy, toksyczny pomarańcz */
.neon-luxury-orange { --neon: #ff8a1f; --neon-soft: rgba(255, 90, 0, 0.6); --neon-ink: #fff0e0; }
/* Krwista, pulsująca czerwień alarmowa */
.neon-luxury-red    { --neon: #ff2a3d; --neon-soft: rgba(210, 0, 20, 0.65); --neon-ink: #ffe6e8; animation: neonRedPulse 1.6s ease-in-out infinite; }

.sp-scan .sp-readout__state { border-color: var(--neon, currentColor); box-shadow: 0 0 12px var(--neon-soft, transparent), inset 0 0 10px var(--neon-soft, transparent); }
.sp-scan .sp-verdict__title {
    display: block;
    font-size: 1.15rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.sp-scan .sp-verdict__text {
    margin: 10px 0 0;
    font-size: 1.02rem;
    line-height: 1.7;
}
.sp-scan .sp-verdict__ritual { margin: 14px 0 0; color: #cfcfcf; }
.sp-scan .battery-gauge {
    background: rgba(4, 4, 8, 0.85);
    transition: border-color 0.8s ease, box-shadow 0.8s ease;
}
.sp-scan[data-tier="crown"] .battery-gauge      { border-color: rgba(25, 245, 160, 0.35); box-shadow: inset 0 0 30px rgba(25, 245, 160, 0.07); }
.sp-scan[data-tier="aristocrat"] .battery-gauge { border-color: rgba(255, 216, 115, 0.35); box-shadow: inset 0 0 30px rgba(255, 216, 115, 0.07); }
.sp-scan[data-tier="breathless"] .battery-gauge { border-color: rgba(47, 227, 255, 0.35); box-shadow: inset 0 0 30px rgba(47, 227, 255, 0.07); }
.sp-scan[data-tier="couch"] .battery-gauge      { border-color: rgba(224, 75, 255, 0.35); box-shadow: inset 0 0 30px rgba(224, 75, 255, 0.07); }
.sp-scan[data-tier="weary"] .battery-gauge      { border-color: rgba(255, 138, 31, 0.35); box-shadow: inset 0 0 30px rgba(255, 138, 31, 0.07); }
.sp-scan[data-state="monster"] .battery-gauge   { border-color: rgba(255, 42, 61, 0.4); box-shadow: inset 0 0 34px rgba(255, 42, 61, 0.1); }

/* --- Animacje telefonu dla 10 przedziałów (data-tier) --------------------- */
/* Poświata za obudową: złota, biało-złota lub alarmowa czerwień */
.sp-phone::before {
    content: '';
    position: absolute;
    inset: -14px;
    z-index: 0;
    border-radius: 44px;
    opacity: 0;
    box-shadow: 0 0 40px 10px var(--halo, rgba(255, 214, 120, 0.7)), 0 0 90px 20px var(--halo-soft, rgba(255, 214, 120, 0.25));
    transition: opacity 0.8s ease;
    pointer-events: none;
}

/* 100–96: Klejnot Koronny – płynna, pulsująca złota poświata */
.sp-scan[data-tier="crown"] .sp-phone::before { opacity: 1; animation: spHaloPulse 2.6s ease-in-out infinite; }

/* 95–91: Cyfrowy Arystokrata – stabilna, subtelna biało-złota poświata */
.sp-scan[data-tier="aristocrat"] .sp-phone::before {
    --halo: rgba(255, 246, 220, 0.5);
    --halo-soft: rgba(255, 220, 150, 0.18);
    opacity: 0.8;
}

/* 90–86: Prestiż z Zadyszką – powolne kołysanie na boki */
.sp-scan[data-tier="breathless"] .sp-phone { animation: spSway 4.2s ease-in-out infinite, spFloat 5s ease-in-out infinite; }

/* 85–81: Kanapowy Narkoman – co kilka sekund delikatne drżenie */
.sp-scan[data-tier="couch"] .sp-phone { animation: spTremble 3.4s linear infinite, spFloat 5s ease-in-out infinite; }

/* 80–76: Etatowy Zmęczeniowiec – ekran ciemniejszy o 20%, lekkie pochylenie */
.sp-scan[data-tier="weary"] .sp-phone { rotate: 4deg; animation: spFloat 7s ease-in-out infinite; }
.sp-scan[data-tier="weary"] .sp-veil { opacity: 0.2; }

/* 75–71: Młody Smartpotworek – szybkie mikro-drżenia, żółtawy ekran */
.sp-scan[data-tier="imp"] .sp-phone { rotate: 3deg; animation: spMicro 0.16s steps(2) infinite, spFloat 3.4s ease-in-out infinite; }
.sp-scan[data-tier="imp"] .sp-veil { background-color: #d9b21a; opacity: 0.28; mix-blend-mode: multiply; }

/* 70–66: Złośliwy Cyfrowy Gremlin – glitch obrazu, obrót o 5° */
.sp-scan[data-tier="gremlin"] .sp-phone { rotate: 5deg; animation: spMicro 0.4s steps(2) infinite; }
.sp-scan[data-tier="gremlin"] .sp-screen { animation: spGlitchScreen 1.4s steps(1) infinite; }
.sp-scan[data-tier="gremlin"] .sp-veil { background-color: #c9a21a; opacity: 0.22; mix-blend-mode: multiply; }

/* 65–61: Agonia Piękna – migotanie ekranu (strobe), telefon powoli opada */
.sp-scan[data-tier="agony"] .sp-phone { rotate: 7deg; top: 38px; animation: none; transition: rotate 2.4s ease, top 2.8s cubic-bezier(0.5, 0, 0.75, 0); }
.sp-scan[data-tier="agony"] .sp-screen { animation: spStrobe 0.9s steps(1) infinite; }

/* ≤60: Zdechły Smartpotwór – ekran gaśnie, sekunda gwałtownych drgawek,
   potem bezruch pod kątem 15° w czerwonej poświacie */
.sp-scan[data-tier="dead"] .sp-phone { rotate: 15deg; top: 30px; animation: spDeathShake 1s linear 1 both; transition: rotate 0.5s ease 1s, top 0.5s ease 1s; }
.sp-scan[data-tier="dead"] .sp-veil { opacity: 0.94; transition-duration: 0.25s; }
.sp-scan[data-tier="dead"] .sp-phone::before {
    --halo: rgba(255, 30, 45, 0.75);
    --halo-soft: rgba(200, 0, 20, 0.35);
    opacity: 1;
    transition-delay: 0.6s;
}
.sp-scan[data-tier="dead"] .sp-aura { opacity: 0.55; background: radial-gradient(circle, rgba(255, 40, 50, 0.45), transparent 62%); animation: none; }
.sp-scan[data-tier="dead"] .sp-tentacle,
.sp-scan[data-tier="dead"] .sp-claw i,
.sp-scan[data-tier="dead"] .sp-mouth,
.sp-scan[data-tier="dead"] .sp-eye { animation-play-state: paused; }
.sp-scan[data-tier="dead"] .sp-sparks i { animation-play-state: paused; opacity: 0; }

/* --- Klatki animacji ----------------------------------------------------- */
@keyframes neonRedPulse {
    0%, 100% {
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 0 8px var(--neon), 0 0 20px var(--neon), 0 0 42px var(--neon-soft);
    }
    50% {
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.4), 0 0 4px var(--neon), 0 0 10px var(--neon-soft), 0 0 18px var(--neon-soft);
    }
}
@keyframes spHaloPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.03); }
}
@keyframes spSway {
    0%, 100% { transform: rotate(-3.5deg); }
    50% { transform: rotate(3.5deg); }
}
@keyframes spTremble {
    0%, 80%, 100% { transform: none; }
    82% { transform: translateX(-2px) rotate(-1deg); }
    84% { transform: translateX(2px) rotate(1deg); }
    86% { transform: translateX(-2px) rotate(-0.8deg); }
    88% { transform: translateX(1px) rotate(0.6deg); }
    90% { transform: none; }
}
@keyframes spMicro {
    0% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    100% { transform: translate(1px, 1px); }
}
@keyframes spGlitchScreen {
    0%, 100% { transform: none; clip-path: none; filter: none; }
    18% { transform: translateX(-6px) skewX(4deg); clip-path: inset(10% 0 55% 0); filter: hue-rotate(90deg) saturate(2); }
    20% { transform: translateX(5px); clip-path: inset(48% 0 12% 0); filter: hue-rotate(-60deg); }
    22% { transform: none; clip-path: none; filter: none; }
    61% { transform: translateX(4px) skewX(-6deg); clip-path: inset(30% 0 30% 0); filter: contrast(1.8); }
    63% { transform: translateX(-3px); clip-path: inset(0 0 70% 0); }
    65% { transform: none; clip-path: none; filter: none; }
}
@keyframes spStrobe {
    0%, 100% { opacity: 1; }
    12% { opacity: 0.1; }
    18% { opacity: 1; }
    30% { opacity: 0.05; }
    34% { opacity: 0.9; }
    62% { opacity: 0.25; }
    68% { opacity: 1; }
}
@keyframes spDeathShake {
    0% { transform: none; }
    10% { transform: translate(-6px, 2px) rotate(-5deg); }
    20% { transform: translate(6px, -3px) rotate(6deg); }
    30% { transform: translate(-7px, 1px) rotate(-6deg); }
    40% { transform: translate(5px, 3px) rotate(5deg); }
    50% { transform: translate(-5px, -2px) rotate(-4deg); }
    60% { transform: translate(4px, 2px) rotate(3deg); }
    70% { transform: translate(-3px, -1px) rotate(-2deg); }
    80% { transform: translate(2px, 1px) rotate(1deg); }
    90% { transform: translate(-1px, 0) rotate(-0.5deg); }
    100% { transform: none; }
}
@keyframes spSpin { to { rotate: 360deg; } }
@keyframes spFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes spSheen { 0%, 20% { translate: -60% 0; } 70%, 100% { translate: 60% 0; } }
@keyframes spBlink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(0.1); } }
@keyframes spChomp { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.72); } }
@keyframes spClaw { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
@keyframes spWiggle {
    0%, 100% { rotate: var(--tilt); }
    50% { rotate: calc(var(--tilt) * 0.55); }
}
@keyframes spSpark {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
@keyframes spSmoke {
    0% { opacity: 0; transform: translateY(40px) scale(0.5); }
    25% { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(-110px) scale(1.9); }
}
@keyframes spTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(45deg); }
}
@keyframes spGlitch {
    0%, 100% { transform: none; }
    92% { transform: translateX(2px) skewX(-6deg); }
    95% { transform: translateX(-3px); }
}
@keyframes spAlarm { 50% { box-shadow: 0 0 16px rgba(255, 90, 74, 0.7); } }
@keyframes spAlarmBtn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 74, 0.5); }
    50% { box-shadow: 0 0 0 12px rgba(255, 90, 74, 0); }
}

/* ==========================================================================
   WIELKI PRZYCISK KONFIGURATORA (pod sekcją logistyki)
   ========================================================================== */
.nx-config-cta {
    margin-top: 50px;
    text-align: center;
}
.nx-config-cta__lead {
    margin: 0 auto 22px;
    max-width: 620px;
    font-size: 1.08rem;
    color: #ddd;
}
.nx-btn.nx-config-cta__btn {
    padding: 24px 54px;
    font-size: clamp(1.05rem, 3.4vw, 1.35rem);
    letter-spacing: 2px;
    border-radius: 999px;
    animation: neonBtn 3s ease-in-out infinite;
}
@keyframes neonBtn {
    0%, 100% { box-shadow: 0 0 18px rgba(223, 186, 107, 0.45), 0 0 0 0 rgba(223, 186, 107, 0.35); }
    50% { box-shadow: 0 0 38px rgba(223, 186, 107, 0.8), 0 0 0 10px rgba(223, 186, 107, 0); }
}

/* ==========================================================================
   NEONOWY BLOK: KONTAKT PREMIUM + OBSZAR DZIAŁANIA
   ========================================================================== */
.neon-hub {
    position: relative;
    max-width: 1040px;
    margin: 0 auto 40px;
    padding: clamp(30px, 5vw, 56px) clamp(20px, 4vw, 52px);
    border-radius: 28px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0, rgba(223, 186, 107, 0.12), transparent 60%),
        rgba(8, 8, 12, 0.72);
    border: 1px solid rgba(223, 186, 107, 0.35);
    box-shadow:
        0 0 40px rgba(223, 186, 107, 0.12),
        inset 0 0 60px rgba(63, 200, 255, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.neon-hub__kicker {
    font-size: 0.85rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--nx-neon, #3fc8ff);
    text-shadow: 0 0 8px rgba(63, 200, 255, 0.7);
}
.neon-hub__title {
    margin-top: 10px;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    letter-spacing: 3px;
    color: #fff;
}
.neon-phone {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 34px;
    padding: 12px 28px;
    border-radius: 18px;
    text-decoration: none;
    border: 1px solid rgba(223, 186, 107, 0.5);
    box-shadow: 0 0 24px rgba(223, 186, 107, 0.25), inset 0 0 24px rgba(223, 186, 107, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.neon-phone:hover,
.neon-phone:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 44px rgba(223, 186, 107, 0.5), inset 0 0 30px rgba(223, 186, 107, 0.2);
}
.neon-phone__icon { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.neon-phone__num {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(2.3rem, 9vw, 4.4rem);
    letter-spacing: 3px;
    line-height: 1.1;
    white-space: nowrap;
    color: #fff6dc;
    animation: neonGold 3.2s ease-in-out infinite;
}
.neon-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    text-align: left;
}
.neon-hub__col {
    padding: 24px 26px;
    border-radius: 18px;
    background: rgba(4, 4, 6, 0.6);
    border: 1px solid rgba(63, 200, 255, 0.22);
    box-shadow: inset 0 0 22px rgba(63, 200, 255, 0.05);
}
.neon-hub__col h4 {
    margin-bottom: 16px;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    letter-spacing: 2px;
    color: #fff3d0;
    animation: neonGold 3.2s ease-in-out infinite;
    animation-delay: -1.6s;
}
.neon-hub__col p {
    margin-bottom: 14px;
    font-size: 1.12rem;
    line-height: 1.55;
    color: #cfcfcf;
}
.neon-link {
    font-weight: 600;
    font-size: clamp(1rem, 4.6vw, 1.18rem);
    color: #fff6dc;
    text-decoration: none;
    overflow-wrap: anywhere;
    text-shadow: 0 0 6px rgba(223, 186, 107, 0.75), 0 0 16px rgba(223, 186, 107, 0.4);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.neon-link:hover,
.neon-link:focus-visible { color: #fff; text-shadow: 0 0 8px var(--gold), 0 0 22px var(--gold); }
.neon-cyan {
    font-size: 1.18rem;
    color: #e6f9ff;
    animation: neonCyan 3.6s ease-in-out infinite;
}
.neon-hub__about {
    max-width: 780px;
    margin: 28px auto 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
}
.neon-hub__about strong { color: var(--gold); }
@media (max-width: 620px) {
    .neon-hub__grid { text-align: center; }
    .neon-phone { padding: 10px 16px; gap: 8px; }
}

@keyframes neonGold {
    0%, 100% {
        text-shadow: 0 0 4px #fff2c8, 0 0 10px rgba(223, 186, 107, 0.9),
                     0 0 22px rgba(223, 186, 107, 0.7), 0 0 44px rgba(223, 186, 107, 0.45);
    }
    50% {
        text-shadow: 0 0 2px #fff2c8, 0 0 6px rgba(223, 186, 107, 0.65),
                     0 0 14px rgba(223, 186, 107, 0.4), 0 0 26px rgba(223, 186, 107, 0.2);
    }
    52% { text-shadow: 0 0 1px #fff2c8, 0 0 4px rgba(223, 186, 107, 0.4); }
    54% {
        text-shadow: 0 0 2px #fff2c8, 0 0 6px rgba(223, 186, 107, 0.65),
                     0 0 14px rgba(223, 186, 107, 0.4), 0 0 26px rgba(223, 186, 107, 0.2);
    }
}
@keyframes neonCyan {
    0%, 100% { text-shadow: 0 0 4px #bff0ff, 0 0 12px rgba(63, 200, 255, 0.85), 0 0 26px rgba(63, 200, 255, 0.5); }
    50% { text-shadow: 0 0 2px #bff0ff, 0 0 6px rgba(63, 200, 255, 0.5), 0 0 14px rgba(63, 200, 255, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
    .sp-scan *,
    .sp-scan *::before,
    .sp-scan *::after,
    .neon-hub *,
    .nx-config-cta__btn {
        animation: none !important;
    }
    .sp-scan,
    .sp-scan *,
    .sp-scan *::before { transition: none !important; }
}