/* ============================================================
   newdesign.css — TestyNaBrokera redesign 2026 (wersja _newdesign)
   Ładowany PO styles.css i homepage.css — nadpisuje warstwę wizualną.
   Kolorystyka bez zmian: indygo #4F46E5, fiolet #7C3AED, złoto premium.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---------- A. Tokeny ---------- */
:root {
    --nd-grad: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    --nd-grad-soft: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
    --nd-gold-grad: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    --nd-radius: 16px;
    --nd-radius-lg: 24px;
    --nd-border: rgba(79, 70, 229, 0.12);
    --nd-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 2px 8px rgba(79, 70, 229, 0.05);
    --nd-shadow: 0 2px 4px rgba(17, 24, 39, 0.04), 0 12px 32px rgba(79, 70, 229, 0.10);
    --nd-shadow-lg: 0 4px 8px rgba(17, 24, 39, 0.05), 0 24px 56px rgba(79, 70, 229, 0.16);
    --nd-glass-bg: rgba(255, 255, 255, 0.78);
    --nd-glass-border: rgba(255, 255, 255, 0.6);
    --nd-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.dark-mode {
    --nd-border: rgba(129, 140, 248, 0.18);
    --nd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
    --nd-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --nd-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5);
    --nd-glass-bg: rgba(17, 24, 39, 0.72);
    --nd-glass-border: rgba(129, 140, 248, 0.16);
}

/* ---------- B. Globalna atmosfera ---------- */
html { scroll-behavior: smooth; }

body {
    background-color: #F6F7FB;
    background-image:
        radial-gradient(1200px 520px at 85% -120px, rgba(79, 70, 229, 0.10), transparent 60%),
        radial-gradient(900px 420px at -10% 5%, rgba(124, 58, 237, 0.07), transparent 55%);
    background-repeat: no-repeat;
}

body.dark-mode {
    background-color: #0B1120;
    background-image:
        radial-gradient(1200px 520px at 85% -120px, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(900px 420px at -10% 5%, rgba(124, 58, 237, 0.10), transparent 55%);
}

::selection { background: rgba(79, 70, 229, 0.22); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Subtelny scrollbar (WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(79, 70, 229, 0.28);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(79, 70, 229, 0.45); }

/* ---------- C. Header: pływający glass bar ---------- */
.app-header {
    position: static;
    z-index: 900;
    margin-bottom: 1.75rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--nd-border);
    border-radius: var(--nd-radius);
    background: var(--nd-glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: var(--nd-shadow-sm);
    transition: box-shadow 0.35s var(--nd-ease), transform 0.35s var(--nd-ease);
}

.app-header.nd-scrolled {
    box-shadow: var(--nd-shadow);
}

.dark-mode .app-header {
    border-color: var(--nd-glass-border);
}

.app-logo { font-size: 1.35rem; letter-spacing: -0.02em; }

.app-logo a {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
}

.app-logo i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
    color: #fff;
    background: var(--nd-grad);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}

.app-logo span {
    background: linear-gradient(120deg, var(--neutral-900) 30%, #4F46E5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.dark-mode .app-logo span {
    background: linear-gradient(120deg, #F9FAFB 30%, #A5B4FC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.theme-toggle {
    border: 1px solid var(--nd-border);
    background: transparent;
    transition: transform 0.3s var(--nd-ease), background-color 0.2s, color 0.2s;
}

.theme-toggle:hover { transform: rotate(15deg) scale(1.06); }

/* ---------- D. Nawigacja: pasek pigułek ---------- */
.nav-tabs {
    gap: 0.4rem;
    padding: 0.45rem;
    border: 1px solid var(--nd-border);
    border-radius: 999px;
    background: var(--nd-glass-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--nd-shadow-sm);
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.nav-tab {
    border-radius: 999px;
    box-shadow: none;
    background: transparent;
    font-size: 0.88rem;
    padding: 0.6rem 0.9rem;
    position: relative;
    transition: background-color 0.25s var(--nd-ease), color 0.25s var(--nd-ease), transform 0.25s var(--nd-ease);
}

.nav-tab:hover {
    transform: translateY(-1px);
    background-color: var(--primary-light);
}

.nav-tab.active {
    background: var(--nd-grad);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}

.premium-tab {
    background: var(--nd-gold-grad) !important;
    color: #422006 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.30);
}

.premium-tab:hover {
    background: linear-gradient(135deg, #FCD34D 0%, #FBBF24 100%) !important;
    color: #422006 !important;
    transform: translateY(-1px);
}

.premium-tab.active {
    background: var(--nd-grad) !important;
    color: #fff !important;
}

.dark-mode .nav-tab { background: transparent; }
.dark-mode .nav-tab:hover { background-color: rgba(99, 102, 241, 0.18); color: #C7D2FE; }
.dark-mode .nav-tab.active { background: var(--nd-grad); color: #fff; }

/* ---------- E. Przyciski ---------- */
.btn {
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--nd-ease), box-shadow 0.3s var(--nd-ease), background-color 0.3s;
}

.btn-primary,
.lite-upgrade-primary {
    background: var(--nd-grad);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-primary::after,
.lite-upgrade-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--nd-ease);
    pointer-events: none;
}

.btn-primary:hover::after,
.lite-upgrade-primary:hover::after { left: 160%; }

.btn-primary:hover,
.lite-upgrade-primary:hover {
    background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.38);
}

.btn-secondary {
    border: 1px solid var(--nd-border);
    background: var(--nd-glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.btn-outline {
    border-width: 1.5px;
    border-radius: 12px;
}

/* ---------- F. Tytuły sekcji + eyebrow ---------- */
.section-title {
    font-weight: 800;
    letter-spacing: -0.025em;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}

.section-title::after {
    background: var(--nd-grad);
    height: 4px;
    width: 72px;
    border-radius: 999px;
}

.nd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.9rem;
    border: 1px solid var(--nd-border);
    border-radius: 999px;
    background: var(--nd-glass-bg);
    color: var(--primary-dark);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.dark-mode .nd-eyebrow { color: #C7D2FE; }

.nd-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nd-grad);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5);
    animation: nd-pulse 2.4s infinite;
}

@keyframes nd-pulse {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45); }
    70% { box-shadow: 0 0 0 9px rgba(79, 70, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

/* ---------- G. Hero (index) ---------- */
.nd-hero {
    position: relative;
    isolation: isolate;
    min-height: auto;
    padding: 4rem 2rem 4.5rem;
    border-radius: var(--nd-radius-lg);
    overflow: hidden;
    border: 1px solid var(--nd-border);
    background:
        radial-gradient(720px 320px at 90% -60px, rgba(124, 58, 237, 0.13), transparent 60%),
        radial-gradient(560px 300px at 4% 110%, rgba(79, 70, 229, 0.10), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F6F5FF 100%);
}

.dark-mode .nd-hero {
    background:
        radial-gradient(720px 320px at 90% -60px, rgba(124, 58, 237, 0.22), transparent 60%),
        radial-gradient(560px 300px at 4% 110%, rgba(99, 102, 241, 0.16), transparent 60%),
        linear-gradient(180deg, #111827 0%, #151332 100%);
}

/* Siatka architektoniczna w tle hero */
.nd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(79, 70, 229, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, #000 30%, transparent 75%);
    z-index: -1;
    pointer-events: none;
}

.dark-mode .nd-hero::before {
    background-image:
        linear-gradient(rgba(165, 180, 252, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(165, 180, 252, 0.06) 1px, transparent 1px);
}

.nd-hero .hero-content h1 {
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.nd-accent {
    background: var(--nd-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    white-space: pre-wrap;
}

.nd-hero .hero-description {
    font-size: 1.15rem;
    max-width: 520px;
}

.nd-hero .hero-image { position: relative; }

.nd-hero .hero-image img {
    filter: drop-shadow(0 24px 48px rgba(79, 70, 229, 0.22));
    animation: nd-float 7s ease-in-out infinite;
}

@keyframes nd-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* Pływające chipy nad ilustracją */
.nd-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--nd-glass-border);
    background: var(--nd-glass-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--nd-shadow);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--neutral-800);
    white-space: nowrap;
    animation: nd-float 6s ease-in-out infinite;
}

.dark-mode .nd-chip { color: var(--neutral-800); }

.nd-chip i { color: var(--primary); }
.nd-chip .fa-headphones { color: #7C3AED; }
.nd-chip .fa-circle-check { color: #10B981; }

.nd-chip-1 { top: 6%; left: -4%; animation-delay: 0.6s; }
.nd-chip-2 { top: 34%; right: -7%; animation-delay: 1.4s; }
.nd-chip-3 { bottom: -6%; left: 2%; animation-delay: 2.2s; }

/* Pasek statystyk pod CTA */
.nd-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--nd-border);
}

.nd-stat { display: flex; flex-direction: column; gap: 0.15rem; }

.nd-stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: var(--nd-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nd-stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-500);
}

/* ---------- H. Karty funkcji ---------- */
.feature-card {
    position: relative;
    border: 1px solid var(--nd-border);
    border-radius: var(--nd-radius);
    box-shadow: var(--nd-shadow-sm);
    overflow: hidden;
    transition: transform 0.4s var(--nd-ease), box-shadow 0.4s var(--nd-ease), border-color 0.4s var(--nd-ease);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--nd-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--nd-ease);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--nd-shadow-lg);
    border-color: rgba(79, 70, 229, 0.28);
}

.feature-card:hover::before { transform: scaleX(1); }

.feature-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
    color: var(--primary);
    background: var(--nd-grad-soft);
    border: 1px solid var(--nd-border);
    border-radius: 18px;
    margin-bottom: 1.25rem;
    transition: transform 0.4s var(--nd-ease), background 0.4s, color 0.4s;
}

.feature-card:hover .feature-icon {
    transform: scale(1.08) rotate(-4deg);
    background: var(--nd-grad);
    color: #fff;
    border-color: transparent;
}

/* Karty premium (złote) — zachowany kolor, dopracowana forma */
.premium-feature {
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.10) 0%, rgba(245, 158, 11, 0.06) 100%);
}

.premium-feature::before { background: var(--nd-gold-grad); }

.premium-feature .feature-icon {
    color: #B45309;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.12));
    border-color: rgba(245, 158, 11, 0.35);
    margin-bottom: 0;
}

.premium-feature:hover .feature-icon {
    background: var(--nd-gold-grad);
    color: #fff;
}

.premium-feature::after {
    content: 'PREMIUM';
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: var(--nd-gold-grad);
    color: #422006;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35);
}

/* ---------- I. Karty zestawów testów ---------- */
.test-option-card {
    border: 1px solid var(--nd-border);
    border-radius: var(--nd-radius);
    box-shadow: var(--nd-shadow-sm);
    transition: transform 0.4s var(--nd-ease), box-shadow 0.4s var(--nd-ease), border-color 0.4s var(--nd-ease);
}

.test-option-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--nd-shadow-lg);
    border-color: rgba(79, 70, 229, 0.30);
}

.test-option-header {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(124, 58, 237, 0.10) 100%);
    border-bottom: 1px solid var(--nd-border);
}

.test-option-card .btn-outline {
    transition: all 0.3s var(--nd-ease);
}

.test-option-card:hover .btn-outline {
    background: var(--nd-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.30);
}

.test-option-card:hover .btn-primary {
    background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}

.premium-card {
    border: 1px solid rgba(245, 158, 11, 0.5);
}

/* Stary emoji-badge 🏆 z homepage.css — wyłączony, rolę przejmuje badge "Premium" */
.premium-card::before { display: none; }

.premium-card .test-option-header {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-bottom-color: rgba(245, 158, 11, 0.30);
}

.premium-badge { background: var(--nd-gold-grad); color: #422006; }

/* ---------- J. Sekcja O projekcie ---------- */
.about-text p { font-size: 1.02rem; }

.author-card {
    border: 1px solid var(--nd-border);
    border-radius: var(--nd-radius);
    box-shadow: var(--nd-shadow);
    position: relative;
    overflow: hidden;
}

.author-card::before {
    content: '';
    display: block;
    height: 72px;
    background: var(--nd-grad);
    opacity: 0.92;
}

.author-info { padding-top: 1.25rem; }

.author-info h3 { font-size: 1.35rem; letter-spacing: -0.02em; }

.social-link {
    border: 1px solid var(--nd-border);
    transition: transform 0.3s var(--nd-ease), background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.social-link:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.30);
}

/* ---------- K. Newsletter: gradientowy panel ---------- */
.newsletter-section { padding: 4rem 0 5rem; }

.newsletter-section::before { background: transparent !important; }

.nd-newsletter-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--nd-radius-lg);
    background:
        radial-gradient(560px 260px at 88% -40px, rgba(255, 255, 255, 0.16), transparent 60%),
        var(--nd-grad);
    padding: 3.25rem 2.5rem;
    box-shadow: var(--nd-shadow-lg);
}

.nd-newsletter-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, #000 20%, transparent 75%);
    pointer-events: none;
}

.nd-newsletter-panel .newsletter-content { position: relative; z-index: 2; }

.nd-newsletter-panel .email-signup h3 { color: #fff; font-size: 1.9rem; letter-spacing: -0.02em; }
.nd-newsletter-panel .email-signup p { color: rgba(255, 255, 255, 0.88); }
.nd-newsletter-panel .signup-info { color: rgba(255, 255, 255, 0.65); }

.nd-newsletter-panel .signup-btn {
    background: #fff;
    color: var(--primary-dark);
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.25);
}

.nd-newsletter-panel .signup-btn:hover {
    background: #EEF2FF;
    color: #4338CA;
    transform: translateY(-3px);
}

.nd-newsletter-panel .newsletter-image img {
    filter: drop-shadow(0 18px 36px rgba(17, 24, 39, 0.30));
    animation: nd-float 8s ease-in-out infinite;
}

.dark-mode .nd-newsletter-panel .email-signup h3 { color: #fff; }

/* ---------- L. Pasek CTA przed stopką ---------- */
.nd-cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 0 2rem;
    padding: 1.9rem 2.25rem;
    border: 1px solid rgba(245, 158, 11, 0.40);
    border-radius: var(--nd-radius-lg);
    background:
        radial-gradient(420px 200px at 95% 0%, rgba(251, 191, 36, 0.18), transparent 60%),
        linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(245, 158, 11, 0.05));
}

.nd-cta-band-copy h3 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--neutral-900);
    margin-bottom: 0.3rem;
}

.nd-cta-band-copy p { color: var(--neutral-600); margin: 0; }

.nd-cta-band .btn {
    background: var(--nd-gold-grad);
    color: #422006;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

.nd-cta-band .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(245, 158, 11, 0.45);
}

/* ---------- M. Stopka ---------- */
.app-footer {
    position: relative;
    border-top: 1px solid var(--nd-border);
    padding-top: 2.5rem;
}

.app-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 180px;
    height: 2px;
    background: var(--nd-grad);
    border-radius: 999px;
}

.footer-links a {
    position: relative;
    transition: color 0.25s;
}

.footer-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    background: var(--nd-grad);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--nd-ease);
}

.footer-links a:hover::after { transform: scaleX(1); }

/* ---------- N. Komponenty quizu ---------- */
.quiz-container {
    border: 1px solid var(--nd-border);
    border-radius: var(--nd-radius-lg);
    box-shadow: var(--nd-shadow);
}

.free-tests-page .quiz-container {
    border-radius: var(--nd-radius-lg);
}

.free-tests-page .quiz-header,
.free-tests-page .selection-content {
    border-radius: 0;
}

.free-tests-kicker,
.lite-upgrade-eyebrow {
    border-radius: 999px;
}

.free-tests-hero-panel,
.free-tests-page .selection-form,
.lite-upgrade-banner,
.lite-upgrade-features {
    border-radius: var(--nd-radius);
}

.lite-upgrade-banner { border-color: var(--nd-border); box-shadow: var(--nd-shadow-sm); }

.answer {
    border-radius: 14px;
    border: 1px solid var(--neutral-200);
    transition: transform 0.25s var(--nd-ease), box-shadow 0.25s var(--nd-ease), border-color 0.25s, background-color 0.25s;
}

.answer:hover {
    transform: translateX(4px);
    border-color: rgba(79, 70, 229, 0.45);
    box-shadow: var(--nd-shadow-sm);
}

.answer-selected .answer-letter { background: var(--nd-grad); }

.progress-bar {
    background: var(--nd-grad);
    box-shadow: 0 0 10px rgba(79, 70, 229, 0.45);
}

.badge-primary { border: 1px solid var(--nd-border); }

.select-input { border-radius: 12px; }

.source-options { border-radius: var(--nd-radius); }

.random-option { border-radius: 12px; }

.history-item { border-radius: 14px; }

#start-quiz-btn { border-radius: 12px; }

/* ---------- O. Strony tekstowe (regulamin / polityka) ---------- */
.content-container {
    border: 1px solid var(--nd-border) !important;
    border-radius: var(--nd-radius-lg) !important;
    box-shadow: var(--nd-shadow) !important;
}

/* ---------- P. Cookie banner: glass ---------- */
.cookie-banner {
    background: var(--nd-glass-bg);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--nd-border);
    box-shadow: 0 -12px 40px rgba(17, 24, 39, 0.14);
}

.cookie-accept { background: var(--nd-grad); border-radius: 10px; }

/* ---------- Q. Reveal on scroll ----------
   Ukrywanie tylko przy działającym JS (html.nd-js) — bez JS treść widoczna. */
.nd-js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--nd-ease), transform 0.7s var(--nd-ease);
    transition-delay: var(--nd-delay, 0ms);
    will-change: opacity, transform;
}

.nd-js [data-reveal].nd-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Opóźnienia kaskady przypisywane przez newdesign.js (data-atrybut) */
[data-nd-delay="1"] { --nd-delay: 90ms; }
[data-nd-delay="2"] { --nd-delay: 180ms; }
[data-nd-delay="3"] { --nd-delay: 270ms; }
[data-nd-delay="4"] { --nd-delay: 360ms; }
[data-nd-delay="5"] { --nd-delay: 450ms; }

/* ---------- R. Back to top ---------- */
.nd-back-to-top {
    position: fixed;
    right: 1.4rem;
    bottom: 1.4rem;
    z-index: 950;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 14px;
    background: var(--nd-grad);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(79, 70, 229, 0.40);
    opacity: 0;
    transform: translateY(14px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.35s var(--nd-ease), transform 0.35s var(--nd-ease), box-shadow 0.3s;
}

.nd-back-to-top.nd-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.nd-back-to-top:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 16px 34px rgba(79, 70, 229, 0.5);
}

/* ---------- R2. Dark mode: spójny ciemny motyw ----------
   Oryginalny system odwraca zmienne neutral-*, przez co w dark mode
   sekcje dostawały jasne pasy, a część tekstów gubiła kontrast.
   Tu jawne kolory — bez polegania na odwróconych zmiennych. */

.dark-mode .features-section::before,
.dark-mode .about-section::before,
.dark-mode .newsletter-section::before {
    background-color: transparent !important;
}

.dark-mode .section-title { color: #F1F5F9; }

.dark-mode .nav-tab { color: #CBD5E1; }
.dark-mode .nav-tab.active { color: #fff; }

.dark-mode .feature-card,
.dark-mode .test-option-card,
.dark-mode .author-card {
    background-color: #111827;
    border-color: var(--nd-border);
}

.dark-mode .feature-card h3,
.dark-mode .author-info h3 { color: #F1F5F9; }

.dark-mode .feature-card p,
.dark-mode .test-option-description p,
.dark-mode .author-description { color: #94A3B8; }

.dark-mode .about-text p { color: #CBD5E1; }

.dark-mode .feature-icon {
    color: #A5B4FC;
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(129, 140, 248, 0.25);
}

.dark-mode .premium-feature {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.10) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: rgba(245, 158, 11, 0.35);
}

.dark-mode .premium-feature .feature-icon {
    color: #FCD34D;
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(245, 158, 11, 0.30);
}

.dark-mode .test-option-header {
    background: rgba(99, 102, 241, 0.15);
    border-bottom-color: var(--nd-border);
}

.dark-mode .test-option-header h3 { color: #C7D2FE; }

.dark-mode .premium-card .test-option-header {
    background: rgba(251, 191, 36, 0.10);
    border-bottom-color: rgba(245, 158, 11, 0.30);
}

.dark-mode .test-option-footer { border-top-color: rgba(148, 163, 184, 0.18); }

.dark-mode .footer-title { color: #E5E7EB; }
.dark-mode .footer-links a { color: #94A3B8; }
.dark-mode .footer-links a:hover { color: #A5B4FC; }
.dark-mode .footer-column p,
.dark-mode .footer-bottom { color: #94A3B8; }

.dark-mode .nd-cta-band-copy h3 { color: #F1F5F9; }
.dark-mode .nd-cta-band-copy p { color: #94A3B8; }

.dark-mode .nd-stat-label { color: #94A3B8; }

.dark-mode .btn-secondary { color: #E5E7EB; }

/* ---------- R3. Dark mode: strona ofertowa (premium-page-container) ----------
   Pełny ciemny motyw. Teksty stoją na zmiennych (odwracają się same);
   tu ściemniamy twarde jasne tła: klasy wprost, inline'y przez [style*=...].
   Kolejność ma znaczenie: najpierw ogólne białe, potem tinty per odcień. */

.dark-mode .premium-page-container {
    /* zmienne strony pinowane w :root — w dark mode rozjaśniamy ręcznie */
    --color-dark: #F1F5F9;
    --color-gray: #94A3B8;
}

/* Sekcje z jasnym tłem → ciemny panel */
.dark-mode .premium-page-container .problem-section,
.dark-mode .premium-page-container .possibility-section,
.dark-mode .premium-page-container .mechanism-section,
.dark-mode .premium-page-container .publishing-model-section,
.dark-mode .premium-page-container .credibility-strip,
.dark-mode .premium-page-container .qualification-box {
    background: #0F1728 !important;
    border-color: rgba(129, 140, 248, 0.14);
}

.dark-mode .premium-page-container .returning-users-section {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border-color: rgba(139, 92, 246, 0.35);
}

/* Białe karty → ciemne karty */
.dark-mode .premium-page-container .problem-card,
.dark-mode .premium-page-container .mechanism-step,
.dark-mode .premium-page-container .model-column,
.dark-mode .premium-page-container .timeline-card,
.dark-mode .premium-page-container .offer-card,
.dark-mode .premium-page-container .case-study-result,
.dark-mode .premium-page-container .faq-question,
.dark-mode .premium-page-container .faq-answer {
    background: #151E33 !important;
    border-color: rgba(129, 140, 248, 0.16);
}

.dark-mode .premium-page-container .faq-item.active .faq-question {
    background: #1A2440 !important;
}

.dark-mode .premium-page-container .timeline-card.highlight {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.10) 100%) !important;
}

.dark-mode .premium-page-container .case-study-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
}

/* Tinty akcentowe */
.dark-mode .premium-page-container .problem-icon { background: rgba(236, 72, 153, 0.16) !important; }
.dark-mode .premium-page-container .qual-dont { background: rgba(244, 63, 94, 0.13) !important; }
.dark-mode .premium-page-container .qual-do { background: rgba(139, 92, 246, 0.15) !important; }
.dark-mode .premium-page-container .package-availability-note { background: rgba(16, 185, 129, 0.14) !important; }

/* Inline styles: najpierw białe... */
.dark-mode .premium-page-container [style*="background: white" i],
.dark-mode .premium-page-container [style*="background: #fff" i],
.dark-mode .premium-page-container [style*="white 0%" i],
.dark-mode .premium-page-container [style*="white 100%" i],
.dark-mode .premium-page-container [style*="var(--neutral-50) 0%" i] {
    background: #151E33 !important;
}

/* ...potem tinty per rodzina odcieni (późniejsza reguła wygrywa dla gradientów z "white") */
.dark-mode .premium-page-container [style*="#EFF6FF" i],
.dark-mode .premium-page-container [style*="#F0F9FF" i],
.dark-mode .premium-page-container [style*="#DBEAFE" i],
.dark-mode .premium-page-container [style*="#E0F2FE" i] {
    background: rgba(59, 130, 246, 0.13) !important;
}

.dark-mode .premium-page-container [style*="#EDE9FE" i],
.dark-mode .premium-page-container [style*="#F5F3FF" i],
.dark-mode .premium-page-container [style*="#FAF5FF" i],
.dark-mode .premium-page-container [style*="#F3E8FF" i] {
    background: rgba(139, 92, 246, 0.15) !important;
}

.dark-mode .premium-page-container [style*="#FFFBEB" i],
.dark-mode .premium-page-container [style*="#FFF7ED" i] {
    background: rgba(245, 158, 11, 0.13) !important;
}

.dark-mode .premium-page-container [style*="#FFF1F2" i] {
    background: rgba(244, 63, 94, 0.13) !important;
}

.dark-mode .premium-page-container [style*="#ECFDF5" i],
.dark-mode .premium-page-container [style*="#D1FAE5" i] {
    background: rgba(16, 185, 129, 0.14) !important;
}

/* Sekcja pakietów: panel zamiast tintu (id wygrywa specyficznością) */
.dark-mode .premium-page-container #pakiety {
    background: #0F1728 !important;
}

/* Kontrasty twardych kolorów tekstu / przycisków */
.dark-mode .premium-page-container .problem-card .agitation { color: #FB7185; }
.dark-mode .premium-page-container .package-availability-note { color: #6EE7B7 !important; }
.dark-mode .premium-page-container [style*="background: var(--neutral-600)" i] { background: #4B5563 !important; }

/* ---------- R4. Dark mode: reasekuracja / statystyki / testy darmowe ---------- */

/* R4a: reasekuracja — białe karty na ciemne, akcenty teal na miętowe */
.dark-mode .reass-highlights-section {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(245, 158, 11, 0.08)) !important;
}

.dark-mode .highlight-card,
.dark-mode .fit-card,
.dark-mode .process-step,
.dark-mode .pricing-card,
.dark-mode .faq-item {
    background: #151E33 !important;
    border-color: rgba(45, 212, 191, 0.20);
}

.dark-mode .price-tag,
.dark-mode .highlight-value,
.dark-mode .fit-icon,
.dark-mode .checklist i,
.dark-mode .faq-question i {
    color: #2DD4BF;
}

/* Reguły dark strony reas używają odwróconych zmiennych (neutral-100 = ciemny) — literały */
.dark-mode .pricing-card h3,
.dark-mode .faq-question { color: #F1F5F9; }

.dark-mode .checklist li,
.dark-mode .price-tag span,
.dark-mode .pricing-note { color: #CBD5E1; }

.dark-mode .highlight-label { color: #94A3B8; }

.dark-mode .highlight-text,
.dark-mode .fit-card p,
.dark-mode .process-step p,
.dark-mode .faq-answer p { color: #A9B7CC; }

.dark-mode .footer-bottom a { color: #A5B4FC; }
.dark-mode .pricing-note a,
.dark-mode .pricing-card a:not([class]) { color: #5EEAD4; }

/* R4b: statystyki — karty, wykresy, tabela danych */
.dark-mode .stat-card,
.dark-mode .chart-container,
.dark-mode .myth-card,
.dark-mode .tip-card,
.dark-mode .analysis-card,
.dark-mode .data-table {
    background-color: #151E33 !important;
    border-color: rgba(129, 140, 248, 0.16);
}

.dark-mode .stat-card::before {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.28) 0%, rgba(124, 58, 237, 0.22) 100%);
}

.dark-mode .stat-label,
.dark-mode .chart-title { color: #F1F5F9; }

.dark-mode .stat-description { color: #94A3B8; }

.dark-mode .tip-title { color: #93C5FD; }

.dark-mode .september-section {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.06)) !important;
    border-color: rgba(59, 130, 246, 0.40);
}

.dark-mode .september-content h2,
.dark-mode .september-content h3 { color: #93C5FD; }

.dark-mode th {
    background-color: #0F1728 !important;
    color: #CBD5E1;
}

.dark-mode td { border-bottom-color: rgba(148, 163, 184, 0.15); }

.dark-mode .high-rate { background-color: rgba(16, 185, 129, 0.15) !important; color: #6EE7B7 !important; }
.dark-mode .medium-rate { background-color: rgba(245, 158, 11, 0.15) !important; color: #FCD34D !important; }
.dark-mode .low-rate { background-color: rgba(239, 68, 68, 0.15) !important; color: #FCA5A5 !important; }

/* R4c: testy darmowe — baner LITE (jasna wersja wygrywała kaskadą ze styles.css),
   box źródeł, select, opisy opcji, newsletter */
.dark-mode.free-tests-page .lite-upgrade-banner {
    background:
        linear-gradient(135deg, rgba(30, 27, 75, 0.95) 0%, rgba(67, 56, 202, 0.42) 100%),
        #111827 !important;
    border-color: rgba(129, 140, 248, 0.30);
}

.dark-mode.free-tests-page .lite-upgrade-features {
    background: rgba(17, 24, 39, 0.42) !important;
    border-color: rgba(165, 180, 252, 0.16);
}

.dark-mode.free-tests-page .lite-upgrade-secondary {
    background: rgba(31, 41, 55, 0.7);
    border-color: rgba(165, 180, 252, 0.32);
    color: #C7D2FE;
}

.dark-mode .source-options {
    background-color: #111827 !important;
    border-color: rgba(129, 140, 248, 0.22);
}

.dark-mode .source-checkbox:hover { background-color: rgba(99, 102, 241, 0.16); }

.dark-mode .select-input {
    background-color: #111827 !important;
    border-color: rgba(129, 140, 248, 0.25);
    color: #E5E7EB;
}

.dark-mode .form-group label { color: #CBD5E1; }

.dark-mode .option-description,
.dark-mode .option-description2 { color: #C7D2FE; }

.dark-mode .selection-panel-heading span { color: #F1F5F9; }

.dark-mode .email-signup h3 { color: #F1F5F9; }
.dark-mode .email-signup p { color: #94A3B8; }

/* ---------- S. Responsywność ---------- */
@media (max-width: 992px) {
    .nd-hero { padding: 2.75rem 1.5rem 3rem; }
    .nd-hero-stats { justify-content: center; gap: 1.75rem; }
    .nd-chip-1 { left: 0; }
    .nd-chip-2 { right: 0; }
    .nd-cta-band { flex-direction: column; text-align: center; }
}

@media (max-width: 768px) {
    .app-header { top: 0.5rem; padding: 0.5rem 0.85rem; }

    .nav-tabs {
        width: 100%;
        border-radius: var(--nd-radius);
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar { display: none; }

    .nav-tab {
        flex: 0 0 auto;
        min-width: unset;
        max-width: unset;
        white-space: nowrap;
    }

    .free-tests-page .nav-tab {
        flex: 0 0 auto;
        min-width: unset;
        max-width: unset;
        white-space: nowrap;
    }

    .nd-chip { display: none; }

    .nd-newsletter-panel { padding: 2.25rem 1.5rem; }

    .nd-stat-value { font-size: 1.55rem; }
}

/* ---------- T. Dostępność: redukcja ruchu ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .nd-js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .nd-hero .hero-image img,
    .nd-newsletter-panel .newsletter-image img,
    .nd-chip,
    .nd-eyebrow-dot {
        animation: none;
    }

    .btn-primary::after,
    .lite-upgrade-primary::after { display: none; }
}

/* ---------- Quiz w dark mode (fix 2026-07-14 v2) ----------
   styles.css w .dark-mode ODWRACA zmienne --neutral-* (800/700 staja sie jasne),
   wiec tla karty quizu musza byc zadeklarowane na sztywno ciemnymi hexami. */
.dark-mode .quiz-content { background-color: #111827; color: #E2E8F0; }
.dark-mode .question { color: #F1F5F9; }
.dark-mode .question-info { background-color: rgba(99, 102, 241, 0.18); color: #C7D2FE; }
.dark-mode .answer { background-color: #1F2937; border-color: #374151; }
.dark-mode .answer:hover { border-color: rgba(129, 140, 248, 0.5); }
.dark-mode .answer-letter { background-color: #374151; color: #E5E7EB; }
/* stany odpowiedzi musza wygrac kaskada z .dark-mode .answer powyzej */
.dark-mode .answer-selected { background-color: #1E1B4B; border-color: #6366F1; }
.dark-mode .answer-correct { background-color: #064E3B; border-color: #10B981; }
.dark-mode .answer-incorrect { background-color: #7F1D1D; border-color: #EF4444; }
.dark-mode .answer-selected .answer-letter { background-color: #6366F1; color: #fff; }
.dark-mode .answer-correct .answer-letter { background-color: #10B981; color: #fff; }
.dark-mode .answer-incorrect .answer-letter { background-color: #EF4444; color: #fff; }
.dark-mode .result-title { color: #F1F5F9; }
.dark-mode .result-message { color: #A9B7CC; }