/* ============================================================================================
   site.css - JEDEN system wizualny serwisu AlertMe.
   Jasna baza (biel + jasny szary), ciemne tylko hero i jeden blok domykajacy CTA. Wszystkie
   komponenty (nawigacja, sekcje, karty, cennik, tabela, FAQ, stopka, dowod, badge sklepow,
   ramka telefonu, buybar) sa opisane TUTAJ. style.css zostaje wylacznie dla modalu zamowienia
   (.checkout*), fontow i resetu - dwa arkusze lacznie. Stary jezyk (.flagship, .band, .lp) jest
   usuniety z HTML, wiec jego reguly w style.css sa martwe i nieszkodliwe.
   ============================================================================================ */

:root {
    /* --- powierzchnie (jasna baza) --- */
    --paper: #ffffff;
    --paper-2: #eef1f5;
    --paper-3: #eaedf1;
    --ink: #14171b;
    --ink-2: #2b3038;
    --muted: rgba(20, 23, 27, .66);
    --muted-2: rgba(20, 23, 27, .62);
    --line: rgba(20, 23, 27, .12);
    --line-2: rgba(20, 23, 27, .22);
    --ok: #0f7a4a;

    /* --- ciemne powierzchnie (hero + blok domykajacy) --- */
    --dark: #101216;
    --dark-2: #171a1f;
    --dark-ink: #f5f7fa;
    --dark-muted: rgba(245, 247, 250, .72);
    --dark-muted-2: rgba(245, 247, 250, .48);
    --dark-line: rgba(245, 247, 250, .14);

    /* --- akcent (jeden, tylko CTA / badge / aktywna nawigacja) --- */
    --accent: #EED401;
    --accent-2: #ffe53d;
    --accent-ink: #14130a;

    /* --- promienie / cienie / odstepy --- */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(16, 20, 28, .05), 0 3px 8px rgba(16, 20, 28, .05);
    --shadow-md: 0 2px 6px rgba(16, 20, 28, .06), 0 10px 24px rgba(16, 20, 28, .08);
    --shadow-lg: 0 6px 16px rgba(16, 20, 28, .08), 0 28px 60px rgba(16, 20, 28, .14);
    --sec-y: clamp(3.5rem, 7vw, 6.75rem);
    --maxw: 75rem;

    /* fonty z :root w style.css (--font-head, --font-body); tu tylko fallback gdyby brak */
    --fh: var(--font-head, "Ubuntu Sans", system-ui, sans-serif);
    --fb: var(--font-body, "Onest", system-ui, sans-serif);
}

/* Serwis produktowy zawsze na jasnej bazie. body.page-light nadaje ja stronom skladanym z src/pages. */
body.page-light {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--fb);
}
body.page-light ::selection { background: rgba(238, 212, 1, .3); }

/* Modal zamowienia (.checkout*) jest ciemny i stylowany w style.css tymi samymi nazwami tokenow.
   Nasza jasna baza nadpisala je globalnie w :root, wiec wewnatrz modalu przywracamy ciemne wartosci -
   inaczej tekst i obramowania modalu bylyby ciemne na ciemnym tle. */
.checkout {
    --ink: #f5f7fa;
    --muted: rgba(245, 247, 250, .66);
    --muted-2: rgba(245, 247, 250, .42);
    --line: rgba(245, 247, 250, .14);
}

/* Kontenery - wezsza kolumna dla komfortu czytania. */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 52rem); margin-inline: auto; }

/* ------------------------------ AlertMe w akcji (demo aplikacji) ------------------------------ */
.appdemo__inner { display: grid; grid-template-columns: 1fr; gap: clamp(2.25rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .appdemo__inner { grid-template-columns: 1fr minmax(17rem, 30%); } }
.appdemo__copy .sec__lead { margin-bottom: 0; }
.appdemo__steps { list-style: none; margin: 2.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.appdemo__step { display: flex; align-items: center; gap: 1rem; }
.appdemo__step-no { flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill); display: grid; place-items: center; font-family: var(--fh); font-weight: 800; font-size: .9375rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.appdemo__step-text { display: flex; flex-direction: column; line-height: 1.25; }
.appdemo__step-label { font-family: var(--fh); font-weight: 700; color: var(--ink); }
.appdemo__step-desc { font-size: .875rem; color: var(--muted); }

.appdemo__demo { display: flex; justify-content: center; }
.appdemo__phone { position: relative; width: min(16.5rem, 74vw); border-radius: 2.6rem; background: #0b0c0f; padding: .55rem; box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255, 255, 255, .05); }
.appdemo__video { width: 100%; aspect-ratio: 384 / 800; object-fit: cover; border-radius: 2.1rem; display: block; background: #0b0c0f; }
.appdemo__notch { position: absolute; top: .95rem; left: 50%; transform: translateX(-50%); width: 30%; height: 1.15rem; background: #0b0c0f; border-radius: var(--r-pill); z-index: 2; }

/* ------------------------------------ nawigacja ------------------------------------ */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: saturate(1.3) blur(12px);
    border-bottom: 1px solid transparent;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav.is-scrolled { background: rgba(255, 255, 255, .94); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav__inner { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; display: flex; align-items: center; gap: 1.25rem; min-height: 4.25rem; }
.nav__brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; flex: none; }
/* Marka: logo SECURAND (biale PNG) + plakietka ALERTME. Na jasnym pasku logo przyciemniane filtrem;
   nad ciemnym hero zostaje biale (regula ponizej). Plakietka ma wlasne kolory - niezalezna od stanu. */
.nav__logo { height: 1.75rem; width: auto; display: block; filter: brightness(0); }
/* plakietka AlertMe - malutki smaczek (tylko stopka). Nie w nawigacji. */
.ambadge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 8px; border-radius: 999px; background: #14171b; border: 1px solid rgba(245, 247, 250, .16); font-family: 'Chakra Petch', var(--fh); font-weight: 700; font-size: .6875rem; letter-spacing: .02em; line-height: 1; color: #fff; white-space: nowrap; }
.ambadge__me { background: var(--accent); color: #14171b; border-radius: 5px; padding: 2px 4px 3px; font-weight: 800; }

.nav__menu { display: flex; align-items: center; gap: .125rem; margin-inline-start: auto; }
.nav__link {
    position: relative; display: inline-flex; align-items: center; padding: .5rem .7rem; border-radius: var(--r-sm); white-space: nowrap;
    font-size: .9375rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: color .15s, background .15s;
}
.nav__link:hover { color: var(--ink); background: var(--paper-2); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--accent);
}
.nav__link--muted { color: var(--muted-2); font-weight: 500; }

.nav__actions { display: flex; align-items: center; gap: .625rem; flex: none; }
.nav__menu .nav__menu-cta { display: none; }
.nav__phone { display: inline-flex; align-items: center; gap: .4375rem; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.nav__phone svg { width: 1.125rem; height: 1.125rem; }
.nav__burger { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; }
.nav__burger span { display: block; width: 1.25rem; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 66rem) {
    .nav__burger { display: flex; }
    .nav__phone, .nav__actions .nav__cta { display: none; }
    .nav__menu .nav__menu-cta { display: inline-flex; margin-top: 1.25rem; }
    /* .nav ma backdrop-filter, wiec jest blokiem zawierajacym dla position:fixed potomkow -
       dlatego zamiast bottom:0 (liczonego wzgledem 68px paska) dajemy jawna wysokosc viewportu. */
    .nav__menu {
        position: fixed; top: 4.25rem; left: 0; right: 0; height: calc(100dvh - 4.25rem); z-index: 49;
        flex-direction: column; align-items: stretch; gap: .25rem;
        background: var(--paper); padding: 1rem 1.25rem 2rem; margin: 0; overflow-y: auto;
    }
    .nav__menu:not(.is-open) { display: none; }
    .nav__link { padding: 1rem .75rem; font-size: 1.0625rem; border-radius: var(--r-sm); }
    .nav__link[aria-current="page"]::after { left: .75rem; right: auto; width: 1.5rem; }
    body.nav-open { overflow: hidden; }
}

/* ------------------------------------ przyciski (DWA warianty) ------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8125rem 1.375rem; border-radius: var(--r-md); border: 1.5px solid transparent;
    font-family: var(--fh); font-weight: 700; font-size: .9375rem; line-height: 1; text-decoration: none;
    cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .06s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.btn--accent, a.btn--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(120, 104, 0, .16), 0 4px 12px rgba(190, 168, 0, .28), 0 1px 2px rgba(20, 23, 27, .10); }
.btn--accent:hover, a.btn--accent:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 24px rgba(190, 168, 0, .34), 0 2px 4px rgba(20, 23, 27, .12); }
.btn--accent:active, a.btn--accent:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(120, 104, 0, .22), 0 1px 2px rgba(20, 23, 27, .1); }
.btn--ghost, a.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn--ghost:hover, a.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }
.btn--lg { padding: .9375rem 1.75rem; font-size: 1rem; }
.btn--block { width: 100%; }
/* Na ciemnym tle (hero, blok domykajacy) wariant drugorzedny jest jasny. */
.on-dark .btn--ghost, .on-dark a.btn--ghost { color: var(--dark-ink); border-color: rgba(245, 247, 250, .45); background: rgba(245, 247, 250, .06); }
.on-dark .btn--ghost:hover, .on-dark a.btn--ghost:hover { border-color: var(--dark-ink); background: rgba(245, 247, 250, .08); }

/* ------------------------------------ sekcje i typografia ------------------------------------ */
.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.sec--alt { background: var(--paper-2); }
.sec--dark { background: var(--dark); color: var(--dark-ink); }
.sec--dark .sec__lead, .sec--dark p { color: var(--dark-muted); }
.sec--dark .sec__eyebrow { color: var(--dark-muted-2); }

.sec__eyebrow { font-family: var(--fh); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 .875rem; }
.sec__title { font-family: var(--fh); font-weight: 800; letter-spacing: -.022em; line-height: 1.12; margin: 0 0 1rem; font-size: clamp(1.75rem, 3.4vw, 2.625rem); }
.sec__lead { font-size: clamp(1rem, 1.35vw, 1.1875rem); line-height: 1.62; color: var(--muted); margin: 0 0 2.5rem; max-width: 42rem; }
.sec__center { text-align: center; }
.sec__center .sec__eyebrow { justify-content: center; }
.sec__center .sec__lead { margin-inline: auto; }
.sec__foot { margin-top: 2.75rem; }

/* ------------------------------------ hero podstron ------------------------------------ */
.page-hero { position: relative; padding-block: clamp(3rem, 6vw, 4.75rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); overflow: hidden; }
.page-hero__eyebrow { font-family: var(--fh); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 1rem; }
.page-hero h1 { font-family: var(--fh); font-weight: 800; letter-spacing: -.028em; line-height: 1.06; margin: 0 0 1rem; font-size: clamp(2rem, 4.8vw, 3.5rem); }
.page-hero p { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--muted); margin: 0; max-width: 44rem; }
/* Hero typograficzne bez ozdobnego tla - czysta plaszczyzna, akcent daje beacon przy eyebrow. */

/* ------------------------------------ siatki i karty ------------------------------------ */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }

.card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.625rem;
    box-shadow: var(--shadow-sm); transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s, box-shadow .22s;
}
.sec--alt .card { background: var(--paper); }
.card:hover { transform: translateY(-4px); border-color: rgba(20, 23, 27, .2); box-shadow: var(--shadow-md); }
.card__ico { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); margin-bottom: 1.125rem; }
.card__ico svg { width: 1.375rem; height: 1.375rem; }
.card__ico--accent { background: rgba(238, 212, 1, .16); }
.card h3 { font-family: var(--fh); font-size: 1.125rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.card__num { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-family: var(--fh); font-weight: 800; font-size: .9375rem; margin-bottom: 1rem; }
.card__stat { display: inline-block; font-family: var(--fh); font-weight: 800; font-size: 2rem; letter-spacing: -.02em; line-height: 1; color: var(--ink); margin-bottom: .625rem; }

/* lista z ptaszkami */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.checklist svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .05rem; color: var(--ok); }
.on-dark .checklist li { color: var(--dark-muted); }
.on-dark .checklist svg { color: var(--accent); }

.link-more { display: inline-flex; align-items: center; gap: .375rem; font-family: var(--fh); font-weight: 700; text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; transition: gap .18s; }
.link-more:hover { gap: .625rem; }
.on-dark .link-more { color: var(--dark-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ------------------------------------ produkt: ramka telefonu + kroki ------------------------------------ */
.product { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .product { grid-template-columns: .9fr 1.1fr; } }
.device {
    position: relative; width: min(100%, 17rem); margin-inline: auto;
    aspect-ratio: 9 / 19.5; border-radius: 2.25rem; padding: .55rem;
    background: linear-gradient(160deg, #23262c, #0d0f12); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.06);
}
.device__screen { position: relative; width: 100%; height: 100%; border-radius: 1.85rem; overflow: hidden; background: #000; }
.device__screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.device__notch { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); width: 32%; height: .55rem; border-radius: var(--r-pill); background: #0d0f12; z-index: 2; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; counter-reset: s; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 0; }
.steps li + li { border-top: 1px solid var(--line); }
.steps__no { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); font-family: var(--fh); font-weight: 800; }
.steps__no svg { width: 1.25rem; height: 1.25rem; }
.steps h3 { font-family: var(--fh); font-size: 1.0625rem; font-weight: 700; margin: .15rem 0 .2rem; }
.steps p { margin: 0; color: var(--muted); font-size: .9375rem; }

/* ------------------------------------ cennik ------------------------------------ */
.billing-switch { display: inline-flex; padding: .3125rem; background: var(--paper-3); border-radius: var(--r-pill); gap: .25rem; }
.billing-switch button { border: 0; background: none; padding: .625rem 1.25rem; border-radius: var(--r-pill); font: inherit; font-family: var(--fh); font-weight: 700; font-size: .9375rem; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.billing-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.billing-switch .save { color: var(--ok); }

.plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); }
.plan--hl { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); background: #fffdf3; }
.plan__badge { position: absolute; top: -.8125rem; left: 1.75rem; background: var(--accent); color: var(--accent-ink); font-family: var(--fh); font-size: .75rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: .3125rem .75rem; border-radius: var(--r-pill); }
.plan__name { font-family: var(--fh); font-size: 1.1875rem; font-weight: 700; margin: 0 0 .875rem; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .375rem; min-height: 3.25rem; }
.plan__amount { font-family: var(--fh); font-size: clamp(2.25rem, 4vw, 2.875rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.plan__was { font-family: var(--fh); font-size: 1.25rem; font-weight: 700; color: var(--muted-2); text-decoration: line-through; }
.plan__per { color: var(--muted); font-weight: 600; font-size: .9375rem; }
.plan__save { display: inline-block; align-self: flex-start; background: rgba(15, 122, 74, .1); color: var(--ok); font-family: var(--fh); font-weight: 700; font-size: .8125rem; padding: .25rem .625rem; border-radius: var(--r-pill); margin-top: .625rem; min-height: 1.5rem; }
.plan__note { margin: .75rem 0 0; font-size: .875rem; color: var(--muted); }
.plan .checklist { margin: 1.25rem 0 1.5rem; }
.plan .btn { width: 100%; margin-top: auto; }

/* tabela porownawcza */
.cmp-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; min-width: 42rem; font-size: .9375rem; }
.cmp th, .cmp td { padding: .9375rem 1.125rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp thead th { font-family: var(--fh); font-size: 1rem; background: var(--paper-2); }
.cmp tbody tr:nth-child(even) { background: rgba(20, 23, 27, .025); }
.cmp tbody th { font-weight: 600; color: var(--muted); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .is-hl { background: rgba(238, 212, 1, .09); }
.cmp thead .is-hl { background: rgba(238, 212, 1, .16); }
.cmp .tick { color: var(--ok); }

.addon { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .22s, border-color .22s, box-shadow .22s; }
.addon:hover { transform: translateY(-4px); border-color: rgba(20, 23, 27, .2); box-shadow: var(--shadow-md); }
.addon__ico { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); background: rgba(238, 212, 1, .16); color: var(--ink); margin-bottom: 1rem; }
.addon__ico svg { width: 1.25rem; height: 1.25rem; }
.addon__val { font-family: var(--fh); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.addon h3 { font-family: var(--fh); font-size: 1rem; margin: .625rem 0 .375rem; }
.addon p { margin: 0; font-size: .875rem; color: var(--muted); line-height: 1.55; }

.fineprint { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.fineprint p { font-size: .8125rem; line-height: 1.65; color: var(--muted-2); margin: 0 0 .75rem; max-width: 54rem; }
.fineprint strong { color: var(--muted); }

/* pasek zakupu */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(16, 18, 22, .92); backdrop-filter: saturate(1.2) blur(10px); color: var(--dark-ink); border-top: 1px solid var(--dark-line); transform: translateY(110%); transition: transform .25s cubic-bezier(.22,1,.36,1); box-shadow: 0 -10px 34px rgba(0,0,0,.28); }
.buybar.is-on { transform: none; }
.buybar__inner { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .8125rem 0; }
.buybar__copy { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.buybar__lead { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--dark-ink); line-height: 1.2; }
.buybar__price { font-size: .8125rem; color: var(--dark-muted); }
.buybar .btn { flex: none; width: auto; }

/* ------------------------------------ akordeon ------------------------------------ */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: 0; padding: 1.3125rem 0; cursor: pointer; font: inherit; font-family: var(--fh); font-weight: 700; font-size: 1.0625rem; color: var(--ink); text-align: left; }
.acc__btn:hover .acc__ico { color: var(--ink); }
.acc__ico { flex: none; width: 1.25rem; height: 1.25rem; transition: transform .2s, color .15s; color: var(--muted); }
.acc__btn[aria-expanded="true"] .acc__ico { transform: rotate(45deg); color: var(--ink); }
.acc__panel { padding: 0 0 1.375rem; max-width: 46rem; color: var(--muted); font-size: .9375rem; line-height: 1.65; }
.acc__panel p { margin: 0 0 .75rem; }
.acc__panel p:last-child { margin-bottom: 0; }
.acc__panel a { color: #7a6a00; }
.acc__panel[hidden] { display: none; }

/* ------------------------------------ dowod (Dlaczego Securand) ------------------------------------ */
.proof { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.proof__item { display: flex; flex-direction: column; height: 100%; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.proof__ico { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); margin-bottom: 1rem; }
.proof__ico svg { width: 1.375rem; height: 1.375rem; }
.proof__big { font-family: var(--fh); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .25rem; }
.proof__item h3 { font-family: var(--fh); font-size: 1.0625rem; font-weight: 700; margin: 0 0 .375rem; }
.proof__item p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.proof-media { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-top: 1.25rem; }
.proof-media figure { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.proof-media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proof-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1rem .875rem; font-family: var(--fh); font-weight: 700; font-size: .9375rem; color: #fff; background: linear-gradient(to top, rgba(8,9,11,.85), transparent); }

/* ------------------------------------ badge sklepow ------------------------------------ */
.stores { display: flex; flex-wrap: wrap; gap: .75rem; }
.store-badge { display: inline-flex; align-items: center; gap: .625rem; padding: .625rem 1rem; border-radius: var(--r-md); background: var(--ink); color: #fff; text-decoration: none; border: 1px solid var(--ink); transition: transform .15s, box-shadow .2s; }
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store-badge[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.store-badge--soon svg { filter: grayscale(1); }
.store-badge svg { width: 1.5rem; height: 1.5rem; flex: none; }
.store-badge span { display: block; line-height: 1.1; text-align: left; }
.store-badge small { display: block; font-size: .625rem; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.store-badge b { font-family: var(--fh); font-size: .9375rem; font-weight: 700; }
.on-dark .store-badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }

/* ------------------------------------ zasieg: listy miejscowosci ------------------------------------ */
.zone { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem; background: var(--paper); box-shadow: var(--shadow-sm); }
.zone__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.zone__ico { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); background: rgba(238, 212, 1, .16); color: var(--ink); flex: none; }
.zone__ico svg { width: 1.25rem; height: 1.25rem; }
.zone__head h3 { font-family: var(--fh); font-size: 1.1875rem; font-weight: 700; margin: 0; }
.towns { columns: 2 9rem; column-gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.towns li { break-inside: avoid; display: flex; align-items: center; gap: .5rem; padding: .3125rem 0; font-size: .9375rem; color: var(--muted); }
.towns li svg { width: .9375rem; height: .9375rem; flex: none; color: var(--accent); }

/* ------------------------------------ stopka ------------------------------------ */
.foot { background: var(--dark); color: var(--dark-muted); padding-block: clamp(2.75rem, 5vw, 4rem) 2rem; }
.foot__inner { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.foot__top { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; margin-bottom: 2.5rem; }
.foot__brand p { margin: 1rem 0 1.25rem; font-size: .9375rem; color: var(--dark-muted); max-width: 22rem; }
.foot__brandrow { display: inline-flex; align-items: center; gap: .55rem; }
.foot__logo { height: 1.5rem; width: auto; display: block; }
/* wordmark SECURAND w PNG lezy ~4px ponizej srodka plotna, a kapitaliki plakietki w
   line-height:1 siedza optycznie nad srodkiem pigulki - realnie plakietka wypada 1px wyzej
   niz napis. Zsuwamy o 1px, by srodki tekstu ALERT i SECURAND lezaly na jednej linii. */
.foot__brandrow .ambadge { position: relative; top: .5px; }
.foot__head { font-family: var(--fh); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-muted-2); margin: 0 0 1rem; }
.foot__col { display: flex; flex-direction: column; gap: .625rem; align-items: flex-start; }
.foot__col a { color: var(--dark-muted); text-decoration: none; font-size: .9375rem; }
.foot__col a:hover { color: var(--dark-ink); }
.foot__plain { font-size: .9375rem; color: var(--dark-muted-2); }
.foot__112 { margin: 2.25rem 0 0; padding: 1rem 1.125rem; border-left: 3px solid #ff5a6e; background: rgba(255, 90, 110, .08); font-size: .875rem; line-height: 1.6; color: var(--dark-muted); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.foot__112 strong { color: var(--dark-ink); }
.foot__112 a { color: var(--dark-ink); text-decoration: underline; }
.foot__legal { margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--dark-line); font-size: .8125rem; color: var(--dark-muted-2); }
.foot__legal a { color: var(--dark-muted); text-decoration: underline; }
.foot__legal a:hover { color: var(--dark-ink); }
@media (max-width: 60rem) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .foot__top { grid-template-columns: 1fr; } }

/* ------------------------------------ animacje ------------------------------------ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
.grid .reveal:nth-child(2), .plans .reveal:nth-child(2) { transition-delay: .07s; }
.grid .reveal:nth-child(3), .plans .reveal:nth-child(3) { transition-delay: .14s; }
.grid .reveal:nth-child(4) { transition-delay: .21s; }

/* ------------------------------------ dostepnosc ------------------------------------ */
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 60; padding: .625rem 1rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 0; }
.on-dark { color: var(--dark-ink); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .buybar { transition: none; }
    .card:hover, .addon:hover, .proof__item:hover, .store-badge:hover, .plan:hover, .btn--accent:hover { transform: none; }
    html { scroll-behavior: auto; }
}

/* ------------------------------------ telefon: dopracowanie ------------------------------------ */
@media (max-width: 40rem) {
    :root { --sec-y: clamp(2.75rem, 9vw, 3.75rem); }
    .wrap, .wrap--narrow { width: min(100% - 2rem, var(--maxw)); }
    .page-hero { padding-block: 2.25rem 1.75rem; }
    .page-hero h1 { font-size: clamp(1.75rem, 8.5vw, 2.25rem); line-height: 1.12; }
    .page-hero p { font-size: 1rem; }
    .sec__title { font-size: clamp(1.5rem, 7vw, 1.9375rem); }
    .sec__lead { font-size: 1rem; margin-bottom: 2rem; }
    .grid { gap: .875rem; }
    .card { padding: 1.375rem; }
    .plan { padding: 1.5rem; }
    .billing-switch { width: 100%; }
    .billing-switch button { flex: 1; padding: .625rem .5rem; font-size: .875rem; }
    .billing-switch .save { display: block; font-size: .6875rem; }
    .cmp { min-width: 34rem; font-size: .875rem; }
    .cmp th, .cmp td { padding: .75rem .625rem; }
    .cmp-wrap::after { content: "przesuń w bok"; display: block; padding: .5rem; font-size: .75rem; text-align: center; color: var(--muted-2); border-top: 1px solid var(--line); }
    .buybar__inner { padding: .625rem 0; gap: .75rem; }
    .buybar__lead, .buybar__price-more { display: none; }
    .buybar__price { font-size: .875rem; font-weight: 700; color: var(--dark-ink); white-space: nowrap; }
    .towns { columns: 1; }
}

/* Buybar chowa sie, gdy stopka wchodzi w kadr (site.js), wiec nie rezerwujemy bialego pasa na dole -
   inaczej powstawal pusty bialy odstep miedzy ciemna sekcja domykajaca a ciemna stopka. */

/* ------------------------------------ hero strony glownej ------------------------------------ */
.home-hero { position: relative; overflow: hidden; background: var(--dark); color: var(--dark-ink); isolation: isolate; }
.home-hero__media { position: absolute; inset: 0; z-index: -2; background: url('/media/lifestyle-night.webp') center 42% / cover no-repeat; }
.home-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9,10,12,.95) 0%, rgba(9,10,12,.86) 30%, rgba(9,10,12,.52) 58%, rgba(9,10,12,.24) 100%), linear-gradient(to top, rgba(9,10,12,.55) 0%, transparent 42%); }
.home-hero__inner { padding-block: clamp(3.5rem, 9vw, 6.5rem); max-width: 33rem; }
.home-hero__eyebrow { font-family: var(--fh); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.25rem; }
.home-hero__title { font-family: var(--fh); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0 0 1.25rem; font-size: clamp(2.5rem, 5.4vw, 3.875rem); text-wrap: balance; }
.home-hero__sub { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--dark-muted); margin: 0 0 1.5rem; max-width: 34rem; }
.home-hero__price { margin: 0 0 1.75rem; font-family: var(--fh); font-size: 1rem; color: var(--dark-muted); }
.home-hero__price strong { font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; color: var(--dark-ink); margin-right: .3rem; }
.home-hero__cta { gap: .75rem; }
.home-hero__cta .btn { width: auto; }
.home-hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(245, 247, 250, .2); }
.home-hero__trust li { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: rgba(245, 247, 250, .92); }
.home-hero__trust svg { width: 1.25rem; height: 1.25rem; color: var(--accent); flex: none; }
@media (max-width: 40rem) {
    .home-hero__cta .btn { width: 100%; }
    .home-hero__title { font-size: clamp(2.125rem, 9vw, 3rem); }
}

/* helpery ukladu (zamiast inline style) */
.btn-row--center { justify-content: center; }
.product__cta { margin-top: 1.75rem; }

/* lista cech (Co otrzymujesz) - dwie kolumny */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.feature-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.feature-list svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .05rem; color: var(--ok); }

/* kroki w dwoch kolumnach (Aktywacja) */
.steps--wide { display: grid; gap: 0 2.5rem; }
@media (min-width: 48rem) { .steps--wide { grid-template-columns: 1fr 1fr; } .steps--wide li:nth-child(2) { border-top: 0; } }

.acc__h { margin: 0; }

/* ------------------------------------ formularz kontaktowy (jasny) ------------------------------------ */
/* Reguly formularza sa zawezone do .form-card, zeby NIE dotknac formularza w modalu zamowienia:
   modal uzywa tych samych nazw klas (.field/.err/.check/.note/.btn__spinner), ale jest ciemny i
   stylowany w style.css. Widocznosc alertu i sukcesu steruje atrybut hidden (form.js), nie klasa. */
.contact { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 60rem) { .contact { grid-template-columns: 1fr 1fr; } }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--shadow-md); }
.form-card__title { font-family: var(--fh); font-size: 1.25rem; font-weight: 700; margin: 0 0 1.25rem; }
.form-card .field { display: flex; flex-direction: column; gap: .4375rem; margin-bottom: 1.125rem; }
.form-card .field label { font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.form-card .field .req { color: #d11; }
.form-card .field input[type=email], .form-card .field input[type=tel], .form-card .field input[type=text] {
    width: 100%; padding: .8125rem .875rem; font: inherit; color: var(--ink);
    background: var(--paper); border: 1.5px solid var(--line-2); border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s;
}
.form-card .field input::placeholder { color: var(--muted-2); }
.form-card .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(238, 212, 1, .22); }
.form-card .field.has-error input { border-color: #d11; }
.form-card .field-row { display: grid; gap: 1.125rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 30rem) { .form-card .field-row { grid-template-columns: 1fr; } }
.form-card .field--check { margin-top: .25rem; }
.form-card .check { display: flex; gap: .625rem; align-items: flex-start; font-size: .8125rem; line-height: 1.5; color: var(--muted); cursor: pointer; }
.form-card .check input { margin-top: .15rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--accent); }
.form-card .err { font-size: .8125rem; color: #d11; min-height: 1rem; }
.form-card .err:empty { min-height: 0; }
.form-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .note { margin: 1rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--muted-2); }
.form-card .note a { color: var(--muted); }
.form-card #waitlist-form .btn { margin-top: .25rem; }
.form-card .btn__spinner { display: none; }
.form-card .btn.is-loading .btn__spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(20,23,27,.3); border-top-color: var(--accent-ink); border-radius: 50%; animation: spin .7s linear infinite; }
.form-card .btn.is-loading .btn__label { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-card .alert { padding: .875rem 1rem; border-radius: var(--r-md); background: rgba(209, 17, 17, .08); border: 1px solid rgba(209, 17, 17, .3); color: #a00; font-size: .875rem; margin-bottom: 1rem; }
.form-card .success { text-align: center; padding: 1.5rem 1rem; }
.form-card .success__icon { display: grid; place-items: center; margin-bottom: .75rem; }
.form-card .success h3 { font-family: var(--fh); font-size: 1.25rem; margin: 0 0 .5rem; }
.form-card .success p { color: var(--muted); font-size: .9375rem; }
.form-card .success a { color: #7a6a00; }

/* ------------------------------------ blok dwukolumnowy (media + tekst) ------------------------------------ */
.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .split { grid-template-columns: 1fr 1fr; } .split--rev .split__media { order: 2; } }
.split__media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.split__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split h2 { font-family: var(--fh); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 1rem; }
.split p { color: var(--muted); line-height: 1.62; margin: 0 0 1rem; }

/* ============================================================================================
   DOPRACOWANIE - podniesienie designu (hierarchia wag, glebia, mikrointerakcje, sygnatura).
   ============================================================================================ */

/* Trzy realne wagi: display 700 (deklaruje 800, brak pliku -> 700) / obiekt 600 / tekst 400.
   Ubuntu Sans laduje 400/500/600/700 - bez tego wszystkie naglowki stoja na jednym 700. */
.card h3, .steps h3, .proof__item h3, .addon h3, .zone__head h3, .plan__name, .acc__btn, .form-card__title { font-weight: 600; }
.steps h3, .proof__item h3, .addon h3, .zone__head h3, .plan__name, .form-card__title { letter-spacing: -.01em; }
.sec__eyebrow, .page-hero__eyebrow { font-weight: 600; }
/* Standfirsty dostaja glos (Onest 500 zaladowany). */
.sec__lead, .page-hero p, .home-hero__sub { font-weight: 500; }

/* Kafle ikon jako modelowany material (lekko wpuszczone), jeden jezyk glebi. */
.card__ico, .card__ico--accent, .proof__ico, .steps__no, .addon__ico, .zone__ico {
    box-shadow: inset 0 0 0 1px rgba(20, 23, 27, .05), inset 0 1px 2px rgba(20, 23, 27, .05);
}

/* Rytm: hero podstrony juz oddziela linia, wiec pierwsza sekcja nie potrzebuje pelnego --sec-y. */
.page-hero + .sec { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/* Siatka szesciu kart: czyste 3x2 zamiast rwanego 4+2 (tylko sekcja "Kiedy AlertMe sie przydaje"). */
.grid--trio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* Karty cennika reaguja na kursor jak reszta kart, z ochrona planu wyroznionego. */
.plan { transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s; }
.plan:hover { transform: translateY(-4px); }
.plan:not(.plan--hl):hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }

/* Mikro-afordancje: wiersz tabeli, nieaktywna opcja przelacznika. */
.cmp tbody tr:hover { background: rgba(20, 23, 27, .045); }
.cmp tbody tr:hover .is-hl { background: rgba(238, 212, 1, .14); }
.billing-switch button:not([aria-pressed="true"]):hover { color: var(--ink); }

/* Oddech miedzy przelacznikiem a planami (badge planu wystaje w gore). */
.billing-switch + .plans { margin-top: 2rem; }

/* Karty stref nie rozciagaja sie do pustej wysokosci sasiada. */
.grid--2:has(.zone) { align-items: start; }

/* Ciemne bloki domykajace dostaja czysty gorny rant swiatla (bez ozdobnej poswiaty). */
.sec--dark { box-shadow: inset 0 1px 0 rgba(245, 247, 250, .06); }

/* Immersyjny naglowek nad hero strony glownej: ciemny, polprzezroczysty pasek scalajacy gore
   strony z kadrem; po przewinieciu wraca istniejacy jasny pasek (.nav.is-scrolled). */
body:has(.home-hero) .nav:not(.is-scrolled) {
    background: linear-gradient(to bottom, rgba(13, 15, 19, .94), rgba(13, 15, 19, .86));
    border-bottom-color: transparent;
    box-shadow: none;
}
body:has(.home-hero) .nav:not(.is-scrolled) .nav__logo { filter: none; }
body:has(.home-hero) .nav:not(.is-scrolled) .nav__link { color: rgba(245, 247, 250, .82); }
body:has(.home-hero) .nav:not(.is-scrolled) .nav__link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
body:has(.home-hero) .nav:not(.is-scrolled) .nav__phone { color: var(--dark-ink); }
body:has(.home-hero) .nav:not(.is-scrolled) .nav__burger span { background: var(--dark-ink); }

/* Wycinanka radiowozu (styl Apple): subject na czystym plotnie z miekkim cieniem-podlozem. */
.patrol-hero { position: relative; margin: clamp(1rem, 3vw, 2.5rem) auto clamp(1.5rem, 4vw, 3rem); max-width: 45rem; }
.patrol-hero::before { content: ""; position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); width: 72%; height: 20%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(20, 23, 27, .16), rgba(20, 23, 27, 0) 72%); }
.patrol-hero img { display: block; width: 100%; height: auto; }

/* Interaktywna mapa zasiegu (mapa-zasiegu.css) to ciemny komponent. site.css nadpisalo
   --ink/--muted/--line na jasne, wiec przywracamy je lokalnie na .am-map (jak w modalu). */
.am-map { --ink: #f5f7fa; --muted: rgba(245, 247, 250, .66); --muted-2: rgba(245, 247, 250, .42); --line: rgba(245, 247, 250, .14); }
/* Uklad: mapa po lewej, listy miejscowosci po prawej (na telefonie jedna kolumna). */
.zasieg-layout { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 62rem) { .zasieg-layout { grid-template-columns: 1.15fr .85fr; gap: 1.75rem; } }
.zasieg-layout .am-map { max-width: none; margin: 0; }
.zasieg-layout .am-towns { margin-top: 0; align-self: start; }

/* ------------------------------------ Ochrona bez formalnosci (kroki zakupu) ------------------------------------ */
.flow { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow__step { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem 1.625rem; box-shadow: var(--shadow-sm); }
.flow__ico { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-md); background: rgba(238, 212, 1, .16); color: var(--ink); margin-bottom: 1.125rem; box-shadow: inset 0 0 0 1px rgba(20, 23, 27, .05); }
.flow__ico svg { width: 1.5rem; height: 1.5rem; }
.flow__step h3 { font-family: var(--fh); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .4rem; }
.flow__step p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
@media (min-width: 48rem) {
    .flow__step:not(:last-child)::after { content: ""; position: absolute; right: -.95rem; top: 50%; width: .7rem; height: .7rem; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: translateY(-50%) rotate(45deg); }
}
.no-formal { margin: 2rem 0 0; text-align: center; font-family: var(--fh); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.375rem); letter-spacing: -.01em; color: var(--ink); }

/* ------------------------------------ AlertMe EU + mapa Europy ------------------------------------ */
.eu-feature { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .eu-feature { grid-template-columns: 1fr 1fr; } }
.eu-feature__copy { max-width: 34rem; }
/* wyroznione pytanie-hook w naglowku sekcji EU: akcentowe podkreslenie z offsetem,
   by nie przecinac ogonka "e" w "granice"; skip-ink:none = ciagla linia */
.eu-q { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .085em; text-underline-offset: .19em; text-decoration-skip-ink: none; }
.eu-countries { margin: 0 0 1.25rem; font-size: 1rem; color: var(--dark-muted); }
.eu-countries strong { color: var(--dark-ink); }
.eu-legend { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .625rem; }
.eu-legend li { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; color: var(--dark-muted); }
.eu-legend__dot { flex: none; width: .75rem; height: .75rem; border-radius: 50%; margin-top: .2rem; }
.eu-legend__dot--patrol { background: #fff; box-shadow: 0 0 0 3px rgba(238, 212, 1, .9); }
.eu-legend__dot--pl { background: var(--accent); }
.eu-legend__dot--eu { background: rgba(120, 170, 255, .9); }
.eu-note { margin: 1rem 0 0; font-size: .8125rem; color: var(--dark-muted-2); }
.eu-map { margin: 0; }
.eu-map img { display: block; width: 100%; height: auto; max-width: 28rem; margin-inline: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }