/* ============================================================
   m3.css — warstwa Material Design 3 dla całego serwisu
   Ładowana jako OSTATNI arkusz na każdej stronie (po stylach
   strony i po blokach <style> w <head>), więc nadpisuje wygląd
   bez zmiany treści i bez przepisywania arkuszy podstron.

   Kolejność: 1) tokeny --md-sys-*  2) mapowanie starych zmiennych
   3) typografia  4) komponenty  5) ruch  6) motyw ciemny (opcjonalny)

   Kolor marki #3B8BDB zostaje kolorem źródłowym. Rola „primary”
   to jego ton 40 (#2B6CB0) — ten sam, którego serwis już używał do
   tekstu i przycisków, bo przechodzi WCAG AA (5,4:1 na bieli).

   !important pojawia się tylko tam, gdzie arkusze podstron ustawiają
   wagę i odstępy liter klasami o wyższej specyficzności (nagłówki,
   krzywe ruchu). Wszystko inne wygrywa samą kolejnością.
   ============================================================ */

/* ===================== 1. TOKENY M3 ===================== */
:root {
    /* --- Kolor: role M3 (jasny) --- */
    --md-sys-color-primary: #2B6CB0;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D6E6FA;
    --md-sys-color-on-primary-container: #0F3D6E;
    --md-sys-color-secondary: #535F70;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #DCE5F3;
    --md-sys-color-on-secondary-container: #17263A;
    --md-sys-color-tertiary: #0F766E;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #CDEFEA;
    --md-sys-color-on-tertiary-container: #00201C;
    --md-sys-color-error: #BA1A1A;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #FFDAD6;
    --md-sys-color-on-error-container: #93000A;
    --md-sys-color-surface: #F8FAFD;
    --md-sys-color-surface-dim: #D8DEE6;
    --md-sys-color-surface-bright: #F8FAFD;
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #F1F4F9;
    --md-sys-color-surface-container: #E9EEF6;
    --md-sys-color-surface-container-high: #E3E8F0;
    --md-sys-color-surface-container-highest: #DDE3EC;
    --md-sys-color-on-surface: #191C20;
    --md-sys-color-on-surface-variant: #43474E;
    --md-sys-color-outline: #73777F;
    --md-sys-color-outline-variant: #D3D9E2;
    --md-sys-color-inverse-surface: #2E3135;
    --md-sys-color-inverse-on-surface: #EFF1F7;
    --md-sys-color-inverse-primary: #A8C8FF;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
    /* Kolor źródłowy marki — tylko do dekoracji (ikony, ramki, wykresy). */
    --md-ref-brand: #3B8BDB;

    /* --- Typografia: skala M3 --- */
    --md-ref-typeface-brand: 'Roboto Flex', Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --md-ref-typeface-plain: 'Roboto Flex', Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --md-sys-typescale-display-large: 400 57px/64px var(--md-ref-typeface-brand);
    --md-sys-typescale-display-medium: 400 45px/52px var(--md-ref-typeface-brand);
    --md-sys-typescale-display-small: 400 36px/44px var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-large: 400 32px/40px var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-medium: 400 28px/36px var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-small: 400 24px/32px var(--md-ref-typeface-brand);
    --md-sys-typescale-title-large: 400 22px/28px var(--md-ref-typeface-brand);
    --md-sys-typescale-title-medium: 500 16px/24px var(--md-ref-typeface-plain);
    --md-sys-typescale-title-small: 500 14px/20px var(--md-ref-typeface-plain);
    --md-sys-typescale-body-large: 400 16px/24px var(--md-ref-typeface-plain);
    --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface-plain);
    --md-sys-typescale-body-small: 400 12px/16px var(--md-ref-typeface-plain);
    --md-sys-typescale-label-large: 500 14px/20px var(--md-ref-typeface-plain);
    --md-sys-typescale-label-medium: 500 12px/16px var(--md-ref-typeface-plain);
    --md-sys-typescale-label-small: 500 11px/16px var(--md-ref-typeface-plain);

    /* --- Kształt --- */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* --- Odstępy (siatka 4/8 px) --- */
    --md-sys-spacing-1: 4px;
    --md-sys-spacing-2: 8px;
    --md-sys-spacing-3: 12px;
    --md-sys-spacing-4: 16px;
    --md-sys-spacing-5: 24px;
    --md-sys-spacing-6: 32px;
    --md-sys-spacing-7: 40px;
    --md-sys-spacing-8: 48px;
    --md-sys-spacing-9: 64px;

    /* --- Elewacja 0–5 (cień M3 = key + ambient) --- */
    --md-sys-elevation-0: none;
    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
    --md-sys-elevation-3: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
    --md-sys-elevation-4: 0 2px 3px rgba(0,0,0,.3), 0 6px 10px 4px rgba(0,0,0,.15);
    --md-sys-elevation-5: 0 4px 4px rgba(0,0,0,.3), 0 8px 12px 6px rgba(0,0,0,.15);

    /* --- Warstwy stanów --- */
    --md-sys-state-hover: 0.08;
    --md-sys-state-focus: 0.10;
    --md-sys-state-pressed: 0.10;
    --md-sys-state-dragged: 0.16;

    /* --- Ruch --- */
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;

    /* ===================== 2. STARE ZMIENNE → ROLE M3 =====================
       Arkusze podstron używają tych nazw w setkach miejsc; podpinamy je
       pod tokeny, żeby cały serwis przeszedł na nowy system naraz. */
    --color-bg: var(--md-sys-color-surface);
    --color-surface: var(--md-sys-color-surface-container-lowest);
    --color-primary: var(--md-ref-brand);
    --color-primary-hover: #245C97;
    --color-primary-text: var(--md-sys-color-primary);
    --color-primary-light: #EAF1FB;
    --color-secondary: #14B8A6;
    --color-secondary-text: var(--md-sys-color-tertiary);
    --color-secondary-light: #EEF8F6;
    --color-amber-text: #9A4A00;
    --color-accent-text: #B03A12;
    --color-text: var(--md-sys-color-on-surface);
    --color-text-secondary: var(--md-sys-color-on-surface-variant);
    --color-text-muted: #5C6370;
    --color-border: var(--md-sys-color-outline-variant);
    --color-danger: var(--md-sys-color-error);
    --radius: var(--md-sys-shape-corner-medium);
    --radius-lg: var(--md-sys-shape-corner-large);
    --shadow-sm: var(--md-sys-elevation-1);
    --shadow-md: var(--md-sys-elevation-2);
    --shadow-lg: var(--md-sys-elevation-3);
}

/* ===================== 3. TYPOGRAFIA ===================== */
body {
    font-family: var(--md-ref-typeface-plain);
    font-optical-sizing: auto;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    line-height: 1.6;
    letter-spacing: 0;
}
button, input, select, textarea { font-family: inherit; }
svg text { font-family: var(--md-ref-typeface-plain); }

/* Nagłówki: waga 400–500 jak w produktach Google, bez ściskania liter.
   Rozmiary zostają z arkuszy podstron (są w skali Display/Headline/Title). */
h1 { font-weight: 400 !important; letter-spacing: -0.25px !important; }
h2 { font-weight: 400 !important; letter-spacing: 0 !important; }
h3, h4, h5, h6 { font-weight: 500 !important; letter-spacing: 0 !important; }
/* Interlinia nagłówków: domyślnie dziedziczyły 1.6 z body, co w dwuwierszowych
   nagłówkach wyglądało jak podwójny odstęp. Arkusze podstron, które ustawiają
   własną wartość, nadal wygrywają (wyższa specyficzność). */
h1, h2, h3 { line-height: 1.25; }
/* Wyróżnienia w nagłówkach (np. „który działa bez Ciebie”) zostają wyraźne kolorem, nie grubością. */
:is(h1, h2) :is(em, span, strong, b) { font-weight: inherit; }

/* Pozostałe pogrubienia: Roboto Flex jest ładowany w zakresie 400–600,
   więc 700/800 z arkuszy podstron rysują się jako 600 — jeden poziom
   wyróżnienia zamiast trzech. */
strong, b { font-weight: 600; }

/* Duże liczby (statystyki, wyniki kalkulatorów, ceny) to tekst w skali Display,
   więc dostają tę samą wagę i odstępy co nagłówki — a nie 800 i ściśnięte litery
   z arkuszy podstron. Kolor zostaje z podstron. */
.cn-value, .hero-stat-value, .cs-stat-value, .cs-metric-value,
.oc-result-value, .ac-result-value, .mc-card-price, .about-facts dt, .quote-card .q-mark {
    font-weight: 400; letter-spacing: 0;
}
/* Tytuły kart i kalkulatorów, krótkie hasła w paskach i literowe znaki narzędzi — jak h3. */
.oc-head-title, .ac-head-title, .mc-title, .wb-strip-item b, .opt-strip-item b,
.tool-logo, .tp-logo, .tool-hero-logo {
    font-weight: 500; letter-spacing: 0;
}
/* Zdanie-wezwanie na stronie efektów wdrożeń: zwykła waga, wyróżnienie jak reszta pogrubień. */
.lw-cta-lead { font-weight: 400; letter-spacing: 0; }
.lw-cta-lead b { font-weight: 600; }


/* ===================== 4. KOMPONENTY ===================== */

/* ---- Top app bar (64 px) ----
   Spoczynek: kolor tła strony, bez ramki. Po przewinięciu (.scrolled
   z js/common.js): surface-container — tak M3 sygnalizuje „scrolled under”. */
.nav {
    background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent);
    border-bottom: 0;
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.nav.scrolled { background: color-mix(in srgb, var(--md-sys-color-surface-container) 94%, transparent); box-shadow: none; }
.nav-links a {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 10px 16px;
}
.nav-links a:hover {
    color: var(--md-sys-color-on-surface);
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
/* Aktywny element: wskaźnik w kształcie pigułki (secondary-container). */
.nav-links a.active, .nav-links > a[aria-current="page"], .nav-item > a[aria-current="page"] {
    font-weight: 500;
    color: var(--md-sys-color-on-secondary-container);
    background: var(--md-sys-color-secondary-container);
}
.nav-sub-toggle { border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); }
/* Na komputerze menu „Usługi” otwiera się po najechaniu i po wejściu Tabem
   (:hover / :focus-within), więc strzałka jest zbędna. Zostaje tylko w menu
   mobilnym, gdzie nie ma najechania. */
@media (min-width: 1081px) {
    .nav-sub-toggle { display: none; }
    .nav-item > a { padding-right: 16px; }
}
.nav-sub-toggle:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.nav-hamburger { width: 48px; height: 48px; display: none; align-items: center; justify-content: center; border-radius: var(--md-sys-shape-corner-full); }
.nav-hamburger:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }

/* Menu „Usługi”: surface-container, narożnik large, elewacja 2. */
.nav-menu {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--md-sys-elevation-2);
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate),
                visibility var(--md-sys-motion-duration-short4);
}
.nav-menu-head { font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); }
.nav-links .nav-menu a { font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-medium); }
.nav-links .nav-menu a span { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.nav-links .nav-menu a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); color: var(--md-sys-color-on-surface); }
.nav-menu-foot { background: var(--md-sys-color-surface-container); border-radius: 0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large); }

@media (max-width: 1080px) {
    .nav-hamburger { display: inline-flex; }
    .nav-links { background: var(--md-sys-color-surface-container-low); border-bottom: 0; box-shadow: var(--md-sys-elevation-2); padding: 12px 16px; }
    .nav-links a { padding: 14px 16px; min-height: 48px; }
    .nav-links a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
    .nav-menu, .nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { background: none; box-shadow: none; }
    .nav-sub-toggle { width: 48px; height: 48px; }
}

/* ---- Przyciski ----
   Hierarchia: filled (.btn-primary, .nav-cta) → outlined (.btn-outline).
   Kształt: pigułka. Wysokość: 40 px (pasek), 48 px (sekcje).
   Stany jako warstwy: hover 8%, focus 10%, pressed 10%; hover filled = elewacja 1. */
.btn-primary, .nav-cta, .btn-outline,
.midcta-form button, .form-submit, button[type="submit"] {
    position: relative;
    border-radius: var(--md-sys-shape-corner-full) !important;
    font: var(--md-sys-typescale-label-large);
    letter-spacing: 0.1px;
    transform: none !important;
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.btn-primary, .midcta-form button, .form-submit, button[type="submit"]:not(.btn-outline) {
    min-height: 48px;
    padding: 12px 24px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: 0;
    box-shadow: none;
}
.btn-primary:hover, .midcta-form button:hover, .form-submit:hover, button[type="submit"]:not(.btn-outline):hover {
    background: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
    box-shadow: var(--md-sys-elevation-1);
}
.btn-primary:active, .midcta-form button:active, .form-submit:active, button[type="submit"]:not(.btn-outline):active {
    background: color-mix(in srgb, var(--md-sys-color-on-primary) 10%, var(--md-sys-color-primary));
    box-shadow: none;
}
.nav-cta {
    min-height: 40px;
    padding: 10px 24px 10px 16px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.nav-cta:hover { background: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary)); box-shadow: var(--md-sys-elevation-1); }
.btn-outline {
    min-height: 48px;
    padding: 12px 24px;
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}
.btn-outline:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); border-color: var(--md-sys-color-outline); }
.btn-outline:active { background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }
:is(.btn-primary, .btn-outline, .nav-cta, button)[disabled],
:is(.btn-primary, .btn-outline, .nav-cta)[aria-disabled="true"] {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) !important;
    border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}
@media (max-width: 1080px) { .nav-cta { padding: 10px 16px; } }

/* Przycisk wysyłki formularza: ikona i tekst na środku, jak w każdym przycisku na całą szerokość. */
.form-submit { justify-content: center; }
/* „Odpowiadamy w 24 h · Bez zobowiązań” wyśrodkowane, gdy pod spodem jest wyśrodkowana nota o danych. */
.form-reassure:has(~ .form-privacy) { justify-content: center; }

/* ---- Pozostałe przyciski podstron ----
   Te same zasady co wyżej: pigułka, warstwy stanów, bez skoku w górę.
   .btn-white = przycisk na niebieskim panelu (kontener surface-container-lowest),
   .btn-service / .tc-detail / .tc-wdrozenie = filled, .btn-ghost / .tool-back / .tc-site = outlined. */
.btn-white, .btn-service, .btn, .btn-ghost, .tool-back, .tool-cta a,
a[style*="padding:15px 30px"] {
    border-radius: var(--md-sys-shape-corner-full) !important;
    text-decoration: none;
    font: var(--md-sys-typescale-label-large);
    letter-spacing: 0.1px;
    transform: none !important;
    justify-content: center;
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.btn-white { min-height: 48px; padding: 12px 24px; background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-primary); }
.btn-white:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-lowest)); box-shadow: var(--md-sys-elevation-1); }
.btn-service, .tool-cta .tc-detail, .tool-cta .tc-wdrozenie {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 10px 24px;
    background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border: 0;
}
.btn-service:hover, .tool-cta .tc-detail:hover, .tool-cta .tc-wdrozenie:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
    box-shadow: var(--md-sys-elevation-1);
}
.btn-ghost, .tool-back, .tool-cta .tc-site {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 10px 24px;
    background: transparent; color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}
.btn-ghost:hover, .tool-back:hover, .tool-cta .tc-site:hover {
    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
    border-color: var(--md-sys-color-outline); color: var(--md-sys-color-primary);
}
.tool-back { padding: 8px 16px 8px 12px; }
.btn.btn-primary { min-height: 48px; }

/* ---- Pole wyszukiwania: M3 search bar ----
   56 px, pełne zaokrąglenie, tło surface-container-high, bez ramki.
   Lupa 24 px w polu 16 px od lewej, tekst zaczyna się za nią (52 px). */
.tools-search input {
    min-height: 56px;
    padding: 0 24px 0 52px;
    font: var(--md-sys-typescale-body-large);
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-high);
    border: 0;
    border-radius: var(--md-sys-shape-corner-full);
    box-shadow: none;
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.tools-search input:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-high)); }
.tools-search input:focus {
    outline: none;
    background: var(--md-sys-color-surface-container-lowest);
    box-shadow: var(--md-sys-elevation-2);
}
.tools-search svg { left: 18px; width: 20px; height: 20px; color: var(--md-sys-color-on-surface-variant); }

/* ---- Filtry (chipy filtrów M3) ----
   32 px wysokości (pole dotyku 48 px dzięki marginesowi), narożnik 8 px,
   ramka outline-variant; wybrany = secondary-container bez ramki. */
.tf-btn, .cs-filter-btn, .filter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 6px 16px;
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface-variant);
    background: transparent;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.tf-btn:hover, .cs-filter-btn:hover, .filter-btn:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline-variant);
}
.tf-btn.active, .cs-filter-btn.active, .filter-btn.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border-color: transparent;
}

/* Kotwice „przejdź do sekcji” w hero przewodnika EPR: ten sam chip co kotwice usług. */
.hero-nav-pills a {
    border-radius: var(--md-sys-shape-corner-small);
    border: 1px solid var(--md-sys-color-outline-variant);
    background: transparent; color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large);
}
.hero-nav-pills a:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
    border-color: var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface);
}
/* Spis treści z boku: element szuflady nawigacji M3 — pigułka, aktywny = secondary-container. */
.toc-sidebar a {
    border-left: 0 !important;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface-variant);
}
.toc-sidebar a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); color: var(--md-sys-color-on-surface); }
.toc-sidebar a.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-weight: 500;
}

/* ---- Tagi w kartach narzędzi ---- */
.tool-tag {
    border-radius: var(--md-sys-shape-corner-small);
    background: transparent; border-color: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large); padding: 4px 10px;
}
.tool-int-pill {
    border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font: var(--md-sys-typescale-label-large); padding: 2px 8px;
}

/* ---- Fokus: wyraźny pierścień 3 px w kolorze primary (WCAG 2.4.7 / 2.4.13) ---- */
:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
.nav-cta:focus-visible, .btn-primary:focus-visible, .btn-outline:focus-visible { outline-offset: 2px; box-shadow: none; }

/* ---- Pola formularzy: M3 outlined text field ----
   Ramka outline 1 px, narożnik 4 px, min. 56 px wysokości; fokus = 2 px primary.
   Etykiety zostają nad polem (lepsze dla wielowierszowych i dla czytników). */
.form-group label, .kr-form label {
    font: var(--md-sys-typescale-body-medium);
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.form-group select, .form-group textarea,
.kr-form input:not([type="checkbox"]):not([type="radio"]), .kr-form select, .kr-form textarea,
.midcta-form input, .table-controls input[type="text"], .table-controls select {
    min-height: 56px;
    padding: 16px;
    font: var(--md-sys-typescale-body-large);
    color: var(--md-sys-color-on-surface);
    background: transparent;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow: none;
    transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.form-group textarea, .kr-form textarea { min-height: 112px; }
.form-group select, .kr-form select, .table-controls select { padding-right: 44px; }
:is(.form-group, .kr-form, .midcta-form, .table-controls) :is(input, select, textarea):hover {
    border-color: var(--md-sys-color-on-surface);
}
:is(.form-group, .kr-form, .midcta-form, .table-controls) :is(input, select, textarea):focus {
    outline: none;
    background: transparent;
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
:is(.form-group, .kr-form) :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--md-sys-color-error);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-error);
}
::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--md-sys-color-primary); }

/* Komunikaty formularzy: kontenery tertiary / error zamiast obramowanych pudełek. */
.form-msg { border: 0; border-radius: var(--md-sys-shape-corner-medium); font: var(--md-sys-typescale-body-medium); }
.form-msg strong { font: var(--md-sys-typescale-title-small); }
.form-msg--ok { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border: 0; }
.form-msg--err { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border: 0; }

/* ---- Chipy (filtry, kotwice, etykiety) ----
   M3: narożnik 8 px, wysokość 32 px, ramka outline-variant, Label L. */
.services-anchors a, .cat-chip, .tools-filter button, .tools-filters button, .chip {
    border-radius: var(--md-sys-shape-corner-small);
    border: 1px solid var(--md-sys-color-outline-variant);
    font: var(--md-sys-typescale-label-large);
    min-height: 32px;
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.services-anchors a { padding: 6px 16px; background: transparent; color: var(--md-sys-color-on-surface-variant); }
.services-anchors a:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
    border-color: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
}
:is(.cat-chip, .tools-filter button, .tools-filters button).active,
:is(.cat-chip, .tools-filter button, .tools-filters button)[aria-pressed="true"] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border-color: transparent;
}
/* Plakietki nad nagłówkami w hero: assist chip tonalny. */
.hero-badge, .ibadge, .about-hero .hero-badge {
    border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font: var(--md-sys-typescale-label-large);
    letter-spacing: 0.1px;
    padding: 6px 12px;
}

/* ---- Karty ----
   Hierarchia tonacją: karta = surface-container-lowest na tle surface,
   z ramką outline-variant (outlined card). Hover = warstwa 8%, bez skoku w górę. */
[class$="-card"], [class*="-card "], .track, .how-card {
    border-radius: var(--md-sys-shape-corner-medium);
}
.stage-card, .track, .how-card, .tool-card {
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
}
.stage-card:hover, .track:hover, .how-card:hover, .tool-card:hover {
    border-color: var(--md-sys-color-outline-variant);
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 3%, var(--md-sys-color-surface-container-lowest));
    box-shadow: var(--md-sys-elevation-1);
    transform: none;
}

/* Formularze w kartach i duże panele (kontakt, kalkulatory): narożnik extra-large jak dialogi. */
.uslugi-form, [class$="-form"]:not(.midcta-form):not(.kr-form form) {
    border-radius: var(--md-sys-shape-corner-extra-large);
}

/* ---- Powierzchnie sekcji ----
   Hero: surface-container zamiast płaskiego błękitu — tonalnie, po google'owsku. */
.hero, .nf { background: var(--md-sys-color-surface-container-low); }
.clients, .timeleak { border-color: var(--md-sys-color-outline-variant); }

/* Linki w treści: kolor primary, podkreślenie na hover. */
main a:not([class]) { color: var(--md-sys-color-primary); text-underline-offset: 3px; }

/* Stopka: surface-container-low, linki on-surface-variant, pole dotyku 48 px na telefonie. */
.footer { background: var(--md-sys-color-surface-container-low); }
.footer-head { font: var(--md-sys-typescale-title-small); color: var(--md-sys-color-on-surface); }
.footer-col a { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.footer-col a:hover { color: var(--md-sys-color-primary); }
@media (max-width: 760px) { .footer-col a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; } }

/* Tabele: nagłówek na surface-container, linie outline-variant. */
table { border-color: var(--md-sys-color-outline-variant); }
thead th { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); font-weight: 500; }

/* ===================== 5. RUCH ===================== */
/* Jedna krzywa dla wszystkich przejść w serwisie: M3 standard.
   Czasy zostają z arkuszy podstron (100–300 ms). */
*, *::before, *::after { transition-timing-function: var(--md-sys-motion-easing-standard) !important; }
.fade-up {
    transform: translateY(16px);
    transition: opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate),
                transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
}
.fade-up.visible { transform: none; }
.fade-up, .fade-up.visible { transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate) !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .fade-up { opacity: 1; transform: none; }
}

/* ===================== 6. MOTYW CIEMNY (gotowy, wyłączony) =====================
   Tokeny są kompletne, ale część podstron ma jeszcze kolory wpisane na sztywno
   (#fff w plakietkach logotypów, SVG, inline style). Włączenie: dodaj
   data-theme="dark" do <html> na stronie, którą sprawdziłeś, albo — gdy wszystkie
   będą gotowe — zamień selektor poniżej na
   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { … } } */
:root[data-theme="dark"] .nav-logo img { content: url("../logo-poziome-dark.svg"); }
:root[data-theme="dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #A8C8FF;
    --md-sys-color-on-primary: #00315F;
    --md-sys-color-primary-container: #0F4785;
    --md-sys-color-on-primary-container: #D6E6FA;
    --md-sys-color-secondary: #BBC7DB;
    --md-sys-color-on-secondary: #253140;
    --md-sys-color-secondary-container: #3C4858;
    --md-sys-color-on-secondary-container: #DCE5F3;
    --md-sys-color-tertiary: #84D5CA;
    --md-sys-color-on-tertiary: #003731;
    --md-sys-color-tertiary-container: #005048;
    --md-sys-color-on-tertiary-container: #CDEFEA;
    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;
    --md-sys-color-surface: #111318;
    --md-sys-color-surface-dim: #111318;
    --md-sys-color-surface-bright: #37393E;
    --md-sys-color-surface-container-lowest: #0C0E13;
    --md-sys-color-surface-container-low: #191C20;
    --md-sys-color-surface-container: #1D2024;
    --md-sys-color-surface-container-high: #282A2F;
    --md-sys-color-surface-container-highest: #33353A;
    --md-sys-color-on-surface: #E1E2E8;
    --md-sys-color-on-surface-variant: #C3C6CF;
    --md-sys-color-outline: #8D9199;
    --md-sys-color-outline-variant: #43474E;
    --md-sys-color-inverse-surface: #E1E2E8;
    --md-sys-color-inverse-on-surface: #2E3135;
    --md-sys-color-inverse-primary: #2B6CB0;
    --color-primary-light: #1B2B40;
    --color-primary-hover: #C4D9FF;
    --color-secondary-light: #13302C;
    --color-text-muted: #A9AEB8;
}