/**
 * PixelCraft - UI Refresh 2026
 * Warstwa "design refresh": czysty, minimalistyczny, premium SaaS look.
 * Ładowana JAKO OSTATNI arkusz na każdej stronie (wygrywa kaskadę).
 *
 * Cel:
 *  - ~90% gradientów -> kolory solidne (spójna paleta)
 *  - mniej ruchu: brak dekoracyjnych, zapętlonych animacji
 *  - mniej szumu: bez glow/blur-blob/siatek, subtelne cienie
 *  - lepsza typografia, odstępy i hierarchia
 *  - działa w trybie ciemnym i jasnym; szanuje prefers-reduced-motion
 *
 * Uwaga: to warstwa nieinwazyjna (nie zmienia logiki HTML/JS/PHP).
 * Docelowe czyszczenie martwego kodu w źródłach = faza 2 (po akceptacji).
 */

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
  /* Akcent - jeden spójny kolor marki (indygo) */
  --ui-accent: #6366f1;
  --ui-accent-hover: #4f46e5;
  --ui-accent-soft: rgba(99, 102, 241, 0.12);
  --ui-accent-border: rgba(99, 102, 241, 0.28);

  /* Powierzchnie (dark) */
  --ui-bg: #0b1120;
  --ui-surface: #0f172a;
  --ui-surface-2: #131c31;
  --ui-border: rgba(148, 163, 184, 0.14);
  --ui-border-strong: rgba(148, 163, 184, 0.22);

  /* Tekst (dark) */
  --ui-text: #e5e9f0;
  --ui-text-muted: #94a3b8;
  --ui-text-faint: #64748b;

  /* Promienie */
  --ui-radius-sm: 8px;
  --ui-radius: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-pill: 999px;

  /* Cienie - subtelna, spójna skala */
  --ui-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.28);
  --ui-shadow: 0 4px 16px rgba(2, 6, 23, 0.28);
  --ui-shadow-lg: 0 10px 30px rgba(2, 6, 23, 0.32);

  /* Ruch */
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-dur: 0.2s;
}

html.pc-light {
  --ui-accent: #4f46e5;
  --ui-accent-hover: #4338ca;
  --ui-accent-soft: rgba(79, 70, 229, 0.08);
  --ui-accent-border: rgba(79, 70, 229, 0.22);

  --ui-bg: #ffffff;
  --ui-surface: #ffffff;
  --ui-surface-2: #f8fafc;
  --ui-border: #e6e9ef;
  --ui-border-strong: #d7dbe3;

  --ui-text: #0f172a;
  --ui-text-muted: #475569;
  --ui-text-faint: #64748b;

  --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ui-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  --ui-shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.10);
}

/* =========================================================================
   2. RUCH - wyłączenie dekoracyjnych, zapętlonych animacji
   (spinnery/loadery ORAZ przesuwane paski marquee ZOSTAJĄ - to celowe,
    markowe elementy; wyłączamy tylko pulsujące/świecące dekoracje)
   ========================================================================= */
.animate-pulse-slow,
[class*="glow"],
[class*="shine"],
[class*="shimmer"] {
  animation: none !important;
}

/* Delikatniejszy, spójny czas przejść dla interakcji */
a,
button,
.btn-primary,
.btn-secondary,
.pc-nav-link,
[class*="card"] {
  transition-duration: var(--ui-dur) !important;
  transition-timing-function: var(--ui-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   3. USUNIĘCIE SZUMU - blob glow, siatki, dekoracyjne tła
   ========================================================================= */
/* Duże rozmyte "kule" świetlne (dekoracja) */
[class*="blur-[80px]"],
[class*="blur-[100px]"],
[class*="blur-[120px]"],
[class*="blur-[140px]"],
[class*="blur-[160px]"] {
  opacity: 0 !important;
}

/* Dekoracyjne kontenery blob + siatka w hero strony głównej
   (wykluczamy slot tła/wideo, żeby nie zgasić hero) */
#hero > .absolute.inset-0.overflow-hidden.pointer-events-none:not(#hero-bg-slot):not(.hero-bg-slot),
#hero > .absolute.inset-0.opacity-\[0\.02\] {
  display: none !important;
}

/* =========================================================================
   4. GRADIENTY -> KOLORY SOLIDNE
   ========================================================================= */

/* 4a. Tekst gradientowy -> jednolity kolor (czytelny w obu motywach) */
.gradient-text,
.text-gradient {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ui-accent) !important;
  filter: none !important;
  text-shadow: none !important;
}
/* W nagłówkach na ciemnym tle akcentowe słowo pozostaje jasne dla kontrastu */
html:not(.pc-light) h1 .gradient-text,
html:not(.pc-light) h2 .gradient-text,
html:not(.pc-light) .pc-hero-line.gradient-text,
html:not(.pc-light) #hero-rotating-word.gradient-text {
  color: #a5b4fc !important;
}

/* 4b. Nagłówek strony - solidne tło zamiast gradientu */
.pc-header-shell,
#site-header.site-header-scrolled.pc-header-shell {
  background: rgba(11, 17, 32, 0.82) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
html.pc-light .pc-header-shell,
html.pc-light #site-header.site-header-scrolled.pc-header-shell {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
/* Kolorowa "tęczowa" kreska pod headerem -> subtelna, jednolita */
.pc-header-shell::before {
  background: var(--ui-border) !important;
  opacity: 1 !important;
}

/* 4c. Przyciski - solidny akcent, subtelny cień, delikatny hover */
.btn-primary {
  background: var(--ui-accent) !important;
  background-image: none !important;
  border: 1px solid var(--ui-accent) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--ui-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  filter: none !important;
}
.btn-secondary,
.final-cta-phone {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ui-border-strong) !important;
  box-shadow: none !important;
  color: var(--ui-text) !important;
}
.btn-secondary:hover,
.final-cta-phone:hover {
  border-color: var(--ui-accent) !important;
  color: var(--ui-accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* 4d. Logotypy AI w sekcji "Optymalizujemy widoczność w" - zawsze widoczne
   (zabezpieczenie przed globalnymi regułami warstwy refresh) */
#section-aivis .pc-aivis-logo,
#section-aivis .pc-aivis-logo img {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}
#section-aivis .pc-aivis-logo img {
  display: block !important;
}

/* Karty / panele - jednolita powierzchnia, spójny cień (bez zmiany tła,
   by nie odsłonić niewidocznego tekstu) */
.card,
.pricing-card,
.pc-panel,
.pc-tile {
  box-shadow: var(--ui-shadow-sm) !important;
}

/* =========================================================================
   5. CIENIE / GLOW -> subtelne i spójne; bez text-shadow
   ========================================================================= */
h1, h2, h3, h4, h5, h6,
.pc-hero-line,
.pc-hero-sub,
p, span, a, li {
  text-shadow: none !important;
}

/* Zredukuj wszelkie kolorowe "glow" cienie (indygo/teal) do neutralnych */
[style*="box-shadow"],
.shadow-glow,
[class*="shadow-primary"],
[class*="shadow-accent"] {
  box-shadow: var(--ui-shadow-sm) !important;
}

/* =========================================================================
   6. TYPOGRAFIA / ODSTĘPY / HIERARCHIA
   ========================================================================= */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}
h1, h2, h3 {
  letter-spacing: -0.02em;
}

/* Spójne zaokrąglenia dla przycisków i pól */
.btn-primary,
.btn-secondary,
input,
textarea,
select {
  border-radius: var(--ui-radius-sm) !important;
}

/* Delikatnie luźniejsze sekcje dla lepszego oddechu (bez łamania layoutu) */
@media (min-width: 768px) {
  .section-padding {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
}

/* Focus - dostępny, spójny (bez krzykliwego glow) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ui-accent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}