/*
IMPORTANT:
Production is DARK-ONLY.
Light theme rules (body:not(.dark-mode)) are deprecated and kept only as fallback.
Do not extend light theme further.
*/

/* === Anchor offset for sticky header (native anchors) === */
html { scroll-padding-top: var(--anchor-offset, 72px); }
:target { scroll-margin-top: var(--anchor-offset, 72px); }

@media (prefers-reduced-motion: no-preference) {
  html.snap-scroll {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }

  html.snap-scroll body:not(.product-page) > section,
  html.snap-scroll body:not(.product-page) > footer#kontakt {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html.snap-scroll {
    scroll-snap-type: y proximity;
  }
}

#produkty, #uslugi, #dlaczego-my, #realizacje, #technologie, #kontakt,
#mozliwosci, #jak-dziala, #integracje, #cta {
  scroll-margin-top: var(--anchor-offset, 72px);
}

/* ==========================================================================
   Future Unveiled — uporządkowany arkusz stylów
   Styl: Tech Minimal + Blue-Granite Warm+
   Uwaga: przeniesione i scalone reguły + usunięte duplikaty/ literówki.
   ========================================================================== */

/* 1) ZMIENNE */
:root{
  --brand-navy: #1A2736;
  /* Złoto-niebieska paleta akcentów dla jasnego motywu */
  --brand-blue: #4a8aff;
  --brand-beige: #d4a94c;
  /* Ciepły akcent brandowy wykorzystywany oszczędnie w jasnym motywie */
  --brand-warm: #d4a94c;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7FAFC;
  --muted: #E8EEF3;
  --text: #1A2736;
  --text-muted: #5a6a7a;
  --shadow-soft: 0 4px 14px rgba(26,39,54,0.12);
  --shadow-strong: 0 12px 50px rgba(26,39,54,0.16);
  --surface-veil: rgba(255,255,255,0.92);
  --footer-bar-height: 52px;
  --header-h: 72px;
  --tabs-h: 56px;
  --policy-bar-h: 56px;
  --section-pad-y-desktop: 96px;
  --section-pad-y-mobile: 56px;
  --section-pad-y: var(--section-pad-y-desktop);
  --stack-1: 8px;
  --stack-2: 16px;
  --stack-3: 24px;
}
body.dark-mode{
  --brand-navy: #0f1927;
  --brand-blue: #2c4b6f;
  --brand-beige: #f4b56a;
  --brand-warm: #fbbf24;
  --bg: #050507;
  --surface: rgba(12,17,24,0.72);
  --surface-2: rgba(16,23,34,0.56);
  --muted: rgba(255,153,77,0.22);
  --text: #ffd9a0;
  --text-muted: #cfa66f;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.32);
  --shadow-strong: 0 18px 80px rgba(0,0,0,0.45);
  --surface-veil: rgba(12,17,24,0.62);
}
body:not(.dark-mode){
  --brand-navy: #0f1927;
  --brand-blue: #2c4b6f;
  --brand-beige: #f4b56a;
  --brand-warm: #fbbf24;
  --bg: #050507;
  --surface: rgba(12,17,24,0.72);
  --surface-2: rgba(16,23,34,0.56);
  --muted: rgba(255,153,77,0.22);
  --text: #ffd9a0;
  --text-muted: #cfa66f;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.32);
  --shadow-strong: 0 18px 80px rgba(0,0,0,0.45);
  --surface-veil: rgba(12,17,24,0.62);
}

/* 2) RESET / BAZA */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
/* fixed footer bar requires bottom padding to avoid covering content */
body {
  padding-bottom: calc(var(--policy-bar-h, var(--footer-bar-height)) + env(safe-area-inset-bottom));
  padding-top: 80px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-navy); text-decoration: none; }
body.dark-mode a { color: #ffc880; }

/* Helper classes for responsive visibility */
.hide-on-mobile {}
.mobile-only { display: none; }

/* 3) TYPOGRAFIA NAGŁÓWKÓW */
h1, h2, h3 { font-family: Manrope,Inter,Arial,sans-serif; line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: clamp(28px, 4.2vw, 44px); }
h2 {
  font-size: clamp(24px, 3.6vw, 36px);
  margin-bottom: var(--stack-2);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* === Typography polish: better line breaks (widows/orphans) === */
h1, h2, h3 {
  text-wrap: balance;
}

p, li,
.card p,
.card .desc,
.card .description,
.product-card p,
.service-card p,
.case-card p {
  text-wrap: pretty;
}
h3 { font-size: 22px; }
.lead { font-size: 18px; color: var(--text-muted); max-width: 760px; }
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 { color: #f0a344; }

section h2 + p,
section .section-title + p {
  margin-top: 0;
  line-height: 1.75;
  color: color-mix(in srgb, var(--text-muted) 85%, var(--text));
}

/* 4) LAYOUT */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
section {
  position: relative;
  padding: var(--section-pad-y) 0;
}
section, footer { scroll-margin-top: 120px; }
/* Jedna linia między sekcjami (pseudo-element, żeby nie dublować krawędzi)
   – na mobile/tablet, na desktopie dark-mode wyłączona osobno. */
section + section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--muted);
}

/* Tryb slajdowy: tylko gdy jawnie włączony klasą body.slide-mode
   (landing domyślnie bez scroll-snap i min-height:100vh) */
@media (min-width: 900px) {
  body.slide-mode {
    scroll-snap-type: y mandatory;
  }
  body.slide-mode section,
  body.slide-mode footer#kontakt {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  body.slide-mode section > .container,
  body.slide-mode footer > .container {
    width: 100%;
  }
  body.slide-mode section + section::before {
    display: none;
  }
}
/* Wyłączenie trybu slajdowego na podstronach produktowych */
body.product-page {
  scroll-snap-type: none;
}
body.product-page section,
body.product-page footer#kontakt {
  min-height: auto;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  padding: 16px 0;
}
body.product-page #hero {
  padding-top: 90px;
  padding-bottom: 12px;
}
body.product-page #hero .container {
  max-width: 1040px;
  margin: 0 auto;
}
body.product-page .product-hero {
  gap: 20px;
  grid-template-columns: 1.1fr 0.9fr;
  padding-top: 90px;
  padding-bottom: 80px;
}
body.product-page .product-hero .mockup-placeholder {
  margin-top: -12px;
}
@media (max-width: 768px){
  body.product-page .product-hero {
    padding-top: 32px;
    padding-bottom: 48px;
  }
}
body.product-page #jak-dziala .mockup-placeholder {
  border-style: solid;
  border-width: 1px;
}

/* Rytm pionowy sekcji */
.section { margin: 48px 0; }
.section:first-of-type { margin-top: 16px; }
.section:last-of-type { margin-bottom: 24px; }
@media (max-width: 768px){
  .section { margin: 36px 0; }
  .section:first-of-type { margin-top: 12px; }
}

/* Mini nawigacja produktu */
.product-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 200;
  margin: 12px 0 12px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
.product-subnav.visible { opacity: 1; transform: none; }
/* gdy subnav nie jest aktywny, nie zostawia pustej przestrzeni nad hero */
.product-subnav:not(.visible) {
  margin-top: 0;
  margin-bottom: 0;
  height: 0;
  overflow: hidden;
}
.product-subnav .subnav-inner {
  display: flex;
  gap: 10px;
  align-items: center;
  background: color-mix(in srgb, var(--surface-veil, rgba(255,255,255,0.9)) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 80%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: saturate(140%) blur(18px);
  white-space: nowrap;
  overflow-x: auto;
}
.product-subnav a {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
}
.product-subnav .subnav-brand {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-warm);
  background: transparent;
  padding: 0 6px 0 0;
  border-radius: 0;
}
.product-subnav .subnav-brand:hover,
.product-subnav .subnav-brand:focus {
  background: transparent;
}
.product-subnav a:hover,
.product-subnav a.is-active {
  background: color-mix(in srgb, var(--muted) 78%, transparent);
}
body.dark-mode .product-subnav .subnav-inner {
  background: rgba(12,17,24,0.75);
  border-color: rgba(255,153,77,0.28);
}

/* Uwaga:
   Nie używamy już position: fixed dla paska produktu,
   bo w połączeniu z transform/backdrop-filter na rodzicach
   mobilne przeglądarki traktowały go jak „przyklejony” do kontenera
   (pojawiał się w połowie ekranu zamiast względem viewportu).
   Sticky + prosty kontener bez overflow/transform zachowuje się stabilnie. */
@media (max-width: 768px) {
  .product-subnav {
    top: var(--header-h);
    margin: 8px 0 8px;
  }
  .product-subnav .subnav-inner {
    box-shadow: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--surface-veil, rgba(12,17,24,0.9)) 82%, transparent);
  }
  /* Na mobile nie dokładamy dodatkowego paddingu na body,
     hero ma własny odstęp – inaczej powstaje zbyt duża pustka nad treścią. */
  body.product-page {
    padding-top: 0;
  }
}

/* Bezpieczny offset dla sekcji kotwiczonych z paskiem produktu */
body.product-page section.product-section,
body.product-page section.section.product-section {
  scroll-margin-top: calc(var(--header-h) + var(--tabs-h) + 16px);
}

/* 5) NAWIGACJA / HEADER */
header.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  /* Jasny, „szklany” header dla motywu light */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  z-index: 1000;
  padding: 10px 0;
  transition: padding .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
/* Wersja ciemna – stabilne, nieprzezroczyste tło */
body.dark-mode header.site-header {
  background: rgba(10, 12, 20, 0.78);
  backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border-bottom: none;
}
.nav { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.nav .logo img { height: 56px; transition: height .25s ease; } /* desktop stan bazowy */
.nav ul { list-style:none; display:flex; gap:20px; margin:0; padding:0; align-items:center; }

/* Przełącznik nawigacji (mobile burger) */
.nav-toggle {
  display: none;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--muted) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  padding: 8px 10px;
  cursor: pointer;
  margin-left: auto;
  color: inherit;
}
.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--text, currentColor);
}
body.dark-mode .nav-toggle {
  background: rgba(12, 18, 28, 0.92);
  border-color: rgba(255, 153, 77, 0.28);
}

/* Linki w nawigacji – underline anim */
.nav a { position: relative; padding-bottom: 3px; }
.nav a::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px; background-color: var(--brand-navy);
  transition: width .25s ease;
}
.nav a:hover::after { width: 100%; }
.nav a.btn-primary::after { display: none; }
body.dark-mode .nav a::after { background-color: #ffc880; }

/* Header po scrollu */
header.site-header.is-scrolled {
  box-shadow: var(--shadow-soft);
  background-color: var(--surface-veil);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

/* 6) PRZYCISKI */
.btn { display:inline-block; padding:12px 18px; border-radius:10px; font-weight:600; }
/* Jaśniejszy, mniej „ciężki” CTA w jasnym motywie */
.btn-primary {
  background: #1e293b;
  color: #f9fafb;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.32);
}
.btn-primary:hover {
  background: #0f172a;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.45);
}
.btn-ghost { border: 1px solid var(--muted); }
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
a.btn-ghost:focus-visible {
  outline: 2px solid rgba(245, 158, 11, 0.7);
  outline-offset: 2px;
}
body.dark-mode .btn-primary {
  background: #103455;
  box-shadow: none;
}
body.dark-mode .btn-primary:hover { background: #0c2a44; }
body.dark-mode .btn-ghost { border-color: #243144; color: var(--text); }

/* 7) SIATKI / KOMPONENTY */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.section-grid { display: grid; gap: 24px; align-items: stretch; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: calc(var(--stack-3) + 4px);
  align-items: stretch;
}

/* Większy odstęp w siatkach produktów/usług/case studies */
.products-grid,
.services-grid,
.cases-grid {
  gap: calc(var(--stack-3) + 8px);
}

#produkty .cards-grid,
#uslugi .cards-grid,
#dlaczego-my .cards-grid,
#realizacje .cards-grid {
  margin-top: var(--stack-3);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
body.product-page .cards-grid,
body.product-page .feature-grid {
  gap: 24px;
}
body.product-page .hero {
  padding-top: 0;
  padding-bottom: 0;
}
body.product-page #cta {
  margin-top: 48px;
}
.product-section {
  margin-top: 80px;
  margin-bottom: 0;
}

/* H1 produktów — mobile-first */
body.product-page .product-hero h1,
body.product-page .product-hero .product-hero__title {
  font-size: 28px;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
body.product-page .product-name {
  display: block;
  white-space: nowrap;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.12;
  text-wrap: balance;
}
body.product-page .product-desc {
  display: block;
  margin-top: 6px;
  font-weight: 500;
  font-size: 0.78em;
  line-height: 1.35;
  text-wrap: balance;
}
body.product-page .product-hero ul,
body.product-page .product-hero .product-hero__bullets {
  font-size: 0.95rem;
  line-height: 1.5;
}
body.product-page .product-hero ul li,
body.product-page .product-hero .product-hero__bullets li {
  text-wrap: balance;
}

@media (min-width: 1024px) {
  body.product-page .product-hero h1,
  body.product-page .product-hero .product-hero__title {
    font-size: 44px;
    line-height: 1.2;
  }
  body.product-page .product-desc {
    margin-top: 10px;
    max-width: 28ch;
  }
}

body.product-page .section-title,
body.product-page .card h3,
body.product-page .card__title,
body.product-page .product-cta__title {
  text-wrap: balance;
}

.card {
  border: 1px solid color-mix(in srgb, var(--muted) 80%, transparent);
  border-radius: 14px;
  padding: var(--stack-3);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
body.dark-mode .card { border-color: rgba(255,153,77,0.28); }
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: color-mix(in srgb, var(--muted) 100%, transparent);
}
body.dark-mode .card:hover,
body.dark-mode .card:focus-within {
  box-shadow: var(--shadow-strong);
}

/* Light theme – karty (produkty, usługi, dlaczego my, realizacje) */
body:not(.dark-mode) .card,
body:not(.dark-mode) .product-card,
body:not(.dark-mode) .service-card,
body:not(.dark-mode) .why-card,
body:not(.dark-mode) .case-card {
  background-color: #ffffff;
  border-radius: 14px;
  border: 1px solid #e6e8ef;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body:not(.dark-mode) .card:hover,
body:not(.dark-mode) .product-card:hover,
body:not(.dark-mode) .service-card:hover,
body:not(.dark-mode) .why-card:hover,
body:not(.dark-mode) .case-card:hover {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--stack-1);
}

.card-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 90%, transparent);
  color: var(--text);
  min-height: 30px;
  margin-bottom: var(--stack-1);
}
.case-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 90%, transparent);
  color: var(--text);
  min-height: 30px;
  margin-bottom: var(--stack-1);
}

.chip {
  display: inline-block; padding: 6px 10px; border-radius: 999px;
  background: var(--brand-blue); color:#0b2b3c; font-weight:600; font-size:13px;
}
.icon {
  width:44px; height:44px; border-radius:12px;
  background: #1e40af;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  color:#e5edff;
  margin-bottom:10px;
  font-size: 20px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, 0.20),
    0 10px 26px rgba(15, 23, 42, 0.28);
}
.card-head .icon { margin-bottom: 0; }
.card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--stack-1);
}
.card p {
  margin: 0 0 var(--stack-2);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}
.kicker { color: var(--brand-warm); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:12px; margin-bottom:8px; }
.muted { color: var(--text-muted); }
body.dark-mode .chip, body.dark-mode .icon { color: #e8eef7; }
body.dark-mode .chip { background: rgba(59, 97, 148, 0.7); }
body.dark-mode .icon { background: rgba(59, 97, 148, 0.8); }
body.dark-mode .kicker { color: #c6e2ff; }

/* Uspokojone ikony / chipy tylko w jasnym motywie */
body:not(.dark-mode) .icon {
  background: #eff4ff;
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
body:not(.dark-mode) .chip {
  background: #e0f2fe;
  color: #0f172a;
}
body:not(.dark-mode) .kicker {
  color: #64748b;
}

/* Eyebrow nad H1 na podstronach produktów – bez dodatkowego marginesu u góry */
body.product-page .product-hero .kicker,
body.product-page .product-hero .section-kicker {
  margin-top: 0;
  margin-bottom: 8px;
}

.product-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: flex-start; }
.mockup-placeholder {
  border: 1px dashed color-mix(in srgb, var(--muted) 80%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}
body.product-page .product-hero {
  display: grid;
  align-items: center;
}
body.product-page .product-hero > .mockup-placeholder,
body.product-page .product-hero .product-hero__mockup {
  justify-self: end;
}
body.product-page .product-hero .mockup-placeholder,
body.product-page .product-hero .product-hero__mockup-inner {
  position: relative;
  margin: 0;
  border-radius: 18px;
  padding: 0;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
}
body.dark-mode .product-hero .mockup-placeholder,
body.dark-mode .product-hero .product-hero__mockup-inner {
  border: 1px solid rgba(255,153,77,0.28);
  border-style: solid;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}
body.product-page .product-hero .mockup-placeholder img,
body.product-page .product-hero .product-hero__mockup-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: saturate(0.9) contrast(0.95);
  opacity: 0.96;
}
body.product-page .product-hero .mockup-placeholder::after,
body.product-page .product-hero .product-hero__mockup-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.04));
  pointer-events: none;
}
.mini-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.mini-steps li { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 88%, transparent); border: 1px solid color-mix(in srgb, var(--muted) 70%, transparent); }

.product-card { min-height: 240px; }
.icon-outline {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--muted) 80%, transparent);
  color: var(--text);
  width: 44px;
  height: 44px;
}
body.dark-mode .icon-outline {
  border-color: rgba(255,153,77,0.35);
  color: #f7d7a4;
}

.card .btn-ghost { margin-top: auto; align-self: flex-start; }

/* CTA „Zobacz więcej” w kartach – jasny motyw */
body:not(.dark-mode) .card a.btn-ghost {
  border: none;
  padding: 0;
  background: none;
  color: #4a8aff;
  font-weight: 500;
  box-shadow: none;
}
body:not(.dark-mode) .card a.btn-ghost::after {
  content: " →";
  font-weight: 500;
}
body:not(.dark-mode) .card a.btn-ghost:hover {
  text-decoration: underline;
  color: #2b6adf;
}

/* Wysokości kart per sekcja */
#produkty .card,
#uslugi .card,
#dlaczego-my .card {
  min-height: 240px;
}
#realizacje .card {
  min-height: 220px;
}

/* Services — więcej oddechu i lżejsze ikony */
#uslugi .card {
  padding: calc(var(--stack-3) + 8px) var(--stack-3);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#uslugi .card-head {
  gap: 14px;
  margin-bottom: var(--stack-2);
}
#uslugi .card .icon {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

/* Why us — lżejsza typografia i czytelniejsza hierarchia */
#dlaczego-my .card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#dlaczego-my .card h3 {
  font-size: 21px;
  line-height: 1.28;
}
#dlaczego-my .card p {
  line-height: 1.7;
  opacity: 0.95;
}

/* Subtelny hover tylko dla Services + Why us */
#uslugi .card:hover,
#uslugi .card:focus-within,
#dlaczego-my .card:hover,
#dlaczego-my .card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
  border-color: color-mix(in srgb, var(--muted) 92%, transparent);
}

/* 8) HERO */
.hero { display:grid; gap:24px; grid-template-columns:1.2fr 1fr; align-items:center; }
.hero .preview {
  position: relative;
  border-radius:18px;
  overflow: hidden;
  padding: 0;
}
body:not(.dark-mode) .hero .preview {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.45);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  backdrop-filter: none;
}
.hero .preview::before {
  content: "";
  position: absolute; inset: -8%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,153,77,0.12) 0%, rgba(255,153,77,0) 48%),
    radial-gradient(circle at 70% 60%, rgba(255,118,53,0.18) 0%, rgba(255,118,53,0) 55%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}
body:not(.dark-mode) .hero .preview::before {
  display: none;
}
.hero .preview img {
  display: block; width: 100%; height: auto;
  position: relative; z-index: 1;
  border-radius: inherit;
}
.hero .preview .hero-img-light { display: none; }
body:not(.dark-mode) .hero .preview .hero-img-dark { display: none; }
body.dark-mode .hero .preview { border: none; }

/* Minimalistyczna siatka – jasny motyw */
body:not(.dark-mode) .hero .preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* NAD blur, NAD gradientem */
  opacity: 0.30; /* delikatny, ale widoczny */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'%3E%3Cg stroke='%231e40af' stroke-opacity='0.20' stroke-width='1.1'%3E%3Cline x1='120' y1='160' x2='420' y2='120'/%3E%3Cline x1='420' y1='120' x2='680' y2='180'/%3E%3Cline x1='680' y1='180' x2='960' y2='130'/%3E%3C/g%3E%3Cg fill='%231e40af' fill-opacity='0.30'%3E%3Ccircle cx='120' cy='160' r='3.5'/%3E%3Ccircle cx='420' cy='120' r='3.5'/%3E%3Ccircle cx='680' cy='180' r='3.5'/%3E%3Ccircle cx='960' cy='130' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

/* W jasnym motywie wyświetlamy dedykowaną makietę hero */
body:not(.dark-mode) .hero .preview .hero-img-light {
  display: block;
  max-height: 360px;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 18px 20px;
  box-sizing: border-box;
}

/* Sekcja: Technologie */
.technologies h2 { margin-bottom: 10px; }
.technologies p.muted { margin-bottom: 22px; }
.technologies .tech-panel {
  border-radius: 24px;
  padding: 26px 28px;
  /* Jasny, „kartowy” panel w motywie light */
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.96),
    rgba(229, 239, 249, 0.96)
  );
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(14px) saturate(130%);
}
.technologies .tech-logos-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.technologies .tech-logo {
  border: 1px solid rgba(148, 163, 184, 0.45);
  padding: 16px 18px;
  border-radius: 18px;
  background: #f8fafc;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out, background .18s ease-out;
}

/* Jeśli panel technologii jest pusty (brak logotypów), ukryj jego ramę */
#technologie .tech-logos-grid:empty {
  display: none;
}
#technologie .tech-panel:has(.tech-logos-grid:empty) {
  display: none;
}
.technologies .tech-logo img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}
.technologies .tech-logo .tech-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 26px;
  text-transform: uppercase;
  color: #ff7a1e;
  background: transparent;
  box-shadow: none;
}
.technologies .tech-logo:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  background: #ffffff;
}
/* Light theme – kafelki technologii */
body:not(.dark-mode) .technologies .tech-logo.tech-card {
  background-color: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e8f2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body:not(.dark-mode) .technologies .tech-logo.tech-card:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}
/* wsparcie dla jasnych/ciemnych wariantów logotypów */
.technologies .tech-logo img.logo-dark { display: none; }
body.dark-mode .technologies .tech-logo img.logo-light { display: none; }
body.dark-mode .technologies .tech-logo img.logo-dark { display: block; }
body.dark-mode .technologies .tech-panel {
  background: rgba(6, 9, 14, 0.6);
  border-color: rgba(255, 153, 77, 0.22);
}
body.dark-mode .technologies .tech-logo {
  background: rgba(12, 16, 24, 0.8);
  border-color: rgba(255, 153, 77, 0.22);
}
body.dark-mode .technologies .tech-logo:hover {
  box-shadow: 0 12px 34px rgba(255, 153, 77, 0.24);
}
/* Obramowania sekcji */
.section--tech,
.section--technologie {
  border-top: 1px solid color-mix(in srgb, var(--muted) 80%, transparent);
  padding-top: 64px !important;
}
.section--about,
.section--onas {
  border-top: 1px solid color-mix(in srgb, var(--muted) 80%, transparent);
  padding-top: 72px;
  padding-bottom: 72px;
}
.about-layout {
  max-width: 760px;
  margin: 0 auto;
}
.section--about p {
  margin-bottom: 20px;
  line-height: 1.7;
}
/* Responsive układ logotypów */
@media (max-width: 1200px){
  .technologies .tech-logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .technologies .tech-logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .technologies .tech-logo { min-height: 100px; padding: 14px; }
}
@media (max-width: 768px){
  .technologies .tech-logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .technologies h2 { font-size: clamp(20px, 5vw, 28px); }
  .technologies p.muted { font-size: 16px; }
}
@media (max-width: 480px){
  .technologies .tech-logos-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .technologies .tech-logo { min-height: 96px; }
}

/* Mobile layout polish */
@media (max-width: 768px){
  /* HERO */
  #hero {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  #hero .hero {
    row-gap: 20px;
  }
  #hero h1 {
    font-size: 30px;
    line-height: 1.2;
    max-width: 38ch;
    margin-bottom: 12px;
  }
  #hero .lead {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
    max-width: 34ch;
  }
  #hero .hero > div > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #hero .hero .btn {
    width: 100%;
    max-width: 360px;
    min-height: 44px;
    text-align: center;
  }
  #hero .hero .btn.btn-ghost {
    display: none;
  }

  #uslugi .card .icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* 10) STOPKA */
footer {
  background:
    linear-gradient(to bottom,
      rgba(248, 250, 252, 0.98),
      rgba(229, 239, 249, 0.96));
  color: var(--text);
}
footer a { color: var(--brand-navy); opacity:.9; }
/* Ciemna stopka tylko w motywie dark */
body.dark-mode footer {
  background: var(--brand-navy);
  color: #fff;
}
body.dark-mode footer a {
  color:#fff;
  opacity:.9;
}
footer#kontakt {
  padding: 48px 0 40px;
  border-top: 1px solid color-mix(in srgb, var(--muted) 80%, transparent);
}
.footer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: start;
}
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
/* Jasny kolor linków w stopce w motywie light */
.footer-nav a { color: var(--brand-navy); opacity: 0.9; }
body.dark-mode .footer-nav a { color: #fff; opacity: 0.9; }
.footer-meta { font-size: 14px; opacity: 0.9; line-height: 1.5; }

.footer-logo img {
  height: 52px;
}

.footer-heading {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

.footer-phone {
  margin-top: 4px;
}

/* Dolny pasek z polityką i copyright */
.footer-bar {
  position: fixed;
  inset: auto 0 0 0;
  min-height: var(--policy-bar-h, var(--footer-bar-height));
  /* Jasny pasek dopasowany do nagłówka w motywie light */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);

  border-top: 1px solid rgba(148, 163, 184, 0.2);

  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.12);
  z-index: 60;
  display: flex;
  align-items: center;
  width: 100%;
  /* fixed bar requires page bottom padding to avoid covering content */
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  max-width: 100%;
}
body.dark-mode .footer-bar {
  background: rgba(8, 12, 20, 0.74);
  border-top: none;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.35);
}
.footer-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  font-size: 13px;
  color: var(--text);
  flex-wrap: wrap;
  max-width: 100%;
}
.footer-bar a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.footer-bar a:hover { text-decoration: none; }
.footer-bar__links { display: flex; gap: 18px; align-items: center; }
.footer-bar__copy { opacity: 0.85; }

@media (max-width: 768px) {
  .footer-bar__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .hide-on-mobile { display: none !important; }
  .mobile-only { display: block !important; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footer-meta,
  .footer-heading,
  .footer-nav a,
  .footer-phone {
    font-size: 12px;
    line-height: 1.6;
  }
  .footer-nav {
    width: 100%;
  }
  .footer-nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }
}

/* Mobile nawigacja — offcanvas */
@media (max-width: 900px) {
  .nav {
    gap: 10px;
  }
  .nav .logo img {
    height: 46px;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    position: relative;
    z-index: 1100;
  }
  header.site-header nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 78%);
    max-width: 360px;
    padding: 80px 22px 28px;
    background: color-mix(in srgb, var(--surface-veil, rgba(12,17,24,0.9)) 96%, transparent);
    box-shadow: -18px 0 40px rgba(0,0,0,0.4);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease-out, opacity .25s ease-out;
    z-index: 60;
  }
  body.dark-mode header.site-header nav {
    background: rgba(7, 11, 19, 0.96);
  }
  header.site-header nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  header.site-header nav ul li a.btn.btn-primary {
    width: 100%;
    text-align: center;
  }
  body.nav-open header.site-header nav {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 40;
  }
}

/* Mobile: wyłączenie kosztownych filtrów na sticky/fixed
   (zmniejsza artefakty kompozycji / ghost pasy na zrzutach) */
@media (max-width: 900px) {
  header.site-header,
  .product-subnav .subnav-inner,
  .footer-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }
}

/* 11) ANIMACJE WEJŚCIA (reveal on scroll) */
.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.show { opacity: 1; transform: none; }

/* Drobne opóźnienia kart w gridzie */
.grid .card.reveal { transition-delay: .05s; }
.grid .card.reveal:nth-child(2) { transition-delay: .15s; }
.grid .card.reveal:nth-child(3) { transition-delay: .25s; }

/* 12) MOTYW / PRZEŁĄCZNIK */
.theme-toggle {
  display: none; /* Jasny motyw wyłączony — ukrywamy przełącznik */
  font-size: 20px; line-height: 1; padding: 6px 10px; border-radius: 8px;
  transition: background-color .2s ease, transform .2s ease;
}
.theme-toggle:hover { background-color: var(--brand-blue); transform: rotate(15deg); }
body.dark-mode .theme-toggle { color: #FFD580; }

/* 13) TŁA / WARSTWY */
#animated-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* #animated-bg, #fu-svg, #fu-overlay - wszystkie elementy tła są wyłączone */
#particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  image-rendering: auto;
  background: radial-gradient(circle at 20% 20%, rgba(255, 118, 53, 0.25) 0%, rgba(6, 8, 14, 0) 55%),
              radial-gradient(circle at 80% 10%, rgba(255, 180, 84, 0.18) 0%, rgba(4, 5, 9, 0) 50%);
}
body:not(.dark-mode) #particles-canvas {
  background: radial-gradient(circle at 18% 20%, rgba(64, 156, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
              radial-gradient(circle at 82% 12%, rgba(127, 200, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%);
}
#fu-svg, #fu-overlay { display: none !important; }

/* Treść zawsze nad tłem */
main, footer, .container, .content {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Kolor tła dokumentu (fallback + tryb ciemny) */
html { background: var(--bg); }
body { background: var(--bg); transition: background-color .25s ease, color .25s ease; color: var(--text); }

/* === Policy pages ONLY: force logo visibility (header + footer) === */
body.policy-page .logo,
body.policy-page .logo * {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.policy-page .logo img,
body.policy-page .logo svg {
  opacity: 1 !important;
  filter: none !important;
}

/* If logo uses currentColor, ensure contrast */
body.policy-page header .logo,
body.policy-page .site-header .logo {
  color: #E8F0FF;
}

/* Jasny motyw – dodatkowy glow w sekcji hero pod particles */
body:not(.dark-mode) #hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(148, 196, 255, 0.12) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 78% 40%, rgba(178, 212, 255, 0.10) 0%, rgba(255, 255, 255, 0) 60%);
}

/* Upewniamy się, że treść hero leży nad glowem */
#hero .container,
#hero .hero {
  position: relative;
  z-index: 1;
}

/* --- DODATKOWE DOPASOWANIA JASNEGO MOTYWU --- */

/* Typografia w jasnym motywie dopasowana do dark mode */
body:not(.dark-mode) h1 {
  font-size: clamp(32px, 4.6vw, 46px);
}
body:not(.dark-mode) h2 {
  font-size: clamp(26px, 3.3vw, 34px);
}
body:not(.dark-mode) h3 {
  font-size: clamp(20px, 2.4vw, 24px);
}

/* Rytm pionowy i tła sekcji tylko w jasnym motywie */
body:not(.dark-mode) section {
  padding-top: 90px;
  padding-bottom: 90px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5fb 100%);
}
body:not(.dark-mode) section.small {
  padding-top: 60px;
  padding-bottom: 60px;
}
body:not(.dark-mode) section.section-light {
  background: linear-gradient(180deg, #fafbff 0%, #f1f4fa 100%);
}
/* Usuwamy linię-separator w jasnym motywie – separacja przez gradient */
body:not(.dark-mode) section + section::before {
  display: none;
}

/* Light theme – sekcja Realizacje */
body:not(.dark-mode) section#realizacje {
  background: linear-gradient(180deg, #f8faff 0%, #f2f5fc 100%);
}

/* Hero w jasnym motywie – jaśniejszy gradient tła */
body:not(.dark-mode) .hero {
  background: linear-gradient(180deg, #f3f6ff 0%, #eef2fb 100%);
}

/* 14) PREFERENCJE RUCHU / SCROLL */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 14a) DESKTOP (>=1024px) — rytm sekcji, hero, karty, technologie, o nas, stopka  */
@media (min-width: 1024px) {
  /* Header jako sticky zamiast fixed – tylko desktop */
  header.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
  }

  /* Body bez dodatkowego padding-top na desktopie
     (hero ma własny, kontrolowany odstęp od góry) */
  body {
    padding-top: 0;
  }

  /* FIX: desktop sections invisible gap issue — wyłączenie trybu slajdowego na stronie głównej */
  body:not(.product-page) {
    scroll-snap-type: none;
  }
  body:not(.product-page) section,
  body:not(.product-page) footer#kontakt {
    min-height: auto;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  /* Rytm pionowy sekcji landing page */
  #hero {
    padding-top: 160px;
    padding-bottom: 68px;
  }
  footer#kontakt {
    padding-top: var(--section-pad-y-desktop);
    padding-bottom: var(--section-pad-y-desktop);
  }

  /* Odstęp tytuł sekcji -> grid */
  #produkty .cards-grid,
  #uslugi .cards-grid,
  #dlaczego-my .cards-grid,
  #realizacje .cards-grid {
    margin-top: var(--stack-3);
  }
  #technologie .tech-panel {
    margin-top: var(--stack-3);
  }

  /* HERO — szerokość akapitu i CTA */
  #hero .lead {
    max-width: 58ch;
    margin-bottom: 18px;
    line-height: 1.58;
  }
  #hero h1 {
    margin-bottom: 14px;
  }
  #hero .hero > div > div:last-child {
    margin-top: 24px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px !important;
  }
  #hero .hero .btn {
    min-height: 46px;
    padding-inline: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #hero .hero .btn.btn-ghost {
    border-color: color-mix(in srgb, var(--muted) 96%, transparent);
  }

  /* Karty: ergonomia, równe wysokości */
  #uslugi .card-head {
    min-height: 64px;
  }

  /* Realizacje – tagi i CTA */
  #realizacje .case-tag {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Technologie — spójne kafle, rozmiar „JAVA”, hover/focus */
  .technologies .tech-logos-grid {
    align-items: stretch;
  }
  .technologies .tech-logo {
    min-height: 112px;
    padding: 18px 20px;
  }
  .technologies .tech-logo .tech-text {
    font-size: 22px;
    padding: 10px 18px;
  }
  .technologies .tech-logo,
  body:not(.dark-mode) .technologies .tech-logo.tech-card {
    transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out, background .2s ease-out;
  }
  .technologies .tech-logo:hover,
  .technologies .tech-logo:focus-visible,
  body:not(.dark-mode) .technologies .tech-logo.tech-card:hover,
  body:not(.dark-mode) .technologies .tech-logo.tech-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
    border-color: rgba(148, 163, 184, 0.6);
    background: #ffffff;
    outline: none;
  }

  /* O nas — czytelność długiego tekstu */
  #o-nas .about-layout {
    max-width: 68ch;
  }
  #o-nas .about-layout p {
    line-height: 1.6;
  }

  /* Sekcje – wspólny rytm (tytuł, lead, grid) */
  #produkty > .container > p.muted,
  #uslugi > .container > p.muted,
  #technologie > .container > p.muted,
  #o-nas > .container > p.muted {
    margin-bottom: 28px;
  }
  #realizacje > .container > p.muted.kicker {
    margin-bottom: 10px !important;
  }
  #realizacje > .container > p.muted:not(.kicker) {
    margin-bottom: 28px;
  }

  /* Dark-mode desktop: sekcyjne separatory wyłączone (tło robi robotę) */
  body.dark-mode section + section::before {
    display: none;
  }

  /* FIX: prevent duplicated header/nav near footer
     Jeśli z jakiegoś powodu na desktopie nagłówek zostanie sklonowany
     i wstawiony jako <nav aria-label="Główne"> w obręb sekcji "O nas"
     lub stopki, traktujemy go jako duplikat i ukrywamy. */
  #o-nas nav[aria-label="Główne"],
  footer nav[aria-label="Główne"] {
    display: none;
  }

  /* Stopka — bez podkreÅ›leÅ„ */
  footer .footer-nav a,
  footer .footer-meta a,
  .footer-bar a {
    opacity: 0.94;
    text-decoration: none;
  }
  footer .footer-nav a:hover,
  footer .footer-meta a:hover,
  .footer-bar a:hover {
    opacity: 1;
    text-decoration: none;
  }
}

/* 15) RESPONSYWNOŚĆ */
@media (max-width: 900px){
  :root { --section-pad-y: var(--section-pad-y-mobile); }
}
@media (max-width: 900px){
  .grid-3 { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  body.product-page .product-hero { grid-template-columns: 1fr; }
  body.product-page .product-hero > .mockup-placeholder,
  body.product-page .product-hero .product-hero__mockup {
    justify-self: center;
  }
  .hero .preview {
    max-width: 480px;
    margin: 0 auto;
  }
  body:not(.dark-mode) .hero .preview .hero-img-light {
    max-height: 320px;
  }
  .nav ul { gap: 14px; }
  .nav .logo img { height: 44px; }
  header.site-header.is-scrolled .logo img { height: 40px; }
  .card {
    padding: calc(var(--stack-2) + 2px);
  }
  .card h3 { font-size: 18px; }
  .card p {
    font-size: 14px;
    line-height: 1.65;
  }
  .cards-grid .card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #uslugi .card {
    padding: calc(var(--stack-2) + 6px);
  }
  #dlaczego-my .card h3 {
    font-size: 17px;
    line-height: 1.3;
  }
}
@media (min-width: 768px){
  .cards-grid .card p {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    white-space: normal;
  }
}
@media (max-width: 1024px){
  .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .section-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .footer-nav ul { grid-template-columns: 1fr; }
}

/* LANGUAGE SWITCH */
.lang-en { display: none; }
.lang-pl { display: block; }
body.lang-en .lang-en { display: block; }
body.lang-en .lang-pl { display: none; }

/* LANG TOGGLE BUTTON */
.lang-toggle {
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background-color .2s ease, transform .2s ease;
  background: none;
  border: none;
  cursor: pointer;
}
.lang-toggle:hover { background-color: var(--brand-blue); transform: rotate(15deg); }
body.dark-mode .lang-toggle { color: #FFD580; }

/* --- Mobile tweaks for TECHNOLOGIE section --- */
@media (max-width: 768px) {
  #technologie .tech-panel {
    margin-top: 1.8rem !important;
  }

  #technologie .tech-card {
    padding: 12px 16px !important;
    min-height: 78px !important;
    border-radius: 14px !important;
  }

  #technologie .tech-card img {
    max-width: 48px !important;
    max-height: 48px !important;
  }
  #technologie .tech-logo .tech-text {
    font-size: 24px !important;
    padding: 9px 14px !important;
  }

  #technologie .section-title {
    margin-bottom: 0.75rem !important;
  }

  #technologie p {
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  #technologie .tech-card {
    min-height: 72px !important;
    padding: 10px 14px !important;
  }
  #technologie .tech-card img {
    max-width: 42px !important;
    max-height: 42px !important;
  }
  #technologie .tech-logo .tech-text {
    font-size: 22px !important;
    padding: 8px 12px !important;
  }
}

/* Wydruki / zrzuty – stabilny układ bez fixed/sticky headera i dolnego paska */
@media print {
  body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  header.site-header,
  .footer-bar {
    position: static !important;
    box-shadow: none !important;
  }
}

/* FIX: desktop sections invisible gap issue
   Desktop polish pass: hero spacing, card equalization, section rhythm, tech tiles, nav cleanup
   FIX: prevent duplicated header/nav near footer
   FIX: prevent top-of-page blank caused by section.reveal on desktop
   Zmodyfikowane selektory (desktop layout tuning, >=1024px):
   body:not(.product-page)
   body:not(.product-page) section
   body:not(.product-page) footer#kontakt
   #hero
   #produkty, #uslugi, #dlaczego-my, #realizacje, #technologie, #o-nas, footer#kontakt
   #produkty .cards-grid, #uslugi .cards-grid, #dlaczego-my .cards-grid, #realizacje .cards-grid, #technologie .tech-panel
   #hero .lead, #hero h1, #hero .hero > div > div:last-child, #hero .hero .btn, #hero .hero .btn.btn-ghost
   .cards-grid .card, .cards-grid .card p
   #produkty .card, #produkty .card p
   #uslugi .card-head
   #dlaczego-my .card h3, #dlaczego-my .card p
   #realizacje .case-tag
   #produkty .card p, #uslugi .card p, #dlaczego-my .card p, #realizacje .card p
   .technologies .tech-logos-grid, .technologies .tech-logo, .technologies .tech-logo .tech-text
   .technologies .tech-logo:hover, .technologies .tech-logo:focus-visible,
   body:not(.dark-mode) .technologies .tech-logo.tech-card:hover,
   body:not(.dark-mode) .technologies .tech-logo.tech-card:focus-visible
   #o-nas .about-layout, #o-nas .about-layout p
   footer .footer-nav a, footer .footer-meta a, .footer-bar a
*/