/* Merriweather — ten sam subset (321 KB) co reszta serwisu. Ten arkusz jest
   samodzielny: index.html NIE ładuje madd-min.css, więc @font-face musi być tutaj. */
@font-face {
  font-family: 'Merriweather';
  src: url('/css/Merriweather-Variable.subset.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════════
   DomaAI — układ w języku wizualnym x.ai
   Paleta przeniesiona 1:1 z tokenów x.ai (jet/ivory/dove/fog), z jednym
   podstawieniem: ich pomarańcz --color-sunset zastąpiony fioletem z loga
   DomaAI. Typografia: Merriweather — wspólna dla całego serwisu MADD.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* skala achromatyczna x.ai */
  --jet:#0a0a0a;  --charcoal:#1a1a1a; --umbra:#1f2229; --ink:#242832;
  --steel:#35383d; --fog:#7d8288;     --pewter:#adb4bf;
  --dove:#d5d9e2; --nimbus:#f0f1f5;   --ivory:#f9f8f5; --white:#ffffff;

  /* jedyny akcent — fiolet z logotypu DomaAI */
  --accent:#9838c0; --accent-ink:#7e2da3; --accent-wash:#f6edfa;

  --bg:var(--white);
  --bg-2:var(--ivory);
  --fg:var(--jet);
  --fg-2:#4a4f57;
  --fg-3:var(--fog);
  --line:var(--dove);
  --line-soft:#e6e9ef;

  --r:8px; --r-lg:16px; --r-pill:999px;
  --container:1200px;
  --nav-h:60px;

  --sans:'Merriweather',Georgia,Cambria,'Times New Roman',serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-wh-theme="dark"]{
  --bg:var(--jet);
  --bg-2:var(--charcoal);
  --fg:#f2f3f5;
  --fg-2:#b6bcc6;
  --fg-3:#8a9099;
  --line:#23262d;
  --line-soft:#1b1e24;
  --accent:#c07ae0;
  --accent-ink:#d5a0ec;
  --accent-wash:#1c1424;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  font-weight:400; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.022em; line-height:1.05}
p{margin:0}
button{font:inherit; color:inherit}
::selection{background:var(--accent); color:#fff}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px}
@media(max-width:640px){ .container{padding:0 18px} }

/* ── typografia pomocnicza ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--fg-3);
}
.lead{font-size:1.0625rem; line-height:1.6; color:var(--fg-2); letter-spacing:-.01em}
.mono{font-family:var(--mono)}

/* ── przyciski ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border-radius:var(--r);
  font-size:.9375rem; font-weight:500; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn-primary{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn-primary:hover{background:var(--steel); border-color:var(--steel)}
[data-wh-theme="dark"] .btn-primary:hover{background:#e2e4e8; border-color:#e2e4e8}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--fg); background:var(--bg-2)}
.btn-sm{height:36px; padding:0 14px; font-size:.875rem}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Nawigacja: patrz madd-nav-legacy.css (wersja sprzed przebudowy,
   ładowana po tym arkuszu). */

/* ── siatka włosowa: fundament układu x.ai ─────────────────────────── */
.rule{border-top:1px solid var(--line)}
.section{padding:88px 0}
.section-sm{padding:56px 0}
@media(max-width:760px){ .section{padding:56px 0} }

/* ── HERO ──────────────────────────────────────────────────────────── */
.hero{padding:78px 0 64px; position:relative; overflow:hidden}
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; height:30px; padding:0 12px 0 5px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.8125rem; color:var(--fg-2); margin-bottom:30px;
}
.hero-badge b{
  display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff; font-size:.6875rem; font-weight:500;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em;
}
.hero-badge span{color:var(--fg-3)}
.hero h1{
  font-size:clamp(2.6rem,6.4vw,5rem); font-weight:500;
  letter-spacing:-.02em; line-height:.98; max-width:15ch;
}
.hero h1 em{font-style:normal; color:var(--fg-3)}
.hero .lead{margin-top:26px; max-width:46ch; font-size:1.125rem}
.hero-cta{display:flex; gap:10px; margin-top:34px; flex-wrap:wrap}
.hero-meta{
  display:flex; gap:22px; margin-top:26px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.75rem; color:var(--fg-3); letter-spacing:.02em;
}
.hero-meta i{font-style:normal; color:var(--accent)}

/* ── kafle produktowe ──────────────────────────────────────────────── */
.tiles{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--line);
  gap:1px;
}
@media(max-width:1000px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .tiles{grid-template-columns:1fr} }
.tile{
  background:var(--bg); padding:22px 20px 20px;
  display:flex; flex-direction:column; min-height:290px;
  transition:background .2s var(--ease);
}
.tile:hover{background:var(--bg-2)}
.tile-demo{
  flex:1; margin-bottom:18px; border-radius:var(--r);
  background:var(--bg-2); border:1px solid var(--line-soft);
  padding:13px; overflow:hidden; position:relative;
  font-size:.75rem; line-height:1.5;
}
[data-wh-theme="dark"] .tile-demo{background:#111318}
.tile h3{font-size:1.0625rem; letter-spacing:-.025em; margin-bottom:5px}
.tile p{font-size:.8125rem; color:var(--fg-3); line-height:1.5}
.tile-link{
  margin-top:13px; font-size:.8125rem; color:var(--fg-2);
  display:inline-flex; align-items:center; gap:5px; transition:gap .2s var(--ease), color .2s;
}
.tile:hover .tile-link{gap:9px; color:var(--accent)}

/* mikro-demo: czat */
.d-msg{margin-bottom:7px}
.d-msg u{
  display:block; text-decoration:none; font-family:var(--mono); font-size:.625rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--fg-3); margin-bottom:2px;
}
.d-msg span{color:var(--fg-2)}
/* mikro-demo: agenci */
.d-agent{display:flex; align-items:center; gap:7px; margin-bottom:7px; color:var(--fg-2)}
.d-dot{width:6px; height:6px; border-radius:50%; flex-shrink:0}
.d-dot.run{background:var(--accent); animation:pulse 1.6s infinite}
.d-dot.done{background:var(--fg-3)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.d-agent b{font-weight:400}
.d-agent i{
  margin-left:auto; font-style:normal; font-family:var(--mono);
  font-size:.625rem; color:var(--fg-3);
}
/* mikro-demo: prompt */
.d-prompt{font-family:var(--mono); color:var(--fg-2); font-size:.6875rem; line-height:1.6}
.d-prompt::before{content:'> '; color:var(--accent)}
.d-swatches{display:flex; gap:5px; margin-top:11px}
.d-swatches i{flex:1; height:34px; border-radius:5px; display:block}
/* mikro-demo: głos */
.d-wave{display:flex; align-items:center; gap:3px; height:44px; margin-top:6px}
.d-wave i{
  flex:1; background:var(--accent); border-radius:2px; opacity:.55;
  animation:wave 1.25s ease-in-out infinite;
}
@keyframes wave{0%,100%{height:18%}50%{height:88%}}

/* ── pasek liczb ───────────────────────────────────────────────────── */
/* ── pasek liczb ────────────────────────────────────────────────────
   Przebudowa 2026-08-19. Co było nie tak w poprzedniej wersji:
   • sama `border-top` — pasek nie domykał się od dołu i wisiał w bieli;
   • padding `34px 24px 34px 0` był asymetryczny: treść dotykała lewej
     krawędzi komórki, a pionowa kreska stała 24 px od niej, więc linie
     czytały się jako niezwiązane z liczbami;
   • 56 px sekcji + 34 px komórki = 90 px powietrza nad i pod czterema
     krótkimi liczbami.
   Teraz: domknięta ramka, treść odsunięta od kreski symetrycznie,
   ciaśniejszy rytm i kreska akcentu, która wiąże pasek z kolorem marki. */

.stats-band{ padding:44px 0 }
@media(max-width:760px){ .stats-band{ padding:32px 0 } }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media(max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }

.stat{
  position:relative;
  padding:28px 26px 26px;
  border-right:1px solid var(--line-soft);
  transition:background .25s var(--ease);
}
/* Pierwsza komórka równa się z lewą krawędzią kolumny tekstu — inaczej
   pasek wygląda na wsunięty względem nagłówka i akapitu nad nim. */
.stat:first-child{ padding-left:0 }
.stat:last-child{ border-right:0 }
.stat:hover{ background:var(--bg-2) }

/* Krótka kreska akcentu wpuszczona w górną krawędź paska. Daje wierszowi
   rytm i wnosi fiolet marki, bez kolorowania samych liczb. */
.stat::before{
  content:''; position:absolute; top:-1px; left:26px;
  width:24px; height:2px; background:var(--accent); opacity:.42;
  transition:opacity .25s var(--ease), width .25s var(--ease);
}
.stat:first-child::before{ left:0 }
.stat:hover::before{ opacity:1; width:40px }

.stat b{
  display:block; font-size:clamp(2.25rem,4.2vw,3.15rem);
  font-weight:500; letter-spacing:-.03em; line-height:1;
  /* Cyfry o stałej szerokości: bez tego licznik CountUp skacze na boki,
     bo „1" jest węższa od „8" i przy każdej klatce zmienia się długość. */
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}
.stat span{
  display:block; margin-top:11px; font-family:var(--mono); font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--fg-3); line-height:1.45;
}

@media(max-width:760px){
  .stat{ padding:22px 18px 20px }
  /* W układzie 2-kolumnowym wiersz zaczyna też komórka 3. */
  .stat:nth-child(2n){ border-right:0 }
  .stat:nth-child(2n+1){ padding-left:0 }
  .stat:nth-child(2n+1)::before{ left:0 }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line-soft) }
}

@media (prefers-reduced-motion: reduce){
  .stat, .stat::before{ transition:none }
}

/* ── sekcja dwukolumnowa ───────────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
@media(max-width:900px){ .split{grid-template-columns:1fr; gap:40px} }
.split h2{font-size:clamp(1.9rem,3.4vw,2.75rem); letter-spacing:-.025em}
.split h2 em{font-style:normal; color:var(--fg-3); display:block}
.feat-list{list-style:none; margin:30px 0 0; padding:0}
.feat-list li{
  padding:15px 0; border-top:1px solid var(--line-soft);
  display:flex; gap:13px; align-items:baseline; font-size:.9375rem; color:var(--fg-2);
}
.feat-list li:last-child{border-bottom:1px solid var(--line-soft)}
.feat-list b{
  font-family:var(--mono); font-size:.6875rem; color:var(--accent);
  min-width:22px; font-weight:500;
}
.feat-list strong{color:var(--fg); font-weight:500}

/* okno „terminala” — sygnaturowy element x.ai */
.win{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2)}
[data-wh-theme="dark"] .win{background:#0d0f13}
.win-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  border-bottom:1px solid var(--line); background:var(--bg);
}
.win-bar i{width:10px; height:10px; border-radius:50%; display:block; background:var(--line)}
.win-bar span{
  margin-left:8px; font-family:var(--mono); font-size:.6875rem; color:var(--fg-3);
}
.win-body{padding:18px; font-family:var(--mono); font-size:.75rem; line-height:1.85; color:var(--fg-2)}
.win-body .k{color:var(--accent)}
.win-body .c{color:var(--fg-3)}
.win-body .out{color:var(--fg)}

/* ── siatka dostawców ──────────────────────────────────────────────── */
.providers{
  display:grid; grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--line); gap:1px; overflow:hidden;
}
@media(max-width:900px){ .providers{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .providers{grid-template-columns:repeat(2,1fr)} }
.prov{
  background:var(--bg); padding:24px 12px; text-align:center;
  font-size:.8125rem; color:var(--fg-2); letter-spacing:-.01em;
  transition:background .18s, color .18s;
}
.prov:hover{background:var(--bg-2); color:var(--fg)}

/* ── karty funkcji ─────────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:900px){ .cards{grid-template-columns:1fr} }
.card{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px;
  background:var(--bg); transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover{border-color:var(--fg-3); transform:translateY(-2px)}
.card .eyebrow{margin-bottom:14px; display:block}
.card h3{font-size:1.1875rem; letter-spacing:-.02em; margin-bottom:9px}
.card p{font-size:.9375rem; color:var(--fg-2); line-height:1.6}
.card a{
  display:inline-flex; align-items:center; gap:5px; margin-top:16px;
  font-size:.875rem; color:var(--accent); transition:gap .2s var(--ease);
}
.card:hover a{gap:9px}

/* ── plany ─────────────────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
       border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
@media(max-width:900px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .plans{grid-template-columns:1fr} }
.plan{background:var(--bg); padding:26px 22px}
.plan.is-hi{background:var(--bg-2)}
.plan h3{font-size:.9375rem; letter-spacing:-.02em; margin-bottom:4px}
.plan .price{font-size:1.875rem; font-weight:500; letter-spacing:-.025em; margin:12px 0 3px}
.plan .price small{font-size:.8125rem; font-weight:400; color:var(--fg-3); letter-spacing:-.01em}
.plan .cr{font-family:var(--mono); font-size:.6875rem; color:var(--fg-3); letter-spacing:.06em}
.plan ul{list-style:none; margin:16px 0 0; padding:0; font-size:.8125rem; color:var(--fg-2)}
.plan li{padding:5px 0 5px 16px; position:relative; line-height:1.5}
.plan li::before{content:'—'; position:absolute; left:0; color:var(--fg-3)}

/* ── podwójne CTA na dole (wzorzec „Choose how to get started”) ────── */
.start{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:820px){ .start{grid-template-columns:1fr} }
.start-card{border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 30px; display:flex; flex-direction:column}
.start-card h3{font-size:1.375rem; letter-spacing:-.02em; margin-bottom:9px}
.start-card > p{font-size:.9375rem; color:var(--fg-2)}
.start-card hr{border:0; border-top:1px solid var(--line); margin:22px 0}
.start-card ul{list-style:none; margin:0 0 26px; padding:0; font-size:.9063rem; color:var(--fg-2)}
.start-card li{padding:7px 0 7px 20px; position:relative}
.start-card li::before{
  content:''; position:absolute; left:0; top:14px;
  width:7px; height:7px; border-radius:50%; border:1px solid var(--accent);
}
.start-card .btn{margin-top:auto; align-self:flex-start}

/* ── stopka ────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line); padding:56px 0 34px; margin-top:20px}
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:34px}
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; gap:28px} }
@media(max-width:520px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand p{margin-top:12px; font-size:.8125rem; color:var(--fg-3); max-width:30ch; line-height:1.6}
.footer h4{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.13em; color:var(--fg-3); margin-bottom:13px;
}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:8px}
.footer li a{font-size:.875rem; color:var(--fg-2); transition:color .15s}
.footer li a:hover{color:var(--fg)}
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  font-size:.8125rem; color:var(--fg-3);
}

/* ── wejście sekcji ────────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .d-wave i,.d-dot.run{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Komponenty strony głównej madd.im
   ══════════════════════════════════════════════════════════════════════ */

/* nagłówek sekcji: druga linia wyszarzona — wzorzec x.ai */
.h-sec{font-size:clamp(1.75rem,3.2vw,2.6rem); letter-spacing:-.025em}
.h-sec em{font-style:normal; color:var(--fg-3); display:block}

.note{margin-top:20px; font-size:.875rem; color:var(--fg-3); max-width:62ch; line-height:1.6}

/* ── rejestr produktów ─────────────────────────────────────────────── */
.reg{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
@media(max-width:980px){ .reg{grid-template-columns:1fr} }
.reg-item{background:var(--bg); padding:26px 24px 22px; display:flex; flex-direction:column; transition:background .2s var(--ease)}
.reg-item:hover{background:var(--bg-2)}
.reg-head{display:flex; align-items:flex-start; gap:13px; margin-bottom:12px}

/* ── znaki produktow w kartach rejestru (2026-08-19) ─────────────────
   Konwencja przeniesiona 1:1 z produkty.html (.prod-logo w madd-refresh.css),
   zeby serwis nie mial dwoch pomyslow na te same trzy logotypy. Kazdy znak
   ma inny problem w ciemnym motywie i kazdy rozwiazany jest inaczej —
   swiadomie, bo to trzy rozne rodzaje grafiki. */
.reg-logo{ width:44px; height:44px; flex:0 0 44px; object-fit:contain; display:block }

/* ── wyrownanie wagi optycznej ───────────────────────────────────────
   Trzy znaki maja rozne proporcje i rozny „ciezar", wiec to samo pole
   44 px daje trzy rozne wielkosci na oko. Zmierzone granice rysunku:
     • przetarg.eu — pelny kafel, wypelnia 100% pola; ksztalt SOLIDNY,
       a takie zawsze czytaja sie wieksze niz kreska przy tym samym boku,
     • Spacerent   — kreska 411x380, prawie kwadrat, ~91% wysokosci,
     • DomaAI      — rysunek 452x293 w kwadratowym viewBox 506x506, czyli
       89% szerokosci ale tylko 58% wysokosci: przy contain renderuje sie
       jako 44x28 i wyglada na wyraznie mniejszy od pozostalych.
   Skalujemy transformem, a nie szerokoscia, zeby SLOT zostal 44 px —
   inaczej rozjechalyby sie poczatki kolumn tekstu w trzech kartach. */
.reg-logo.is-tile{ transform:scale(.87) }
.reg-logo.is-tint{ transform:scale(1.14) }

/* Bez tego pigulka „Dziala" nie odjezdza do prawej: reg-head stracil
   justify-content:space-between, gdy doszedl trzeci element. */
.reg-id{ flex:1 1 auto; min-width:0 }

/* przetarg.eu to pelny czarny kafel z bialym „P" — na grafitowym tle
   znika jako dziura. Dostaje obrys o tym samym promieniu co sam znak
   (rx 14 przy viewBox 64 = ~22%). */
[data-wh-theme="dark"] .reg-logo.is-tile{
  outline:1px solid rgba(255,255,255,.16);
  border-radius:22%;
}

/* Koniczynka DomaAI to przezroczysty SVG w #7831ac — jedyny z trojki, ktory
   dziala w obu motywach, ale na czerni traci moc. Rozjasniamy filtrem
   zamiast dokladac drugi plik. */
[data-wh-theme="dark"] .reg-logo.is-tint{ filter:brightness(1.32) saturate(1.08) }

/* Spacerent ma znak kreskowy (granatowy dom + zlota pinezka) — granat na
   czerni jest nieczytelny, wiec jest osobny plik z biala kreska. */
.reg-logo.logo-dark{ display:none }
[data-wh-theme="dark"] .reg-logo.logo-light{ display:none }
[data-wh-theme="dark"] .reg-logo.logo-dark{ display:block }

@media(max-width:560px){ .reg-logo{ width:37px; height:37px; flex-basis:37px } }
.reg-head h3{font-size:1.25rem; letter-spacing:-.03em}
.reg-kind{
  margin-top:3px; font-family:var(--mono); font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--fg-3);
}
.pill-live{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  height:24px; padding:0 10px; border-radius:var(--r-pill);
  border:1px solid var(--line); font-size:.6875rem; color:var(--fg-2);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em;
}
.pill-live i{width:6px; height:6px; border-radius:50%; background:#22a04a; display:block}
.reg-lede{font-size:.9063rem; line-height:1.6; color:var(--fg-2); margin-bottom:18px}

.spec{margin:0 0 20px; padding:0}
.spec > div{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-top:1px solid var(--line-soft);
}
.spec > div:last-child{border-bottom:1px solid var(--line-soft)}
.spec dt{
  font-family:var(--mono); font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--fg-3); flex-shrink:0;
}
.spec dd{margin:0; font-size:.8125rem; color:var(--fg-2); text-align:right}

.reg-foot{margin-top:auto; display:flex; gap:16px; flex-wrap:wrap; padding-top:4px}
.reg-foot a{font-size:.875rem; color:var(--fg); border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .18s, color .18s}
.reg-foot a:hover{border-color:var(--fg)}
.reg-foot a.ext{color:var(--accent); border-color:transparent}
.reg-foot a.ext:hover{border-color:var(--accent)}

/* ── kroki procesu ─────────────────────────────────────────────────── */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
@media(max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .steps{grid-template-columns:1fr} }
.step{background:var(--bg); padding:24px 22px 26px}
.step-n{
  display:block; font-family:var(--mono); font-size:.75rem; font-weight:500;
  color:var(--accent); letter-spacing:.1em; margin-bottom:14px;
}
.step h3{font-size:1rem; letter-spacing:-.025em; margin-bottom:8px}
.step p{font-size:.8438rem; color:var(--fg-2); line-height:1.6}

/* ── lista dokumentów ──────────────────────────────────────────────── */
.docs{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.docs-head{
  padding:14px 20px; background:var(--bg-2); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.13em; color:var(--fg-3);
}
.docs a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 20px; border-bottom:1px solid var(--line-soft);
  font-size:.9063rem; color:var(--fg-2); transition:background .16s, color .16s;
}
.docs a:last-child{border-bottom:0}
.docs a i{font-style:normal; color:var(--fg-3); transition:transform .2s var(--ease), color .2s}
.docs a:hover{background:var(--bg-2); color:var(--fg)}
.docs a:hover i{transform:translateX(3px); color:var(--accent)}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-size:1.0313rem; letter-spacing:-.02em; color:var(--fg);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{
  position:relative; flex-shrink:0; width:14px; height:14px;
  transition:transform .25s var(--ease);
}
.faq summary i::before,.faq summary i::after{
  content:''; position:absolute; background:var(--fg-3);
  transition:background .2s, opacity .25s var(--ease);
}
.faq summary i::before{left:0; top:6px; width:14px; height:1.5px}
.faq summary i::after{left:6px; top:0; width:1.5px; height:14px}
.faq details[open] summary i{transform:rotate(90deg)}
.faq details[open] summary i::after{opacity:0}
.faq summary:hover i::before,.faq summary:hover i::after{background:var(--accent)}
.faq details > p{
  padding:0 0 22px; margin:0; max-width:76ch;
  font-size:.9375rem; line-height:1.65; color:var(--fg-2);
}

/* ══════════════════════════════════════════════════════════════════════
   PRZEŁĄCZNIK JASNY / CIEMNY  (2026-08-19)

   Błąd: madd-theme.js wstrzykuje pływający przycisk #whTheme na KAŻDEJ
   stronie, ale jego style (.wh-theme) leżą wyłącznie w madd-min.css.
   Strona główna ładuje madd-x.css + madd-nav-legacy.css + madd-hero.css,
   więc przycisk lądował jako nieostylowany guzik 16x31 px na końcu <body>
   — w praktyce z madd.im NIE DAŁO SIĘ włączyć ciemnego motywu, mimo że
   cały arkusz ma komplet reguł [data-wh-theme="dark"].

   Odtworzone w tokenach madd-x.css, zachowaniem 1:1 z madd-min.css
   (pozycja, ikona księżyc/słońce, obrót na hover).
   ══════════════════════════════════════════════════════════════════════ */
.wh-theme{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:42px; height:42px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--fg-2); cursor:pointer;
  box-shadow:0 2px 6px rgba(10,10,10,.05), 0 12px 30px -16px rgba(10,10,10,.28);
  transition:color .18s var(--ease), border-color .18s var(--ease),
             transform .18s var(--ease), background .18s var(--ease);
}
.wh-theme:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px) }
.wh-theme:active{ transform:translateY(0) scale(.93) }
.wh-theme:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
[data-wh-theme="dark"] .wh-theme{ box-shadow:0 8px 26px -12px rgba(0,0,0,.75) }

.wh-theme svg{
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.wh-theme:hover svg{ transform:rotate(40deg) }

/* Księżyc w jasnym motywie (= „włącz ciemny"), słońce w ciemnym. */
.wh-theme .i-sun{ display:none }
.wh-theme .i-moon{ display:block }
[data-wh-theme="dark"] .wh-theme .i-sun{ display:block }
[data-wh-theme="dark"] .wh-theme .i-moon{ display:none }

@media (max-width:860px){ .wh-theme{ right:14px; bottom:14px } }
@media (prefers-reduced-motion: reduce){
  .wh-theme, .wh-theme svg{ transition:none }
  .wh-theme:hover{ transform:none }
  .wh-theme:hover svg{ transform:none }
}

/* ── Kotwice: natywny płynny scroll (Lenis usunięty 22.08 — scroll sterowany
   JS-em zamarzał przy każdym zajęciu głównego wątku). Offset pod fixed nav. ── */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:86px}