/* =========================================================
   Biuro Rachunkowe DWUNASTKA — dwunastka.waw.pl
   Font:   Poppins (łacina + łacina rozszerzona dla polskich znaków; pliki w assets/fonts)
           nagłówki / menu / hasła na sliderze = waga 700 (Bold); pozostałe teksty = wagi 400–800
   ========================================================= */

/* Poppins hostowany na własnym serwerze (licencja SIL OFL, plik assets/fonts/OFL.txt) — bez połączeń z serwerami Google */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800.woff") format("woff"); }

:root {
  --navy: #000080;
  --navy-deep: #00004d;
  --ink: #0a0a1f;
  --cyan: #00befa;
  --cyan-deep: #0099cc;
  --paper: #f7f6f2;
  --white: #ffffff;
  --text: #15162b;
  --text-muted: #5c5f74;
  --border: #e4e2db;
  --link-hover: #7b8095;      /* szary po najechaniu / kliknięciu (jasne tło) */
  --link-hover-light: #b9bfd4; /* jasnoszary po najechaniu (ciemne tło) */
  --max-width: 1240px;
  --header-h: 92px;
  --font-display: "Poppins", Arial, sans-serif;
  --font-body: "Poppins", "Segoe UI", Arial, sans-serif;
  --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.7;
  font-size: 17.5px;
  -webkit-font-smoothing: antialiased;
}

/* pogrubienia w tekście = ten sam kroj co reszta tekstu (Poppins) */
strong, b { font-family: var(--font-body); font-weight: 700; }

/* ---------- Linki: bez podkreśleń, zmiana koloru po najechaniu i kliknięciu ---------- */
a { color: var(--navy); text-decoration: none; transition: color .2s ease, background-color .2s ease, filter .2s ease; }
a:hover, a:focus, a:active, a:visited { text-decoration: none; }
a:hover, a:focus-visible, a:active { color: var(--link-hover); }
img { max-width: 100%; height: auto; display: block; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 12px; top: 12px; z-index: 300; background: #fff; padding: 10px 16px; border-radius: 4px; color: var(--navy); }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }

/* ---------- Nagłówki (Poppins Bold 700) ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 20px; line-height: 1.1; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(42px, 5.4vw, 72px); }
h2 { font-size: clamp(33px, 4vw, 52px); }
h3 { font-size: 27px; }
h4 { font-size: 18px; }
p { margin: 0 0 16px; }
.lede { font-size: 20px; color: var(--text-muted); max-width: 660px; }

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #B5594A; color: #ffffff; padding: 15px 30px;
  border-radius: var(--radius); font-weight: 600; font-size: 16px;
  border: none; cursor: pointer;
  font-family: var(--font-body); transition: background .15s ease, transform .15s ease, color .15s ease;
}
.btn:hover, .btn:focus-visible, .btn:active { background: #9c4838; color: #ffffff; transform: translateY(-1px); }
/* wszystkie warianty przycisków wezwania do działania wyglądają tak samo */
.btn-cyan, .btn-cta, .btn-ghost, .btn-ghost-light { background: #B5594A; border: none; color: #ffffff; padding: 15px 30px; }
.btn-cyan:hover, .btn-cyan:focus-visible, .btn-cyan:active,
.btn-cta:hover, .btn-cta:focus-visible, .btn-cta:active,
.btn-ghost:hover, .btn-ghost:focus-visible, .btn-ghost:active,
.btn-ghost-light:hover, .btn-ghost-light:focus-visible, .btn-ghost-light:active { background: #9c4838; color: #ffffff; }

/* ---------- Header ---------- */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
header.scrolled { background: var(--white); border-bottom: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
@media (min-width: 1261px) { :root { --header-h: 110px; } }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; min-height: var(--header-h); max-width: 1440px; }  /* nagłówek szerszy niż treść, żeby większe menu się mieściło */

.logo { position: relative; display: block; flex-shrink: 0; }
.logo img { height: 58px; width: auto; }
.logo .logo-img-mono { display: block; filter: drop-shadow(0 2px 10px rgba(0,0,60,0.45)); }
.logo .logo-img-color { display: none; }
header.scrolled .logo-img-mono { display: none; }
header.scrolled .logo-img-color { display: block; }

nav.main-nav > ul { list-style: none; display: flex; margin: 0; padding: 0; gap: 8px; align-items: center; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li.has-sub { position: static; }  /* rozwijane menu rozpina się pod całym headerem */
.main-nav > ul > li > a {
  display: flex; align-items: center; gap: 8px; padding: 12px 28px; white-space: nowrap;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 21px;
}
.main-nav > ul > li.active > a { color: var(--cyan); }
.main-nav > ul > li > a:hover, .main-nav > ul > li > a:focus-visible, .main-nav > ul > li > a:active { color: var(--link-hover-light); }

header.scrolled .main-nav > ul > li > a { color: var(--ink); }
header.scrolled .main-nav > ul > li.active > a { color: var(--cyan-deep); }
header.scrolled .main-nav > ul > li > a:hover,
header.scrolled .main-nav > ul > li > a:focus-visible,
header.scrolled .main-nav > ul > li > a:active { color: var(--link-hover); }

.main-nav .caret {
  font-size: 23px; font-weight: 400; line-height: 1; color: inherit; opacity: .8;
  display: inline-block; transform: rotate(0deg); transition: transform .25s ease;
}
.main-nav > ul > li:hover .caret,
.main-nav > ul > li:focus-within .caret,
.main-nav > ul > li.open .caret { transform: rotate(45deg); }

/* Rozwijane menu: otwiera się POZIOMO, jako pasek pod headerem (jak na dmcl.ca) */
.main-nav .submenu {
  list-style: none; margin: 0; padding: 0 28px;
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  background: rgba(0,0,100,0.96); backdrop-filter: blur(8px);
  box-shadow: 0 16px 30px rgba(10,10,31,0.22);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.main-nav .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -36px; height: 36px; } /* most dla myszy */
.main-nav > ul > li:hover .submenu,
.main-nav > ul > li:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .submenu a {
  display: block; padding: 24px 32px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff;
}
.main-nav .submenu li.current a { color: var(--cyan); }
/* dopisek pod nazwą podstrony (np. CENNIK) — jak ścieżka na podstronach: małe wersaliki */
.main-nav .submenu .sub-tag {
  display: block; margin-top: 4px; text-align: center;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: inherit; opacity: .68; line-height: 1.2;
}
.main-nav .submenu a:hover, .main-nav .submenu a:focus-visible, .main-nav .submenu a:active { color: var(--link-hover-light); }

.header-right { display: none; align-items: center; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: #fff; margin: 6px 0; transition: background .2s ease; }
header.scrolled .nav-toggle span { background: var(--ink); }

/* ---------- Hero (slider: zdjęcie + hasło zmieniają się razem) ---------- */
.hero { position: relative; overflow: hidden; min-height: 680px; color: #fff; background: var(--navy); }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  display: flex; align-items: center; opacity: 0; visibility: hidden; z-index: 1; transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 2; }
.hero-slide-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,0,128,0.92) 0%, rgba(0,0,128,0.78) 32%, rgba(0,43,105,0.42) 58%, rgba(0,80,130,0.18) 100%);
}
.hero-slide > .wrap { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: 760px; padding: 120px 0 90px; }
.hero h2.hero-h { font-size: clamp(42px, 5.4vw, 72px); }
.hero h2.hero-h, .hero h1 { color: #fff; margin-bottom: 22px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.hero .lede { color: rgba(255,255,255,0.9); margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 5; display: flex; gap: 8px; pointer-events: none; }
.hero-dots button { width: 28px; height: 4px; background: rgba(255,255,255,0.35); border: none; cursor: pointer; padding: 0; border-radius: 2px; pointer-events: auto; }
.hero-dots button.active { background: var(--cyan); }

/* ---------- Sekcje ---------- */
.section { padding: 90px 0; }
.section-alt { background: #fff; }
.section-navy { background: var(--navy); color: #fff; }
.section-navy h2 { color: #fff; }
.section-head { max-width: 660px; margin-bottom: 50px; }
.section-head .lede { margin-bottom: 0; }
.section-head-center { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }

/* sąsiednie sekcje o różnym tle dzielą odstęp po połowie, żeby odległość między treściami wynosiła 90 px */
.section--join-next { padding-bottom: 45px; }
.section--join-prev { padding-top: 45px; }

/* ---------- Karty usług (Oferta) ---------- */
.services-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 22px; }
.service-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 32px 26px; display: flex; flex-direction: column; min-height: 290px;
  transition: border-color .15s ease, transform .15s ease;
}
.service-card:hover { border-color: var(--navy); transform: translateY(-3px); }
.service-card .num { font-size: 16px; color: var(--cyan-deep); font-weight: 800; margin-bottom: 20px; }
.service-card h3 { margin-bottom: 12px; }
.service-card p { color: var(--text-muted); font-size: 16px; flex-grow: 1; }
.service-card .more { font-weight: 700; font-size: 16px; color: var(--navy); }
.service-card .more:hover, .service-card .more:active { color: var(--link-hover); }

/* ---------- Usługi (strona główna): cztery kolumny z kreską u góry, bez kart ---------- */
.service-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
.service-cols > .service-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.service-col {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 28px 4px 8px; border-top: 4px solid var(--cyan); color: var(--text);
  transition: border-color .2s ease;
}
.service-col:nth-child(even) { border-top-color: var(--navy); }
.service-col > .ic { position: absolute; right: -26px; top: 14px; width: 130px; height: 130px; opacity: .06; color: var(--navy); pointer-events: none; transition: opacity .2s ease; }
.col-icon { position: relative; color: var(--navy); font-size: 54px; line-height: 1; display: block; margin-bottom: 4px; }
.col-icon .ic { width: 1em; height: 1em; display: block; }
.service-col h3 { position: relative; margin: 14px 0 8px; font-size: 22px; color: var(--navy); }
.service-col p { position: relative; margin: 0 0 18px; font-size: 15.5px; color: var(--text-muted); }
.service-col .col-more { position: relative; margin-top: auto; align-self: end; font-weight: 700; font-size: 15.5px; color: var(--cyan-deep); transition: color .2s ease; }
.service-col:hover, .service-col:focus-visible, .service-col:active { color: var(--text); border-top-color: var(--cyan-deep); }
.service-col:hover > .ic, .service-col:focus-visible > .ic { opacity: .1; }
.service-col:hover .col-more, .service-col:focus-visible .col-more { color: var(--navy); }

/* ---------- Zdjęcie + tekst ---------- */
.about-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-teaser img { border-radius: 10px; width: 100%; aspect-ratio: 1410 / 920; object-fit: cover; }   /* wszystkie zdjęcia przy tekście: te same proporcje */
.about-teaser img.photo-right { object-position: 68% 50%; }
.about-teaser .tag { color: var(--cyan-deep); font-weight: 700; font-size: 14.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
/* wariant dopasowany do tekstu: wysokość zdjęcia podąża za wysokością tekstu obok,
   ale proporcje nigdy nie są węższe niż 1,15:1, żeby nie ucinać osób na zdjęciu */
.about-teaser--match { align-items: stretch; }
@media (min-width: 1101px) { .about-teaser--match { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
.about-teaser--match .about-teaser-photo { position: relative; container-type: inline-size; min-height: 360px; }
.about-teaser--match .about-teaser-photo-box {
  position: absolute; inset: 0; margin: auto; width: 100%;
  height: 100%; height: min(100%, calc(100cqw / 1.15));
  border-radius: 10px; overflow: hidden;
}
.about-teaser--match .about-teaser-photo-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; border-radius: 0; }
.about-teaser--match .about-teaser-text { align-self: center; }
@media (min-width: 1101px) { .about-teaser--match .about-teaser-photo-box { height: min(100%, calc(100cqw / 0.95)); } }
.about-teaser--match .about-teaser-text h2 { margin-bottom: 34px; }

/* ---------- Pasek lokalizacji ---------- */
.location-band { background: var(--paper); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.location-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding-top: 50px; padding-bottom: 50px; }
.location-grid h3 { margin-bottom: 8px; }
.location-grid p { margin-bottom: 0; color: var(--text-muted); }

/* ---------- Podstrony: wysoki baner z tytułem ---------- */
.page-hero {
  position: relative; overflow: hidden; background: var(--navy); color: #fff;
  min-height: 500px; display: flex; align-items: flex-end;
  padding: 190px 0 70px;
}
.page-hero::after {   /* subtelny łuk z sygnetu marki */
  content: ""; position: absolute; right: -130px; top: -70px; width: 900px; height: 930px;
  background: url("../img/sygnet.svg") no-repeat center / contain; opacity: .26;
  -webkit-mask-image: linear-gradient(to bottom left, #000 35%, transparent 85%); mask-image: linear-gradient(to bottom left, #000 35%, transparent 85%); pointer-events: none; z-index: 1;
}
.page-hero > .wrap { position: relative; z-index: 2; width: 100%; }
.page-hero h1 { color: #fff; margin: 0 0 18px; max-width: 900px; }
.page-hero .lede { color: rgba(255,255,255,0.82); margin-bottom: 0; }

/* ścieżka: WERSALIKI, rozdzielone kropką (jak na dmcl.ca) */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 52px; font-family: var(--font-body); font-size: 14px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.breadcrumb a { color: rgba(255,255,255,0.68); }
.breadcrumb a:hover, .breadcrumb a:focus-visible, .breadcrumb a:active { color: #fff; }
.breadcrumb .sep { color: var(--cyan); font-size: 17px; line-height: 1; }
.breadcrumb .current { color: #fff; }

.service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 60px; padding-top: 70px; padding-bottom: 70px; }
.service-main { min-width: 0; }
.service-main h2 { margin-top: 52px; }
.service-main h2:first-child { margin-top: 0; }
.service-main ul.feature-list { list-style: none; margin: 0 0 20px; padding: 0; }
.service-main ul.feature-list li { position: relative; padding-left: 26px; margin-bottom: 11px; color: var(--text); }
.service-main ul.feature-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; background: var(--cyan); border-radius: 50%; }
.callout { background: var(--paper); border-left: 3px solid var(--navy); padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 16px; color: var(--text-muted); margin: 24px 0; }

.service-sidebar { align-self: start; position: sticky; top: 136px; }
.sidebar-card { background: var(--navy); color: #fff; border-radius: 10px; padding: 28px 24px; margin-bottom: 20px; }
.sidebar-card h4 { color: #fff; font-size: 17px; margin-bottom: 6px; }
.sidebar-card .price { font-size: 38px; font-weight: 800; color: var(--cyan); margin-bottom: 4px; line-height: 1.2; }
.sidebar-card .price-note { font-size: 14.5px; color: rgba(255,255,255,0.7); margin-bottom: 18px; }
.sidebar-nav { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }   /* lekka lista z linią po lewej */
.sidebar-nav li a { display: block; position: relative; padding: 12px 18px 12px 22px; font-size: 16px; color: var(--text); transition: color .2s ease, padding .2s ease; }
.sidebar-nav li a::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .2s ease; }
.sidebar-nav li a:hover, .sidebar-nav li a:focus-visible, .sidebar-nav li a:active { background: transparent; color: var(--cyan-deep); padding-left: 28px; }
.sidebar-nav li.active a, .sidebar-nav li.active a:hover { background: transparent; color: var(--navy); font-weight: 700; padding-left: 22px; }
.sidebar-nav li.active a::before { background: var(--cyan); width: 4px; left: -3px; }

/* ---------- Cenniki ---------- */
.price-tabs { display: flex; gap: 0; background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 5px; margin-bottom: 20px; }   /* przełącznik VAT: dwa segmenty */
.price-tab { flex: 1; border: none; background: transparent; border-radius: 7px; padding: 13px 16px; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--navy); text-align: center; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.price-tab:hover { background: rgba(0,0,128,0.06); color: var(--navy); }
.price-tab.active { background: var(--navy); color: #fff; box-shadow: 0 2px 8px rgba(0,0,128,0.25); }
.price-table-wrap { overflow-x: auto; margin-bottom: 8px; }
table.price-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 480px; }
table.price-table th { background: var(--navy); color: #fff; text-align: left; padding: 13px 16px; font-weight: 600; font-size: 14.5px; }
table.price-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); }
table.price-table tr:last-child td { border-bottom: none; }
table.price-table tr:hover td { background: var(--paper); }
table.price-table td:first-child { font-weight: 800; color: var(--navy); }
.price-panel { display: none; }
.price-panel.active { display: block; }

table.addon-table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 10px 0 20px; }
table.addon-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
table.addon-table td:last-child { text-align: right; white-space: nowrap; font-weight: 700; color: var(--navy); }
.price-notes { font-size: 14.5px; color: var(--text-muted); }
.price-notes p { margin-bottom: 8px; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: stretch; }
.contact-info h2 { margin-bottom: 26px; }
.contact-lines { font-size: 18px; line-height: 1.75; margin-bottom: 20px; }
.contact-lines a { color: var(--ink); }
.contact-lines a:hover, .contact-lines a:active, .contact-lines a:focus-visible { color: var(--link-hover); }
.contact-hours { margin: 44px 0 34px; }
.contact-hours h2 { margin-bottom: 26px; }
.hours-list { margin: 0; display: grid; grid-template-columns: max-content max-content; column-gap: 30px; row-gap: 0; }
.hours-list dt, .hours-list dd { margin: 0; font-family: var(--font-body); font-weight: 400; color: var(--text); font-size: 18px; line-height: 1.75; }
.contact-photo { border-radius: 10px; }
.contact-map { position: relative; min-height: 520px; border-radius: 10px; overflow: hidden; background: #e9e8e3; }
.contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Stopka ---------- */
footer.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.72); padding: 64px 0 28px; line-height: 1.35; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
/* tablet/telefon: siatka 2 kolumny; komputer (od 1101 px): sekcje wg szerokości treści, odstępy między nimi dokładnie równe */
.footer-top-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 1101px) {
  .footer-top-4 { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
  .footer-top-4 .footer-col { flex: 0 1 auto; }
}
.footer-arc { height: 110px; width: auto; }
.footer-lines { margin: 0; font-size: 16px; line-height: 1.5; }
.footer-lines a { color: rgba(255,255,255,0.68); }
.footer-lines a:hover, .footer-lines a:focus-visible, .footer-lines a:active { color: #fff; }
.footer-col h4 { color: #fff; font-size: 17px; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0; font-size: 16px; line-height: 1.5; }
.footer-col a { color: rgba(255,255,255,0.68); font-size: 16px; }
.footer-col a:hover, .footer-col a:focus-visible, .footer-col a:active { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.45); }
.footer-bottom a { color: rgba(255,255,255,0.6); }
.footer-bottom a:hover, .footer-bottom a:focus-visible, .footer-bottom a:active { color: #fff; }

/* ---------- Uwagi ---------- */
.notice { background: #fff8e6; border: 1px solid #f0dca0; border-left: 4px solid #e0b23a; padding: 14px 18px; border-radius: 3px; font-size: 16px; color: #6b5a20; margin-bottom: 24px; }

/* ---------- Responsywność ---------- */
@media (max-width: 1260px) {
  .header-right { display: flex; }
  .nav-toggle { display: block; }
  nav.main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border-top: 1px solid var(--border); box-shadow: 0 16px 24px rgba(0,0,0,0.08);
    display: none; flex-direction: column; max-height: 80vh; overflow-y: auto;
  }
  nav.main-nav.open { display: flex; }
  nav.main-nav > ul { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .main-nav > ul > li.has-sub { position: relative; }
  .main-nav > ul > li > a,
  header.scrolled .main-nav > ul > li > a { color: var(--ink); padding: 16px 28px; font-size: 19px; border-bottom: 1px solid var(--border); justify-content: space-between; }
  .main-nav > ul > li.active > a,
  header.scrolled .main-nav > ul > li.active > a { color: var(--cyan-deep); }
  .main-nav > ul > li > a:hover, .main-nav > ul > li > a:active,
  header.scrolled .main-nav > ul > li > a:hover, header.scrolled .main-nav > ul > li > a:active { color: var(--link-hover); }
  .main-nav .submenu {
    position: static; display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 0; background: var(--paper); backdrop-filter: none; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .main-nav .submenu::before { display: none; }
  .main-nav > ul > li.open .submenu { display: flex; }
  .main-nav .submenu a { color: var(--ink); padding: 15px 44px; font-size: 16px; border-bottom: 1px solid var(--border); }
  .main-nav .submenu li.current a { color: var(--cyan-deep); }
  .main-nav .submenu .sub-tag { text-align: left; font-size: 11.5px; margin-top: 3px; }
  .main-nav .submenu a:hover, .main-nav .submenu a:active { color: var(--link-hover); }
}
/* mysz: podstrony rozwijają się po najechaniu na „Oferta" także w menu hamburger */
@media (max-width: 1260px) and (hover: hover) {
  .main-nav > ul > li.has-sub:hover > .submenu,
  .main-nav > ul > li.has-sub:focus-within > .submenu { display: flex; }
}

@media (max-width: 980px) {
  .hero { min-height: 560px; }
  .hero-content { padding: 110px 0 70px; }
  .services-grid, .service-cols { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .service-cols { gap: 0 28px; }
  .service-cols > .service-col { margin-bottom: 40px; }
  .about-teaser { grid-template-columns: 1fr; gap: 32px; }
  .about-teaser--match .about-teaser-photo { min-height: 0; aspect-ratio: 1410 / 920; }
  .about-teaser--match .about-teaser-photo-box { height: 100%; }
  .service-layout { grid-template-columns: minmax(0, 1fr); }
  .service-sidebar { position: static; order: -1; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-map { min-height: 380px; }
  .location-grid { grid-template-columns: 1fr; text-align: left; }
  .page-hero { min-height: 420px; padding: 150px 0 56px; }
}

@media (max-width: 700px) {
  .site-header { padding: 12px 20px; min-height: 76px; }
  .logo img { height: 46px; }
  .wrap { padding: 0 20px; }
  .services-grid, .service-cols { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-arc { height: 84px; }
  .hero { min-height: 520px; }
  .hero-slide-overlay { background: linear-gradient(180deg, rgba(0,0,128,0.5) 0%, rgba(0,0,128,0.42) 38%, rgba(0,0,128,0.62) 72%, rgba(0,0,128,0.8) 100%); }
  .hero .lede { text-shadow: 0 1px 12px rgba(0,0,60,0.55); }
  .service-layout { padding-top: 40px; padding-bottom: 44px; }
  .hero-content { max-width: 100%; padding: 100px 0 60px; }
  .page-hero { min-height: 360px; padding: 130px 0 44px; }
  .page-hero::after { width: 560px; height: 580px; right: -170px; top: 120px; opacity: .17; }
  .breadcrumb { font-size: 12.5px; gap: 9px; letter-spacing: .1em; margin-bottom: 34px; }
  .section { padding: 64px 0; }
  table.addon-table td { padding: 10px 8px; overflow-wrap: normal; word-break: normal; }
  table.addon-table td:last-child { white-space: normal; min-width: 84px; }
}

/* ---------- Podstrony cennika ---------- */
.price-more { margin: 0 0 22px; font-weight: 600; }
.price-intro { font-size: 18px; color: var(--text); max-width: none; margin-bottom: 26px; }
.price-h { font-size: 22px; margin: 44px 0 16px; }
.price-h-note { font-weight: 500; font-size: 17px; color: var(--text-muted); }
.service-main .price-tabs { margin-bottom: 20px; }
.service-main .price-table-wrap { margin-bottom: 8px; }
table.price-table { min-width: 0; }
/* nagłówki tabel: wyśrodkowane, przysunięte do góry */
table.price-table th { font-size: 14.5px; line-height: 1.35; text-align: center; vertical-align: top; color: #fff; font-weight: 600; }
table.price-table td { vertical-align: top; }
/* liczby: pogrubienie lżejsze niż Bold */
table.price-table td:first-child { font-weight: 500; text-align: center; }
table.price-table td:not(:first-child), table.price-table th:not(:first-child) { text-align: center; width: 24%; }
table.price-table--text td:first-child { font-weight: 400; color: var(--text); text-align: left; }
table.price-table--text th:not(:first-child), table.price-table--text td:not(:first-child) { width: 210px; }
table.price-table--text td:not(:first-child) { text-align: center; font-weight: 500; color: var(--navy); }
table.price-table--text td.long { width: 300px; line-height: 1.6; }
.price-net { margin: 26px 0 0; padding-left: 16px; border-left: 3px solid var(--cyan); font-weight: 600; }
.price-foot { margin: 22px 0 0; font-size: 15px; color: var(--text-muted); }
@media (max-width: 700px) {
  .price-table th, .price-table td { padding: 10px 8px; font-size: 14px; overflow-wrap: normal; word-break: normal; }
  table.price-table td:not(:first-child), table.price-table th:not(:first-child) { width: auto; }
  table.price-table--text th:not(:first-child), table.price-table--text td:not(:first-child) { width: 96px; }
  table.price-table--text td.long { width: 150px; font-size: 13px; }
  .price-h { font-size: 20px; }
}

.service-main .price-notes { margin-top: 26px; font-size: 15px; line-height: 1.6; }

/* Polityka prywatności i nota prawna */
.legal { max-width: 860px; padding-top: 56px; padding-bottom: 72px; }
.legal p { margin: 0 0 14px; }
.legal .legal-h { font-weight: 600; letter-spacing: 0.04em; color: var(--navy); margin: 36px 0 14px; }
.legal .legal-h:first-child { margin-top: 0; }
.legal-list { list-style: none; margin: 0 0 20px; padding: 0; }
.legal-list li { position: relative; padding-left: 26px; margin-bottom: 11px; color: var(--text); }
.legal-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; background: var(--cyan); border-radius: 50%; }

/* Linki tekstowe w treści (poza menu i stopką): błękitne, szare po najechaniu */
.service-card .more, .price-more a, .contact-lines a, main p a:not(.btn), main li a:not(.btn):not(.sidebar-nav a) { color: var(--cyan-deep); }
.service-card .more:hover, .service-card .more:focus-visible, .service-card .more:active,
.price-more a:hover, .price-more a:focus-visible, .price-more a:active,
.contact-lines a:hover, .contact-lines a:focus-visible, .contact-lines a:active,
main p a:not(.btn):hover, main p a:not(.btn):focus-visible, main p a:not(.btn):active,
main li a:not(.btn):not(.sidebar-nav a):hover { color: var(--link-hover); }

/* tabele abonamentowe na telefonie: nagłówki nie łamią słów w środku */
@media (max-width: 600px) {
  table.price-table:not(.price-table--text) th { font-size: 12px; line-height: 1.3; padding: 11px 4px; overflow-wrap: normal; word-break: normal; hyphens: none; }
  table.price-table:not(.price-table--text) td { padding: 11px 4px; font-size: 15px; }
  table.price-table:not(.price-table--text) th:nth-child(1), table.price-table:not(.price-table--text) td:nth-child(1) { width: 33%; }
  table.price-table:not(.price-table--text) th:nth-child(2), table.price-table:not(.price-table--text) td:nth-child(2) { width: 29%; }
  table.price-table:not(.price-table--text) th:nth-child(3), table.price-table:not(.price-table--text) td:nth-child(3) { width: 38%; }
}

/* ikony przy telefonie i e-mailu (Kontakt, stopka) */
.icon-line { display: inline-flex; align-items: center; gap: 10px; }
.icon-line .ic { width: 1.15em; height: 1.15em; flex: none; color: var(--text); }
.footer-lines .icon-line .ic { color: rgba(255,255,255,0.72); }

/* menu boczne usług: na ekranach z układem jednokolumnowym trafia na sam dół, nad stopkę */
.subnav-bottom { display: none; }
@media (max-width: 980px) {
  .service-sidebar .sidebar-nav { display: none; }
  .subnav-bottom { display: block; padding: 40px 0 56px; }
}
@media (max-width: 700px) {
  .subnav-bottom { padding: 32px 0 44px; }
}

/* jednolite odstępy między poziomymi blokami: 90 px (komputer, tablet) / 64 px (telefon) */
:root { --block-pad: 90px; }
@media (max-width: 700px) { :root { --block-pad: 64px; } }
.section { padding-top: var(--block-pad); padding-bottom: var(--block-pad); }
.section--join-next { padding-bottom: calc(var(--block-pad) / 2); }
.section--join-prev { padding-top: calc(var(--block-pad) / 2); }
.service-layout, .legal { padding-top: var(--block-pad); padding-bottom: var(--block-pad); }
@media (max-width: 980px) { .subnav-bottom { padding-top: var(--block-pad); padding-bottom: var(--block-pad); } }
.service-main > :last-child, .legal > :last-child, .page-hero .wrap > :last-child { margin-bottom: 0; }

/* karta wyceny + ulotki PDF: jedna granatowa karta z linią; na telefonie ulotka trafia pod cennik */
.sidebar-card--combo { padding-top: 0; padding-bottom: 0; }
.sidebar-card--combo .part { padding: 28px 0; }
.sidebar-card--combo .part + .part { border-top: 1px solid rgba(255,255,255,0.22); }
.sidebar-card--combo .part h4 { margin-bottom: 6px; }
.pdf-mobile { display: none; }
@media (max-width: 980px) {
  .pdf-mobile { display: block; padding-bottom: 0; }
  .sidebar-card--combo .part-pdf { display: none; }
  .sidebar-card--combo .part { padding: 28px 0; }
}

/* ---------- Strona główna: Wspieramy Twoją branżę (granatowy pas) ---------- */
.industries-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 70px; align-items: start; }
.industries-grid h2 { margin-bottom: 22px; }
.industries-text { margin: 0; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.88); }
.industries-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.industries-list li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.22); font-size: 18px; font-weight: 600; color: #fff; }
.industries-list li:nth-child(-n+2) { border-top: 1px solid rgba(255,255,255,0.22); }
.ind-icon { flex: none; font-size: 30px; line-height: 1; color: var(--cyan); }
.ind-icon .ic { width: 1em; height: 1em; display: block; }
.industries-tagline { margin: 70px 0 0; padding-top: 56px; border-top: 1px solid rgba(255,255,255,0.22); font-size: clamp(33px, 4vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-align: center; color: #fff; max-width: none; }
.industries-tagline span { color: var(--cyan); }
@media (max-width: 980px) {
  .industries-grid { grid-template-columns: 1fr; gap: 40px; }
  .industries-tagline { margin-top: 48px; }
}
@media (max-width: 560px) {
  .industries-list { grid-template-columns: 1fr; }
  .industries-list li:nth-child(2) { border-top: 0; }
  .industries-list li { padding: 15px 0; font-size: 17px; }
  .industries-tagline { margin-top: 36px; padding-top: 30px; }
}
@media (max-width: 700px) {
  .industries-tagline span { display: block; }
}
@media (max-width: 400px) {
  .industries-tagline { font-size: 29px; }
}

/* ---------- Cennik: wybór formy ---------- */
.choose-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 70px; align-items: start; }
.choose-text { font-size: 17px; line-height: 1.7; color: var(--text); margin: 0; }
.choose-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.choose-list li { border-bottom: 1px solid var(--border); }
.choose-list a { position: relative; display: grid; grid-template-columns: 56px 1fr 30px; align-items: center; gap: 0 20px; padding: 26px 8px; color: var(--text); transition: background .2s ease, padding .2s ease; }
.choose-list a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cyan); transform: scaleY(0); transition: transform .2s ease; }
.choose-list a:hover, .choose-list a:focus-visible, .choose-list a:active { background: var(--paper); padding-left: 24px; color: var(--text); }
.choose-list a:hover::before, .choose-list a:focus-visible::before { transform: scaleY(1); }
.choose-icon { font-size: 42px; line-height: 1; color: var(--navy); }
.choose-icon .ic { width: 1em; height: 1em; display: block; }
.choose-body strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--navy); margin-bottom: 6px; }
.choose-body span { display: block; font-size: 16px; color: var(--text-muted); line-height: 1.55; }
.choose-arrow { font-size: 24px; color: var(--cyan-deep); justify-self: end; transition: transform .2s ease; }
.choose-list a:hover .choose-arrow { transform: translateX(6px); }

@media (max-width: 980px) {
  .choose-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .choose-list a { grid-template-columns: 44px 1fr 24px; gap: 0 14px; }
  .choose-icon { font-size: 34px; }
  .choose-body strong { font-size: 20px; }
}

/* podstrony Cennika, telefon: pdf -> menu -> "Zapraszamy do współpracy" (apla kontaktowa na samym dole) */
.contact-mobile { display: none; }
@media (max-width: 980px) {
  .contact-desktop { display: none; }
  .contact-mobile { display: block; }
}

@media (max-width: 420px) {
  table.price-table--text th, table.price-table--text td { padding: 9px 5px; font-size: 13px; }
  table.price-table--text th:not(:first-child), table.price-table--text td:not(:first-child) { width: 72px; }
  table.price-table--text td.long { width: 118px; font-size: 12.5px; }
  table.addon-table td { padding: 9px 5px; font-size: 14.5px; }
  table.addon-table td:last-child { min-width: 70px; }
}

.nb { white-space: nowrap; }

/* ---------- Tabele cennika: zaokrąglenie, „zebra”, turkusowy pasek po najechaniu ---------- */
.price-table-wrap { border: 1px solid var(--border); border-radius: 10px; background: #fff; }
table.price-table tbody tr:nth-child(even) td { background: #f5f4ef; }
table.price-table tbody tr:hover td { background: #fff; }
table.price-table tbody tr:hover td:first-child { box-shadow: inset 5px 0 0 var(--cyan); }