/* ============================================================
   KASZTA "ultra-strona" — jeden plik, zero zaleznosci.
   Skopiuj jako style.css i NIE przepisuj. Zmieniasz tylko:
     1) <body data-kierunek="..."> (10 gotowych kierunkow ponizej),
     2) ewentualnie tokeny w :root wlasnym <style> w index.html.
   Kontrast kazdej pary (tekst/tlo, muted/tlo, akcent-tekst/akcent)
   jest policzony >= 4.5:1 — nie zmieniaj kolorow "na oko".
   ============================================================ */

:root {
  /* domyslnie: Modern minimal */
  --bg: #FFFFFF;          /* tlo strony */
  --bg-2: #F5F6F8;        /* tlo sekcji naprzemiennej / kart na tle */
  --tekst: #0B0B0C;       /* tekst glowny */
  --muted: #5B6470;       /* tekst drugorzedny (>= 4.5:1 na --bg) */
  --linia: #E5E7EB;       /* obramowania, separatory */
  --akcent: #2563EB;      /* CTA, linki, ikony */
  --akcent-ciemny: #1D4ED8;
  --akcent-tekst: #FFFFFF;/* tekst NA akcencie */
  --akcent-tlo: #E8EFFD;  /* delikatne tlo pod ikony/odznaki */
  --font-naglowki: "Space Grotesk", "Space Grotesk Fallback", system-ui, Arial, sans-serif;
  --font-tekst: "Inter", "Inter Fallback", system-ui, Arial, sans-serif;
  --waga-naglowki: 600;
  --promien: 12px;        /* karty */
  --promien-maly: 8px;    /* przyciski, pola */
  --cien: 0 1px 2px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.08);
  --max: 1180px;
  --sekcja: clamp(3.5rem, 8vw, 6.5rem);
  --odstep: 24px;
}

/* ---------- 10 KIERUNKOW (te same palety co §2 skilla, z poprawionym kontrastem) ---------- */
body[data-kierunek="elegancja"] {
  --bg:#FAF7F2; --bg-2:#F3EEE5; --tekst:#232019; --muted:#6F675A; --linia:#E7DFD3;
  --akcent:#8C6A36; --akcent-ciemny:#75572B; --akcent-tekst:#FFFFFF; --akcent-tlo:#F1E8DA;
  --font-naglowki:"Playfair Display", "Playfair Display Fallback", Georgia, serif; --font-tekst:"Source Sans 3", "Source Sans 3 Fallback", system-ui, sans-serif;
  --waga-naglowki:600; --promien:6px; --promien-maly:4px;
}
body[data-kierunek="minimal"] { /* = :root */ }
body[data-kierunek="bold"] {
  --bg:#0B0B0C; --bg-2:#151412; --tekst:#F5F3EE; --muted:#A8A29B; --linia:#2E2C28;
  --akcent:#FF5A26; --akcent-ciemny:#E04A18; --akcent-tekst:#0B0B0C; --akcent-tlo:#2A1710;
  --font-naglowki:"Archivo Black", "Archivo Black Fallback", Impact, system-ui, sans-serif; --font-tekst:"Inter", "Inter Fallback", system-ui, sans-serif;
  --waga-naglowki:400; --promien:0px; --promien-maly:0px;
  --cien: 0 12px 32px rgba(0,0,0,.45);
}
body[data-kierunek="soft"] {
  --bg:#FFF9F2; --bg-2:#F7EDE2; --tekst:#3A2E2A; --muted:#6E5F5A; --linia:#F0E4DA;
  --akcent:#B84E33; --akcent-ciemny:#9E4029; --akcent-tekst:#FFFFFF; --akcent-tlo:#FBE7DF;
  --font-naglowki:"Fraunces", "Fraunces Fallback", Georgia, serif; --font-tekst:"Nunito Sans", "Nunito Sans Fallback", system-ui, sans-serif;
  --waga-naglowki:600; --promien:22px; --promien-maly:12px;
}
body[data-kierunek="corporate"] {
  --bg:#F8FAFC; --bg-2:#EEF2F7; --tekst:#16233A; --muted:#5D6B7E; --linia:#DCE3EC;
  --akcent:#1D3B6F; --akcent-ciemny:#152C54; --akcent-tekst:#FFFFFF; --akcent-tlo:#E3EAF5;
  --akcent-2:#C99A2E; /* zloto TYLKO do linii i ikon dekoracyjnych, nie do tekstu */
  --font-naglowki:"Libre Franklin", "Libre Franklin Fallback", Arial, sans-serif; --font-tekst:"Source Sans 3", "Source Sans 3 Fallback", Arial, sans-serif;
  --waga-naglowki:700; --promien:8px; --promien-maly:6px;
}
body[data-kierunek="editorial"] {
  --bg:#FCFBF8; --bg-2:#F5F2EA; --tekst:#1C1B18; --muted:#6B6860; --linia:#E4E1D9;
  --akcent:#8A2E2E; --akcent-ciemny:#6E2222; --akcent-tekst:#FFFFFF; --akcent-tlo:#F6E6E6;
  --font-naglowki:"Newsreader", "Newsreader Fallback", Georgia, serif; --font-tekst:"Public Sans", "Public Sans Fallback", system-ui, sans-serif;
  --waga-naglowki:500; --promien:2px; --promien-maly:2px;
}
body[data-kierunek="dark"] {
  --bg:#121417; --bg-2:#1A1D21; --tekst:#EDEFF2; --muted:#9AA0A6; --linia:#26292E;
  --akcent:#A3E635; --akcent-ciemny:#8AC926; --akcent-tekst:#121417; --akcent-tlo:#1E2A14;
  --font-naglowki:"Sora", "Sora Fallback", system-ui, sans-serif; --font-tekst:"Inter", "Inter Fallback", system-ui, sans-serif;
  --waga-naglowki:600; --promien:12px; --promien-maly:8px;
  --cien: 0 12px 32px rgba(0,0,0,.5);
}
body[data-kierunek="rzemioslo"] {
  --bg:#F7F3EC; --bg-2:#EFE8DC; --tekst:#2E2A24; --muted:#6A6054; --linia:#E1D8C9;
  --akcent:#96502B; --akcent-ciemny:#7A3F20; --akcent-tekst:#FFFFFF; --akcent-tlo:#F1E3D3;
  --font-naglowki:"Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, serif; --font-tekst:"Lato", "Lato Fallback", system-ui, sans-serif;
  --waga-naglowki:700; --promien:10px; --promien-maly:6px;
}
body[data-kierunek="tech"] {
  --bg:#0D1117; --bg-2:#161B22; --tekst:#E6EDF3; --muted:#8B949E; --linia:#21262D;
  --akcent:#58A6FF; --akcent-ciemny:#3B8DE8; --akcent-tekst:#0D1117; --akcent-tlo:#12233A;
  --font-naglowki:"IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif; --font-tekst:"IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
  --waga-naglowki:500; --promien:8px; --promien-maly:6px;
  --cien: 0 12px 32px rgba(0,0,0,.5);
}
body[data-kierunek="konsumencki"] {
  --bg:#FFFFFF; --bg-2:#F8F9FB; --tekst:#1F2937; --muted:#5B6470; --linia:#F3F4F6;
  --akcent:#DB2777; --akcent-ciemny:#BE185D; --akcent-tekst:#FFFFFF; --akcent-tlo:#FCE7F1;
  --font-naglowki:"Poppins", "Poppins Fallback", system-ui, sans-serif; --font-tekst:"Poppins", "Poppins Fallback", system-ui, sans-serif;
  --waga-naglowki:600; --promien:16px; --promien-maly:10px;
}

/* ---------- FALLBACKI METRYCZNE (web-fonts-hardening + strona-pl-perfekcja: "mierz, nie zgaduj") ----------
   Zanim font z Google dojedzie (albo gdy nie dojedzie wcale), tekst renderuje sie lokalnym Arial/Georgia
   PRZESKALOWANYM do szerokosci i metryk pionowych docelowego fontu -> podmiana fontu nie przesuwa ukladu
   (CLS ~0, brak "skoku" tekstu). Wartosci ZMIERZONE w przegladarce 17.09.2026 (canvas measureText + linia
   bazowa; strona pomiarowa: wdrozenie/pomiar-fontow.html), liczone jak w fontaine/capsize: ascent i descent
   wzgledem rozmiaru PO size-adjust. Zmieniasz font w kierunku = mierzysz od nowa, nie przepisujesz z pamieci. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 106.64%; ascent-override: 90.77%; descent-override: 22.51%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback"; src: local("Arial"); size-adjust: 91.69%; ascent-override: 111.68%; descent-override: 43.63%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Sans Fallback"; src: local("Arial"); size-adjust: 101.67%; ascent-override: 99.15%; descent-override: 34.62%; line-gap-override: 0%; }
@font-face { font-family: "Public Sans Fallback"; src: local("Arial"); size-adjust: 104.68%; ascent-override: 90.95%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Lato Fallback"; src: local("Arial"); size-adjust: 96.89%; ascent-override: 101.55%; descent-override: 22.29%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial"); size-adjust: 100.28%; ascent-override: 102.12%; descent-override: 27.12%; line-gap-override: 0%; }
@font-face { font-family: "Poppins Fallback"; src: local("Arial"); size-adjust: 109.52%; ascent-override: 100.07%; descent-override: 37.25%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"); size-adjust: 108.1%; ascent-override: 91.03%; descent-override: 27.38%; line-gap-override: 0%; }
@font-face { font-family: "Libre Franklin Fallback"; src: local("Arial"); size-adjust: 99.97%; ascent-override: 96.83%; descent-override: 24.81%; line-gap-override: 0%; }
@font-face { font-family: "Sora Fallback"; src: local("Arial"); size-adjust: 106.13%; ascent-override: 91.21%; descent-override: 27.14%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Black Fallback"; src: local("Arial Black"); size-adjust: 99.99%; ascent-override: 103.21%; descent-override: 31.2%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Display Fallback"; src: local("Georgia"); size-adjust: 87.84%; ascent-override: 122.95%; descent-override: 28.23%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 93.81%; ascent-override: 104.05%; descent-override: 27.29%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 99.12%; ascent-override: 74.25%; descent-override: 26.63%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Garamond Fallback"; src: local("Georgia"); size-adjust: 76.37%; ascent-override: 121.52%; descent-override: 37.71%; line-gap-override: 0%; }

/* ---------- RESET I BAZA ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font-family: var(--font-tekst); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Nic (tasma, poswiata za hero, karta plywajaca) nie ma prawa zrobic poziomego przewijania strony.
   clip zamiast hidden NIE tworzy kontenera przewijania, wiec position:sticky naglowka dalej dziala
   (strona-pl-perfekcja: "html,body{overflow-x:clip}"); hidden zostaje jako zapas dla starych przegladarek. */
html, body { overflow-x: hidden; overflow-x: clip; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akcent-ciemny); }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--akcent); color: var(--akcent-tekst); }
button { font: inherit; cursor: pointer; }
section[id], [id].sekcja { scroll-margin-top: 84px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- TYPOGRAFIA ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-naglowki); font-weight: var(--waga-naglowki);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 .5em; text-wrap: balance; color: var(--tekst);
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.025em; }
.hero-dzielony h1 { font-size: clamp(2rem, 3.7vw, 3.1rem); } /* H1 w dwoch kolumnach: 2 linie max na desktopie */
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.tekst { max-width: 64ch; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--muted); max-width: 58ch; }
.etykieta {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--akcent); margin-bottom: 14px;
}
.naglowek-sekcji { max-width: 700px; margin-bottom: clamp(32px, 4vw, 52px); }
.naglowek-sekcji.srodek { text-align: center; margin-inline: auto; }
.naglowek-sekcji.srodek .lead { margin-inline: auto; }
.mono { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }

/* ---------- UKLAD ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.sekcja { padding: var(--sekcja) 0; }
.sekcja.tlo-2 { background: var(--bg-2); }
.sekcja.ciasna { padding: calc(var(--sekcja) * .6) 0; }
.siatka { display: grid; gap: var(--odstep); }
.kol-2 { grid-template-columns: repeat(2, 1fr); }
.kol-3 { grid-template-columns: repeat(3, 1fr); }
.kol-4 { grid-template-columns: repeat(4, 1fr); }
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.dwie-kolumny.odwrotnie > :first-child { order: 2; }
.dwie-kolumny img, .hero-obraz img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--promien); box-shadow: var(--cien);
}

/* ---------- PRZYCISKI ----------
   Ruch "sprezynowy" zamiast ease/linear (zasada z high-end-visual-design: krzywa
   cubic-bezier(.32,.72,0,1) daje wrazenie masy), wcisniecie przy :active (scale .98),
   a strzalka/ikona w przycisku siedzi we wlasnym kolku ("button-in-button") i przy hover
   przesuwa sie w prawo - drobiazg, ktory najbardziej odroznia strone agencyjna od szablonu. */
:root { --plynnie: cubic-bezier(.32, .72, 0, 1); }
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--promien-maly); border: 1.5px solid var(--akcent);
  background: var(--akcent); color: var(--akcent-tekst); font-weight: 600; font-size: 1rem;
  text-decoration: none; line-height: 1.2; transition: transform .45s var(--plynnie), background .3s var(--plynnie), box-shadow .45s var(--plynnie);
}
.przycisk:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); color: var(--akcent-tekst); transform: translateY(-2px); box-shadow: var(--cien); }
.przycisk:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: .12s; }
.przycisk.drugi { background: transparent; color: var(--tekst); border-color: var(--linia); }
.przycisk.drugi:hover { background: var(--bg-2); border-color: var(--tekst); color: var(--tekst); transform: translateY(-2px); }
.przycisk.jasny { background: var(--bg); color: var(--tekst); border-color: var(--bg); }
.przycisk.jasny:hover { background: var(--bg-2); border-color: var(--bg-2); color: var(--tekst); }
.przycisk.duzy { padding: 16px 26px; font-size: 1.08rem; }
.przycisk .ik {
  width: 2em; height: 2em; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: rgba(255,255,255,.18); transition: transform .45s var(--plynnie), background .3s var(--plynnie);
}
.przycisk .ik svg { width: 1.05em; height: 1.05em; }
.przycisk.drugi .ik, .przycisk.jasny .ik { background: var(--akcent-tlo); color: var(--akcent); }
.przycisk:hover .ik { transform: translateX(3px); background: rgba(255,255,255,.28); }
.przycisk.drugi:hover .ik, .przycisk.jasny:hover .ik { background: var(--akcent); color: var(--akcent-tekst); }
.przycisk:not(.duzy) .ik { width: 1.7em; height: 1.7em; }
.przyciski { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---------- IKONY ---------- */
.ik { display: inline-flex; width: 1.25em; height: 1.25em; vertical-align: -0.28em; flex: none; }
.ik svg { width: 100%; height: 100%; }
.ik-duza {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px;
  background: var(--akcent-tlo); color: var(--akcent); margin-bottom: 18px;
}
.ik-duza svg { width: 28px; height: 28px; }
.lista-check { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check .ik { color: var(--akcent); margin-top: .15em; }

/* ---------- NAGLOWEK STRONY ---------- */
.naglowek {
  position: sticky; top: 0; z-index: 50; background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .naglowek { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); }
}
.naglowek.przewiniety { border-bottom-color: var(--linia); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
/* Zasady z nav-responsywny: pasek linkow NIGDY nie lamie sie na dwie linie (nowrap), logo i CTA
   nie daja sie zgniesc do 0 px (flex-shrink:0 - inaczej przy 7 pozycjach menu logo znika i "nawigacja
   nie dziala"), a hamburger pojawia sie juz na TABLECIE (<= 1024 px), nie dopiero na telefonie. */
.naglowek .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; flex-wrap: nowrap; }
.logo { font-family: var(--font-naglowki); font-weight: 700; font-size: 1.3rem; color: var(--tekst); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.01em; flex-shrink: 0; white-space: nowrap; }
.logo .ik { color: var(--akcent); width: 1.5em; height: 1.5em; }
.nawigacja { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); flex-wrap: nowrap; min-width: 0; }
.nawigacja .cta-glowne { flex-shrink: 0; }
.menu { display: flex; flex-wrap: nowrap; gap: clamp(12px, 1.8vw, 26px); list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.menu a:not(.przycisk) { position: relative; color: var(--muted); font-weight: 500; text-decoration: none; padding: 6px 0; transition: color .15s ease; }
/* podkreslenie ROSNIE od lewej (pl-landing-builder, efekt E18) zamiast pojawiac sie skokiem */
.menu a:not(.przycisk)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--akcent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--plynnie); }
.menu a:not(.przycisk):hover, .menu a.aktywny { color: var(--tekst); }
.menu a:not(.przycisk):hover::after, .menu a.aktywny::after { transform: scaleX(1); }
.menu .w-menu-cta { display: none; } /* CTA w rozwijanym menu tylko na telefonie */
.hamburger { display: none; width: 44px; height: 44px; border: 1px solid var(--linia); border-radius: var(--promien-maly); background: transparent; color: var(--tekst); place-items: center; }
.hamburger .ik { width: 24px; height: 24px; }
.hamburger .zamknij, .naglowek.otwarty .hamburger .otworz { display: none; }
.naglowek.otwarty .hamburger .zamknij { display: inline-flex; }

/* ---------- HERO ---------- */
.hero { padding: calc(var(--sekcja) * 1.05) 0 var(--sekcja); position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
/* Poswiata za hero (pl-landing-builder E12/E13 "blob/aurora"): jedna miekka plama w kolorze --akcent-tlo -
   w ciemnych kierunkach ciemna, w jasnych pastelowa. Zero decyzji modelu, tokeny robia robote. */
.hero:not(.na-zdjeciu)::after { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; right: -18vw; top: -22vw; border-radius: 50%; background: radial-gradient(circle, var(--akcent-tlo) 0%, transparent 68%); pointer-events: none; z-index: 0; }
/* Siatka techniczna pod hero TYLKO w kierunkach tech/dark (E14 "grid-lines" z maska radialna) */
body[data-kierunek="tech"] .hero:not(.na-zdjeciu)::before, body[data-kierunek="dark"] .hero:not(.na-zdjeciu)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: linear-gradient(var(--linia) 1px, transparent 1px), linear-gradient(90deg, var(--linia) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%);
}
.hero-dzielony .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-centralny { text-align: center; }
.hero-centralny .lead, .hero-centralny .tekst { margin-inline: auto; }
.hero-centralny .przyciski { justify-content: center; }
.hero-obraz { position: relative; isolation: isolate; }
.hero-obraz img { aspect-ratio: 5 / 4; }
/* Miekka plama koloru za zdjeciem hero (E12 "blob") + karta plywajaca z pierwszym dowodem zaufania
   (E6/E8 "float card"): skladacz wstawia ja SAM z tresc.json (zaufanie[0]) - model nic nie projektuje. */
.hero-obraz::before { content: ""; position: absolute; inset: 6% -6% -8% 6%; border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; background: var(--akcent-tlo); z-index: -1; }
.karta-plywajaca { position: absolute; left: -22px; bottom: 26px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: var(--bg); color: var(--tekst); border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: var(--cien); font-weight: 600; font-size: .95rem; max-width: 72%; animation: plyn 6s ease-in-out infinite; }
.karta-plywajaca .ik { width: 40px; height: 40px; border-radius: 12px; background: var(--akcent-tlo); color: var(--akcent); display: inline-grid; place-items: center; }
.karta-plywajaca .ik svg { width: 22px; height: 22px; }
@keyframes plyn { 50% { transform: translateY(-8px); } }
.hero .lista-check { grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 28px; }
.hero.tlo-2 { background: var(--bg-2); }
.hero.na-zdjeciu { color: #fff; }
.hero.na-zdjeciu::before { content: ""; position: absolute; inset: 0; background: var(--hero-zdjecie) center/cover no-repeat; z-index: -2; }
.hero.na-zdjeciu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.45)); z-index: -1; }
.hero.na-zdjeciu h1, .hero.na-zdjeciu .lead { color: #fff; }
.hero.na-zdjeciu .etykieta { color: #fff; opacity: .85; }
.ilustracja {
  aspect-ratio: 5 / 4; border-radius: var(--promien); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--akcent-tlo), var(--bg-2)); border: 1px solid var(--linia); color: var(--akcent);
}
.ilustracja svg { width: 38%; height: 38%; opacity: .9; }

/* ---------- PASEK ZAUFANIA I LICZBY ---------- */
.pasek-zaufania { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; padding: 22px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.pasek-zaufania span { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 500; }
.pasek-zaufania .ik { color: var(--akcent); }
.liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; margin-top: 32px; }
/* liczby w gradiencie akcentu (E7 "gradient text"); color zostaje jako zapas dla przegladarek bez background-clip:text */
.liczba strong { display: block; width: fit-content; font-family: var(--font-naglowki); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--akcent); font-variant-numeric: tabular-nums; margin-bottom: 8px; background: linear-gradient(135deg, var(--akcent), var(--akcent-ciemny)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.liczba span { color: var(--muted); font-size: .95rem; }

/* ---------- KARTY / OFERTA ---------- */
.karta {
  position: relative; overflow: hidden;
  background: var(--bg); border: 1px solid var(--linia); border-radius: var(--promien); padding: 28px;
  display: flex; flex-direction: column; transition: transform .45s var(--plynnie), box-shadow .45s var(--plynnie);
}
.tlo-2 .karta { border-color: transparent; }
/* pasek akcentu wyjezdza od lewej przy najechaniu (E8 "hover-lift + top bar") */
.karta::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--akcent), var(--akcent-ciemny)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--plynnie); }
.karta:hover { transform: translateY(-4px); box-shadow: var(--cien); }
.karta:hover::before { transform: scaleX(1); }
.karta h3 { margin-bottom: 10px; }
.karta p { color: var(--muted); }
.karta .wiecej { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.karta .wiecej .ik { transition: transform .18s ease; }
.karta .wiecej:hover .ik { transform: translateX(4px); }

/* ---------- PROCES (kroki) ---------- */
.proces { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--odstep); counter-reset: krok; }
.krok { position: relative; padding: 28px; background: var(--bg-2); border-radius: var(--promien); }
.tlo-2 .krok { background: var(--bg); }
.krok::before {
  counter-increment: krok; content: counter(krok, decimal-leading-zero);
  display: block; font-family: var(--font-naglowki); font-size: .85rem; font-weight: 700; letter-spacing: .12em; color: var(--akcent); margin-bottom: 14px;
}
.krok h3 { font-size: 1.15rem; }
.krok p { color: var(--muted); font-size: .97rem; }

/* ---------- OPINIE ---------- */
.opinia { background: var(--bg); border: 1px solid var(--linia); border-radius: var(--promien); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.tlo-2 .opinia { border-color: transparent; }
.gwiazdki { display: flex; gap: 2px; color: var(--akcent); }
.gwiazdki .ik { width: 1.1em; height: 1.1em; }
.gwiazdki .ik svg { fill: currentColor; }
.opinia blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.opinia .autor { display: flex; align-items: center; gap: 12px; margin-top: auto; color: var(--muted); font-size: .95rem; }
.opinia .autor b { display: block; color: var(--tekst); }
.inicjaly { width: 44px; height: 44px; border-radius: 50%; background: var(--akcent-tlo); color: var(--akcent); display: grid; place-items: center; font-weight: 700; flex: none; }

/* ---------- CENNIK ---------- */
.cennik { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--odstep); align-items: stretch; }
.pakiet { position: relative; background: var(--bg); border: 1px solid var(--linia); border-radius: var(--promien); padding: 32px 28px; display: flex; flex-direction: column; }
/* wyrozniony pakiet: obramowanie GRADIENTOWE (E11: tlo w padding-box, gradient w border-box) */
.pakiet.wyrozniony { border: 2px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg, var(--akcent), var(--akcent-ciemny)) border-box; box-shadow: var(--cien); }
.pakiet.wyrozniony::before {
  content: attr(data-odznaka); position: absolute; top: -13px; left: 24px; background: var(--akcent); color: var(--akcent-tekst);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.pakiet h3 { font-size: 1.15rem; }
.pakiet .opis { color: var(--muted); font-size: .95rem; }
.cena { font-family: var(--font-naglowki); font-size: 2.4rem; font-weight: 700; line-height: 1; margin: 18px 0 6px; letter-spacing: -0.02em; }
.cena small { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pakiet ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.pakiet li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; }
.pakiet li .ik { color: var(--akcent); margin-top: .15em; }
.pakiet .przycisk { margin-top: auto; width: 100%; }

/* ---------- GALERIA ---------- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--promien-maly); }
.galeria .duze { grid-column: span 2; grid-row: span 2; }
.galeria .duze img { height: 100%; aspect-ratio: auto; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--linia); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 1.05rem; font-family: var(--font-naglowki); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ik { color: var(--akcent); transition: transform .25s ease; }
.faq details[open] summary .ik { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--muted); max-width: 66ch; }

/* ---------- CTA KONCOWE ---------- */
.cta {
  background: linear-gradient(135deg, var(--akcent), var(--akcent-ciemny)); color: var(--akcent-tekst);
  border-radius: calc(var(--promien) * 1.5); padding: clamp(36px, 6vw, 72px);
  display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center;
}
.cta h2, .cta p { color: inherit; }
.cta p { opacity: .9; max-width: 56ch; }
.cta .przyciski { margin: 0; }

/* ---------- KONTAKT I FORMULARZ ---------- */
.kontakt { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.dane-kontaktowe { display: grid; gap: 20px; margin-top: 8px; }
.dane-kontaktowe a, .dane-kontaktowe div { display: flex; gap: 14px; align-items: flex-start; color: var(--tekst); text-decoration: none; }
.dane-kontaktowe .ik { color: var(--akcent); width: 1.4em; height: 1.4em; margin-top: .05em; }
.dane-kontaktowe b { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }
.dane-kontaktowe a:hover { color: var(--akcent); }
.formularz { display: grid; gap: 16px; background: var(--bg); border: 1px solid var(--linia); border-radius: var(--promien); padding: clamp(20px, 3vw, 32px); }
.tlo-2 .formularz { border-color: transparent; }
.formularz .wiersz { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pole { display: grid; gap: 6px; }
.pole label { font-weight: 600; font-size: .95rem; }
.pole input, .pole textarea, .pole select {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--linia); border-radius: var(--promien-maly);
  background: var(--bg); color: var(--tekst); font: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.pole input:focus, .pole textarea:focus, .pole select:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-tlo); }
.pole textarea { min-height: 140px; resize: vertical; }
.pole .blad-pola { display: none; color: #B42318; font-size: .85rem; }
.pole.zle input, .pole.zle textarea { border-color: #B42318; }
.pole.zle .blad-pola { display: block; }
.zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); }
.zgoda input { margin-top: .3em; }
.komunikat { display: none; padding: 14px 16px; border-radius: var(--promien-maly); background: var(--akcent-tlo); color: var(--tekst); }
.komunikat.pokaz { display: block; }
.komunikat.blad { background: #FDECEC; color: #8A1F1F; }

/* ---------- STOPKA ---------- */
.stopka { background: var(--bg-2); border-top: 1px solid var(--linia); padding: 56px 0 28px; color: var(--muted); font-size: .95rem; }
body[data-kierunek="dark"] .stopka, body[data-kierunek="tech"] .stopka, body[data-kierunek="bold"] .stopka { background: var(--bg); }
.stopka .kolumny { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 32px; }
.stopka h4 { color: var(--tekst); font-size: 1rem; margin: 0 0 14px; }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stopka a { color: inherit; text-decoration: none; }
.stopka a:hover { color: var(--akcent); }
.stopka .logo { margin-bottom: 12px; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linia); display: grid; place-items: center; color: var(--tekst); transition: background .15s ease, color .15s ease; }
.social a:hover { background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent); }
.social .ik { width: 18px; height: 18px; }
.stopka .dol { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linia); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: .88rem; }

/* ---------- DROBIAZGI ---------- */
.odznaka { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--akcent-tlo); color: var(--akcent); font-size: .85rem; font-weight: 600; }
.odznaka .ik { width: 1em; height: 1em; }
.linia-pozioma { border: 0; border-top: 1px solid var(--linia); margin: 0; }
.mapa { aspect-ratio: 16 / 9; border-radius: var(--promien); border: 1px solid var(--linia); background: var(--bg-2); display: grid; place-items: center; color: var(--muted); text-decoration: none; gap: 8px; margin-top: 24px; }
.mapa .ik { color: var(--akcent); width: 2em; height: 2em; }

/* ---------- TASMA (marquee, E15) - skladacz wstawia ja SAM pod hero w kierunkach bold/konsumencki/dark
   z nazw uslug z oferty (tresc powtorzona 2x, przesuw o -50% = petla bez szwu; zatrzymuje sie pod kursorem) ---------- */
.tasma { overflow: hidden; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tasma-tor { display: flex; width: max-content; animation: tasma 34s linear infinite; }
.tasma span { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; white-space: nowrap; font-family: var(--font-naglowki); font-weight: var(--waga-naglowki); font-size: clamp(1.05rem, 2vw, 1.45rem); color: var(--muted); letter-spacing: -0.01em; }
.tasma .ik { color: var(--akcent); width: .8em; height: .8em; }
.tasma:hover .tasma-tor { animation-play-state: paused; }
@keyframes tasma { to { transform: translateX(-50%); } }

/* ---------- LINK POMIJAJACY (a11y, strona-pl-perfekcja): widoczny tylko po Tab z klawiatury ---------- */
.pomin { position: absolute; left: 16px; top: -120px; z-index: 100; padding: 10px 14px; background: var(--akcent); color: var(--akcent-tekst); border-radius: var(--promien-maly); font-weight: 600; text-decoration: none; transition: top .2s ease; }
.pomin:focus { top: 12px; }

/* ---------- RUCH (tylko gdy skrypt.js dolaczony: <html class="js">) ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); filter: blur(4px); transition: opacity .8s var(--plynnie), transform .8s var(--plynnie), filter .8s var(--plynnie); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.widoczny { opacity: 1; transform: none; filter: none; }
.karta, .opinia, .pakiet, .krok { transition-timing-function: var(--plynnie); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
}

/* ---------- RESPONSYWNOSC ---------- */
@media (max-width: 1024px) {
  .kol-4 { grid-template-columns: repeat(2, 1fr); }
  .stopka .kolumny { grid-template-columns: 1.5fr 1fr 1fr; }
  /* hamburger juz na tablecie (nav-responsywny): 5-6 pozycji menu + logo + CTA nie mieszcza sie
     w jednej linii ponizej ~1024 px, a lamanie paska na dwie linie to najczestszy blad landingow */
  .hamburger { display: grid; }
  .naglowek .cta-glowne { display: none; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; white-space: normal; background: var(--bg); border-bottom: 1px solid var(--linia); padding: 8px 0 16px; box-shadow: 0 16px 32px rgba(0,0,0,.12); max-height: 72vh; overflow: auto; }
  .naglowek.otwarty .menu { display: flex; }
  .menu a:not(.przycisk) { display: block; padding: 12px clamp(16px, 4vw, 32px); border: 0; font-size: 1.05rem; }
  .menu a:not(.przycisk)::after { display: none; }
  .menu .w-menu-cta { display: block; padding: 12px clamp(16px, 4vw, 32px) 0; }
  .menu .w-menu-cta .przycisk { width: 100%; }
}
@media (max-width: 900px) {
  .kol-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-dzielony .wrap, .dwie-kolumny, .kontakt { grid-template-columns: 1fr; }
  .dwie-kolumny.odwrotnie > :first-child { order: 0; }
  .cta { grid-template-columns: 1fr; }
  .stopka .kolumny { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .kol-2, .kol-3, .kol-4 { grid-template-columns: 1fr; }
  .formularz .wiersz { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .galeria .duze { grid-column: span 2; grid-row: auto; }
  .galeria .duze img { aspect-ratio: 4 / 3; }
  .stopka .kolumny { grid-template-columns: 1fr; }
  .hero .lista-check { grid-template-columns: 1fr; }
  .przyciski .przycisk { width: 100%; }
  .naglowek .wrap { min-height: 64px; }
  .karta-plywajaca { left: 10px; bottom: 10px; font-size: .85rem; padding: 10px 14px 10px 10px; }
  .karta-plywajaca .ik { width: 34px; height: 34px; }
}
