/* =====================================================================
   erovitan.eu — skórka `erv`.

   Makieta Krzyśka: czarno-czerwony premium, ciemne karty, czerwone
   poświaty pod packshotami, okrągłe kafle składników z czerwonym
   obrysem, badge witamin, ciemna tabela, akordeon FAQ.

   Paleta dokładnie z briefu. Czerwień jest AKCENTEM — tła zostają
   czarne, inaczej strona robi się krzykliwa i nieczytelna.

   ⚠ ZAKAZ `overflow-x` na html/body (pkt 44 i 184). Przewijanie w bok
     naprawia się u źródła: `min-width:0` na dzieciach gridów i tabele
     w kontenerze z własnym przewijaniem.
   ===================================================================== */

:root {
  --e-czern:    #050505;   /* tło strony */
  --e-czern-2:  #0B0B0B;   /* sekcje naprzemienne */
  --e-czern-3:  #151515;   /* karty */
  --e-bordo:    #7A0008;   /* najciemniejsza czerwień, poświaty */
  --e-czerw-2:  #C8141D;   /* czerwień spokojniejsza */
  --e-czerw:    #FF2933;   /* akcent, CTA */
  --e-bial:     #FFFFFF;
  --e-szary:    #D6D6D6;   /* tekst zwykły */
  --e-cichy:    #8E8E8E;   /* podpisy */
  --e-linia:    #242424;

  --e-r:        14px;      /* zaokrąglenie kart */
  --e-r-s:      10px;
  --e-szer:     1180px;
  --e-cien:     0 18px 46px rgba(0, 0, 0, .55);
  --e-glow:     0 0 90px rgba(200, 20, 29, .38);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--e-czern);
  color: var(--e-szary);
  font: 16.5px/1.72 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--e-czerw); }

/* Link pomijający nawigację — poza ekranem, ale osiągalny klawiaturą. */
.erv-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--e-czerw); color: #fff; padding: 10px 16px;
}
.erv-skip:focus { left: 0; }

.erv-szer { width: min(100% - 40px, var(--e-szer)); margin-inline: auto; }

/* ═══════════════════════════════════════════════ TYPOGRAFIA */
h1, h2, h3 {
  color: var(--e-bial);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.12;
  margin: 0;
}
h1 { font-size: clamp(38px, 5.6vw, 62px); text-transform: uppercase; }
.erv-h2 { font-size: clamp(25px, 3.1vw, 38px); text-transform: uppercase; }
.erv-h3 { font-size: clamp(17px, 1.7vw, 21px); text-transform: none; }

/* H2 z jednym słowem w czerwieni — wzór z makiety */
.erv-czerw { color: var(--e-czerw); }

.erv-kicker {
  color: var(--e-czerw); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px;
}

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.erv-lead { font-size: clamp(16.5px, 1.6vw, 19px); color: #BFBFBF; }
.erv-pod  { color: var(--e-cichy); font-size: 15px; }

/* ═══════════════════════════════════════════════ PASEK GÓRNY */
.erv-pasek {
  position: sticky; top: 0; z-index: 60;
  background: rgba(5, 5, 5, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--e-linia);
}
.erv-pasek-in {
  display: flex; align-items: center; gap: 26px;
  min-height: 68px;
}
.erv-znak {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--e-bial); font-weight: 800; font-size: 19px;
  letter-spacing: .04em; text-decoration: none; flex: 0 0 auto;
}
.erv-znak b { color: var(--e-bial); font-weight: 800; }
.erv-znak span { white-space: nowrap; }
.erv-znak svg { color: var(--e-czerw); }

.erv-menu { display: flex; gap: 22px; margin-left: auto; }
.erv-menu a {
  color: var(--e-szary); text-decoration: none; font-size: 14.5px;
  white-space: nowrap;
}
.erv-menu a:hover { color: var(--e-bial); }

/* ═══════════════════════════════════════════════ PRZYCISKI */
.erv-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--e-czerw) 0%, var(--e-czerw-2) 100%);
  color: #fff; text-decoration: none; font-weight: 700;
  padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-size: 15.5px; letter-spacing: .02em;
  box-shadow: 0 10px 28px rgba(200, 20, 29, .34);
  transition: transform .15s ease, box-shadow .15s ease;
}
.erv-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(200, 20, 29, .46); }
.erv-cta-maly { padding: 11px 20px; font-size: 14px; flex: 0 0 auto; }
.erv-cta-duzy { padding: 18px 34px; font-size: 17px; }

/* ═══════════════════════════════════════════════ SEKCJE */
.erv-sek { padding: clamp(46px, 6vw, 86px) 0; position: relative; }
.erv-sek-2 { background: var(--e-czern-2); }
.erv-sek-3 { background: var(--e-czern-3); }
.erv-mb { margin-bottom: 30px; }
.erv-mt { margin-top: 26px; }

/* Poświata — element dekoracyjny, nie tło sekcji */
.erv-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(200, 20, 29, .42) 0%, rgba(200, 20, 29, 0) 70%);
  filter: blur(6px);
}

/* ═══════════════════════════════════════════════ HERO */
.erv-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 76% 42%, rgba(122, 0, 8, .50) 0%, rgba(5, 5, 5, 0) 68%),
    var(--e-czern);
  padding: clamp(36px, 5vw, 70px) 0 clamp(44px, 6vw, 86px);
}
.erv-hero-in {
  display: grid; gap: clamp(26px, 4vw, 54px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
}
.erv-hero-tekst > * { max-width: 560px; }
.erv-hero h1 { margin-bottom: 18px; }
.erv-hero-lead { margin-bottom: 26px; }

/* trzy punkty z ikonami */
.erv-punkty { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 15px; }
.erv-punkty li { display: flex; gap: 14px; align-items: flex-start; }
.erv-punkty .erv-kolko {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(200, 20, 29, .12); border: 1px solid rgba(255, 41, 51, .42);
  color: var(--e-czerw);
}
.erv-punkty b { color: var(--e-bial); display: block; font-size: 15.5px; }
.erv-punkty span { font-size: 14.5px; color: var(--e-cichy); }

/* packshot w hero */
.erv-hero-pak { position: relative; margin: 0; min-width: 0; }
.erv-hero-pak img { width: 100%; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .6)); }
.erv-hero-pak .erv-glow {
  width: 68%; aspect-ratio: 1; left: 16%; top: 28%; z-index: -1;
}

/* ═══════════════════════════════════════════════ PAS CZTERECH KART */
.erv-czworka {
  display: grid; gap: 1px; background: var(--e-linia);
  border: 1px solid var(--e-linia); border-radius: var(--e-r);
  overflow: hidden; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.erv-czworka > div {
  background: var(--e-czern-3); padding: 28px 22px; text-align: center;
  min-width: 0;
}
.erv-czworka svg { color: var(--e-czerw); margin: 0 auto 12px; }
.erv-czworka b { color: var(--e-bial); display: block; margin-bottom: 7px; font-size: 16px; }
.erv-czworka span { font-size: 14px; color: var(--e-cichy); }

/* ═══════════════════════════════════════════════ UKŁAD 50/50 */
.erv-pol {
  display: grid; gap: clamp(26px, 4vw, 52px);
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center;
}
.erv-pol-odwr > :first-child { order: 2; }
.erv-fig { position: relative; margin: 0; min-width: 0; }
.erv-fig .erv-glow { width: 72%; aspect-ratio: 1; left: 14%; top: 18%; z-index: 0; }
.erv-fig img { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════ SKŁADNIKI ROŚLINNE */
.erv-rosliny {
  display: grid; gap: 26px 18px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.erv-roslina { text-align: center; min-width: 0; }
.erv-roslina figure {
  margin: 0 0 12px; width: 100%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--e-czerw);
  box-shadow: 0 0 0 6px rgba(200, 20, 29, .10), var(--e-cien);
}
.erv-roslina img { width: 100%; height: 100%; object-fit: cover; }
.erv-roslina b { color: var(--e-bial); display: block; font-size: 15px; margin-bottom: 4px; }
.erv-roslina span { font-size: 13.5px; color: var(--e-cichy); line-height: 1.5; display: block; }

/* ═══════════════════════════════════════════════ WITAMINY — BADGE */
.erv-badge-rzad { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.erv-badge {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, var(--e-czerw) 0%, var(--e-bordo) 100%);
  color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(200, 20, 29, .36);
}

/* ═══════════════════════════════════════════════ TABELA SKŁADU */
.erv-tab-owij { overflow-x: auto; border-radius: var(--e-r); border: 1px solid var(--e-linia); }
.erv-tabela { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.erv-tabela thead th {
  background: var(--e-czern-3); color: var(--e-bial); text-align: left;
  padding: 14px 16px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--e-linia);
}
.erv-tabela td, .erv-tabela tbody th {
  padding: 13px 16px; border-bottom: 1px solid var(--e-linia);
  text-align: left; font-weight: 400; color: var(--e-szary);
  background: rgba(11, 11, 11, .6);
}
.erv-tabela tbody th { color: var(--e-bial); font-weight: 600; }
.erv-tabela tr:last-child td, .erv-tabela tr:last-child th { border-bottom: 0; }
.erv-tabela em { display: block; color: var(--e-cichy); font-size: 13px; font-style: normal; }
.erv-tabela .erv-rws { color: var(--e-czerw); font-weight: 700; white-space: nowrap; }

/* ═══════════════════════════════════════════════ TRZY KROKI */
.erv-kroki { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.erv-krok { position: relative; text-align: center; min-width: 0; }
.erv-krok .erv-nr {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 14px; background: var(--e-czerw); color: #fff; font-weight: 800;
}
.erv-krok b { color: var(--e-bial); display: block; margin-bottom: 6px; }
.erv-krok span { font-size: 14.5px; color: var(--e-cichy); }

/* ═══════════════════════════════════════════════ KARTY LIFESTYLE */
.erv-kafle { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.erv-kafel {
  border-radius: var(--e-r); overflow: hidden; background: var(--e-czern-3);
  border: 1px solid var(--e-linia); min-width: 0;
}
.erv-kafel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.erv-kafel p { padding: 16px; margin: 0; font-size: 14.5px; color: var(--e-szary); }

/* ═══════════════════════════════════════════════ BEZPIECZEŃSTWO */
.erv-bezp { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.erv-bezp div { text-align: center; min-width: 0; }
.erv-bezp svg { color: var(--e-czerw); margin: 0 auto 10px; }
.erv-bezp b { display: block; color: var(--e-bial); font-size: 15px; }
.erv-nota {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--e-r-s);
  background: rgba(122, 0, 8, .14); border: 1px solid rgba(255, 41, 51, .26);
  font-size: 14.5px; color: #CFCFCF;
}

/* ═══════════════════════════════════════════════ CENA + FORMULARZ */
.erv-cena-blok {
  display: grid; gap: clamp(24px, 4vw, 46px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center;
}
.erv-karta {
  background: var(--e-czern-3); border: 1px solid var(--e-linia);
  border-radius: var(--e-r); padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--e-cien);
}
.erv-kwota {
  font-size: clamp(38px, 5vw, 54px); font-weight: 800; color: var(--e-bial);
  line-height: 1; margin: 6px 0 4px;
}
.erv-kwota-pod { color: var(--e-cichy); font-size: 14px; margin-bottom: 20px; }

.erv-pole { display: block; margin-bottom: 14px; }
.erv-pole span { display: block; font-size: 13.5px; color: var(--e-cichy); margin-bottom: 6px; }
.erv-pole input {
  width: 100%; padding: 14px 16px; border-radius: var(--e-r-s);
  border: 1px solid var(--e-linia); background: #0A0A0A; color: var(--e-bial);
  font: inherit; font-size: 15.5px;
}
.erv-pole input:focus { outline: 2px solid var(--e-czerw); outline-offset: 1px; }
.erv-form .erv-cta { width: 100%; justify-content: center; }
.erv-zgoda { font-size: 12.5px; color: var(--e-cichy); margin-top: 14px; line-height: 1.55; }
.erv-zgoda a { color: var(--e-czerw); }

/* honeypot — poza ekranem, NIE `display:none` (boty to czytają) */
.erv-pulapka {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.erv-odp { margin-top: 14px; font-size: 14.5px; }
.erv-odp[hidden] { display: none; }
.erv-odp-ok  { color: #6BE07A; }
.erv-odp-zle { color: #FF6B73; }

/* ═══════════════════════════════════════════════ PROCES ZAKUPU */
.erv-proces { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.erv-proces div {
  background: var(--e-czern-3); border: 1px solid var(--e-linia);
  border-radius: var(--e-r); padding: 22px 18px; text-align: center; min-width: 0;
}
.erv-proces svg { color: var(--e-czerw); margin: 0 auto 10px; }
.erv-proces b { display: block; color: var(--e-bial); font-size: 15px; margin-bottom: 5px; }
.erv-proces span { font-size: 14px; color: var(--e-cichy); }

/* ═══════════════════════════════════════════════ FAQ */
.erv-faq { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.erv-roz {
  background: var(--e-czern-3); border: 1px solid var(--e-linia);
  border-radius: var(--e-r-s); padding: 0; min-width: 0;
}
.erv-roz summary {
  cursor: pointer; padding: 16px 44px 16px 18px; position: relative;
  color: var(--e-bial); font-weight: 600; font-size: 15.5px; list-style: none;
}
.erv-roz summary::-webkit-details-marker { display: none; }
.erv-roz summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); color: var(--e-czerw); font-size: 22px;
  font-weight: 700; line-height: 1;
}
.erv-roz[open] summary::after { content: "−"; }
.erv-roz > div { padding: 0 18px 18px; font-size: 15px; }

/* ═══════════════════════════════════════════════ STOPKA */
.erv-stopka {
  background: #030303; border-top: 1px solid var(--e-linia);
  padding: 40px 0 34px; margin-top: 10px;
}
.erv-stopka-gora {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  justify-content: space-between; padding-bottom: 20px;
  border-bottom: 1px solid var(--e-linia); margin-bottom: 20px;
}
.erv-znak-stopka { margin: 0; }
.erv-stopka-atuty { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.erv-stopka-atuty li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--e-cichy); }
.erv-stopka-atuty svg { color: var(--e-czerw); }
.erv-stopka-nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.erv-stopka-nav a { color: var(--e-szary); text-decoration: none; font-size: 14px; }
.erv-stopka-nav a:hover { color: var(--e-bial); }
.erv-stopka-nota { font-size: 13px; color: #6F6F6F; margin-bottom: 8px; }
.erv-stopka-kraje { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.erv-stopka-kraje a { color: var(--e-cichy); font-size: 13.5px; text-decoration: none; }
.erv-stopka-kraje a[aria-current] { color: var(--e-czerw); }

/* ═══════════════════════════════════════════════ ROZSTAJ (korzeń) */
.erv-rozstaj { padding: clamp(40px, 7vw, 90px) 0; text-align: center; }
.erv-rozstaj h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.erv-kraje { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.erv-kraje a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--e-czern-3); border: 1px solid var(--e-linia);
  border-radius: var(--e-r); padding: 18px 20px; text-decoration: none;
}
.erv-kraje b { color: var(--e-bial); font-size: 16.5px; }
.erv-kraje span { color: var(--e-cichy); font-size: 14px; }
.erv-kraje em { color: var(--e-czerw); font-style: normal; font-weight: 700; }

/* ═══════════════════════════════════════════════ DOKUMENTY */
.erv-dok { padding: clamp(36px, 5vw, 70px) 0; }
.erv-dok h1 { font-size: clamp(27px, 3.6vw, 40px); margin-bottom: 20px; }
.erv-dok h2 { font-size: clamp(19px, 2.2vw, 25px); margin: 30px 0 12px; text-transform: none; }
.erv-dok .erv-waski { max-width: 820px; }
.erv-dok ul, .erv-dok ol { padding-left: 22px; }
.erv-dok li { margin-bottom: 8px; }

/* ═══════════════════════════════════════════════ PASEK NA TELEFON */
.erv-listwa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: center; gap: 12px;
  background: rgba(5, 5, 5, .96); border-top: 1px solid var(--e-linia);
  padding: 10px 16px; backdrop-filter: blur(8px);
}
.erv-listwa-t { min-width: 0; }
.erv-listwa b { color: var(--e-bial); display: block; font-size: 14.5px; line-height: 1.2; }
.erv-listwa span { color: var(--e-czerw); font-weight: 700; font-size: 15px; }
.erv-listwa .erv-cta { margin-left: auto; flex: 0 0 auto; }

/* ═══════════════════════════════════════════════ RESPONSYWNOŚĆ */
@media (max-width: 1040px) {
  .erv-rosliny { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .erv-czworka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erv-kafle   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erv-proces  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erv-menu    { display: none; }
}

@media (max-width: 860px) {
  .erv-hero-in, .erv-pol, .erv-cena-blok { grid-template-columns: minmax(0, 1fr); }
  .erv-pol-odwr > :first-child { order: 0; }
  .erv-hero-tekst > * { max-width: none; }
  .erv-hero-pak { order: 2; }
  .erv-faq { grid-template-columns: minmax(0, 1fr); }
  .erv-kroki { grid-template-columns: minmax(0, 1fr); }
  .erv-cta { width: 100%; justify-content: center; }
  .erv-cta-maly { width: auto; }
  .erv-listwa { display: flex; }
  body { padding-bottom: 72px; }
}

@media (max-width: 560px) {
  .erv-rosliny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erv-bezp    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erv-szer    { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .erv-cta { transition: none; }
}