/* ============================================================
   WEB&WIRE Paweł Przymęski — główny arkusz stylów
   ------------------------------------------------------------
   Spis treści:
   1.  Zmienne projektowe (kolory, typografia, odstępy)
   2.  Reset i style bazowe
   3.  Elementy pomocnicze (kontener, przyciski, sekcje)
   4.  Nagłówek i nawigacja (w tym menu mobilne)
   5.  Sekcja hero + grafika "przewód"
   6.  Karty usług
   7.  Sekcje treści (zalety, proces, listy)
   8.  FAQ (rozwijane odpowiedzi)
   9.  Formularze
   10. Stopka
   11. Elementy stałe (przycisk "na górę", przycisk telefonu)
   12. Animacje pojawiania się
   13. Strona 404
   14. Responsywność (media queries)
   ============================================================ */

/* ---------- 1. Zmienne projektowe ---------- */
:root {
  /* Kolory główne — granat + miedziany pomarańcz (nawiązanie do przewodu) */
  --navy-900: #0a2634;   /* granat petrol z logotypu — stopka, hero */
  --navy-800: #103546;
  --navy-700: #17465c;
  --ink:      #1e2b3a;   /* kolor tekstu podstawowego */
  --muted:    #5b6b7c;   /* tekst drugorzędny */
  --bg:       #f5f7fa;   /* tło strony */
  --surface:  #ffffff;   /* tło kart i paneli */
  --line:     #dde4ec;   /* obramowania, linie */
  --accent:      #f0a41c; /* akcent — bursztyn wtyczki z logotypu */
  --accent-dark: #a86f00; /* ciemniejszy bursztyn — tekst i hover */
  --accent-soft: #fdf3dd; /* delikatne tło akcentowe */
  --ok:    #1e7d43;      /* komunikat sukcesu */
  --error: #c0392b;      /* komunikat błędu */

  /* Typografia — lokalny zestaw systemowy (bez zewnętrznych fontów) */
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Wymiary */
  --radius: 14px;
  --radius-sm: 8px;
  --container: 1160px;
  --shadow-sm: 0 1px 3px rgba(12, 24, 38, 0.08);
  --shadow-md: 0 8px 24px rgba(12, 24, 38, 0.10);
  --shadow-lg: 0 16px 40px rgba(12, 24, 38, 0.16);
}

/* ---------- 2. Reset i style bazowe ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* płynne przewijanie do kotwic */
}

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

body {
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px — dobra czytelność */
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  line-height: 1.2;
  color: var(--navy-900);
  letter-spacing: -0.015em;
  font-weight: 800;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p + p { margin-top: 0.9em; }

a {
  color: var(--accent-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--accent); text-decoration: underline; }

/* Widoczny fokus klawiatury — dostępność (WCAG) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Link "przeskocz do treści" dla czytników ekranu / klawiatury */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-900);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 200;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---------- 3. Elementy pomocnicze ---------- */
.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

.section { padding: 4.5rem 0; }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }
.section--dark { background: var(--navy-900); color: #d8e1ec; }
.section--dark h2 { color: #fff; }

.section-head {
  max-width: 46rem;
  margin-bottom: 2.5rem;
}
.section-head p { color: var(--muted); margin-top: 0.6rem; }
.section--dark .section-head p { color: #a9b8c9; }

/* "Eyebrow" — mała etykieta nad nagłówkiem sekcji, w stylu oznaczeń
   technicznych na schematach (kreska + tekst) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.8rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
}
.section--dark .eyebrow { color: var(--accent); }

/* Przyciski */
.btn {
  display: inline-block;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn--primary { background: var(--accent); color: var(--navy-900); }
.btn--primary:hover { background: #d18a06; color: var(--navy-900); }

.btn--ghost { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn--ghost:hover { background: var(--navy-900); color: #fff; }

.section--dark .btn--ghost { color: #fff; border-color: #fff; }
.section--dark .btn--ghost:hover { background: #fff; color: var(--navy-900); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

/* Separator "przewód" — sygnatura graficzna strony:
   cienka linia z węzłami, jak trasa na schemacie instalacji */
.wire-divider {
  display: flex;
  align-items: center;
  gap: 0;
  height: 14px;
  margin: 0 auto;
  max-width: var(--container);
  padding-inline: 1.25rem;
}
.wire-divider::before,
.wire-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--line);
}
.wire-divider span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg);
  margin: 0 6px;
}

/* ---------- 4. Nagłówek i nawigacja ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

/* Logotyp: emblemat graficzny + wersja tekstowa obok */
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.15;
  color: var(--navy-900);
}
.logo img {
  width: 44px;
  height: 44px;
  display: block;
}
.logo-text { display: flex; flex-direction: column; }
.logo:hover { text-decoration: none; color: var(--navy-900); }
.logo strong {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.logo strong .amp { color: var(--accent); }
.logo small {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.site-nav ul {
  display: flex;
  gap: 0.3rem;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-nav a:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  text-decoration: none;
}
/* Podświetlenie aktualnie otwartej podstrony */
.site-nav a[aria-current="page"] {
  background: var(--navy-900);
  color: #fff;
}

/* Przycisk hamburgera — widoczny tylko na mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. Sekcja hero ---------- */
.hero {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(228, 114, 12, 0.14), transparent 60%),
    var(--navy-900);
  color: #d8e1ec;
  padding: 5rem 0 4rem;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
.hero h1 { color: #fff; }
.hero .lead {
  margin-top: 1.1rem;
  font-size: 1.13rem;
  color: #b9c6d5;
  max-width: 34rem;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.hero-badges span {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #cfdae6;
}

/* Grafika hero (SVG osadzone w HTML) */
.hero-art { width: 100%; height: auto; }

/* Delikatna animacja "prądu" płynącego przewodem w grafice hero */
.wire-flow {
  stroke-dasharray: 10 14;
  animation: wireFlow 2.6s linear infinite;
}
@keyframes wireFlow {
  to { stroke-dashoffset: -48; }
}
@media (prefers-reduced-motion: reduce) {
  .wire-flow { animation: none; }
}

/* Podstrony — mniejszy nagłówek hero */
.page-hero {
  background: var(--navy-900);
  color: #d8e1ec;
  padding: 3.5rem 0;
}
.page-hero h1 { color: #fff; }
.page-hero p { margin-top: 0.8rem; max-width: 44rem; color: #b9c6d5; }

/* ---------- 6. Karty usług ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.card .icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 1.1rem;
}
.card .icon svg { width: 30px; height: 30px; stroke: var(--accent-dark); }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--muted); font-size: 0.98rem; flex: 1; }
.card .btn { margin-top: 1.3rem; align-self: flex-start; }

/* Karta-link (cała karta klikalna przez pseudo-element na przycisku) */
.card { position: relative; }
.card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

/* ---------- 7. Sekcje treści ---------- */
/* Siatka zalet */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.feature h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.feature p { color: var(--muted); font-size: 0.95rem; }
.feature .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  margin-bottom: 0.9rem;
}

/* Etapy współpracy — pozioma "trasa przewodu" z numerowanymi węzłami */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
  counter-reset: step;
  position: relative;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.4rem;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: inline-block;
  font-weight: 900;
  font-size: 0.95rem;
  color: #fff;
  background: var(--navy-900);
  border: 2px solid var(--accent);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.step p { color: var(--muted); font-size: 0.93rem; }

/* Listy zakresu usług (dwie kolumny z "węzłami" zamiast kropek) */
.scope-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem 2rem;
}
.scope-list li {
  position: relative;
  padding-left: 1.6rem;
}
.scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--surface);
}

/* Ramka informacyjna */
.note {
  margin-top: 1.8rem;
  padding: 1.1rem 1.3rem;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.97rem;
}

/* Układ dwukolumnowy tekst + panel boczny */
.split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: start;
}
.side-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}
.side-panel h3 { margin-bottom: 0.8rem; }
.side-panel ul { list-style: none; }
.side-panel li {
  padding: 0.45rem 0 0.45rem 1.5rem;
  position: relative;
  font-size: 0.96rem;
  color: var(--muted);
}
.side-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

/* Sekcja CTA na dole stron */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 40rem; margin-inline: auto; }
.cta-band p { max-width: 38rem; margin: 0.9rem auto 0; color: #a9b8c9; }
.cta-band .btn-row { justify-content: center; }

/* ---------- 8. FAQ ---------- */
.faq { max-width: 50rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.7rem;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 3rem 1rem 1.3rem;
  font-weight: 700;
  position: relative;
  color: var(--navy-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent-dark);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] { border-color: var(--accent); }
.faq .faq-body {
  padding: 0 1.3rem 1.1rem;
  color: var(--muted);
  font-size: 0.98rem;
}

/* ---------- 9. Formularze ---------- */
.form-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  max-width: 46rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 0.92rem; }
.form-field .req { color: var(--error); }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  color: var(--ink);
  transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent);
}
.form-field textarea { min-height: 140px; resize: vertical; }

/* Komunikat błędu pod polem */
.field-error {
  color: var(--error);
  font-size: 0.85rem;
  display: none;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--error); }
.form-field.has-error .field-error { display: block; }

/* Zgoda RODO */
.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--muted);
}
.consent input { margin-top: 0.3rem; width: 18px; height: 18px; flex-shrink: 0; }
.consent.has-error { color: var(--error); }

/* Pole-pułapka na boty (honeypot) — ukryte dla ludzi,
   ale obecne w kodzie, więc boty je wypełniają */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Komunikaty po wysłaniu */
.form-status {
  display: none;
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.form-status.ok { display: block; background: #e7f5ec; color: var(--ok); }
.form-status.error { display: block; background: #fdecea; color: var(--error); }

/* Dane kontaktowe */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem;
  align-items: start;
}
.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.contact-card h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.contact-card dl { display: grid; gap: 0.75rem; }
.contact-card dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
}
.contact-card dd { font-size: 1.05rem; font-weight: 600; color: var(--navy-900); }
.contact-card dd a { color: var(--accent-dark); }

/* ---------- 10. Stopka ---------- */
.site-footer {
  background: var(--navy-900);
  color: #a9b8c9;
  padding: 3.5rem 0 0;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.site-footer h3 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: #cfdae6; }
.site-footer a:hover { color: var(--accent); }
.footer-logo { color: #fff; font-weight: 900; font-size: 1.25rem; }
.footer-logo .amp { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* ---------- 11. Elementy stałe ---------- */
/* Przycisk "Wróć na górę" */
.to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--navy-900);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 90;
}
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-dark); }

/* Szybki kontakt telefoniczny — widoczny tylko na telefonach */
.call-fab {
  display: none;
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 90;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: 0.8rem 1.3rem;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  align-items: center;
  gap: 0.5rem;
}
.call-fab:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }

/* ---------- 12. Animacje pojawiania się ---------- */
/* Elementy ukrywane są tylko wtedy, gdy działa JavaScript
   (klasa .js dodawana w main.js) — bez JS treść jest zawsze widoczna */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 13. Strona 404 ---------- */
.page-404 {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 0;
}
.page-404 .code {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  color: var(--navy-900);
  letter-spacing: 0.05em;
}
.page-404 .code span { color: var(--accent); }

/* ---------- 14. Responsywność ---------- */
@media (max-width: 1000px) {
  .cards, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 520px; margin-inline: auto; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .section { padding: 3.2rem 0; }

  /* Menu mobilne */
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .site-nav.open { display: block; }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.6rem 1.25rem 1rem;
  }
  .site-nav a { border-radius: var(--radius-sm); padding: 0.85rem 1rem; }

  .cards, .feature-grid, .steps, .scope-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  .call-fab { display: inline-flex; } /* przycisk telefonu tylko na mobile */
  .to-top { bottom: 5rem; }
}