/* ==========================================================
   medstrony.pl — system wizualny
   Grafit + miedź. Jeden arkusz, pięć stron.
   ========================================================== */

:root{
  /* Paleta — gabinetowa. Sześć wartości, jeden akcent.
     --teal przechodzi AA w obu rolach: jako tło pod bielą (4.93)
     i jako tekst na jasnym tle (4.67). Stąd jeden token, nie dwa. */
  --white:#FFFFFF;
  --clean:#F7F9FB;
  --edge:#E4E9EF;
  --grey:#5F6B78;
  --ink:#16212E;
  --teal:#12799F;
  --teal-dp:#0F6685;

  /* Promienie */
  --r-sm:4px;
  --r-md:6px;
  --r-lg:10px;

  /* Cienie — ciepłe, w tonie grafitu */
  --sh-sm:0 1px 2px rgba(22,33,46,.04), 0 1px 6px rgba(22,33,46,.04);
  --sh-md:0 2px 4px rgba(22,33,46,.04), 0 8px 22px rgba(22,33,46,.06);
  --sh-lg:0 3px 8px rgba(22,33,46,.05), 0 16px 36px rgba(22,33,46,.09);

  --ease:cubic-bezier(.16,1,.3,1);

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Liczby: ten sam Inter + tabular-nums. Bez drugiego kroju. */
  --num:'Inter', -apple-system, sans-serif;

  --wrap:1400px;
  --gutter:24px;
  --sec:clamp(56px, 6.5vw, 88px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

h1,h2,h3,h4{font-family:var(--sans);line-height:1.15;letter-spacing:-0.02em}
h1{font-size:clamp(34px,5vw,58px);font-weight:600}
h2{font-size:clamp(28px,3.4vw,42px);font-weight:600}
h3{font-size:20px;font-weight:600;letter-spacing:-0.01em}
p{color:var(--grey)}
strong{color:var(--ink);font-weight:600}

a{color:var(--teal);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--teal-dp)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--r-sm)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec) 0}
.sec--clean{background:var(--clean)}
.sec--dark{background:var(--ink);color:var(--white)}
.sec--dark h2{color:var(--white)}
.sec--dark p{color:#93A1B0}

/* ---------- Nagłówek sekcji: miedziana linia ---------- */
.eyebrow{
  font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--teal);
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--teal);flex:none}
.sec-head{max-width:60ch;margin-bottom:44px}
.sec-head p{margin-top:16px;font-size:18px}
.sec-head--center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head--center .eyebrow{justify-content:center}
.lead{font-size:19px;color:var(--grey);max-width:56ch}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease), transform .55s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- Przyciski ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-0.01em;
  padding:16px 30px;border-radius:var(--r-md);border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background .22s var(--ease), color .22s var(--ease),
             transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.btn--primary{background:var(--teal);color:#fff;box-shadow:var(--sh-sm)}
.btn--primary:hover{background:var(--teal-dp);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.sec--dark .btn--ghost{color:var(--white);border-color:rgba(255,255,255,.28)}
.sec--dark .btn--ghost:hover{border-color:var(--white);color:var(--white)}
.btn--sm{padding:11px 20px;font-size:15px;border-radius:var(--r-sm)}
.btn--text{
  background:none;border:0;color:var(--teal);padding:16px 4px;box-shadow:none;
}
.btn--text:hover{color:var(--teal-dp);background:none;transform:none;box-shadow:none}
.btn--text svg{transition:transform .24s var(--ease)}
.btn--text:hover svg{transform:translateX(4px)}
.btn--block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:36px}
.cta-note{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:13px;color:var(--grey);margin-top:18px;letter-spacing:-0.01em;line-height:1.6;max-width:52ch}
.cta-note a{text-decoration:underline;text-underline-offset:3px;font-weight:500}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--edge);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{
  font-size:19px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);
  display:flex;align-items:center;gap:9px;
}
.logo:hover{color:var(--ink)}
.logo i{width:7px;height:7px;background:var(--teal);border-radius:50%;flex:none}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-size:15px;font-weight:500;color:var(--grey);position:relative;padding:4px 0}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink)}
.nav a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--teal);
}
/* Przycisk w nawigacji jest przyciskiem, nie linkiem menu — .nav a nadpisywało mu biel. */
.nav a.btn--primary,
.nav a.btn--primary:hover{color:#fff}
/* Szerszy oddech po bokach niż zwykły .btn--sm: przycisk ma się odcinać od
   linków menu, a nie czytać jak kolejna pozycja nawigacji.
   Poniżej 900 px nadpisuje go reguła .nav a.btn z media query. */
.nav a.btn--sm{padding-left:34px;padding-right:34px}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink);border-radius:var(--r-sm)}
/* Obie ikony sterowane po własnych klasach — żadnej reguły `.burger svg`,
   która biłaby je na specyficzności i trzymała krzyżyk widoczny na stałe. */
.burger__o{display:block}
.burger__x{display:none}
.burger[aria-expanded="true"] .burger__o{display:none}
.burger[aria-expanded="true"] .burger__x{display:block}

/* Poniżej 900 px nawigacja chowa się POD hamburger, nie znika.
   (Wcześniej linki były po prostu ukrywane — na telefonie nie było jak
   dojść do Oferty, Realizacji i O mnie.) */
@media(max-width:900px){
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);border-bottom:1px solid var(--edge);box-shadow:var(--sh-md);
    padding:6px var(--gutter) 20px;display:none;
  }
  .nav.open{display:flex}
  .nav a{font-size:17px;color:var(--ink);padding:15px 2px;border-bottom:1px solid var(--edge)}
  .nav a.on::after{display:none}
  .nav a.btn{margin-top:18px;border-bottom:0;padding:15px 24px;font-size:16px}
}

/* ---------- Hero ---------- */
.hero{padding:clamp(48px,6vw,76px) 0 var(--sec)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.hero h1{margin-bottom:24px}
.hero .lead{max-width:50ch}

/* Metryki */
.metrics{
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  margin-top:44px;padding-top:30px;border-top:1px solid var(--edge);
}
.metrics div{padding-right:38px;margin-right:38px;border-right:1px solid var(--edge)}
.metrics div:last-child{border:0;padding:0;margin:0}
.metrics b{
  display:block;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:26px;font-weight:500;
  color:var(--ink);letter-spacing:-0.03em;line-height:1.1;
}
.metrics span{display:block;font-size:13px;color:var(--grey);margin-top:6px}

/* Wizual hero */
.visual{position:relative}
.visual__frame{
  background:var(--clean);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-md);
}
.visual__screen{background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm)}
.visual__bar{display:flex;gap:6px;margin-bottom:18px}
.visual__bar i{width:8px;height:8px;border-radius:50%;background:var(--edge)}
.visual__nav{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--clean)}
.visual__logo{width:70px;height:7px;background:var(--ink);border-radius:3px}
.visual__links{display:flex;gap:8px}
.visual__links i{width:24px;height:5px;background:var(--edge);border-radius:3px}
.visual__body{padding:26px 18px 28px}
.visual__h{height:12px;background:var(--ink);border-radius:3px;width:74%;margin-bottom:9px}
.visual__h.s{width:48%}
.visual__t{height:6px;background:var(--edge);border-radius:3px;width:86%;margin-top:16px}
.visual__t.s{width:62%;margin-top:8px}
.visual__btn{margin-top:22px;width:126px;height:34px;background:var(--teal);border-radius:6px}
.visual__row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:26px}
.visual__row i{height:46px;background:var(--clean);border-radius:6px}
/* ---------- Karty (baza) ---------- */
.card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.sec--clean .card{background:var(--white)}

/* ---------- Kafle (korzyści / dla kogo) ---------- */
.intent{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.intent__c{
  padding:32px 28px 30px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;min-height:230px;text-decoration:none;
}
.intent__c::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal);
  transition:width .4s var(--ease);
}
a.intent__c:hover::after{width:100%}

.intent__ic{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--clean);border-radius:var(--r-md);color:var(--teal);margin-bottom:22px;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.sec--clean .intent__ic{background:var(--white)}
.intent__c:hover .intent__ic{background:var(--teal);color:#fff;transform:scale(1.06)}

.intent__c h3{
  font-size:18px;color:var(--ink);letter-spacing:-0.02em;line-height:1.35;margin-bottom:10px;
}
.intent__d{font-size:14px;color:var(--grey);line-height:1.6;margin-bottom:18px}
.intent__arw{
  margin-top:auto;color:var(--edge);
  transition:color .3s var(--ease), transform .3s var(--ease);
}
a.intent__c:hover .intent__arw{color:var(--teal);transform:translateX(6px)}
article.intent__c:hover{transform:translateY(-4px)}

/* ---------- Zakres / usługi (lista pozioma) ---------- */
.rows{border-top:1px solid var(--edge)}
.rows__r{
  display:grid;grid-template-columns:56px 1fr 1.3fr auto;gap:28px;align-items:center;
  padding:28px 4px;border-bottom:1px solid var(--edge);
  transition:background .24s var(--ease), padding .24s var(--ease);
}
.rows__r:hover{background:rgba(18,121,159,.03);padding-left:14px;padding-right:14px}
.rows__n{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:13px;color:var(--teal);letter-spacing:.04em}
.rows__r h3{font-size:19px}
.rows__d{font-size:16px;color:var(--grey);line-height:1.55}
.rows__p{
  font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:18px;font-weight:500;color:var(--ink);
  letter-spacing:-0.02em;white-space:nowrap;text-align:right;
}
.rows__p small{display:block;font-family:var(--sans);font-size:12px;color:var(--grey);font-weight:400;margin-top:4px}
.rows__p small s{text-decoration:line-through;opacity:.75}
.rows__p em{font-style:normal;color:var(--teal)}

/* ---------- Zakres w cenie (siatka ikon) ---------- */
.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--edge)}
.incl__c{background:var(--white);padding:34px 30px}
.sec--clean .incl{background:var(--edge)}
.sec--clean .incl__c{background:var(--clean)}
.incl__ic{color:var(--teal);margin-bottom:20px}
.incl__c h3{font-size:17px;margin-bottom:8px}
.incl__c p{font-size:15px;line-height:1.55}

/* ---------- Proces: oś pionowa ---------- */
.tl{list-style:none;position:relative;max-width:760px;margin:0 auto;padding-left:8px}
/* pionowa linia */
.tl::before{
  content:"";position:absolute;left:23px;top:16px;bottom:16px;width:2px;
  background:linear-gradient(to bottom, var(--edge) 0%, var(--edge) 100%);
}
.tl__s{
  position:relative;display:grid;grid-template-columns:48px 1fr;gap:24px;
  padding:0 0 22px;align-items:start;
}
.tl__s:last-child{padding-bottom:0}

/* numer w kółku */
.tl__n{
  position:relative;z-index:2;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--white);color:var(--teal);
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--edge);
  transition:background .3s var(--ease), color .3s var(--ease),
             box-shadow .3s var(--ease), transform .3s var(--ease);
}
.sec--clean .tl__n{background:var(--clean)}
.tl__s:hover .tl__n{
  background:var(--teal);color:#fff;box-shadow:0 0 0 2px var(--teal);transform:scale(1.06);
}

/* treść kroku */
.tl__c{
  background:var(--white);border-radius:var(--r-lg);padding:24px 28px;
  box-shadow:var(--sh-sm);position:relative;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.sec--clean .tl__c{background:var(--clean)}
/* wskaźnik w stronę osi */
.tl__c::before{
  content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;
  background:inherit;transform:rotate(45deg);
  border-radius:2px;
}
.tl__s:hover .tl__c{transform:translateX(5px);box-shadow:var(--sh-md)}

.tl__c h3{font-size:18px;margin-bottom:8px;letter-spacing:-0.01em}
.tl__c p{font-size:15px;line-height:1.65;max-width:62ch}

/* ---------- Cennik (kompakt) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{padding:34px 30px;display:flex;flex-direction:column;position:relative}
.plan--hi{box-shadow:0 0 0 1px var(--teal), var(--sh-md)}
.plan--hi:hover{box-shadow:0 0 0 1px var(--teal), var(--sh-lg)}
.plan__tag{
  position:absolute;top:-1px;right:24px;background:var(--teal);color:#fff;
  font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  padding:6px 11px;border-radius:0 0 var(--r-sm) var(--r-sm);
}
.plan h3{font-size:18px;margin-bottom:20px}
.plan__amt{
  font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:34px;font-weight:500;color:var(--ink);
  letter-spacing:-0.03em;line-height:1;
}
.plan__amt small{display:block;font-family:var(--sans);font-size:13px;color:var(--grey);font-weight:400;margin-top:8px;letter-spacing:0}
.plan__was{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:14px;color:var(--grey);text-decoration:line-through;margin-bottom:6px}
.plan__list{list-style:none;margin:26px 0 28px;display:grid;gap:12px;flex:1}
.plan__list li{font-size:15px;color:var(--grey);display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.plan__list svg{flex:none;color:var(--teal);margin-top:5px}

/* ---------- Tabela kosztów ---------- */
.costs{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;margin-top:28px}
.sec--clean .costs{background:var(--white)}
.costs__r{display:grid;grid-template-columns:1.2fr auto;gap:24px;padding:18px 28px;align-items:center}
.costs__r+.costs__r{border-top:1px solid var(--edge)}
.costs__r b{font-size:15px;font-weight:500;color:var(--ink)}
.costs__r i{display:block;font-style:normal;font-size:13px;color:var(--grey);margin-top:2px;line-height:1.5}
.costs__r em{
  font-style:normal;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:15px;font-weight:500;
  color:var(--ink);white-space:nowrap;letter-spacing:-0.02em;
}
.costs__r--free em{color:var(--teal)}

/* ---------- Portfolio ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work{overflow:hidden;display:flex;flex-direction:column}
.work__img{
  aspect-ratio:16/10;background:var(--clean);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.sec--clean .work__img{background:var(--edge)}
/* Zrzuty stron są szersze niż kafel (ok. 2:1) — `contain` pokazuje całą stronę
   razem z nagłówkiem zamiast obcinać jej boki. Kafel trzyma stałą proporcję,
   więc siatka zostaje równa mimo różnych wysokości zrzutów. */
.work__img img{
  width:100%;height:100%;object-fit:contain;
  border-radius:var(--r-sm);background:#fff;
}
.work__ph{
  width:100%;height:100%;border:1px dashed var(--edge);border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--grey);font-size:12px;text-align:center;padding:14px;background:#fff;
  font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;line-height:1.5;
}
.work__meta{padding:26px;flex:1;display:flex;flex-direction:column}
.chip{
  display:inline-block;align-self:flex-start;font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  padding:5px 10px;border-radius:var(--r-sm);margin-bottom:14px;
}
.chip--live{background:var(--teal);color:#fff}
.chip--own{background:var(--edge);color:var(--ink)}
/* „W budowie" — gotowa, ale jeszcze nieopublikowana. Celowo cichsza od „Wdrożenia”:
   nie może wyglądać na stronę, która już działa. Kontrast grey/white = 5.44:1. */
.chip--wip{background:#fff;color:var(--grey);box-shadow:inset 0 0 0 1px var(--edge)}
.work__meta h3{font-size:18px;margin-bottom:8px}
.work__meta p{font-size:15px;line-height:1.55}
.work__q{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--edge);
  font-size:15px;color:var(--ink);line-height:1.55;
}
.work__q cite{display:block;font-family:var(--sans);font-variant-numeric:tabular-nums;font-style:normal;font-size:12px;color:var(--grey);margin-top:12px}
/* Domknięcie siatki realizacji: sygnał, że to wybór, nie pełna lista. */
.more{
  margin-top:26px;text-align:center;font-size:17px;color:var(--grey);
  font-family:var(--sans);letter-spacing:-0.01em;
}
.note{
  margin-top:26px;padding:20px 24px;border-left:2px solid var(--teal);
  background:#fff;border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:15px;color:var(--grey);line-height:1.6;box-shadow:var(--sh-sm);
}
.sec--clean .note{background:var(--white)}

/* ---------- O mnie ---------- */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center}
.about__ph{
  aspect-ratio:7/10;background:var(--clean);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);overflow:hidden;max-width:380px;
}
.sec--clean .about__ph{background:var(--edge)}
.about__ph .work__ph{height:100%}
.about__ph img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:calc(var(--r-lg) - 20px);display:block}
.facts{list-style:none;display:grid;gap:26px;margin-top:40px}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.facts svg{color:var(--teal);margin-top:4px;flex:none}
.facts strong{display:block;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:5px}
.facts span{font-size:16px;color:var(--grey);line-height:1.55}

/* ---------- FAQ ---------- */
.qa{max-width:800px;margin:0 auto;border-top:1px solid var(--edge)}
.qa details{border-bottom:1px solid var(--edge)}
.qa summary{
  cursor:pointer;list-style:none;padding:26px 48px 26px 0;position:relative;
  font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;line-height:1.4;
  transition:color .2s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:6px;top:34px;width:11px;height:1px;background:var(--teal);
}
.qa summary::before{
  content:"";position:absolute;right:11px;top:29px;width:1px;height:11px;background:var(--teal);
  transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.qa details[open] summary::before{transform:rotate(90deg);opacity:0}
.qa summary:hover{color:var(--teal)}
.qa__a{padding:0 48px 28px 0}
.qa__a p{font-size:16px;line-height:1.65}
.qa__a p+p{margin-top:12px}
.qa__a ul{list-style:none;display:grid;gap:10px;margin-top:6px}
.qa__a ul li{font-size:16px;color:var(--grey);display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.qa__a ul svg{flex:none;color:var(--teal);margin-top:6px}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.reach{margin-top:36px;display:grid;gap:12px}
.reach a{
  display:flex;align-items:center;gap:16px;padding:20px 24px;background:#fff;
  border-radius:var(--r-md);color:var(--ink);font-weight:500;font-size:16px;
  box-shadow:var(--sh-sm);transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.sec--clean .reach a{background:var(--white)}
.reach a:hover{color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-md)}
.reach svg{color:var(--teal);flex:none}
/* Kontakt to dwa kroki po sobie, nie dwie alternatywy. Numery i kreska
   w przerwie między kaflami są jedynym nośnikiem tej kolejności — nie usuwaj
   ich, wracając do wersji z dwiema ikonami. Kontrast 4.67:1. */
.reach--flow a{position:relative}
.reach__n{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--clean);color:var(--teal);
  font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:600;letter-spacing:0;
}
.reach--flow a+a::before{
  content:"";position:absolute;left:40px;top:-12px;width:2px;height:12px;
  background:var(--edge);
}
.reach small{display:block;font-size:13px;color:var(--grey);font-weight:400;margin-top:2px}
.reach b{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-0.02em}

form{background:#fff;border-radius:var(--r-lg);padding:36px;box-shadow:var(--sh-md)}
.sec--clean form{background:var(--white)}
.f{margin-bottom:22px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-row .f{margin-bottom:22px}
.f .opt{
  font-size:10px;font-weight:500;color:var(--grey);
  text-transform:none;letter-spacing:0;margin-left:4px;
}
.f label{
  display:block;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);margin-bottom:10px;
}
.f .rq{color:var(--teal)}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  padding:14px 16px;border:1px solid var(--edge);border-radius:var(--r-sm);
  background:var(--white);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.sec--clean .f input,.sec--clean .f select,.sec--clean .f textarea{background:#fff}
.f select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237D7972' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;
}
.f textarea{resize:vertical;min-height:108px;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{
  border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(18,121,159,.12);
}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:none}
.f.bad input,.f.bad select,.f.bad textarea{border-color:#B4442F}
.msg{display:none;font-size:13px;color:#B4442F;margin-top:7px}
.f.bad .msg{display:block}
/* ---------- Wybór formy kontaktu: mail albo rozmowa 15 min ----------
   Świadomie pole formularza, nie hasło w nagłówku: rozmowa ma być
   realną opcją do klikniecia, a nie obietnicą w copy. */
.pick{border:0;padding:0;margin:0 0 22px;min-width:0}
.pick legend{
  font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);margin-bottom:10px;padding:0;
}
.pick__o{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  padding:14px 16px;border:1px solid var(--edge);border-radius:var(--r-sm);
  cursor:pointer;background:var(--white);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.sec--clean .pick__o{background:#fff}
.pick__o+.pick__o{margin-top:10px}
.pick__o:hover{border-color:var(--teal)}
.pick__o input{width:17px;height:17px;margin-top:3px;accent-color:var(--teal)}
.pick__o:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 2px rgba(18,121,159,.12)}
.pick__t b{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.pick__t small{display:block;font-size:13px;color:var(--grey);line-height:1.5;margin-top:3px}
.pick__hint{
  margin-top:12px;padding:12px 14px;background:var(--clean);border-radius:var(--r-sm);
  font-size:13px;line-height:1.55;color:var(--grey);
}
.pick__hint[hidden]{display:none}

.agree{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-bottom:26px}
.agree input{width:17px;height:17px;margin-top:3px;accent-color:var(--teal)}
.agree label{font-size:13px;color:var(--grey);line-height:1.55}
.fnote{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px;color:var(--grey);text-align:center;margin-top:18px;letter-spacing:-0.01em}
.done{display:none;padding:34px 28px;text-align:center}
.done.show{display:block}
.done svg{color:var(--teal);margin:0 auto 16px}
.done h3{margin-bottom:10px}
.done p{font-size:16px;line-height:1.6}
form.sent .f,form.sent .agree,form.sent .btn,form.sent .fnote{display:none}
form.sent .ferr{display:none}
.trap{position:absolute;left:-9999px}

/* Błąd wysyłki — pokazywany TYLKO gdy zgłoszenie realnie nie doszło */
.ferr{
  display:none;font-size:14px;line-height:1.6;color:#8E3626;
  background:#FDF3F1;border:1px solid #F0D3CC;border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:18px;
}
.ferr a{color:#8E3626;text-decoration:underline}

/* ---------- Pasek zgody na cookies ---------- */
.cbar{
  position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);z-index:90;
  max-width:780px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  background:var(--white);border:1px solid var(--edge);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:20px 22px;
}
.cbar__t{flex:1 1 320px;font-size:14px;line-height:1.6;color:var(--grey)}
.cbar__b{display:flex;gap:10px;flex:none}
@media(max-width:560px){
  .cbar{padding:18px}
  .cbar__b{width:100%}
  .cbar__b .btn{flex:1}
}

/* ---------- Pasek CTA ---------- */
.band{text-align:center}
.band h2{max-width:18ch;margin:0 auto 20px}
.band p{max-width:52ch;margin:0 auto;font-size:18px}
.band .cta-row{justify-content:center}
/* dłuższy nagłówek — szersza kolumna, żeby nie łamał się na 4 linie */
.band--wide h2{max-width:30ch}

/* ---------- Stopka ---------- */
.ftr{background:var(--ink);color:#8494A3;padding:56px 0 32px}
.ftr__top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;
  padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12);
}
.ftr .logo{color:var(--white);margin-bottom:14px}
.ftr .logo:hover{color:var(--white)}
.ftr__top>div>p{font-size:15px;color:#8494A3;max-width:34ch;line-height:1.6}
.ftr h4{
  font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px;font-weight:500;color:var(--white);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;
}
.ftr ul{list-style:none;display:grid;gap:11px}
.ftr a{color:#C2CCD6;font-size:15px}
.ftr a:hover{color:var(--white)}
/* Przycisk na ciemnym tle. Ten sam konflikt co w `.nav`: `.ftr a` (0,2,0)
   i `.sec--dark p` biją `.btn--primary` (0,1,0) — przycisk gubił biel,
   a w stopce dodatkowo dziedziczył rozmiar linku zamiast własnego pola. */
.ftr a.btn--primary,
.ftr a.btn--primary:hover,
.sec--dark a.btn--primary,
.sec--dark a.btn--primary:hover{color:#fff}
.ftr a.btn{font-size:16px;padding:16px 30px}
.ftr a.btn--sm{font-size:15px;padding:11px 20px}
.ftr__btm{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding-top:26px;font-size:14px;
}
.ftr__btm span{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:-0.01em}

/* Przypis do terminu realizacji */
.term-fn{padding-top:24px;font-size:13px;line-height:1.6;color:#8494A3;max-width:78ch}
.term-fn+.ftr__btm{padding-top:16px}
.term-fn--lp{
  padding-top:0;padding-bottom:20px;margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hero__grid,.about,.contact{grid-template-columns:1fr;gap:48px}
  /* Makieta strony w hero działa tylko obok tekstu. Po zwinięciu do jednej
     kolumny nic nie wnosi, a spycha treść i CTA poniżej pierwszego ekranu. */
  .visual{display:none}
  .about__ph{max-width:320px;margin-inline:auto}
  .intent{grid-template-columns:repeat(2,1fr)}
  .incl{grid-template-columns:repeat(2,1fr)}
  .plans,.works{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr;gap:34px}
  .rows__r{grid-template-columns:40px 1fr auto;gap:18px;row-gap:8px}
  .rows__d{grid-column:2 / -1;font-size:15px}
  .rows__r:hover{padding-left:8px;padding-right:8px}
}
@media(max-width:600px){
  body{font-size:16px}
  .f-row{grid-template-columns:1fr;gap:0}
  .tl{padding-left:0}
  .tl::before{left:19px}
  .tl__s{grid-template-columns:40px 1fr;gap:16px;padding-bottom:22px}
  .tl__n{width:40px;height:40px;font-size:13px}
  .tl__c{padding:16px 18px}
  .tl__c::before{left:-6px;top:16px;width:10px;height:10px}
  .lead{font-size:17px}
  .intent{grid-template-columns:1fr}
  .intent__c{min-height:0}
  .intent__c h3{margin-top:22px}
  .incl{grid-template-columns:1fr}
  .cta-row .btn{width:100%}
  form{padding:26px 20px}
  .metrics{grid-template-columns:1fr;gap:0}
  .metrics div{border-right:0;border-bottom:1px solid var(--edge);padding:0 0 16px;margin:0 0 16px}
  .metrics div:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
  .costs__r{grid-template-columns:1fr;gap:8px;padding:20px 22px}
  .qa summary{font-size:17px;padding-right:40px}
  .qa__a{padding-right:40px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  .card:hover,.btn:hover,.reach a:hover{transform:none!important}
  a.intent__c::after{display:none}
}


/* ---------- Sekcja SEO ---------- */
.seo{padding:clamp(52px,6vw,72px) 0}
.seo__h{font-size:20px;font-weight:600;margin-bottom:24px;color:var(--ink)}
.seo__l{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
}
.seo__l li{
  font-size:14px;color:var(--grey);
  padding:8px 15px;background:var(--white);border-radius:100px;
  transition:color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.seo__l li:hover{color:var(--teal);background:var(--white);transform:translateY(-2px)}
@media(max-width:600px){
  .seo__l{gap:8px}
  .seo__l li{font-size:13px;padding:7px 13px}
}

/* ---------- Hover: pozostałe sekcje ---------- */
.incl__c{transition:background .3s var(--ease)}
.incl__c:hover{background:var(--clean)}
.sec--clean .incl__c:hover{background:var(--white)}
.incl__ic{transition:transform .3s var(--ease)}
.incl__c:hover .incl__ic{transform:translateY(-3px)}

.plan__list li,.svc__list li{transition:color .2s var(--ease)}
.card:hover .plan__list li{color:var(--grey)}

.work__img{overflow:hidden}
.work__img img{transition:transform .5s var(--ease)}
.work:hover .work__img img{transform:scale(1.04)}

.facts li{transition:transform .26s var(--ease)}
.facts li:hover{transform:translateX(4px)}
.facts svg{transition:transform .26s var(--ease)}
.facts li:hover svg{transform:scale(1.12)}

.metrics div{transition:transform .26s var(--ease)}
.metrics div:hover b{color:var(--teal)}
.metrics b{transition:color .26s var(--ease)}

.reach a svg{transition:transform .26s var(--ease)}
.reach a:hover svg{transform:scale(1.1)}

.costs__r{transition:background .24s var(--ease)}
.costs__r:hover{background:var(--clean)}
.sec--clean .costs__r:hover{background:var(--white)}

.qa details{transition:box-shadow .26s var(--ease), transform .26s var(--ease)}

.ftr a{transition:color .2s var(--ease), transform .2s var(--ease)}
.ftr ul a:hover{transform:translateX(3px);display:inline-block}

/* Reduced motion — nadpisuje wszystko powyżej */
@media (prefers-reduced-motion:reduce){
  .intent__c:hover .intent__ic,
  .work:hover .work__img img,
  .facts li:hover,
  .facts li:hover svg,
  .reach a:hover svg,
  .ftr ul a:hover,
  .seo__l li:hover,
  .incl__c:hover .incl__ic,
  article.intent__c:hover{transform:none!important}
  .tl__s:hover .tl__c,.tl__s:hover .tl__n{transform:none!important}
  .intent__c::after{display:none}
}