/* ============================================================
   SmartPrawnik — PREMIUM LAYER ("$10k look", pro 2026)
   Additive only. Brand tokens (--accent #B88746, --ink, --bg).
   Respects prefers-reduced-motion. Loaded after homepage/styles.css.
   ============================================================ */

/* ---------- 0. Global polish ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

::selection { background: var(--accent-light, #E8D0A8); color: var(--ink, #0D1F3C); }

/* refined custom scrollbar (desktop) */
@media (min-width: 880px) {
  * { scrollbar-width: thin; scrollbar-color: var(--line-2,#C4B89E) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--line-2,#C4B89E); border-radius: 99px; border: 3px solid var(--bg,#F4F0E8); }
  *::-webkit-scrollbar-thumb:hover { background: var(--accent,#B88746); }
}

/* premium focus ring (a11y) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent,#B88746); outline-offset: 3px; border-radius: 4px;
}

/* subtle film-grain texture overlay — editorial premium signature */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 1. Scroll-reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 2. Glass sticky nav + scroll shadow ---------- */
header[class*="header"], header[class*="nav"], .sp-nav, .ad-header {
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow .4s ease, background .4s ease, border-color .4s ease;
}
header.sp-scrolled, .sp-scrolled header, header.ad-header.sp-scrolled {
  box-shadow: 0 8px 30px -12px rgba(13,31,60,.18);
  border-bottom-color: var(--line-2,#C4B89E);
}

/* ---------- 3. Premium elevation / cards ---------- */
.sp-elevate, .ad-card, .ad-step, .ad-pismo, .ad-help .h, .no-card {
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .45s ease;
  will-change: transform;
}
@media (hover:hover) {
  .sp-elevate:hover, .ad-card:hover, .ad-step:hover, .ad-pismo:hover, .ad-help .h:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 50px -24px rgba(13,31,60,.30), 0 4px 14px -8px rgba(184,135,70,.20);
    border-color: var(--accent-light,#E8D0A8);
  }
}

/* ---------- 4. Buttons — sheen + spring lift ---------- */
.btn, button[class*="btn"], a[class*="btn"] {
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s ease;
}
@media (hover:hover) {
  .btn:hover, button[class*="btn"]:hover, a[class*="btn"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(13,31,60,.35);
  }
  .btn:active, button[class*="btn"]:active { transform: translateY(0); }
  /* gold sheen sweep */
  .btn::before, a[class*="btn"]::before {
    content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg); transition: left .7s ease; pointer-events: none;
  }
  .btn:hover::before, a[class*="btn"]:hover::before { left: 145%; }
}

/* ---------- 5. Animated link underline ---------- */
.sp-link, a.sp-underline {
  position: relative; text-decoration: none;
  background-image: linear-gradient(var(--accent,#B88746), var(--accent,#B88746));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s cubic-bezier(.22,.61,.36,1);
}
.sp-link:hover { background-size: 100% 1.5px; }

/* ---------- 6. Gold gradient text accent (hero <em>) ---------- */
.sp-gradient-text {
  background: linear-gradient(100deg, var(--accent-dark,#8A5F2E), var(--accent,#B88746) 45%, var(--accent-light,#E8D0A8) 60%, var(--accent-dark,#8A5F2E));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% auto; animation: spShimmer 6s linear infinite;
}
@keyframes spShimmer { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .sp-gradient-text { animation: none; } }

/* ---------- 7. Animated thin accent top-border (premium signature) ---------- */
.sp-topline { position: relative; }
.sp-topline::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent,#B88746), var(--accent-light,#E8D0A8), var(--accent,#B88746), transparent);
  background-size: 200% 100%; animation: spSlide 8s linear infinite;
}
@keyframes spSlide { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .sp-topline::before { animation: none; } }

/* ---------- 8. Floating idle motion (hero visual / cards) ---------- */
.sp-float { animation: spFloat 7s ease-in-out infinite; }
@keyframes spFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .sp-float { animation: none; } }

/* ---------- 9. Count-up stat numbers ---------- */
.sp-count { font-variant-numeric: tabular-nums; }

/* ---------- 10. Soft ambient glow behind hero (depth) ---------- */
.sp-ambient { position: relative; overflow: hidden; }
.sp-ambient::before {
  content: ""; position: absolute; z-index: -1; width: 60vw; max-width: 720px; height: 60vw; max-height: 720px;
  top: -10%; right: -10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,135,70,.10), transparent 65%);
  filter: blur(20px); pointer-events: none;
}

/* ============================================================
   11. RESPONSIVE PREMIUM — tablet + mobile parity ($10k look)
   Same depth/motion/polish, tuned for touch + smaller canvas.
   ============================================================ */

/* TABLET (≤1024px) */
@media (max-width: 1024px) {
  .sp-ambient::before { width: 80vw; height: 80vw; top: -6%; right: -16%; opacity: .85; }
  /* slightly tighter reveal travel so motion reads well on mid screens */
  [data-reveal] { transform: translateY(18px); }
  [data-reveal="left"]  { transform: translateX(-18px); }
  [data-reveal="right"] { transform: translateX(18px); }
}

/* TOUCH devices — replace hover lift with crisp tap feedback (parity, not loss) */
@media (hover: none) {
  .sp-elevate:active, .ad-card:active, .ad-step:active, .ad-pismo:active, .ad-help .h:active {
    transform: scale(.985);
    box-shadow: 0 14px 34px -20px rgba(13,31,60,.30);
    border-color: var(--accent-light,#E8D0A8);
  }
  .btn:active, button[class*="btn"]:active, a[class*="btn"]:active {
    transform: scale(.97);
    box-shadow: 0 8px 22px -12px rgba(13,31,60,.35);
  }
  /* sheen sweep on tap for touch */
  .btn:active::before, a[class*="btn"]:active::before { left: 145%; }
  /* underline reveals on tap */
  .sp-link:active { background-size: 100% 1.5px; }
}

/* MOBILE (≤640px) — keep the look, lighten the load */
@media (max-width: 640px) {
  /* grain lighter (perf + retina) */
  body::after { opacity: .018; background-size: 90px 90px; }
  /* ambient glow smaller + centered top */
  .sp-ambient::before { width: 110vw; height: 110vw; max-width:520px; max-height:520px; top: -4%; right: -25%; }
  /* glass nav: stronger blur for legibility over content */
  header[class*="header"], header[class*="nav"], .sp-nav, .ad-header {
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
  }
  /* reveals: shorter travel + faster so mobile scroll feels snappy, not laggy */
  [data-reveal] { transform: translateY(14px); transition-duration: .55s; }
  [data-reveal].is-in { transform: none; }
  /* reduce per-item stagger on mobile so lists don't feel slow */
  [data-reveal] { transition-delay: calc(var(--reveal-i, 0) * 45ms); }
  /* float subtler on mobile */
  @keyframes spFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}

/* tiny phones — disable grain entirely (perf) */
@media (max-width: 380px) { body::after { display: none; } }

/* Honor data-saver / low-power */
@media (prefers-reduced-data: reduce) {
  body::after { display: none; }
  .sp-gradient-text, .sp-topline::before, .sp-float { animation: none; }
}

/* ============================================================
   12. TRENDY 2026 (OMEGA-grounded: Fireart IV.2026)
   T3 kinetic typography · T2 kinetic gradient · T5 type-polish
   · scroll-progress · T1 tactile border. Warm-editorial, NIE brutalist.
   ============================================================ */

/* T5 — typographic polish (premium, native, zero koszt) */
h1, h2, h3, .display, .ad-hero h1, .ad-section h2 { text-wrap: balance; }
p, .lead, .sub, .ad-section .sub { text-wrap: pretty; }

/* T3 — kinetic hero entrance: blur→sharp + rise (bez DOM-split, bezpieczne) */
.sp-kinetic { animation: spKinetic 1.05s cubic-bezier(.22,.61,.36,1) both; }
@keyframes spKinetic {
  from { opacity: 0; transform: translateY(18px); filter: blur(12px); letter-spacing: .015em; }
  to   { opacity: 1; transform: none; filter: blur(0); letter-spacing: normal; }
}
@media (prefers-reduced-motion: reduce) { .sp-kinetic { animation: none; } }

/* Scroll-progress bar (złota nić u góry) — premium 2026 signature */
.sp-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-dark,#8A5F2E), var(--accent,#B88746), var(--accent-light,#E8D0A8));
  box-shadow: 0 0 10px rgba(184,135,70,.55);
  transition: width .08s linear;
}

/* T2 — animowany kinetic gradient (warm aurora, lekki CSS) — wzmacnia ambient */
.sp-ambient::after {
  content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none; opacity: .55;
  background:
    radial-gradient(42% 42% at 72% 18%, rgba(184,135,70,.12), transparent 62%),
    radial-gradient(38% 38% at 18% 82%, rgba(232,208,168,.10), transparent 62%);
  animation: spAurora 20s ease-in-out infinite alternate;
}
@keyframes spAurora { from { transform: translate(0,0) scale(1); } to { transform: translate(3%,-2%) scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .sp-ambient::after { animation: none; } }

/* T1 — tactile crisp 1px border na hover karty (nod do brutalist precision, on-brand) */
@media (hover:hover) {
  .ad-card:hover, .ad-step:hover, .ad-pismo:hover {
    box-shadow: inset 0 0 0 1px var(--accent,#B88746), 0 22px 50px -24px rgba(13,31,60,.30), 0 4px 14px -8px rgba(184,135,70,.20);
  }
}

/* ============================================================
   13. PRO MICRO 2026 — cursor-spotlight + animated divider
   ============================================================ */

/* Card hover-spotlight: złota poświata śledząca kursor (sygnatura pro) */
@media (hover:hover) and (pointer:fine) {
  .sp-spot { position: relative; isolation: isolate; }
  .sp-spot::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    border-radius: inherit;
    background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(184,135,70,.13), transparent 62%);
    transition: opacity .4s ease;
  }
  .sp-spot:hover::after { opacity: 1; }
}

/* Animowany divider — złota linia rysująca się przy reveal (line-draw) */
.sp-divider { position: relative; height: 1px; background: var(--line,#D8CFBE); overflow: hidden; }
.sp-divider::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent,#B88746), var(--accent-light,#E8D0A8));
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.sp-divider.is-in::after, [data-reveal].is-in .sp-divider::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .sp-divider::after { transition: none; transform: scaleX(1); } }

/* ============================================================
   14. DARK MODE 2.0 (warm-dark, OLED-friendly, opt-in)
   Flip tokenów + override sekcji-już-ciemnych (var(--ink) bg).
   ============================================================ */

/* płynne przejście kolorów przy toggle */
html.sp-theme-ready, html.sp-theme-ready body,
html.sp-theme-ready .ad-section, html.sp-theme-ready .ad-card, html.sp-theme-ready .ad-step,
html.sp-theme-ready .ad-trust, html.sp-theme-ready .ad-cta-final, html.sp-theme-ready .ad-header {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease;
}

/* --- DARK: warm near-black + light cream text + brighter gold --- */
html.dark {
  --bg:        #0E1217;
  --bg-2:      #161C24;
  --bg-3:      #1E2731;
  --bg-ink:    #0A0D12;
  --ink:       #ECE6DA;   /* tekst (jasny) */
  --ink-2:     #BDB6A6;
  --ink-3:     #A39C8C;
  --ink-muted: #8C8576;
  --ink-muted-aa: #A8A192;
  --line:      #2A323D;
  --line-2:    #3B4654;
  --accent:       #CFA468;
  --accent-dark:  #B88746;
  --accent-light: #EAD4AC;
  --success: #4CAe7f;
  --warning: #D2824E;
  --danger:  #D06B6B;
  color-scheme: dark;
  background: var(--bg);
}
html.dark body { background: var(--bg); color: var(--ink); }

/* grain subtelniejszy na ciemnym */
html.dark body::after { opacity: .04; mix-blend-mode: screen; }

/* sekcje które BYŁY ciemne (background:var(--ink)) — utrzymaj jako elevated-dark panel */
html.dark .ad-disclaimer-bar,
html.dark .ad-trust,
html.dark .ad-cta-final,
html.dark .section-dark,
html.dark .ad-footer,
html.dark .ad-calc .calc-out {
  background: #1A2029;
  color: var(--ink);
  border-color: rgba(207,164,104,.20);
}
html.dark .ad-trust h2, html.dark .ad-cta-final h2,
html.dark .ad-trust p, html.dark .ad-cta-final p,
html.dark .ad-calc .calc-out strong { color: var(--ink); }
html.dark .ad-trust .no-card { border-color: rgba(236,230,218,.14); background: rgba(255,255,255,.02); }
html.dark .ad-cta-final p { color: rgba(236,230,218,.72); }

/* primary CTA → złoty pop w dark */
html.dark .btn-primary { background: var(--accent); color: #15110A; }
html.dark .btn-primary:hover { background: var(--accent-light); }
html.dark .btn, html.dark a[class*="btn"] { border-color: var(--line-2); }
html.dark .btn-accent { background: var(--accent); color:#15110A; }

/* karty/sekcje na ciemnym tle */
html.dark .ad-card, html.dark .ad-step, html.dark .ad-pismo, html.dark .ad-help .h,
html.dark .ad-table-wrap, html.dark .ad-calc { background: var(--bg-2); border-color: var(--line); }
html.dark table.ad-table th { background: var(--bg-3); }
html.dark .ad-section[style*="bg-2"], html.dark .ad-section { border-top-color: var(--line); }

/* glass-nav na ciemnym */
html.dark .ad-header, html.dark header { background: rgba(14,18,23,.85) !important; border-bottom-color: var(--line); }

/* gradient hero — jaśniejsze złoto w dark */
html.dark .sp-gradient-text { background: linear-gradient(100deg, var(--accent-dark), var(--accent) 40%, var(--accent-light) 60%, var(--accent-dark)); -webkit-background-clip:text; background-clip:text; }

/* --- Toggle button (floating, dół-prawo) --- */
.sp-theme-toggle {
  position: fixed; bottom: 22px; right: 22px; z-index: 9997;
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: var(--bg-2); color: var(--accent); border: 1px solid var(--line-2);
  box-shadow: 0 8px 24px -10px rgba(13,31,60,.35);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s ease;
}
.sp-theme-toggle:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 30px -10px rgba(184,135,70,.45); }
.sp-theme-toggle svg { width: 21px; height: 21px; }
.sp-theme-toggle .sun { display: none; }
html.dark .sp-theme-toggle .sun { display: block; }
html.dark .sp-theme-toggle .moon { display: none; }
@media (max-width: 640px) { .sp-theme-toggle { bottom: 16px; right: 16px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .sp-theme-toggle { transition: none; } }

/* Dark-mode: elementy z var(--ink) jako TŁO (React inline bar, cmp-table, mega) → utrzymaj ciemne */
html.dark [style*="background"][style*="var(--ink)"]:not(a):not(button),
html.dark .cmp-table thead th.is-us,
html.dark .mega-feature {
  background-color: #1A2029 !important;
  border-color: rgba(207,164,104,.20) !important;
}
html.dark .cmp-table thead th.is-us, html.dark .mega-feature { color: var(--ink) !important; }

/* ============================================================
   15. DARK CONTRAST FIXES (audit-driven) — koniec black-on-black
   ============================================================ */

/* 1. NAV homepage (jasne tło nie-flipnięte) → ciemne + jasny tekst */
html.dark header, html.dark nav, html.dark [class*="header"]:not(a):not(li),
html.dark [class*="navbar"], html.dark [class*="topbar"], html.dark .ad-header {
  background-color: rgba(14,18,23,.92) !important;
  border-color: var(--line) !important;
}
html.dark header a:not([class*="btn"]):not(.cta), html.dark nav a:not([class*="btn"]):not(.cta),
html.dark [class*="header"] a:not([class*="btn"]):not(.cta), html.dark [class*="nav"] a:not([class*="btn"]):not(.cta),
html.dark .nav-link, html.dark header button:not([class*="btn"]), html.dark nav button:not([class*="btn"]),
html.dark header .serif, html.dark nav .serif { color: var(--ink) !important; }
/* złote CTA (też .cta, btn-primary, btn-accent) → ZAWSZE ciemny tekst na złotym */
html.dark .btn-primary, html.dark .btn-accent, html.dark a.cta, html.dark .cta,
html.dark .btn-primary *, html.dark .btn-accent *, html.dark a.cta * { color: #15110A !important; }

/* 2. CIEMNE PANELE (w light: background:var(--ink), tekst color:var(--bg-2)=jasny)
   → w dark wymuś JASNY tekst (var(--bg-2) flipnięty na ciemny = czarny-na-czarnym) */
html.dark [style*="background"][style*="var(--ink)"],
html.dark .cmp-table thead th.is-us, html.dark .mega-feature,
html.dark .ad-trust, html.dark .ad-cta-final, html.dark .ad-disclaimer-bar, html.dark .section-dark {
  background-color: #1A2029 !important;
}
html.dark .section-dark, html.dark .section-dark *:not([class*="btn"]),
html.dark .cmp-table thead th.is-us, html.dark .cmp-table thead th.is-us *:not([class*="btn"]),
html.dark .cmp-full.is-us, html.dark .cmp-full.is-us *:not([class*="btn"]),
html.dark .tp-pill.is-active,
html.dark .mega-feature, html.dark .mega-feature *:not([class*="btn"]),
html.dark .ad-trust, html.dark .ad-trust *:not([class*="btn"]),
html.dark .ad-cta-final, html.dark .ad-cta-final *:not([class*="btn"]),
html.dark .ad-disclaimer-bar, html.dark .ad-disclaimer-bar *:not([class*="btn"]),
html.dark [style*="background"][style*="var(--ink)"],
html.dark [style*="background"][style*="var(--ink)"] *:not([class*="btn"]) {
  color: var(--ink) !important;
}
/* re-assert złote akcenty/kickery w ciemnych sekcjach (czytelne na ciemnym) */
html.dark .section-dark [class*="kicker"], html.dark .section-dark [class*="accent"]:not([class*="btn"]),
html.dark .ad-trust .x, html.dark [class*="kicker"], html.dark .ad-disclaimer-bar a { color: var(--accent-light) !important; }
/* złote CTA: ZAWSZE ciemny tekst na złotym tle (czytelność) */
html.dark .btn-primary, html.dark .btn-accent { color: #15110A !important; background: var(--accent) !important; }
html.dark .btn-primary:hover, html.dark .btn-accent:hover { background: var(--accent-light) !important; }
/* re-assert złote akcenty w tych panelach */
html.dark .ad-trust .x, html.dark .ad-disclaimer-bar a,
html.dark [style*="background"][style*="var(--ink)"] [style*="accent"],
html.dark [style*="background"][style*="var(--ink)"] [class*="accent"]:not([class*="btn"]) { color: var(--accent-light) !important; }

/* 3. Outline buttony (color:var(--bg-2)/var(--ink) → ciemny w dark) → jasny tekst */
html.dark a.btn:not(.btn-primary):not(.btn-accent),
html.dark .btn:not(.btn-primary):not(.btn-accent),
html.dark .btn-ghost { color: var(--ink) !important; border-color: var(--line-2) !important; }

/* 4. Elementy z color:var(--bg-2)/var(--bg) jako TEKST (poza panelami) → jasny */
html.dark [style*="color: var(--bg-2)"], html.dark [style*="color:var(--bg-2)"],
html.dark [style*="color: var(--bg)"], html.dark [style*="color:var(--bg)"] { color: var(--ink) !important; }

/* 5. badge low-contrast */
html.dark [class*="badge"] { color: var(--ink-2) !important; }

/* HARD: złote przyciski zawsze ciemny tekst (bije re-assert accent) */
html.dark a.btn-accent, html.dark a.btn-accent *, html.dark button.btn-accent, html.dark a.btn-primary, html.dark a.btn-primary * { color:#15110A !important; }