/* Light mode overlay for styles.css */
:root{
  --bg: #F6F7FB;
  --text: rgba(10, 14, 24, .92);
  --muted: rgba(10, 14, 24, .68);
  --border: rgba(10, 14, 24, .14);

  --shadow: 0 18px 60px rgba(10,14,24,.18);
}

/* tło strony w jasnym */
body{
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 12%, rgba(0,212,255,.14), transparent 60%),
    radial-gradient(900px 520px at 52% 90%, rgba(34,197,94,.08), transparent 60%),
    var(--bg);
  color: var(--text);
}

/* NAV w jasnym */
.nav{
  background: rgba(246,247,251,.72);
  border-bottom: 1px solid var(--border);
}

/* Hero / karty – delikatnie jaśniejsze powierzchnie */
.hero-card{
  border: 1px solid rgba(10,14,24,.14);
  background: linear-gradient(180deg, rgba(10,14,24,.03), rgba(10,14,24,.015));
}

.metric{
  border: 1px solid rgba(10,14,24,.14);
  background: rgba(255,255,255,.72);
}

.card{
  background: rgba(255,255,255,.70);
}

/* Ticker jaśniejszy */
.ticker{
  border: 1px solid rgba(10,14,24,.14);
  background: rgba(255,255,255,.70);
}

/* Guziki – dopasowanie do jasnego (primary zostaje ok) */
.btn{
  background: rgba(10,14,24,.03);
  border: 1px solid rgba(10,14,24,.14);
  color: var(--text);
}
.btn:hover{
  background: rgba(10,14,24,.05);
  border-color: rgba(10,14,24,.22);
}

/* Modal jaśniejszy */
.modal-backdrop{ background: rgba(0,0,0,.55); }
.modal-panel{
  border: 1px solid rgba(10,14,24,.14);
  background: rgba(246,247,251,.96);
}
.modal-desc,
.details-body,
.card p,
.metric-desc{
  color: var(--muted);
}

/* ================= LIGHT MODE: naprawa "białych" tekstów ================= */

/* 1) HERO tytuł (shine-text ma transparent fill) */
.shine-text{
  animation: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}

/* 2) Ticker "Specjalizacja:" + animowany tekst */
.ticker-label{
  color: var(--muted) !important;
}
.ticker-type{
  color: var(--text) !important;
}

/* 3) Nawigacja linki (czasem zostają białe) */
.navlinks a{
  color: var(--text) !important;
}

/* 4) Pille w "Oferta": Workflow / Statusy / Raporty / Integracje itd. */
.pill{
  color: var(--text) !important;
  background: rgba(10,14,24,.04) !important;
  border-color: var(--border) !important;
}

/* 5) Chipy typu "Responsywna • Modularna • Skalowalna" */
.chip{
  color: var(--text) !important;
  background: rgba(10,14,24,.04) !important;
  border-color: var(--border) !important;
}

/* 6) Real cards: tag/badge/meta (np. "Modele • Render • Animacje...") */
.real-tag, .real-badge{
  color: var(--text) !important;
  background: rgba(10,14,24,.04) !important;
  border-color: var(--border) !important;
}
.real-meta{
  color: var(--muted) !important;
}

/* 7) Timeline "1) Audyt i mapowanie procesu" (było praktycznie białe) */
.step b{
  color: var(--text) !important;
}

/* 8) Modal: nagłówki, lista, benefity ("Mniej chaosu / Przewidywalność...") */
.modal-info h4{
  color: var(--text) !important;
}
.modal-list{
  color: var(--muted) !important;
}
.benefit{
  color: var(--text) !important;
  background: rgba(10,14,24,.04) !important;
  border-color: var(--border) !important;
}

/* 9) Modal linki + strzałki galerii (często zostają białe) */
.modal-link{
  color: var(--text) !important;
  background: rgba(10,14,24,.04) !important;
  border-color: var(--border) !important;
}
.gbtn{
  color: var(--text) !important;
  background: rgba(10,14,24,.06) !important;
  border-color: var(--border) !important;
}

/* WOW pills w light mode – mocniejszy kontrast */
.real-tag,
.real-badge{
  border: 1px solid rgba(10,14,24,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70)) !important;
  box-shadow:
    0 12px 28px rgba(10,14,24,.14),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  color: rgba(10,14,24,.92) !important;
}

/* tag z delikatnym akcentem (bardziej “wow” w jasnym) */
.real-tag{
  border-color: rgba(0,140,255,.28) !important;
  background: linear-gradient(180deg, rgba(0,140,255,.10), rgba(124,92,255,.08)) !important;
}

/* połysk w jasnym – ciut mocniejszy */
.real-tag::before,
.real-badge::before{
  opacity: 1 !important;
  background: radial-gradient(140px 46px at 22% 28%, rgba(255,255,255,.95), transparent 60%) !important;
}

@keyframes pillShimmerSoft{
  0%   { transform: translateX(-180%) skewX(-14deg); opacity: 0; }
  10%  { opacity: .55; }
  22%  { opacity: .80; }
  40%  { transform: translateX(180%) skewX(-14deg); opacity: 0; }
  100% { transform: translateX(180%) skewX(-14deg); opacity: 0; }
}


/* shimmer w jasnym – bardziej widoczny */
.real-tag::after,
.real-badge::after{
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.85), transparent 60%) !important;
}

/* LIGHT: usuń "białą plamę" (połysk/shimmer) na pillach */
.real-tag::before,
.real-badge::before,
.pill::before,
.chip::before{
  opacity: .15 !important;   /* albo 0 żeby całkiem wyłączyć */
}


/* LIGHT: błysk widoczny, bez białej plamy */
@keyframes pillShimmerLight{
  0%   { transform: translateX(-70%) rotate(12deg); opacity: 0; }
  12%  { opacity: .45; }
  28%  { transform: translateX(70%) rotate(12deg); opacity: 0; }
  100% { transform: translateX(70%) rotate(12deg); opacity: 0; }
}

/* Wyłącz "mleczny" połysk z darka (żeby nie było plamy) */
.real-tag::before,
.real-badge::before{
  opacity: 0 !important;
}

/* Zrób shimmer pod jasne tło: węższy i ciemniejszy */
.real-tag::after,
.real-badge::after{
  opacity: 1 !important;
  animation: pillShimmerLight 3.2s ease-in-out infinite !important;

  /* mniejszy obszar, żeby nie “lało” */
  inset: -18px !important;

  /* zamiast białego — delikatny grafit */
	background: linear-gradient(
	  120deg,
	  transparent 46%,
	  rgba(255,255,255,.55),
	  transparent 54%
	) !important;
}


/* Na hover mocniej, ale nadal elegancko */
.real-tag:hover::after,
.real-tag:focus-visible::after,
.real-badge:hover::after,
.real-badge:focus-visible::after{
  animation-duration: 1.4s !important;
  filter: none !important;
}

/* Zachowaj „pill look” */
.real-tag,
.real-badge{
  overflow: hidden;
}


/* ===== LIGHT MODE: hamburger (3 kreski) ma być ciemny ===== */
.burger .bar{
  background: rgba(10, 14, 24, .82) !important;
}

/* (opcjonalnie) żeby cały przycisk też lepiej wyglądał w jasnym */
.burger{
  background: rgba(10, 14, 24, .04) !important;
  border-color: rgba(10, 14, 24, .14) !important;
}
/* =========================
   LIGHT: Accordion "open" + highlight in center
   ========================= */

.accordion details{
  transition: transform .26s ease, border-color .26s ease, background .26s ease, box-shadow .26s ease;
}

.accordion details::before{
  content:"";
  position:absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(124,92,255,.55), rgba(0,140,255,.40));
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity .26s ease, transform .26s ease;
  pointer-events:none;
}

.accordion details[open]{
  border-color: rgba(10,14,24,.22);
  background: rgba(255,255,255,.84);
  box-shadow: 0 18px 60px rgba(10,14,24,.16);
  transform: translateY(-1px);
}
.accordion details[open]::before{
  opacity: 1;
  transform: translateX(0);
}

.accordion details .details-body{
  border-top: 1px solid rgba(10,14,24,.10);
  background:
    radial-gradient(600px 160px at 12% 20%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(600px 160px at 88% 30%, rgba(0,140,255,.08), transparent 60%),
    rgba(255,255,255,.78);
}

.accordion details.is-center{
  border-color: rgba(0,140,255,.28);
  box-shadow:
    0 22px 80px rgba(10,14,24,.18),
    0 0 0 4px rgba(0,140,255,.08);
  transform: translateY(-2px);
}
.accordion details.is-center::before{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .accordion details,
  .accordion details::before,
  .accordion summary,
  .accordion details .details-body{
    transition: none !important;
    animation: none !important;
  }
}

/* LIGHT: real-tag / real-badge spójne z resztą */
.real-tag,
.real-badge{
  border-color: rgba(10,14,24,.14) !important;
  background: rgba(10,14,24,.04) !important;
  color: rgba(10,14,24,.86) !important;
  box-shadow: none !important;
}

/* LIGHT: delikatniejszy shimmer */
.real-tag::after,
.real-badge::after{
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.35) 45%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.35) 55%,
    transparent 100%
  ) !important;
  opacity: 0;
}