/* OXYPLAN by OXYNET – arkusz główny v2.
   System: Jura (UI, nagłówki sekcji, body) + Montserrat wyłącznie italic (display, liczby prędkości).
   Paleta wg docs/design-audit.md; CTA #007BB0 zapewnia biały tekst z kontrastem >= 4.5:1. */

@font-face {
    font-family: "Jura";
    src: url("../fonts/jura-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Jura";
    src: url("../fonts/jura-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-italic-latin-ext.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-italic-latin.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root {
    --brand: #00adef;
    --brand-dark: #008fc7;
    --brand-deep: #006f9f;
    --action: #007bb0;
    --brand-soft: #e8f7fd;
    --brand-pale: #f2faff;
    --brand-border: #d5eef9;
    --ink: #0f1c2e;
    --ink-soft: #34465d;
    --muted: #52667d;
    --surface: #f4f7f9;
    --white: #fff;
    --dark: #07131f;
    --night: #051019;
    --success: #087b61;
    --danger: #b3261e;
    --line: #dce6ec;
    --font-display: "Montserrat", Arial, sans-serif;
    --font-ui: "Jura", Arial, sans-serif;
    --space-1: .5rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.25rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 5rem;
    --space-10: 6.25rem;
    --radius-sm: .75rem;
    --radius-md: .9375rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-pill: 99rem;
    --shadow-card: 0 10px 34px rgba(15, 63, 88, .07);
    --shadow-active: 0 16px 48px rgba(0, 173, 239, .16);
    --ease: .3s cubic-bezier(.4, 0, .2, 1);
    --container: 87.5rem;
    --header-h: 4.5rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
/* Delikatnie mniejsza skala całości na desktopie (odpowiednik ~90% zoomu). */
@media (min-width: 48rem) { html { font-size: 90%; } }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--font-ui); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
button,
input,
select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: #9fe4ff; }

h1,
h2,
h3,
p { margin-top: 0; }
h2 { margin-bottom: 1.25rem; font-family: var(--font-ui); font-size: clamp(1.85rem, 3.2vw, 2.8rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.14; }
h3 { line-height: 1.25; }

:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 4px; box-shadow: 0 0 0 2px var(--white); }
input:focus-visible,
select:focus-visible { outline-color: var(--brand-deep); outline-offset: 2px; box-shadow: 0 0 0 1px var(--white); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; padding: .75rem 1rem; transform: translateY(-150%); border-radius: var(--radius-sm); color: var(--white); background: var(--ink); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 3rem), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(4.25rem, 7.5vw, 6.5rem); }
.eyebrow { margin-bottom: .8rem; color: var(--brand-deep); font-size: .76rem; font-weight: 700; letter-spacing: .21em; line-height: 1.2; text-transform: uppercase; }
.eyebrow-light { color: #8bdfff; }
.eyebrow-hero { margin-bottom: 1rem; color: #9fe4ff; font-family: var(--font-display); font-style: italic; font-size: .82rem; font-weight: 300; letter-spacing: .34em; line-height: 1.2; text-transform: uppercase; }
.section-heading { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.split-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .65fr); gap: 4rem; align-items: end; }
.split-heading h2 { margin-bottom: 0; }
.split-heading > p { margin: 0 0 .4rem; color: var(--ink-soft); font-size: 1.08rem; }
.centered-heading { max-width: 48rem; margin-inline: auto; text-align: center; }
.centered-heading > p:last-child { color: var(--muted); font-size: 1.05rem; }

/* --- Przyciski: białe, pogrubione wersaliki na dostępnym cyanie akcji --- */
.button { display: inline-flex; min-height: 3.25rem; padding: .82rem 1.7rem; align-items: center; justify-content: center; gap: .55rem; border: 2px solid var(--action); border-radius: var(--radius-md); color: var(--white); background: var(--action); font-size: .9rem; font-weight: 700; letter-spacing: .07em; line-height: 1.25; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease); }
.button:hover { border-color: var(--brand-deep); background: var(--brand-deep); box-shadow: 0 10px 28px rgba(0, 111, 159, .26); transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button[disabled] { opacity: .58; cursor: wait; transform: none; }
.button-small { min-height: 2.75rem; padding: .5rem 1.15rem; font-size: .82rem; }
.button-wide { width: 100%; }
.button-outline { border-color: var(--brand-deep); color: var(--brand-deep); background: var(--white); }
.button-outline:hover { border-color: var(--brand-dark); color: var(--brand-deep); background: var(--brand-soft); box-shadow: none; }
.text-button,
.text-link { display: inline-flex; padding: .25rem 0; gap: .45rem; align-items: center; border: 0; border-bottom: 1px solid currentColor; color: var(--brand-deep); background: transparent; font-weight: 700; line-height: 1.35; text-decoration: none; cursor: pointer; }
.text-button:hover,
.text-link:hover { color: #00567d; }

/* --- Header: kompaktowy, samo logo --- */
.site-header { position: relative; z-index: 50; height: var(--header-h); background: rgba(255, 255, 255, .96); }
.site-header.is-sticky { position: sticky; top: 0; box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(14px); }
.header-inner { display: grid; height: 100%; grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr); gap: 2rem; align-items: center; }
.brand { display: inline-flex; min-height: 2.75rem; width: max-content; align-items: center; text-decoration: none; }
.brand img { width: 4.35rem; height: 2.85rem; object-fit: contain; }
.site-nav { display: flex; gap: 2rem; align-items: center; }
.site-nav-foot { display: none; }
.site-nav a:not(.button) { position: relative; padding-block: .5rem; font-size: .92rem; font-weight: 600; text-decoration: none; }
.site-nav a:not(.button)::after { position: absolute; right: 0; bottom: .2rem; left: 0; height: 2px; content: ""; background: var(--brand); transform: scaleX(0); transform-origin: right; transition: transform var(--ease); }
.site-nav a:not(.button):hover::after,
.site-nav a:not(.button):focus-visible::after { transform: scaleX(1); transform-origin: left; }
.header-tools { display: flex; justify-self: end; gap: .6rem; align-items: center; }
.header-cta { border-radius: var(--radius-pill); letter-spacing: .05em; }
.header-cta svg { width: .95rem; height: .95rem; }
.theme-toggle { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); background: var(--white); cursor: pointer; transition: border-color var(--ease), color var(--ease), background var(--ease); }
.theme-toggle:hover { border-color: #7fd4f2; color: var(--brand-deep); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }
.theme-toggle .ico-sun,
.theme-toggle .ico-moon { display: none; }
html[data-theme="light"] .theme-toggle .ico-moon,
html:not([data-theme]) .theme-toggle .ico-moon { display: block; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
.nav-toggle { display: none; width: 2.8rem; height: 2.8rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; }
.nav-toggle > span:not(.sr-only),
.nav-toggle > span:not(.sr-only)::before,
.nav-toggle > span:not(.sr-only)::after { display: block; width: 1.25rem; height: 2px; margin: auto; content: ""; background: currentColor; transition: transform var(--ease), opacity var(--ease); }
.nav-toggle > span:not(.sr-only)::before { transform: translateY(-6px); }
.nav-toggle > span:not(.sr-only)::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] > span:not(.sr-only) { background: transparent; }
.nav-toggle[aria-expanded="true"] > span:not(.sr-only)::before { transform: translateY(1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] > span:not(.sr-only)::after { transform: translateY(-1px) rotate(-45deg); }

/* --- Hero --- */
.hero { position: relative; min-height: min(46rem, calc(100svh - 6rem)); margin: 0 1.5rem 1.5rem; border-radius: var(--radius-xl); color: var(--white); background: var(--dark); isolation: isolate; }
.hero::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; content: ""; background: linear-gradient(90deg, rgba(3, 12, 20, .95) 0%, rgba(4, 15, 24, .78) 46%, rgba(4, 15, 24, .28) 76%, rgba(4, 15, 24, .5) 100%); }
.hero-media { position: absolute; z-index: -2; inset: 0; overflow: hidden; border-radius: inherit; }
.hero-media picture,
.hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center 55%; filter: saturate(.9) contrast(1.08); }
.hero-grid { display: grid; width: min(calc(100% - clamp(3rem, 9vw, 8.5rem)), var(--container)); min-height: inherit; padding-block: clamp(4rem, 7vw, 6.25rem); grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .58fr); gap: 5rem; align-items: center; }
.hero-copy { min-width: 0; max-width: 52rem; }
.hero h1 { max-width: 44rem; margin-bottom: 1.5rem; padding-right: .12em; overflow-wrap: break-word; font-family: var(--font-display); font-style: italic; font-size: clamp(2.25rem, 3.9vw, 3.65rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.08; }
.hero h1 em { color: #8be1ff; font-style: inherit; }
.hero-lead { max-width: 40rem; margin-bottom: 2rem; color: rgba(255, 255, 255, .86); font-size: clamp(1.02rem, 1.35vw, 1.22rem); line-height: 1.65; }
.hero-actions { display: flex; margin-bottom: 2rem; gap: .9rem 1.4rem; align-items: center; flex-wrap: wrap; }
.hero-link { display: inline-flex; padding: .3rem 0; gap: .45rem; align-items: center; border-bottom: 1px solid rgba(191, 233, 255, .55); color: #bfe9ff; font-weight: 700; text-decoration: none; }
.hero-link:hover { border-color: #fff; color: #fff; }

.hero-check { position: relative; min-width: 0; max-width: 100%; padding: 1.6rem; border: 1px solid rgba(143, 222, 252, .28); border-radius: var(--radius-lg); background: linear-gradient(170deg, rgba(9, 33, 51, .86), rgba(4, 18, 30, .82)); box-shadow: 0 28px 80px rgba(0, 0, 0, .26); backdrop-filter: blur(16px); }
.hero-check::before { position: absolute; top: 0; right: 1.6rem; left: 1.6rem; height: 1px; content: ""; background: linear-gradient(90deg, rgba(139, 225, 255, 0), rgba(139, 225, 255, .65), rgba(139, 225, 255, 0)); }
.hero-check-title { margin: 0 0 1.1rem; font-size: 1.16rem; font-weight: 700; }
.hero-check-field { position: relative; display: block; margin-bottom: .8rem; }
.hero-check-field > svg { position: absolute; z-index: 1; top: 50%; left: 1rem; width: 1.15rem; height: 1.15rem; color: #8be1ff; pointer-events: none; transform: translateY(-50%); }
.hero-check-field input { height: 3.4rem; padding-left: 2.9rem; border: 1px solid rgba(143, 222, 252, .4); border-radius: var(--radius-md); color: var(--white); background: rgba(255, 255, 255, .07); }
.hero-check-field input::placeholder { color: rgba(255, 255, 255, .4); }
.hero-check-field input:hover { border-color: rgba(143, 222, 252, .65); }
.hero-check-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 173, 239, .22); }
.hero-check-status { display: flex; min-height: 2.4rem; margin: 0 0 1rem; padding: .5rem .8rem; align-items: center; border-radius: var(--radius-sm); color: rgba(255, 255, 255, .72); background: rgba(0, 173, 239, .1); font-size: .8rem; }
.hero-check-status.is-match { color: #a8ecd2; background: rgba(63, 224, 175, .12); }
.hero-check-note { margin: .85rem 0 0; color: rgba(255, 255, 255, .55); font-size: .72rem; line-height: 1.5; }
.hero-check-skip { display: inline-flex; min-height: 2.75rem; margin-top: .8rem; padding-block: .35rem; gap: .4rem; align-items: center; border-bottom: 1px solid rgba(191, 233, 255, .5); color: #bfe9ff; font-size: .8rem; font-weight: 700; text-decoration: none; }
.hero-check-skip:hover { border-color: #fff; color: #fff; }
.planner-skip { margin-top: 1.1rem; font-size: .85rem; }
.no-js .lead-section { display: none; }
.hero-check .ac-list { border-color: rgba(143, 222, 252, .35); background: #0b2436; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.hero-check .ac-list li strong { color: var(--white); }
.hero-check .ac-list li small { color: rgba(255, 255, 255, .5); }
.hero-check .ac-list li.is-active,
.hero-check .ac-list li:hover { background: rgba(0, 173, 239, .2); }
.fiber-lines { position: absolute; z-index: 1; right: -2rem; bottom: -7rem; width: 42%; height: 70%; pointer-events: none; }
.fiber-lines i { position: absolute; bottom: 0; width: 1px; height: 100%; background: rgba(61, 205, 255, .36); box-shadow: 0 0 10px #16bfff; transform: rotate(13deg); transform-origin: bottom; }
.fiber-lines i:nth-child(1) { left: 15%; height: 73%; }.fiber-lines i:nth-child(2) { left: 38%; height: 98%; transform: rotate(4deg); }.fiber-lines i:nth-child(3) { left: 60%; height: 88%; transform: rotate(-7deg); }.fiber-lines i:nth-child(4) { left: 78%; height: 64%; transform: rotate(-17deg); }

/* --- Pasek zaufania --- */
.trust-strip { padding-block: 1.5rem 2.25rem; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-grid p { display: grid; min-height: 4.5rem; margin: 0; padding: .3rem 2rem; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .95rem; align-content: center; border-left: 1px solid var(--line); }
.trust-grid p:first-child { padding-left: 0; border-left: 0; }
.trust-ico { display: inline-flex; width: 2.5rem; height: 2.5rem; grid-row: span 2; align-items: center; justify-content: center; align-self: center; border: 1px solid var(--brand-border); border-radius: .8rem; color: var(--brand-deep); background: var(--brand-pale); }
.trust-grid .trust-ico { color: var(--brand-deep); }
.trust-ico svg { width: 1.25rem; height: 1.25rem; }
.trust-grid strong { font-size: .98rem; }
.trust-grid span { color: var(--muted); font-size: .82rem; }

/* --- Jak działa (rzeczywista sekwencja 3 kroków) --- */

/* --- Planer: biała karta na jasnym niebieskim, pytania z ikonami --- */
.planner-section { background: var(--brand-pale); }
.planner-shell { display: grid; grid-template-columns: minmax(17rem, .62fr) minmax(0, 1.38fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.planner-intro { position: sticky; top: 6.25rem; }
.planner-intro h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.planner-intro > p:not(.eyebrow):not(.privacy-note) { color: var(--muted); font-size: 1.05rem; }
.planner-progress-wrap { margin-block: 1.9rem 1.25rem; }
.progress-label { display: flex; margin-bottom: .65rem; justify-content: space-between; gap: 1rem; font-size: .82rem; font-weight: 700; }
.progress-label strong { color: var(--brand-deep); }
progress { display: block; width: 100%; height: .5rem; overflow: hidden; border: 0; border-radius: var(--radius-pill); background: #dff2fc; appearance: none; }
progress::-webkit-progress-bar { border-radius: inherit; background: #dff2fc; }
progress::-webkit-progress-value { border-radius: inherit; background: var(--brand); transition: width var(--ease); }
progress::-moz-progress-bar { border-radius: inherit; background: var(--brand); }
.privacy-note { display: flex; margin: 0; gap: .6rem; align-items: flex-start; color: var(--ink-soft); font-size: .85rem; }
.privacy-note span { display: inline-flex; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; color: var(--success); background: #e4f8f2; font-weight: 700; }
.planner-card { min-height: 37rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--brand-border); border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--shadow-card); }
.planner-step { animation: step-in var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.step-kicker { margin-bottom: .5rem; color: var(--brand-deep); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.planner-step > h3 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 700; letter-spacing: -.015em; }
.step-description { margin-bottom: 2rem; color: var(--muted); }
.question-stack { display: grid; gap: 2rem; }
.question { min-width: 0; margin: 0; padding: 0; border: 0; }
.question legend { display: flex; width: 100%; margin-bottom: .9rem; gap: .8rem; align-items: flex-start; color: var(--ink); font-weight: 700; line-height: 1.35; }
.q-icon { display: inline-flex; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: .8rem; color: var(--brand-deep); background: var(--brand-soft); }
.q-icon svg { width: 1.35rem; height: 1.35rem; }
.q-text { min-width: 0; padding-top: .2rem; }
.q-text small { display: block; margin-top: .25rem; color: var(--muted); font-weight: 400; }
.answer-grid { display: grid; gap: .75rem; }
.answer-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.answer-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answer-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.answer-card { position: relative; display: flex; min-height: 5.4rem; padding: 1rem; gap: .8rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease), background var(--ease); }
.answer-card:hover { border-color: #7fd4f2; transform: translateY(-2px); }
.answer-card:has(input:checked) { border-color: var(--brand); background: #f7fdff; box-shadow: 0 0 0 1px var(--brand), 0 8px 22px rgba(0, 173, 239, .1); }
.answer-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.answer-card:has(input:focus-visible) { outline: 3px solid var(--brand-deep); outline-offset: 3px; }
.answer-marker { position: relative; width: 1.3rem; height: 1.3rem; margin-top: .1rem; flex: 0 0 auto; border: 1.5px solid #a5bccb; border-radius: 50%; background: var(--white); transition: border-color var(--ease), background var(--ease); }
.answer-marker::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--white); content: "✓"; font-size: .72rem; font-weight: 700; line-height: 1; opacity: 0; transition: opacity var(--ease); }
input:checked + .answer-marker { border-color: var(--brand); background: var(--brand); }
input:checked + .answer-marker::after { opacity: 1; }
.answer-card > span:last-child { display: flex; min-width: 0; flex-direction: column; line-height: 1.3; }
.answer-card strong { font-size: .92rem; }
.answer-card small { margin-top: .3rem; color: var(--muted); font-size: .73rem; line-height: 1.35; }
.planner-controls { display: flex; min-height: 4rem; margin-top: 2.25rem; align-items: center; justify-content: space-between; gap: 1rem; }
.planner-controls .button { margin-left: auto; }
.form-message { min-height: 1.5rem; margin-top: 1rem; color: var(--danger); font-size: .88rem; font-weight: 700; }
.form-message.is-success { color: var(--success); }

/* --- Wynik --- */
.result-section { background: var(--brand-pale); }
.result-heading { display: flex; margin-bottom: 2.25rem; align-items: end; justify-content: space-between; gap: 2rem; }
.result-heading h2 { margin-bottom: 0; padding-right: .1em; font-family: var(--font-display); font-style: italic; font-size: clamp(2.1rem, 3.8vw, 3.3rem); font-weight: 900; letter-spacing: -.02em; }
.result-heading h2 span { color: var(--brand-dark); }
.result-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr); gap: 1.25rem; align-items: stretch; }
.package-result,
.wifi-result { border-radius: var(--radius-xl); background: var(--white); }
.package-result { padding: clamp(1.6rem, 4vw, 3rem); border: 2px solid var(--brand); box-shadow: var(--shadow-active); }
.package-result-head { display: flex; margin-bottom: 2.25rem; align-items: center; justify-content: space-between; gap: 1rem; }
.package-result-head > p { margin: 0; color: var(--muted); font-size: .78rem; }
.package-badge { display: inline-flex; padding: .45rem .85rem; border-radius: var(--radius-pill); color: var(--brand-deep); background: var(--brand-soft); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.result-speed { display: grid; max-width: 42rem; margin-bottom: 2.25rem; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; }
.result-speed > div { display: flex; align-items: center; gap: .9rem; }
.speed-chip { display: inline-flex; width: 3rem; height: 3rem; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; color: var(--brand-deep); background: var(--brand-soft); }
.speed-chip svg { width: 1.4rem; height: 1.4rem; }
.result-speed strong { padding-right: .08em; font-family: var(--font-display); font-style: italic; font-size: clamp(3.2rem, 6.2vw, 5.2rem); font-weight: 900; letter-spacing: -.045em; line-height: .9; }
.result-speed > div > span { display: flex; flex-direction: column; color: var(--brand-deep); font-weight: 700; line-height: 1.2; }
.result-speed small { margin-top: .3rem; color: var(--muted); font-size: .65rem; font-weight: 500; }
.result-speed i { width: 1px; height: 4.5rem; background: var(--line); }
.result-card-cta { margin-top: 1.75rem; }
.planner-section.is-done { display: none; }
.result-reasons { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.result-reasons h3,
.result-uses h3 { margin-bottom: .75rem; font-size: 1rem; font-weight: 700; }
.result-reasons ul,
.result-uses ul,
.wifi-result ul { display: grid; margin: 0; padding: 0; gap: .55rem; list-style: none; }
.result-reasons li,
.result-uses li,
.wifi-result li { position: relative; padding-left: 1.45rem; color: var(--ink-soft); font-size: .93rem; }
.result-reasons li::before,
.result-uses li::before,
.wifi-result li::before { position: absolute; top: .08rem; left: 0; color: var(--brand); content: "✓"; font-weight: 700; }
.headroom-note { display: flex; margin-block: 1.5rem; padding: 1rem; gap: .8rem; align-items: center; border-radius: var(--radius-md); background: var(--brand-pale); }
.headroom-note > span { display: inline-flex; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; color: var(--brand-deep); background: var(--white); }
.headroom-note > span svg { width: 1.2rem; height: 1.2rem; }
.headroom-note p { display: flex; margin: 0; flex-direction: column; line-height: 1.4; }
.headroom-note p span { color: var(--muted); font-size: .82rem; }
/* Podpowiedź wyższego pakietu zapala się rzadko, więc nie może wpaść w drobny szary
   tekst spod zapasu – stoi osobno, ujemnym marginesem doklejona do notki o zapasie. */
.headroom-upsell { margin: -1rem 0 1.5rem; padding: .9rem 1rem; border-radius: var(--radius-md); color: var(--brand-deep); background: var(--brand-soft); font-size: .9rem; font-weight: 600; line-height: 1.45; }
.wifi-result { position: relative; padding: 2rem; overflow: hidden; border: 1px solid var(--brand-border); }
.wifi-result h3 { margin: 0 0 .75rem; font-size: 1.45rem; font-weight: 700; }
.wifi-result > p:not(.eyebrow):not(.wifi-separation) { color: var(--ink-soft); }
.wifi-art { margin: -2rem -2rem 1.75rem; background: var(--night); }
.wifi-art svg { display: block; width: 100%; height: auto; }
.wifi-wave { animation: wifi-wave 2.8s cubic-bezier(.4, 0, .2, 1) infinite; }
.wifi-wave-2 { animation-delay: .45s; }
.wifi-wave-3 { animation-delay: .9s; }
@keyframes wifi-wave { 0%, 100% { opacity: .25; } 35% { opacity: 1; } }
.wifi-separation { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.comparison-wrap { margin-top: 2rem; padding: 2rem; border: 1px solid var(--brand-border); border-radius: var(--radius-xl); background: var(--white); }
.comparison-heading { display: flex; margin-bottom: 1.25rem; justify-content: space-between; gap: 2rem; }
.comparison-heading h3 { margin: 0; font-weight: 700; }
.comparison-heading p { max-width: 30rem; margin: 0; color: var(--muted); font-size: .85rem; }
/* Drabinka prędkości: cała oferta w kolejności, prędkość jako liczba wiodąca.
   Rosnące liczby same niosą porządek, więc etykiety „wariant niższy/wyższy"
   przestały być potrzebne – a to one były najmniej zrozumiałe. */
.comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
.pkg-pick { position: relative; display: grid; padding: 1.4rem 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); font: inherit; text-align: left; cursor: pointer; grid-template-areas: "badge badge" "speed unit" "name name" "upload upload"; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .4rem; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease), background var(--ease); }
.pkg-pick:hover { border-color: #8bd8f3; transform: translateY(-2px); }
.pkg-pick:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; }
.pkg-pick-badge { grid-area: badge; min-height: 1.1rem; padding-right: 2.2rem; margin-bottom: .35rem; color: var(--brand-deep); font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.pkg-pick-speed { grid-area: speed; color: var(--ink); font-family: var(--font-display); font-style: italic; font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.pkg-pick-unit { grid-area: unit; color: var(--muted); font-size: .74rem; font-style: normal; font-weight: 700; }
.pkg-pick-name { grid-area: name; margin-top: .35rem; font-size: .95rem; font-weight: 700; }
.pkg-pick-upload { grid-area: upload; color: var(--muted); font-size: .72rem; }
.pkg-pick.is-recommended { border-color: rgba(0, 173, 239, .55); }
.pkg-pick.is-chosen { border-color: var(--brand); background: var(--brand-pale); box-shadow: 0 0 0 1px var(--brand); }
.pkg-pick.is-chosen .pkg-pick-speed { color: var(--brand-deep); }
.pkg-pick.is-chosen::after { position: absolute; top: .8rem; right: .9rem; display: inline-flex; width: 1.4rem; height: 1.4rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--white); background: var(--brand); content: "✓"; font-size: .8rem; font-weight: 700; }
.result-cta { display: flex; margin-top: 2rem; padding: 1.5rem 1.75rem; align-items: center; justify-content: space-between; gap: 2rem; border-radius: var(--radius-lg); color: var(--white); background: var(--dark); }
.result-cta > div { display: flex; flex-direction: column; }
.result-cta > div span { color: rgba(255, 255, 255, .66); font-size: .84rem; }
.technical-disclaimer { max-width: 55rem; margin: 1.2rem auto 0; color: var(--muted); font-size: .75rem; text-align: center; }

/* --- Formularz leada --- */
.lead-section { background: var(--white); }
.lead-shell { display: grid; grid-template-columns: minmax(17rem, .55fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
.lead-intro { position: sticky; top: 6.25rem; }
.lead-summary { position: relative; display: flex; margin-block: 2rem; padding: 1.25rem; flex-direction: column; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); background: var(--brand-pale); transition: border-color var(--ease), transform var(--ease); }
.lead-summary.is-pick { cursor: pointer; }
.lead-summary.is-pick:hover { border-color: var(--brand); transform: translateY(-2px); }
.lead-summary .lead-summary-change { position: absolute; top: .95rem; right: 1.1rem; margin: 0; }
.lead-summary span,
.lead-summary small { color: var(--muted); font-size: .75rem; }
.lead-summary strong { font-size: 1.3rem; font-weight: 700; }
.lead-summary b { color: var(--brand-deep); }
.lead-tv-hint { display: flex; margin-bottom: 2rem; padding: 1rem 1.1rem; gap: .85rem; align-items: flex-start; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: var(--brand-pale); }
.lead-tv-hint > svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; color: var(--brand-deep); }
/* Karta „Program poleceń": w spoczynku ta sama, spokojna rodzina co kafelek doboru
   pakietu i podpowiedź o IPTV obok – polecenie jest opcjonalne i nie ma krzyczeć
   głośniej od nich. Cyanowy akcent zapala się dopiero po zaznaczeniu pola wyboru,
   żeby było widać, że polecenie faktycznie weszło do zgłoszenia. Wcześniej karta
   miała ten akcent od początku, więc „zapalenie" niczym się nie różniło od stanu
   wyjściowego, a sama karta przykrywała kafelek z dobranym pakietem. */
.lead-referral { display: flex; margin-bottom: 2rem; padding: 1rem 1.1rem; flex-direction: column; gap: .15rem; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: var(--brand-pale); transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease); }
.lead-referral.is-set { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.lead-referral-label { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lead-referral strong { font-size: .98rem; font-weight: 700; line-height: 1.3; }
.lead-referral.is-set strong { color: var(--brand-deep); }
.lead-referral p { margin: .3rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
/* Obietnica korzyści to przypis do karty, nie trzeci równorzędny wiersz – stąd
   odstęp i włoskowa linia. Bez nich cztery bloki tekstu stały w jednym rytmie
   i nie było widać, który z nich mówi o stanie zgłoszenia, a który o zasadach. */
.lead-referral small { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--brand-border); color: var(--muted); font-size: .75rem; line-height: 1.45; }
/* Sekcja 3 formularza: po zdjęciu pól na kody został w niej sam wiersz z polem
   wyboru, bez żadnej oprawy – obok okartowanego wiersza IPTV z sekcji 2 wyglądał
   na urwany w pół. Ta sama oprawa co tam, a przy okazji cel dotykowy wyraźnie
   większy niż sam kwadracik pola: klikalna jest cała karta, bo to etykieta. */
.referral-field { margin-bottom: 2rem; }
.referral-field .check-row { min-height: 2.75rem; padding: .95rem 1.05rem; align-content: center; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: var(--brand-pale); transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease); }
.referral-field .check-row:has(input:focus-visible) { border-color: var(--brand); }
.referral-field .check-row:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.lead-tv-hint p { display: flex; margin: 0; flex-direction: column; gap: .15rem; line-height: 1.45; }
.lead-tv-hint strong { font-size: .92rem; }
.lead-tv-hint span { color: var(--muted); font-size: .8rem; }
.lead-intro address { display: flex; flex-direction: column; font-style: normal; }
.lead-intro address a { color: var(--brand-deep); font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem, 2.6vw, 2.3rem); font-weight: 900; text-decoration: none; }
.lead-intro address span { color: var(--muted); font-size: .8rem; }
.lead-form { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.form-section-heading { display: flex; margin: 0 0 1.25rem; padding-top: 2rem; gap: .85rem; align-items: flex-start; border-top: 1px solid var(--line); }
.form-section-heading:first-child { padding-top: 0; border-top: 0; }
.form-section-heading > span { display: inline-flex; width: 2rem; height: 2rem; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; color: var(--brand-deep); background: var(--brand-soft); font-size: .78rem; font-weight: 700; }
.form-section-heading h3 { margin: 0 0 .15rem; font-size: 1.12rem; font-weight: 700; }
.form-section-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.geo-row { display: flex; margin: -.35rem 0 1.1rem; gap: .9rem; align-items: center; flex-wrap: wrap; }
.geo-row .button svg { width: .95rem; height: .95rem; }
.geo-status { color: var(--muted); font-size: .8rem; }
.button.is-busy { pointer-events: none; }
.button.is-busy svg { display: none; }
.button.is-busy::before { width: .95rem; height: .95rem; border: 2px solid rgba(0, 123, 176, .25); border-top-color: var(--brand-deep); border-radius: 50%; content: ""; animation: geo-spin .8s linear infinite; }
@keyframes geo-spin { to { transform: rotate(360deg); } }
.field-grid { display: grid; margin-bottom: 2rem; gap: .3rem 1rem; }
.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.address-grid { grid-template-columns: 1.2fr .7fr .45fr .45fr; }
.field-city { grid-column: span 2; }
.field-street { grid-column: span 2; }
/* Podpis rozpycha sie do gory, pole zostaje przy dolnej krawedzi wiersza. Bez tego
   dluzszy podpis („Nr lokalu (opcjonalnie)") lamal sie na dwie linie i spychal
   swoje pole nizej niz sasiednie – caly wiersz siatki wygladal na krzywy. */
.field-grid label { display: flex; min-width: 0; flex-direction: column; justify-content: flex-end; gap: .4rem; }
.field-grid label > span { flex: 1 1 auto; font-size: .8rem; font-weight: 700; }
.field-grid label > span small { color: var(--muted); font-weight: 400; }
input,
select { width: 100%; height: 3.3rem; min-width: 0; padding: .68rem .95rem; border: 1px solid #b9cbd5; border-radius: var(--radius-md); color: var(--ink); background: var(--white); transition: border-color var(--ease), box-shadow var(--ease); }
input:hover,
select:hover { border-color: #7aa6ba; }
input:focus,
select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 173, 239, .12); }
input[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--danger); }
/* Komunikat przy polu: zbiorczy tekst przy przycisku bywa 1200 px poniżej ekranu. */
/* Miejsce na komunikat jest zarezerwowane na stałe, a sam komunikat leży
   bezwzględnie w tym pasku. Wcześniej dopisywał się do układu i przy każdym
   opuszczeniu wymaganego pola przesuwał całą resztę formularza w dół. */
.field-error { position: absolute; bottom: 0; left: 0; display: block; color: var(--danger); font-size: .76rem; font-weight: 600; line-height: 1.25; }
.field-grid label { position: relative; padding-bottom: 1.05rem; }
.check-row .field-error { position: static; grid-column: 2; margin-top: .35rem; }
.optional-block { margin-bottom: 2rem; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.optional-block summary { display: flex; padding: 1rem 1.15rem; gap: .6rem; align-items: center; color: var(--brand-deep); font-size: .88rem; font-weight: 700; list-style: none; cursor: pointer; }
.optional-block summary::-webkit-details-marker { display: none; }
.optional-block summary::after { margin-left: auto; content: "+"; font-size: 1.15rem; line-height: 1; }
.optional-block[open] summary::after { content: "−"; }
.optional-block > div { padding: .25rem 1.15rem 1.15rem; }
.optional-block .field-grid { margin-bottom: 1.15rem; }
.check-row-tv { margin: 0 0 2rem; padding: .95rem 1.05rem; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: var(--brand-pale); }
.legal-box .check-all strong { color: var(--brand-deep); }
.lead-summary-change { margin-top: .7rem; align-self: flex-start; font-size: .8rem; }
.comparison-wrap { scroll-margin-top: 6.5rem; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.turnstile-wrap { display: block; min-height: 4.1rem; margin-block: 1rem; }
.legal-box { margin-top: .5rem; padding: 1.25rem; border-radius: var(--radius-md); background: var(--surface); }
/* Zbiorczy przelacznik jest wyrozniony jako karta, bo to on ma byc jedynym
   klikiem. Zgody wymagane ida pod nim, nieobowiazkowe jeszcze nizej i drobniej –
   przy piaciu rownorzednych wierszach nie bylo widac, ze wystarczy gorny. */
.legal-box .check-all { padding: .9rem 1rem; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--brand-pale); }
.legal-box .check-all strong { font-size: .88rem; }
.legal-box .check-all input { width: 1.3rem; height: 1.3rem; }
.legal-required { margin-top: 1rem; }
.legal-required .check-row + .check-row { margin-top: .95rem; padding-top: .95rem; border-top: 1px solid var(--line); }
.legal-optional { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.legal-optional-head { margin: 0 0 .7rem; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.check-row-soft { font-size: .72rem; }
.check-row-soft strong { font-size: .74rem; font-weight: 600; color: var(--muted); }
.check-row-soft + .check-row-soft { margin-top: .6rem; }
.legal-version { margin: .9rem 0 0; color: var(--muted); font-size: .68rem; }
.check-row { display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; align-items: start; font-size: .78rem; line-height: 1.55; cursor: pointer; }
.check-row input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--brand); }
.check-row strong { display: block; margin-bottom: .25rem; font-size: .8rem; }
.check-row a { color: var(--brand-deep); }
.submit-note { margin: .75rem 0 0; color: var(--muted); font-size: .72rem; text-align: center; }

/* --- Potwierdzenie --- */
.success-section { background: var(--brand-pale); }
.success-card { max-width: 52rem; padding: clamp(2rem, 6vw, 5rem); border: 1px solid var(--brand-border); border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--shadow-active); text-align: center; }
.success-mark { display: inline-flex; width: 4rem; height: 4rem; margin-bottom: 1.5rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--success); background: #e4f8f2; font-size: 1.8rem; }
.success-card > p:not(.eyebrow) { max-width: 38rem; margin-inline: auto; color: var(--muted); }
.success-card > p strong { color: var(--ink); }
.success-actions { display: flex; margin-top: 2rem; gap: 1.25rem; align-items: center; justify-content: center; flex-wrap: wrap; }

/* --- Pakiety --- */
.packages-section { background: var(--white); }
.package-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
.package-card { position: relative; display: flex; min-height: 29rem; padding: 1.75rem; flex-direction: column; border: 2px solid var(--brand-border); border-radius: var(--radius-lg); background: var(--white); transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease); }
.package-card:hover { border-color: #a9dff1; box-shadow: var(--shadow-card); transform: translateY(-3px); }
.package-card.is-featured { border-color: var(--brand); box-shadow: var(--shadow-active); transform: translateY(-6px); }
.package-card.is-featured:hover { transform: translateY(-8px); }
.package-card-label { position: absolute; top: 1.25rem; right: 1.25rem; padding: .35rem .6rem; border-radius: var(--radius-pill); color: var(--brand-deep); background: var(--brand-soft); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.package-card > p:first-of-type { margin-bottom: .1rem; color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.package-card h3 { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; }
.package-speed { display: flex; margin-bottom: 1.25rem; align-items: end; gap: .55rem; }
.package-speed strong { padding-right: .08em; font-family: var(--font-display); font-style: italic; font-size: clamp(2.6rem, 3.4vw, 3.6rem); font-weight: 900; letter-spacing: -.05em; line-height: .9; }
.package-speed > span { display: flex; padding-bottom: .2rem; flex-direction: column; color: var(--brand-deep); font-weight: 700; line-height: 1.1; }
.package-speed > span b { font-weight: 700; letter-spacing: .01em; }
.package-speed small { margin-top: .15rem; color: var(--muted); font-size: .65rem; }
.package-price { display: flex; margin: -.35rem 0 1.15rem; align-items: baseline; gap: .45rem; color: var(--ink-soft); }
.package-price strong { color: var(--ink); font-size: 1.3rem; font-weight: 700; }
.package-price span { font-size: .72rem; }
.package-description { min-height: 4.8rem; color: var(--muted); font-size: .86rem; }
.package-card ul { display: grid; margin: 0 0 1.5rem; padding: 1.3rem 0 0; gap: .5rem; border-top: 1px solid var(--line); list-style: none; }
.package-card li { position: relative; padding-left: 1.35rem; color: var(--ink-soft); font-size: .82rem; }
.package-card li::before { position: absolute; left: 0; color: var(--brand); content: "✓"; font-weight: 700; }
.package-card .button-outline { margin-top: auto; align-self: stretch; }
.package-card.is-featured .package-speed strong { color: var(--brand-dark); }
.package-card.is-featured .package-card-label { color: var(--white); background: var(--action); }
.package-card.is-featured .button-outline { border-color: var(--action); color: var(--white); background: var(--action); }
.package-card.is-featured .button-outline:hover { background: var(--brand-deep); }
.offer-note { max-width: 59rem; margin: 2.5rem auto 0; color: var(--muted); font-size: .77rem; text-align: center; }
.offer-note a { color: var(--brand-deep); }

/* --- Obszar działania: prawdziwa mapa (jasna w dzień, nocna w trybie ciemnym) --- */
.coverage-section { color: var(--ink); background: var(--brand-pale); }
.coverage-grid { display: grid; grid-template-columns: minmax(18rem, .62fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.coverage-copy .eyebrow-light { color: var(--brand-deep); }
.coverage-copy h2 { padding-right: .1em; font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 900; letter-spacing: -.02em; }
.coverage-copy > p:not(.eyebrow):not(.coverage-disclaimer) { max-width: 34rem; color: var(--muted); font-size: 1.02rem; }
.map-search { display: flex; margin-block: 1.9rem 1rem; flex-direction: column; gap: .45rem; }
.map-search > span { color: var(--ink); font-size: .8rem; font-weight: 700; letter-spacing: .05em; }
.map-search input { height: 3.4rem; }
.map-status { display: flex; min-height: 2.6rem; margin: 0 0 1.5rem; padding: .55rem .85rem; gap: .5rem; align-items: center; border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--brand-soft); font-size: .84rem; }
.ac-wrap { position: relative; }
.ac-list { position: absolute; z-index: 40; top: calc(100% + .35rem); right: 0; left: 0; display: grid; max-height: 16.5rem; margin: 0; padding: .4rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 18px 44px rgba(15, 63, 88, .18); list-style: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ac-list li { display: flex; padding: .6rem .75rem; gap: .8rem; align-items: baseline; justify-content: space-between; border-radius: .55rem; cursor: pointer; }
.ac-list li strong { font-size: .92rem; font-weight: 700; }
.ac-list li small { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.ac-list li.is-active,
.ac-list li:hover { background: var(--brand-soft); }
/* Pusty obszar aria-live zwija sie calkowicie – zostaje w drzewie, zeby czytnik
   ekranu oglosil potwierdzenie, ale nie zostawia pustej belki pod polem. */
.map-status:empty,
.hero-check-status:empty { min-height: 0; padding: 0; margin: 0; background: none; }
.map-status.is-match { color: #0b6b4d; background: #e4f8f2; }
.coverage-disclaimer { margin: 1.1rem 0 0; color: var(--muted); font-size: .74rem; }
.map-panel { position: relative; padding: clamp(.75rem, 2vw, 1.5rem); border: 1px solid var(--brand-border); border-radius: var(--radius-xl); background: radial-gradient(ellipse 60% 55% at 52% 55%, rgba(0, 173, 239, .12), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #ffffff, #f3fafe); }
/* Powiększanie mapy: przesuwamy i skalujemy wyłącznie warstwę wewnętrzną, więc
   strona ani jej przewijanie nie są ruszane. Kadr przycina, a skrypt pilnuje,
   żeby mapa nigdy nie odjechała poza ramkę. */
.map-viewport { position: relative; overflow: hidden; border-radius: var(--radius-lg); touch-action: pan-y; }
.map-viewport.is-zoomed { cursor: grab; }
.map-viewport.is-dragging { cursor: grabbing; touch-action: none; }
.map-stage { --map-scale: 1; transform-origin: 0 0; transition: transform .2s ease; will-change: transform; }
.map-viewport.is-dragging .map-stage { transition: none; }
.map-zoom { position: absolute; z-index: 2; top: clamp(1rem, 2.4vw, 1.8rem); right: clamp(1rem, 2.4vw, 1.8rem); display: flex; gap: .35rem; flex-direction: column; }
.map-zoom-btn { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); color: var(--brand-deep); background: var(--white); box-shadow: var(--shadow-card); font: inherit; font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color var(--ease), color var(--ease), background var(--ease); }
.map-zoom-btn:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-pale); }
.map-zoom-btn:disabled { color: var(--muted); cursor: default; opacity: .5; }
.map-zoom-reset { width: auto; padding-inline: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.map-hint { margin: .6rem 0 0; color: var(--muted); font-size: .78rem; text-align: center; }
html[data-theme="dark"] .map-zoom-btn { border-color: #22364a; color: #7edcff; background: #0c1f30; }
html[data-theme="dark"] .map-zoom-btn:hover:not(:disabled) { border-color: #3fbdf2; background: #12293c; }
.cov-map { display: block; width: 100%; height: auto; max-height: 46rem; }
.cov-map text { font-family: var(--font-ui); font-size: calc(12px / var(--map-scale, 1)); font-weight: 600; fill: #33506a; paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: calc(3px / var(--map-scale, 1)); stroke-linejoin: round; pointer-events: none; }
.cov-map .map-hub text { font-size: calc(13px / var(--map-scale, 1)); font-weight: 700; letter-spacing: .08em; fill: var(--ink); }
.map-powiat { fill: url(#oxy-land); stroke: rgba(0, 145, 200, .6); stroke-width: 1.3; stroke-linejoin: round; }
.land-stop-top { stop-color: rgba(0, 173, 239, .12); }
.land-stop-bottom { stop-color: rgba(0, 130, 190, .3); }
/* Bok wytłoczonej bryły i jej cień. Kolory ustawiamy tu, bo filtr SVG czyta
   flood-color jak zwykłą właściwość CSS – dzięki temu motyw ciemny działa. */
.slab-side { flood-color: #8ed2ee; flood-opacity: .9; }
.slab-shadow { flood-color: #123f5c; flood-opacity: .28; }
.map-powiat-context { fill: #e9f0f5; stroke: rgba(15, 60, 90, .18); stroke-width: 1; stroke-linejoin: round; }
.map-border { fill: none; stroke: rgba(60, 88, 114, .8); stroke-width: 2.4; stroke-dasharray: 8 4; stroke-linejoin: round; }
.cov-map .map-abroad-label { font-size: calc(17px / var(--map-scale, 1)); font-weight: 700; letter-spacing: .42em; fill: rgba(70, 98, 124, .65); stroke: rgba(255, 255, 255, .8); stroke-width: calc(4px / var(--map-scale, 1)); paint-order: stroke; }
html[data-theme="dark"] .map-border { stroke: rgba(200, 225, 245, .55); }
html[data-theme="dark"] .cov-map .map-abroad-label { fill: rgba(200, 225, 245, .55); stroke: rgba(4, 14, 22, .8); }
.map-legend { display: flex; margin: .9rem 0 0; padding: 0 .35rem; gap: .5rem; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .74rem; }
.map-legend i { width: .85rem; height: .85rem; flex: 0 0 auto; border-radius: .25rem; }
.map-legend i + * { margin-right: .6rem; }
.map-legend .lg-active { border: 1px solid rgba(0, 145, 200, .6); background: rgba(0, 173, 239, .25); }
.map-legend .lg-context { margin-left: .6rem; border: 1px solid rgba(15, 60, 90, .3); background: rgba(15, 60, 90, .07); }
.cov-map .map-region-label { font-size: calc(12.5px / var(--map-scale, 1)); font-weight: 700; letter-spacing: .2em; fill: rgba(0, 123, 176, .4); stroke: none; }

/* Trasy leżą na spłaszczonej płycie, więc wyginają się razem z nią.
   pathLength="100" w znaczniku sprawia, że impuls ma tę samą długość na każdej
   trasie niezależnie od odległości miejscowości. */
.map-link,
.map-link-glow,
.map-flow,
.map-route-lit { fill: none; }
.map-link { stroke: rgba(0, 150, 210, .28); stroke-width: 1.1; }
.map-link-glow { stroke: rgba(0, 150, 210, .07); stroke-width: 4.5; }
.map-flow { stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; animation: map-flow-run 4.2s linear infinite; }
@keyframes map-flow-run { to { stroke-dashoffset: 0; } }
.map-flow-1 { animation-delay: -.2s; }
.map-flow-2 { animation-delay: -.9s; }
.map-flow-3 { animation-delay: -1.6s; }
.map-flow-4 { animation-delay: -2.3s; }
.map-flow-5 { animation-delay: -3s; }
.map-flow-6 { animation-delay: -3.7s; }

/* Trasa zapala się przy wskazaniu miejscowości – dopiero to pokazuje wprost,
   że światłowód biegnie z Jarosławia do tego konkretnego punktu. */
.map-route-lit { stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset .55s var(--ease), opacity .25s ease; }
.map-route.is-lit .map-route-lit { stroke-dashoffset: 0; opacity: .95; }
.map-route.is-lit .map-link { stroke: rgba(0, 150, 210, .5); }

/* Perspektywa powietrzna: dalszy plan lekko przygaszony, jak na prawdziwej mapie
   oglądanej pod kątem. Warstwa leży pod pinezkami, więc niczego nie zasłania. */

/* Pinezka: cień na ziemi, maszt i główka z gradientem – kula zamiast krążka. */
.map-node { cursor: pointer; }
.pin-hit { fill: transparent; }
.pin-base { fill: rgba(9, 58, 88, .26); }
.pin-mast { stroke: rgba(0, 122, 175, .8); stroke-width: 1.5; stroke-linecap: round; }
.pin-head { fill: url(#oxy-pin); stroke: #0a82b7; stroke-width: 1.2; }
.pin-stop-top { stop-color: #ffffff; }
.pin-stop-bottom { stop-color: #6ecff2; }
.pin-gloss { fill: rgba(255, 255, 255, .92); pointer-events: none; }
.pin-head,
.pin-gloss { transform-box: fill-box; transform-origin: center; transition: transform .24s cubic-bezier(.4, 0, .2, 1), fill var(--ease); }
.map-node:hover .pin-head,
.map-node:focus-visible .pin-head { transform: scale(1.3); }
.map-node:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.map-node.is-active .pin-head { fill: var(--brand); stroke: #005f8a; transform: scale(1.38); }
.map-node.is-active .pin-mast { stroke: var(--brand-deep); }
.map-node.is-active text { fill: var(--ink); }

/* Przy pełnym widoku podpisujemy tylko większe ośrodki – inaczej nazwy nachodzą
   na siebie. Reszta pokazuje nazwę po najechaniu, wyborze albo po przybliżeniu. */
.lbl-minor text { transition: opacity .3s ease; }
.map-viewport:not(.is-zoomed) .lbl-minor text { opacity: 0; }
.map-viewport:not(.is-zoomed) .lbl-minor:hover text,
.map-viewport:not(.is-zoomed) .lbl-minor:focus-visible text,
.map-viewport:not(.is-zoomed) .lbl-minor.is-active text { opacity: 1; }

.hub-glow { fill: url(#oxy-hubglow); }
.glow-stop-in { stop-color: rgba(0, 173, 239, .28); }
.glow-stop-mid { stop-color: rgba(0, 173, 239, .1); }
.glow-stop-out { stop-color: rgba(0, 173, 239, 0); }
.hub-base { fill: rgba(9, 58, 88, .3); }
.hub-mast { stroke: #0090c9; stroke-width: 2.4; }
.map-hub circle.hub-core { fill: url(#oxy-pin-hub); stroke: #ffffff; stroke-width: 2.2; }
.hub-stop-top { stop-color: #8ae6ff; }
.hub-stop-bottom { stop-color: #0086bd; }
.hub-ring { fill: none; stroke: rgba(0, 173, 239, .55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: hub-pulse 2.8s cubic-bezier(.2, .6, .4, 1) infinite; }
@keyframes hub-pulse { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
/* Drugi, wolniejszy i szerszy krąg – zasięg czyta się jako fala, nie jako mignięcie. */
.hub-ring-slow { stroke: rgba(0, 173, 239, .3); animation-duration: 5.6s; animation-delay: -1.4s; }
@media (prefers-reduced-motion: reduce) { .map-route-lit { transition: none; } }

/* --- Lokalnie + telewizja --- */
.local-section { background: var(--white); }
/* Sekcja stała na dwóch identycznych, bladych kafelkach i przez to nie mówiła nic.
   Ciężar bierze teraz jedna karta – biuro jako miejsce, z adresem złożonym jak szyld.
   Reszta schodzi na drugi plan, więc jest hierarchia zamiast dwóch równych plam. */
.local-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1.25rem; align-items: stretch; }
/* Co się dzieje po wysłaniu. Kolumna obok formularza była pusta, a to jedyne
   miejsce, w którym warto odpowiedzieć na pytanie „co ja właściwie wysyłam".
   Numeracja jest tu uzasadniona – to prawdziwa kolejność zdarzeń, nie ozdoba. */
.lead-next { display: grid; margin: 1.5rem 0 2.25rem; padding: 0; gap: 1rem; list-style: none; }
.lead-next li { display: grid; gap: .8rem; grid-template-columns: 1.6rem 1fr; align-items: start; }
.lead-next span { display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--brand-deep); background: var(--brand-soft); font-size: .74rem; font-weight: 700; }
.lead-next p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.lead-next strong { display: block; margin-bottom: .15rem; color: var(--ink); font-size: .88rem; }

.local-side { display: grid; gap: 1.25rem; align-content: stretch; }
/* Karty boczne rozciągają się do wysokości panelu biura, więc treść wyśrodkowujemy –
   inaczej pusta przestrzeń zbierała się pod spodem i wyglądała na niedokończoną. */
.local-side .local-card { display: flex; flex-direction: column; justify-content: center; }
.local-office { display: flex; padding: clamp(1.75rem, 3vw, 2.6rem); flex-direction: column; border-radius: var(--radius-lg); color: var(--white); background: radial-gradient(ellipse 80% 60% at 12% 0%, rgba(0, 173, 239, .38), rgba(0, 0, 0, 0) 62%), linear-gradient(155deg, #00587f, #05233a); }
.local-office-label { margin: 0; color: #9fe4ff; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.local-office-address { display: grid; margin: .9rem 0 1.6rem; color: var(--white); font-family: var(--font-display); font-style: italic; font-size: clamp(1.7rem, 3.1vw, 2.5rem); font-weight: 900; letter-spacing: -.022em; line-height: 1.06; }
.local-office-facts { display: grid; margin: 0; padding-top: 1.4rem; gap: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.local-office-facts dt { color: rgba(255, 255, 255, .62); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.local-office-facts dd { margin: .3rem 0 0; color: var(--white); font-size: .92rem; font-weight: 600; line-height: 1.5; }
.local-office-phone { display: inline-block; margin: 1.8rem 0 0; color: var(--white); font-family: var(--font-display); font-style: italic; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 900; letter-spacing: -.02em; text-decoration: none; transition: color var(--ease); }
.local-office-phone:hover { color: #7edcff; }
.local-office-note { margin: .9rem 0 0; color: rgba(255, 255, 255, .74); font-size: .8rem; line-height: 1.55; }
.local-card { position: relative; padding: 2rem; overflow: hidden; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); background: var(--brand-pale); }
.local-card > svg { width: 2.1rem; height: 2.1rem; margin-bottom: .9rem; color: var(--brand-deep); }
.local-card h3 { margin-bottom: .55rem; font-size: 1.14rem; font-weight: 700; }
.local-card p { max-width: 34rem; margin: 0; color: var(--muted); font-size: .92rem; }

/* --- Wi‑Fi explainer (pełny cyan) --- */
/* Scena 3D wykracza poza sekcję (teren, droga) – przycinamy, żeby obrót nie rozpychał strony. */
.wifi-explainer { position: relative; overflow: hidden; color: var(--white); background: linear-gradient(160deg, #007bb0, #00587f); }
.wifi-grid { display: grid; grid-template-columns: .85fr 1.05fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.wifi-grid h2 { padding-right: .1em; color: var(--white); font-family: var(--font-display); font-style: italic; font-size: clamp(1.9rem, 3.3vw, 2.85rem); font-weight: 900; letter-spacing: -.02em; }
.wifi-grid > div:last-child > p:not(.eyebrow) { max-width: 44rem; color: rgba(255, 255, 255, .95); font-size: 1rem; font-weight: 600; }
.wifi-grid .eyebrow-light { color: var(--white); }
.wifi-grid ul { display: flex; margin: 2rem 0 0; padding: 0; gap: .6rem; flex-wrap: wrap; list-style: none; }
.wifi-chip { padding: .8rem .95rem; border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--radius-pill); background: transparent; color: inherit; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; transition: background-color .3s ease, border-color .3s ease; }
.wifi-chip:hover { border-color: var(--white); background: rgba(255, 255, 255, .12); }
.wifi-chip:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.wifi-chip[aria-pressed="true"] { border-color: var(--white); background: rgba(255, 255, 255, .22); }
.wifi-modes-hint { margin: .8rem 0 0; color: var(--white); font-size: .72rem; font-weight: 600; }
.wifi-visual { display: flex; min-height: 26rem; flex-direction: column; align-items: center; justify-content: center; }
.h3d-caption { min-height: 1.4em; margin: 1.2rem 0 0; color: var(--white); font-size: .82rem; font-weight: 700; text-align: center; opacity: 0; transition: opacity .35s ease; }
.h3d-caption.is-shown { opacity: 1; }

.is-anim-paused,
.is-anim-paused * { animation-play-state: paused !important; }

/* --- FAQ --- */
.faq-grid { display: grid; grid-template-columns: minmax(17rem, .6fr) minmax(0, 1fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.faq-grid > div:first-child { position: sticky; top: 6.25rem; }
.faq-grid > div:first-child > p:not(.eyebrow) { color: var(--muted); }
.accordion details { border-top: 1px solid var(--line); }
.accordion details:last-child { border-bottom: 1px solid var(--line); }
.accordion summary { display: grid; padding: 1.35rem .2rem; grid-template-columns: 1fr 1.5rem; gap: 1rem; align-items: center; font-weight: 700; list-style: none; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span { position: relative; width: 1.3rem; height: 1.3rem; }
.accordion summary span::before,
.accordion summary span::after { position: absolute; top: 50%; left: 50%; width: .85rem; height: 1.5px; content: ""; background: var(--brand-deep); transform: translate(-50%, -50%); transition: transform var(--ease); }
.accordion summary span::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion details[open] summary span::after { transform: translate(-50%, -50%) rotate(0); }
.accordion details p { max-width: 50rem; padding: 0 3rem 1.4rem .2rem; color: var(--muted); }

/* --- Pas kontaktu i stopka --- */
.contact-band { position: relative; padding-block: clamp(4.5rem, 7vw, 6rem); color: var(--white); background: linear-gradient(170deg, #0a1929, var(--dark)); }
.contact-band::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, rgba(0, 173, 239, 0), var(--brand), rgba(0, 173, 239, 0)); }
.contact-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.contact-band h2 { margin: 0; padding-right: .1em; color: var(--white); font-family: var(--font-display); font-style: italic; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 900; letter-spacing: -.02em; }
.contact-band p:last-child { margin: .8rem 0 0; color: rgba(255, 255, 255, .62); font-size: 1.02rem; }
.contact-links { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.contact-links a:first-child { padding-right: .1em; color: #79ddff; font-family: var(--font-display); font-style: italic; font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 900; line-height: 1.05; text-decoration: none; }
.contact-links a:first-child:hover { color: #a5e9ff; }
.contact-links a:last-child { color: rgba(255, 255, 255, .78); font-size: 1.05rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.contact-links a:last-child:hover { color: #79ddff; border-color: #79ddff; }

.site-footer { padding-block: 4rem 1.5rem; color: rgba(255, 255, 255, .72); background: #030a10; }
.footer-grid { display: grid; padding-bottom: 3rem; grid-template-columns: 1.25fr .7fr 1fr .8fr; gap: 3rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; }
.footer-grid img { width: 6rem; height: auto; margin-bottom: 1rem; }
.footer-grid p { color: var(--white); font-family: var(--font-display); font-style: italic; font-weight: 700; }
/* Hasło marki pod logotypem. Dwie klasy w selektorze, bo `.footer-grid p` jest
   bardziej szczegółowe od pojedynczej klasy i inaczej narzuciłoby krój wyświetlany,
   kursywę i grubość 700. Hasło ma być czytelne, ale nie może krzyczeć głośniej niż
   zdanie o światłowodzie – stoi na stronie, której wartością jest uczciwy dobór. */
.footer-grid .footer-tagline { margin-top: .55rem; color: rgba(255, 255, 255, .72); font-family: var(--font-ui); font-style: normal; font-weight: 400; font-size: .8125rem; letter-spacing: .02em; }
.footer-grid h2 { margin-bottom: 1rem; color: var(--white); font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.footer-grid a { padding-block: .35rem; margin-bottom: .2rem; color: rgba(255, 255, 255, .72); font-size: .82rem; text-decoration: none; }
.footer-grid a:hover { color: #78dcff; }
.footer-grid span { font-size: .8rem; }
.footer-bottom { display: flex; padding-top: 1.5rem; justify-content: space-between; gap: 2rem; color: rgba(255, 255, 255, .58); font-size: .7rem; }
html.no-js [data-planner-start],
html.no-js [data-go-form],
html.no-js [data-coverage-start],
html.no-js .planner-launch,
html.no-js .package-card .button-outline,
html.no-js .site-nav a[href="#sprawdz-adres"],
html.no-js .footer-grid a[href="#sprawdz-adres"],
html.no-js .site-nav a[href="#planner"] { display: none !important; }
.noscript-banner { position: relative; z-index: 100; margin: 0 1rem 1rem; padding: 1rem 1.25rem; border: 2px solid var(--brand); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-active); text-align: center; }
.noscript-banner a { color: var(--brand-deep); }
.no-js .planner-section { display: none; }

/* --- Preloader: minimalny puls marki, znika po załadowaniu --- */
.page-loader { position: fixed; z-index: 2000; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--white); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
html.is-loading .page-loader { opacity: 1; visibility: visible; transition: none; }
/* Chmurka z kroplami danych: sygnał „internet się ładuje" czytelny w ułamku sekundy.
   Sylwetka to dokładnie kontur znaku OXYNET, nie generyczna ikona pogody.
   Wyłącznie transform/opacity – animacja idzie kompozytorem, bez pracy CPU. */
.loader-mark { position: relative; width: 96px; height: 92px; }
.loader-cloud { display: block; width: 96px; height: 63px; color: var(--brand); animation: loader-cloud-pulse 1.15s ease-in-out infinite; }
.loader-drop { position: absolute; bottom: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); opacity: 0; animation: loader-drop-fall 1.15s ease-in infinite; }
.loader-drop-a { left: 34px; }
.loader-drop-b { left: 45px; animation-delay: .13s; }
.loader-drop-c { left: 56px; animation-delay: .26s; }
@keyframes loader-cloud-pulse { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes loader-drop-fall { 0% { opacity: 0; transform: translateY(-12px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
html[data-theme="dark"] .page-loader { background: #071522; }

/* --- Pasek zgody na statystyki: dolny pas, nie modal – nie blokuje treści ani przewijania.
   Odmowa jest równie łatwa jak zgoda (art. 7 RODO), więc oba przyciski mają ten sam rozmiar. --- */
.consent-bar { position: fixed; z-index: 1000; right: .75rem; bottom: .75rem; left: .75rem; display: flex; max-width: 46rem; padding: .9rem 1.1rem; margin-inline: auto; gap: .75rem 1.25rem; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--white); box-shadow: var(--shadow-card); }
/* Klasa na body odsuwa treść spod paska – inaczej zasłaniał główne CTA na telefonie. */
body.has-consent-bar { padding-bottom: 11rem; }
/* Samo dopełnienie chroni tylko koniec dokumentu – przewijanie do pola w środku
   strony musi zostawiać zapas nad paskiem, inaczej fokus ląduje pod nim. */
html:has(body.has-consent-bar) { scroll-padding-bottom: 12rem; }
@media (min-width: 40rem) {
    body.has-consent-bar { padding-bottom: 7rem; }
    html:has(body.has-consent-bar) { scroll-padding-bottom: 8rem; }
}
.consent-bar p { flex: 1 1 17rem; margin: 0; font-size: .84rem; line-height: 1.45; }
.consent-bar-actions { display: flex; flex: 0 0 auto; gap: .5rem; }
.consent-bar-actions .button { min-height: 2.75rem; padding: .5rem 1.1rem; }
@media (max-width: 40rem) {
    .consent-bar { right: .5rem; bottom: .5rem; left: .5rem; padding: .8rem; }
    .consent-bar-actions { width: 100%; }
    .consent-bar-actions .button { flex: 1 1 0; }
}
html[data-theme="dark"] .consent-bar { border-color: #22364a; background: #0c1f30; }

/* --- Panel „Dobierz pakiet za mnie" pod kartami pakietów --- */
.planner-launch { display: flex; margin-top: 2rem; padding: 1.4rem 1.6rem; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); background: var(--brand-pale); }
.planner-launch > div { display: flex; min-width: 16rem; flex-direction: column; gap: .2rem; }
.planner-launch strong { font-size: 1.05rem; }
.planner-launch span { color: var(--muted); font-size: .88rem; }
html[data-theme="dark"] .planner-launch { background: #0e2334; }

/* --- Ekran podziękowania: rysowany ptaszek --- */
.success-mark svg { width: 3.2rem; height: 3.2rem; }
.ok-circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: ok-draw .6s ease-out forwards; }
.ok-check { stroke-dasharray: 34; stroke-dashoffset: 34; animation: ok-draw .35s ease-out .45s forwards; }
@keyframes ok-draw { to { stroke-dashoffset: 0; } }

/* --- Strona polityki --- */
/* Miejsce pod listą podpowiedzi: inaczej zakrywa przycisk stojący tuż pod polem. */
.is-suggesting { margin-bottom: var(--ac-height, 0px); transition: margin-bottom .12s ease; }
@media (prefers-reduced-motion: reduce) { .is-suggesting { transition: none; } }
.legal-page { max-width: 46rem; }
/* Odsyłacz motywu na stronach bez skryptów – obok przycisku powrotu. */
.theme-link { display: inline-flex; min-height: 2.75rem; padding: .5rem .9rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .78rem; font-weight: 700; text-decoration: none; }
.theme-link:hover { border-color: var(--brand); color: var(--brand-deep); }
html[data-theme="dark"] .theme-link { border-color: #22364a; color: #cfe0ee; }
.legal-page h1 { margin-bottom: 1rem; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.12; }
.legal-page h2 { padding-top: 1rem; margin-top: 2.2rem; border-top: 1px solid var(--line); font-size: 1.2rem; }
.legal-page-lead { color: var(--muted); }
.legal-page ul,
.legal-page ol { padding-left: 1.35rem; color: var(--ink-soft); }
.legal-page li { margin-bottom: .5rem; }
/* Regulamin odsyła do „ust. 3 pkt 1" – poziomy list muszą się różnić wizualnie. */
.legal-page ol ol { padding-left: 1.8rem; margin-top: .5rem; list-style-type: lower-alpha; }
.legal-page ol ol li { margin-bottom: .35rem; }
.legal-page ol ol ol { list-style-type: lower-roman; }
.legal-page a { color: var(--brand-deep); }
.legal-page-notice { padding: 1rem 1.2rem; margin: 0 0 1.6rem; border: 1px solid var(--brand-border); border-left: 3px solid var(--brand-deep); border-radius: var(--radius-md); background: var(--brand-pale); color: var(--ink-soft); font-size: .88rem; line-height: 1.6; }
.legal-page-notice strong { display: block; margin-bottom: .3rem; color: var(--brand-deep); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.legal-page-notice ul { margin: .5rem 0 0; color: inherit; }
html[data-theme="dark"] .legal-page-notice { border-color: #22364a; border-left-color: #3fbdf2; background: #0e2334; color: #cfe0ee; }
.legal-toc { padding: 1rem 1.2rem; margin: 0 0 2rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--brand-pale); }
.legal-toc p { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { margin: 0; columns: 2; column-gap: 1.5rem; font-size: .9rem; }
@media (max-width: 34rem) { .legal-toc ol { columns: 1; } }
/* Na najwęższych ekranach nagłówek łamał się w środku wyrazu. */
@media (max-width: 22.5rem) {
    .hero h1 { font-size: clamp(1.85rem, 8.6vw, 2.6rem); hyphens: auto; }
}
/* Bez tego spis treści zostawał jasną kartą na ciemnej stronie – odnośniki miały 2:1. */
html[data-theme="dark"] .legal-toc { border-color: #22364a; background: #0e2334; }
html[data-theme="dark"] .legal-toc p { color: #93a5b6; }

@media (max-width: 70rem) {
    .header-inner { grid-template-columns: 1fr auto auto; gap: 1rem; }
    .nav-toggle { display: block; }
    /* Menu było białym pudełkiem z pięcioma jednakowymi odsyłaczami – bez hierarchii
       i bez wyjścia do działania. Teraz wiersze mają szewrony i włoskowe linie,
       a na dole stoi to, po co ludzie tu przychodzą: zgłoszenie i numer telefonu. */
    .site-nav { position: absolute; top: calc(var(--header-h) - .35rem); right: 1rem; left: 1rem; display: none; padding: .35rem .35rem 1rem; flex-direction: column; gap: 0; align-items: stretch; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 24px 60px rgba(4, 30, 46, .18); }
    .site-nav.is-open { display: flex; animation: nav-drop .22s cubic-bezier(.22, .61, .36, 1); }
    @keyframes nav-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
    .site-nav > a:not(.button) { position: relative; display: flex; padding: .95rem .9rem; align-items: center; justify-content: space-between; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700; }
    .site-nav > a:not(.button) + a:not(.button) { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
    .site-nav > a:not(.button)::after { position: static; display: block; width: .5rem; height: .5rem; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); background: none; content: ""; opacity: .55; transform: rotate(45deg); transition: transform var(--ease), opacity var(--ease); }
    .site-nav > a:not(.button):active { background: var(--brand-pale); }
    .site-nav-out::after { transform: rotate(-45deg) translateY(1px); }
    .site-nav-foot { display: grid; padding: 1rem .35rem 0; margin-top: .6rem; gap: .85rem; border-top: 1px solid var(--line); }
    .site-nav-phone { display: grid; padding: 0 .55rem; gap: .1rem; text-decoration: none; }
    .site-nav-phone strong { color: var(--brand-deep); font-family: var(--font-display); font-style: italic; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; }
    .site-nav-phone span { color: var(--muted); font-size: .72rem; }
    .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .7fr); gap: 2.5rem; }
    .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .package-card { min-height: 0; }
    .package-card.is-featured { transform: none; }
    .package-card.is-featured:hover { transform: translateY(-3px); }
    .answer-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* minmax(0, …) jest tu konieczne. Przy gołym „1fr" minimum toru to szerokość
       minimalnej treści; gdy pierwsza kolumna do niej dobije, zostaje zamrożona,
       suma współczynników spada do 0,62 i druga kolumna dostaje tylko 62 procent
       reszty – przy 900 px zostawiało to 110 px pustki przy prawej krawędzi. */
    .result-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
    .coverage-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 62rem) {
    /* Kolumna z diagnozą Wi-Fi poniżej tej szerokości robi się wąska i nieczytelna –
       lepiej ustawić karty jedna pod drugą, na pełnej szerokości. */
    .result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 56rem) {
    .container { width: min(calc(100% - 2.5rem), var(--container)); }
    .hero { margin-inline: 1.25rem; }
    .hero-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-grid p { padding: 1rem 0; border-top: 1px solid var(--line); border-left: 0; }
    .trust-grid p:first-child { border-top: 0; }
    .split-heading { grid-template-columns: 1fr; gap: 1.5rem; }
    .planner-shell,
    .lead-shell { grid-template-columns: 1fr; gap: 2rem; }
    .planner-intro,
    .lead-intro { position: static; }
    /* Mobile: nagłówek → od razu pola formularza → pakiet/TV/telefon na końcu. */
    .lead-intro { display: contents; }
    .lead-head { order: -2; }
    .lead-form { order: -1; }
    .lead-aside .lead-summary { margin-top: 0; }
    .lead-aside { display: contents; }
    .lead-aside > * { order: 2; }
    .comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .result-cta { align-items: stretch; flex-direction: column; }
    .result-cta .button { width: 100%; }
    .local-grid { grid-template-columns: 1fr; }
    .local-office-address { font-size: 1.75rem; }
    /* Na telefonie model stał nad tekstem, a kafelki lądowały 450 px pod nim –
       poza kadrem. Klikało się i nie było widać, co się zmienia. Teraz najpierw
       tekst z kafelkami, zaraz pod nimi model: oba mieszczą się na jednym ekranie. */
    .wifi-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .wifi-grid > div:last-child { order: 1; }
    .wifi-visual { order: 2; }
    .wifi-grid ul { margin-top: 1.25rem; }
    .wifi-modes-hint { margin-bottom: .25rem; }
    .wifi-visual { min-height: 0; }
    .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
    .faq-grid > div:first-child { position: static; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 47.99rem) {
    html { scroll-padding-top: 4.75rem; }
    :root { --header-h: 4.25rem; }
    body { line-height: 1.58; }
    .container { width: min(calc(100% - 2rem), var(--container)); }
    .section { padding-block: 4rem; }
    .site-nav { top: var(--header-h); right: 1rem; left: 1rem; }
    .brand img { width: 4rem; height: 2.6rem; }
    .header-cta { min-height: 2.75rem; padding: .5rem .78rem; }
    .header-cta .cta-num { display: none; }
    .hero { min-height: auto; margin: 0; border-radius: 0; }
    .hero::before { background: linear-gradient(90deg, rgba(3, 12, 20, .94), rgba(3, 12, 20, .65)); }
    .hero-grid { width: min(calc(100% - 2.5rem), var(--container)); min-height: 0; padding-block: 2.9rem 2.6rem; gap: 1.6rem; }
    .eyebrow-hero { display: none; }
    .hero h1 { font-size: clamp(2.1rem, 9.5vw, 3.2rem); }
    .hero-lead { margin-bottom: 1.4rem; font-size: 1rem; }
    /* Na telefonie jedynym CTA jest karta sprawdzania miejscowości – bez dublowania przycisków. */
    .hero-actions { display: none; }
    .hero-check { padding: 1.25rem; }
    .fiber-lines { width: 70%; }
    .trust-strip { padding-top: 1rem; }
    .planner-card { min-height: 0; margin-inline: -1rem; padding: 1.4rem 1rem; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }
    .answer-grid-2,
    .answer-grid-3,
    .answer-grid-4 { grid-template-columns: 1fr; }
    .answer-card { min-height: 4.4rem; }
    .planner-controls { position: sticky; z-index: 5; bottom: 0; margin: 1.5rem -1rem -1.4rem; padding: .8rem 1rem; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); }
    .planner-controls .button { min-height: 3rem; }
    .result-heading { align-items: flex-start; flex-direction: column; }
    .package-result { margin-inline: -1rem; padding: 1.4rem 1rem; border-right: 0; border-left: 0; border-radius: 0; }
    .package-result-head { align-items: flex-start; flex-direction: column; }
    .result-speed { max-width: none; grid-template-columns: 1fr; gap: .9rem; }
    .result-speed > div { min-width: 0; gap: .7rem; }
    .speed-chip { width: 2.5rem; height: 2.5rem; }
    .speed-chip svg { width: 1.15rem; height: 1.15rem; }
    .result-speed strong { font-size: clamp(2.6rem, 13vw, 3.6rem); }
    .result-speed > div > span { font-size: .75rem; }
    .result-speed i { width: 100%; height: 1px; }
    .wifi-result { padding: 1.4rem; }
    .wifi-art { margin: -1.4rem -1.4rem 1.5rem; }
    .comparison-wrap { padding: 1.2rem; }
    .comparison-heading { flex-direction: column; gap: .5rem; }
    .result-cta { margin-inline: -1rem; border-radius: 0; }
    .lead-form { margin-inline: -1rem; padding: 1.4rem 1rem; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }
    .two-cols,
    .address-grid { grid-template-columns: 1fr; }
    .field-city,
    .field-street { grid-column: auto; }
    .legal-box { padding: 1rem; }
    .check-row { grid-template-columns: 1.25rem 1fr; }
    /* Karuzela nie może być szersza od kontenera – inaczej rozpycha dokument w poziomie. */
    /* overflow-y MUSI być podane wprost. Przy „auto" w poziomie druga oś przestaje
       być „visible" i wylicza się na „auto", więc karuzela staje się kontenerem
       przewijania także w pionie – i połyka gest palcem w dół, zamiast przewinąć
       stronę. Nie ma tu czego przewijać pionowo, więc hidden nic nie ucina. */
    .package-grid { display: flex; padding: .5rem 0 1.5rem; gap: .8rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
    .package-card { min-width: min(20rem, 84vw); scroll-snap-align: start; }
    .coverage-grid { gap: 2rem; }
    .map-panel { margin-inline: -.35rem; }
    .cov-map text { font-size: calc(13px / var(--map-scale, 1)); }
    /* Na telefonie przy pełnym widoku podpisujemy tylko wybraną miejscowość –
       reszta by się zlała. Po przybliżeniu nazwy wracają, tak jak na dużym ekranie. */
    .map-viewport:not(.is-zoomed) .cov-map .lbl-minor text { opacity: 0; }
    .map-viewport:not(.is-zoomed) .cov-map .lbl-minor.is-active text { opacity: 1; }
    .contact-band-inner { align-items: flex-start; flex-direction: column; }
    .contact-links { align-items: flex-start; }
    .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .footer-bottom { flex-direction: column; gap: .5rem; }
}

@media (max-width: 23.5rem) {
    .hero h1 { font-size: 2.2rem; }
    .package-card { min-width: 88vw; }
}

@media (min-width: 100rem) {
    :root { --container: 94rem; }
    .hero { min-height: 47rem; }
    .hero-grid { padding-inline: 2rem; }
}

/* Motyw ciemny sterowany atrybutem html[data-theme] – JS rozstrzyga auto/system,
   przełącznik w headerze pozwala wymusić jasny lub ciemny. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; --line: #22364a; --brand-border: #1d3c52; --surface: #0e1d2c; --muted: #8aa0b6; --ink-soft: #b7c6d6; --ink: #e6eef5; --brand-deep: #3fbdf2; --brand-dark: #4fc4f0; --shadow-card: 0 10px 34px rgba(0, 0, 0, .35); --shadow-active: 0 16px 48px rgba(0, 173, 239, .12); }
html[data-theme="dark"] body { color: #e6eef5; background: #071522; }
html[data-theme="dark"] ::selection { color: #06141f; background: #7edcff; }
html[data-theme="dark"] .site-header { background: rgba(7, 21, 34, .94); }
html[data-theme="dark"] .site-header.is-sticky { box-shadow: 0 1px 0 #16293a; }
html[data-theme="dark"] .site-nav { border-color: transparent; background: transparent; }
html[data-theme="dark"] .site-nav a:not(.button) { color: #dbe7f1; }
html[data-theme="dark"] .nav-toggle { border-color: #22364a; color: #cfe0ee; background: #0c1f30; }
html[data-theme="dark"] .theme-toggle { border-color: #22364a; color: #cfe0ee; background: #0c1f30; }
html[data-theme="dark"] .theme-toggle:hover { border-color: #3fbdf2; color: #7edcff; }
html[data-theme="dark"] .planner-section,
html[data-theme="dark"] .result-section,
html[data-theme="dark"] .success-section { background: #0a1a29; }
html[data-theme="dark"] .packages-section,
html[data-theme="dark"] .local-section,
html[data-theme="dark"] .lead-section { background: #071522; }
html[data-theme="dark"] .trust-ico { background: #0e2334; }
html[data-theme="dark"] .speed-chip { color: #7edcff; background: #123349; }
html[data-theme="dark"] .planner-card,
html[data-theme="dark"] .package-result,
html[data-theme="dark"] .wifi-result,
html[data-theme="dark"] .comparison-wrap,
html[data-theme="dark"] .pkg-pick,
html[data-theme="dark"] .package-card,
html[data-theme="dark"] .lead-form,
html[data-theme="dark"] .success-card,
html[data-theme="dark"] .answer-card { background: #0c1f30; }
html[data-theme="dark"] .local-card { background: #0e2334; }
html[data-theme="dark"] .form-section-heading > span,
html[data-theme="dark"] .q-icon { background: #123349; }
html[data-theme="dark"] .answer-card:has(input:checked) { background: #0e2a3d; }
html[data-theme="dark"] .answer-marker { border-color: #3f5a70; background: #0c1f30; }
/* W trybie ciemnym błędne pole miało obrys nieodróżnialny od poprawnego. */
html[data-theme="dark"] [aria-invalid="true"],
html[data-theme="dark"] .lead-form :invalid:not(:placeholder-shown) { border-color: #ff8a80; box-shadow: 0 0 0 1px #ff8a80; }
html[data-theme="dark"] .field-error { color: #ff8a80; }
html[data-theme="dark"] input,
html[data-theme="dark"] select { border-color: #2b4257; color: #e6eef5; background: #0c1f30; }
html[data-theme="dark"] input::placeholder { color: rgba(230, 238, 245, .38); }
html[data-theme="dark"] input:hover,
html[data-theme="dark"] select:hover { border-color: #3f6079; }
html[data-theme="dark"] .optional-block { border-color: #2b4257; }
html[data-theme="dark"] .legal-box { background: #0e1d2c; }
/* Karta zbiorczej zgody miała jasne tło marki także w ciemnym motywie, więc biały
   tekst opisu stawał się na niej nieczytelny. To samo dotyczy sekcji nieobowiązkowej. */
html[data-theme="dark"] .legal-box .check-all { border-color: rgba(0, 173, 239, .45); background: #10314a; }
html[data-theme="dark"] .legal-box .check-all strong { color: #7edcff; }
html[data-theme="dark"] .legal-optional { border-top-color: #22364a; }
html[data-theme="dark"] .legal-optional-head { color: rgba(198, 220, 236, .72); }
html[data-theme="dark"] .check-row-soft strong { color: rgba(214, 232, 246, .88); }
html[data-theme="dark"] .legal-required .check-row + .check-row { border-top-color: #22364a; }
html[data-theme="dark"] .lead-next span { color: #7edcff; background: #123349; }
html[data-theme="dark"] .lead-next strong { color: var(--white); }
html[data-theme="dark"] .headroom-note,
html[data-theme="dark"] .lead-summary,
html[data-theme="dark"] .lead-tv-hint,
html[data-theme="dark"] .check-row-tv,
html[data-theme="dark"] .pkg-pick.is-chosen { background: #0e2a3d; }
/* Polecenie w ciemnym motywie: w spoczynku to samo tło co sąsiednie kafelki,
   po zaznaczeniu jaśniejsze – ta sama różnica, co w motywie jasnym. */
html[data-theme="dark"] .lead-referral,
html[data-theme="dark"] .referral-field .check-row { background: #0e2a3d; }
html[data-theme="dark"] .lead-referral.is-set,
html[data-theme="dark"] .referral-field .check-row:has(input:checked) { background: #10314a; }
html[data-theme="dark"] .lead-referral.is-set strong { color: #7edcff; }
html[data-theme="dark"] .pkg-pick-speed { color: #cfeeff; }
html[data-theme="dark"] .headroom-note > span { background: #0c1f30; }
html[data-theme="dark"] .headroom-upsell { color: #7edcff; background: #123349; }
html[data-theme="dark"] .package-badge,
html[data-theme="dark"] .package-card-label { color: #7edcff; background: #123349; }
html[data-theme="dark"] .package-card.is-featured .package-card-label { color: var(--white); background: var(--action); }
html[data-theme="dark"] .button-outline { border-color: var(--brand); color: #7edcff; background: transparent; }
html[data-theme="dark"] .button-outline:hover { color: #a5e6ff; background: #0e2a3d; }
html[data-theme="dark"] .button:hover { border-color: #0c85c4; background: #0c85c4; }
html[data-theme="dark"] progress,
html[data-theme="dark"] progress::-webkit-progress-bar { background: #123349; }
html[data-theme="dark"] .privacy-note span,
html[data-theme="dark"] .success-mark { color: #7fe0c0; background: #0d2b22; }
html[data-theme="dark"] .form-message { color: #ff9b93; }
html[data-theme="dark"] .form-message.is-success { color: #7fe0c0; }
html[data-theme="dark"] .ac-list { border-color: #22364a; background: #0c1f30; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .ac-list li strong { color: #e6eef5; }
html[data-theme="dark"] .ac-list li.is-active,
html[data-theme="dark"] .ac-list li:hover { background: #0e2a3d; }
html[data-theme="dark"] .noscript-banner { background: #0c1f30; }
html[data-theme="dark"] .skip-link { background: #00263c; }
html[data-theme="dark"] .contact-band { border-top: 1px solid #16293a; background: #0c1f30; }

/* Mapa: nocna odsłona w trybie ciemnym. */
html[data-theme="dark"] .coverage-section { color: var(--white); background: var(--night); }
html[data-theme="dark"] .coverage-copy .eyebrow-light { color: #8bdfff; }
html[data-theme="dark"] .coverage-copy h2 { color: var(--white); }
html[data-theme="dark"] .coverage-copy > p:not(.eyebrow):not(.coverage-disclaimer) { color: rgba(255, 255, 255, .74); }
html[data-theme="dark"] .map-search > span { color: rgba(255, 255, 255, .78); }
html[data-theme="dark"] .map-search input { border-color: rgba(143, 222, 252, .4); color: var(--white); background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .map-search input::placeholder { color: rgba(255, 255, 255, .38); }
html[data-theme="dark"] .map-search input:hover { border-color: rgba(143, 222, 252, .65); }
html[data-theme="dark"] .map-status { color: rgba(255, 255, 255, .72); background: rgba(0, 173, 239, .1); }
html[data-theme="dark"] .map-status.is-match { color: #a8ecd2; background: rgba(63, 224, 175, .12); }
html[data-theme="dark"] .coverage-disclaimer { color: rgba(255, 255, 255, .5); }
html[data-theme="dark"] .map-panel { border-color: rgba(143, 222, 252, .22); background: radial-gradient(ellipse 60% 55% at 52% 55%, rgba(0, 90, 140, .35), rgba(5, 16, 25, 0) 70%), linear-gradient(180deg, rgba(8, 26, 40, .6), rgba(5, 16, 25, .9)); }
html[data-theme="dark"] .cov-map text { fill: rgba(255, 255, 255, .8); stroke: rgba(4, 14, 22, .92); }
html[data-theme="dark"] .cov-map .map-hub text { fill: #cfeeff; }
html[data-theme="dark"] .land-stop-top { stop-color: rgba(0, 116, 172, .2); }
html[data-theme="dark"] .land-stop-bottom { stop-color: rgba(0, 140, 205, .36); }
html[data-theme="dark"] .map-powiat { stroke: rgba(79, 196, 240, .55); }
html[data-theme="dark"] .slab-side { flood-color: #0b4c6e; flood-opacity: .95; }
html[data-theme="dark"] .slab-shadow { flood-color: #000d16; flood-opacity: .55; }
html[data-theme="dark"] .map-powiat-context { fill: rgba(148, 190, 214, .05); stroke: rgba(148, 190, 214, .16); }
html[data-theme="dark"] .map-legend { color: rgba(255, 255, 255, .55); }
html[data-theme="dark"] .map-legend .lg-active { border-color: rgba(79, 196, 240, .6); background: rgba(0, 116, 172, .35); }
html[data-theme="dark"] .map-legend .lg-context { border-color: rgba(148, 190, 214, .3); background: rgba(148, 190, 214, .08); }
html[data-theme="dark"] .cov-map .map-region-label { fill: rgba(159, 228, 255, .4); stroke: none; }
html[data-theme="dark"] .map-link { stroke: rgba(0, 173, 239, .24); }
html[data-theme="dark"] .map-link-glow { stroke: rgba(0, 173, 239, .08); }
html[data-theme="dark"] .pin-stop-top { stop-color: #d9f6ff; }
html[data-theme="dark"] .pin-stop-bottom { stop-color: #1a8dc0; }
html[data-theme="dark"] .pin-head { stroke: #6fd6fb; }
html[data-theme="dark"] .pin-mast { stroke: rgba(126, 220, 255, .75); }
html[data-theme="dark"] .pin-base,
html[data-theme="dark"] .hub-base { fill: rgba(0, 8, 14, .5); }
html[data-theme="dark"] .hub-mast { stroke: #7edcff; }
html[data-theme="dark"] .hub-stop-top { stop-color: #b4f0ff; }
html[data-theme="dark"] .hub-stop-bottom { stop-color: #0090c9; }
html[data-theme="dark"] .map-node.is-active .pin-head { fill: var(--brand); stroke: var(--white); }
html[data-theme="dark"] .map-node.is-active .pin-mast { stroke: var(--white); }
html[data-theme="dark"] .map-node.is-active text { fill: var(--white); }
html[data-theme="dark"] .map-hub circle.hub-core { stroke: #dff6ff; }
html[data-theme="dark"] .coverage-section .ac-list { border-color: rgba(143, 222, 252, .35); background: #0b2436; }

@media (max-width: 70rem) {
    html[data-theme="dark"] .site-nav { border-color: #22364a; background: #0c1f30; }
    html[data-theme="dark"] .site-nav > a:not(.button) + a:not(.button),
    html[data-theme="dark"] .site-nav-foot { border-top-color: #22364a; }
    html[data-theme="dark"] .site-nav > a:not(.button):active { background: #12293c; }
    html[data-theme="dark"] .site-nav-phone strong { color: #7edcff; }
}

@media (max-width: 47.99rem) {
    html[data-theme="dark"] .planner-controls { background: rgba(7, 21, 34, .95); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .hub-ring { animation: none; opacity: 0; }
    .map-flow { animation: none; opacity: 0; }
}

@media print {
    .site-header,
    .hero,
    .trust-strip,
    .planner-section,
    .lead-section,
    .packages-section,
    .coverage-section,
    .local-section,
    .wifi-explainer,
    .faq-section,
    .contact-band,
    .site-footer,
    .result-cta,
    .text-button { display: none !important; }
    .consent-bar { display: none !important; }
    body.has-consent-bar { padding-bottom: 0 !important; }
    .result-section[hidden] { display: none !important; }
    .result-section { display: block !important; padding: 0; background: white; }
    .package-result,
    .wifi-result { box-shadow: none; break-inside: avoid; }
}
/* Numeracja i litery zachowane z zatwierdzonych dokumentów PDF. */
.legal-document .legal-clause { padding-left: 1.7em; text-indent: -1.7em; }
.legal-document .legal-subclause { margin-left: 1.7em; padding-left: 1.5em; text-indent: -1.5em; }
.legal-document p { overflow-wrap: anywhere; }

.legal-page a.button { color: #fff; text-decoration: none; }

/* Przegląd UX: czytelne błędy, stabilne pola i sceny bez ciężkich warstw 3D. */
.form-fallback { padding: 1rem; border: 1px solid var(--brand-border); border-radius: .75rem; color: var(--ink); background: var(--brand-pale); }
html[data-theme="dark"] .form-fallback { background: #0e2a3d; }
.field-error { position: static; display: block; margin-top: .4rem; }
.field-grid label { padding-bottom: .5rem; }
input, select { scroll-margin-block: 7rem 5rem; }
html[data-theme="dark"] .field-error { color: #ffaaa3; }
html[data-theme="dark"] input[aria-invalid="true"] { border-color: #ffaaa3; }
.hero-lead strong { color: #fff; font-weight: 700; white-space: nowrap; }

/* Mapa: przestrzenna płyta, osobny pasek narzędzi i etykiety układane bez kolizji. */
.map-panel { padding: 1.35rem; overflow: hidden; border-color: #bbdce9; background: #f8fcfe; box-shadow: 0 24px 65px -32px #164d6a66, inset 0 1px 0 #fff; }
.map-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .3rem 1.25rem; border-bottom: 1px solid var(--brand-border); }
.map-panel-heading span:first-child { display: block; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .14em; }
.map-panel-heading h3 { margin: .35rem 0 0; font-size: 1.35rem; }
.map-zoom { position: relative; top: auto; right: auto; flex-direction: row; align-items: center; justify-content: flex-end; margin: 1rem .1rem 1.15rem; }
.map-zoom-btn { width: 2.75rem; height: 2.75rem; border-radius: .7rem; box-shadow: none; }
.map-zoom-reset { width: auto; padding-inline: .85rem; font-size: .75rem; }
.map-viewport { margin-top: 0; background: #edf4f7; }
html[data-theme="dark"] .map-viewport { background: #0d2637; }
.map-stage { transition: none; }
.map-depth .map-powiat { fill: #3383a2; stroke: #4d95b0; }
.slab-side { flood-color: #469ebc; flood-opacity: 1; }
.land-stop-top { stop-color: #b2e3e9; }
.land-stop-bottom { stop-color: #62b7d3; }
.map-powiat { stroke: #e7faff; stroke-width: 1.7; }
.cov-map .map-region-label, .cov-map .map-abroad-label { display: none; }
.map-label-box { fill: #ffffff; stroke: #c4dce7; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 2px 3px #14384915); }
.map-label-leader { fill: none; stroke: #658ca1; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.cov-map .map-node text { fill: #203e51; font-family: var(--font-ui); font-weight: 700; letter-spacing: 0; pointer-events: none; }
.cov-map .map-node.is-active .map-label-box, .cov-map .map-hub .map-label-box { fill: #006f9f; stroke: #006f9f; }
.cov-map .map-node.is-active text, .cov-map .map-hub text { fill: #fff; }
.map-selection { position: relative; display: flex; padding: 1rem; margin-top: .5rem; gap: 1rem; align-items: center; justify-content: space-between; border: 1px solid var(--brand-border); border-radius: 1rem; background: #ffffffd9; }
.map-selection > div { min-width: 0; }
.map-selection span:not([aria-hidden]) { display: block; margin-bottom: .2rem; color: var(--muted); font-size: .72rem; }
.map-selection strong { display: block; color: var(--ink); font-size: .98rem; overflow-wrap: anywhere; line-height: 1.25; }
.map-selection .button { flex-shrink: 0; min-height: 2.75rem; padding: .6rem .8rem; font-size: .7rem; }
html[data-theme="dark"] .map-panel { border-color: #24465d; background: #0a2031; box-shadow: 0 24px 65px -32px #000; }
html[data-theme="dark"] .map-selection { background: #0d2639; }
html[data-theme="dark"] .map-label-box { fill: #14344a; stroke: #356077; }
html[data-theme="dark"] .cov-map .map-node text { fill: #e6f5ff; }
html[data-theme="dark"] .map-node.is-active .map-label-box, html[data-theme="dark"] .map-hub .map-label-box { fill: #006f9f; stroke: #60d5f5; }
html[data-theme="dark"] .land-stop-top { stop-color: #337c8e; }
html[data-theme="dark"] .land-stop-bottom { stop-color: #17546c; }
html[data-theme="dark"] .map-powiat { stroke: #5fabc1; }
html[data-theme="dark"] .slab-side { flood-color: #123b54; }

/* Dom w przekroju: czytelny model architektoniczny i trzy rzeczywiste układy sieci. */
.wifi-explainer, html[data-theme="dark"] .wifi-explainer { background: radial-gradient(ellipse at 28% 44%,#153f55,transparent 58%),#061725; }
.wifi-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(2rem,4.5vw,5rem); }
.wifi-visual { min-width: 0; width: 100%; }
.wifi-model { width: 100%; padding: 1.3rem; border: 1px solid #2a4c60; border-radius: 1.75rem; background: radial-gradient(ellipse at 50% 30%,#163e54a1,transparent 65%),#0a2032; box-shadow: inset 0 1px 0 #79c3df13,0 25px 55px -30px #000; }
.wifi-model-heading { padding: .15rem .35rem .75rem; }
.wifi-model-heading > span { color: #a2cadb; font-size: .66rem; font-weight: 700; letter-spacing: .18em; }
.wifi-house { display: block; width: 100%; height: auto; overflow: visible; }
.wifi-wave-set { fill: #09c1f40d; stroke: #55def3; stroke-width: 1.4; pointer-events: none; }
.wifi-wave-set ellipse:nth-child(2) { opacity: .55; }
.wifi-wave-set ellipse:nth-child(3) { opacity: .25; }
.wifi-extra-ap, .wifi-extra-mesh, .wifi-coverage-ap, .wifi-coverage-mesh, .wifi-ethernet-link, .wifi-mesh-link { opacity: 0; transition: opacity .3s ease; }
.is-mode-ap .wifi-extra-ap, .is-mode-ap .wifi-coverage-ap, .is-mode-ap .wifi-ethernet-link,
.is-mode-mesh .wifi-extra-ap, .is-mode-mesh .wifi-extra-mesh, .is-mode-mesh .wifi-coverage-ap, .is-mode-mesh .wifi-coverage-mesh, .is-mode-mesh .wifi-mesh-link { opacity: 1; }
.wifi-coverage-main { opacity: .8; }
.is-mode-ap .wifi-coverage-main, .is-mode-mesh .wifi-coverage-main { opacity: .6; }
.wifi-model-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 1.2rem; padding-top: .5rem; color: #bad5e3; font-size: .73rem; }
.wifi-model-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.wifi-model-legend i { display: inline-block; width: 1.1rem; height: 3px; background: #56d9ff; }
.wifi-model-legend .legend-air { height: .6rem; width: .9rem; border: 1px solid #56d9ff; border-radius: 50%; background: transparent; }
.wifi-model .h3d-caption { min-height: 3.2em; margin: 1.15rem auto .5rem; max-width: 30rem; color: #d3e7ef; font-size: .84rem; line-height: 1.5; text-align: center; }
.wifi-model-note { margin: .7rem 0 .1rem; color: #93b3c5; font-size: .69rem; text-align: center; }
.wifi-grid > div:last-child > p:not(.eyebrow) { color: #bdd4e1; font-weight: 400; }
.wifi-grid .eyebrow-light { color: #7bd9f7; }
.wifi-grid ul { display: grid; gap: .7rem; }
.wifi-chip { position: relative; width: 100%; padding: 1rem 1.1rem 1rem 2.8rem; border: 1px solid #34556c; border-radius: .9rem; color: #d7e7ef; font-size: .92rem; text-align: left; }
.wifi-chip::before { position: absolute; top: 50%; left: 1.1rem; width: .85rem; height: .85rem; border: 1px solid #83aabb; border-radius: 50%; content: ""; transform: translateY(-50%); }
.wifi-chip[aria-pressed="true"] { border-color: #4fcff1; background: #123950; }
.wifi-chip[aria-pressed="true"]::before { border: 3px solid #14394d; background: #61ddfa; box-shadow: 0 0 0 1px #61ddfa; }
@media (max-width: 56rem) {
    .wifi-grid { grid-template-columns: 1fr; gap: 2rem; }
    .wifi-visual { order: 2; }
}
@media (max-width: 47.99rem) {
    .map-panel { padding: .8rem; margin-inline: -.25rem; }
    .map-panel-heading { gap: .5rem; }
    .map-selection { flex-direction: column; align-items: stretch; gap: .7rem; padding: .8rem; }
    .map-selection .button { width: 100%; }
    .wifi-model { padding: .9rem .5rem; border-radius: 1.2rem; }
    .wifi-model-heading, .wifi-model-note { padding-inline: .4rem; }
    .wifi-model .h3d-caption { padding-inline: .5rem; min-height: 4.6em; }
    .wifi-chip { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wifi-extra-ap, .wifi-extra-mesh, .wifi-coverage-ap, .wifi-coverage-mesh, .wifi-ethernet-link, .wifi-mesh-link { transition: none; }
}

/* Przepływ danych, fale i spokojny ruch całego przekroju. Pauza obejmuje wszystkie warstwy. */
.wifi-model-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.wifi-motion-toggle { flex-shrink: 0; min-height: 2.4rem; padding: .4rem .65rem; border: 1px solid #386277; border-radius: .6rem; color: #c5e8f4; background: #123145; font: inherit; font-size: .72rem; cursor: pointer; }
.wifi-motion-toggle:hover { border-color: #63d6f3; }
.home-cable-glow { fill: none; stroke: #19aee0; stroke-width: 9; opacity: .22; stroke-linejoin: round; }
.home-data-track { fill: none; stroke: #1695bc; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.home-data-stream { fill: none; stroke: #b9f7ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 88; animation: home-data 2.7s linear infinite; }
@keyframes home-data { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.home-data-dot { filter: drop-shadow(0 0 4px #62eaff); }

.wifi-wave-set ellipse { transform-box: fill-box; transform-origin: center; animation: home-wave 3.3s ease-out infinite; stroke-width: 2; fill: #30cfee13; }
.wifi-wave-set ellipse:nth-child(2) { animation-delay: -1.1s; }
.wifi-wave-set ellipse:nth-child(3) { animation-delay: -2.2s; }
@keyframes home-wave { 0% { transform: scale(.38); opacity: 0; } 18% { opacity: .85; } 100% { transform: scale(1.3); opacity: 0; } }
.wifi-device circle { animation: home-led 1.4s ease-in-out infinite; }
@keyframes home-led { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.wifi-ethernet-link, .wifi-mesh-link { animation: home-link 1.8s linear infinite; }
@keyframes home-link { to { stroke-dashoffset: -36; } }
.wifi-model.is-motion-paused *, .wifi-model.is-motion-paused *::before, .wifi-model.is-motion-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .home-diorama, .home-data-stream, .home-data-dot, .wifi-wave-set ellipse, .wifi-device circle, .wifi-ethernet-link, .wifi-mesh-link { animation: none; }
    .home-data-dot, .wifi-motion-toggle { display: none; }
    .wifi-wave-set ellipse { opacity: .55; }
}

/* Obracany przekrój domu: podpisy mają własne miejsce obok bryły. */
.wifi-scene-stage { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 4px; }
.has-orbit .wifi-scene-stage { cursor: grab; }
.has-orbit .wifi-scene-stage.is-dragging { cursor: grabbing; }
.home-diorama { animation: none; }
.home-data-dot { offset-path: none; animation: none; }
.home-callout-lines { fill: none; stroke: #779fb3; stroke-width: 1; pointer-events: none; }
.wifi-callout-label { position: absolute; left: 80.3%; right: 1%; padding: .4rem .5rem; transform: translateY(-50%); color: #e1f4fc; border: 0; border-radius: .35rem; background: #102d40; font-size: clamp(.75rem, .9vw, .85rem); font-weight: 700; line-height: 1.35; pointer-events: none; }
.wifi-callout-label span { display: block; color: #9dbdce; font-size: .85em; font-weight: 400; }
.wifi-callout-floor { top: 33.33%; }
.wifi-callout-router { top: 67.59%; }
.wifi-view-controls { display: none; margin: .1rem .3rem 1.2rem; padding-top: .8rem; gap: .5rem; align-items: center; justify-content: center; border-top: 1px solid #2a4c60; }
.has-orbit .wifi-view-controls { display: flex; }
.wifi-view-controls p { margin: 0; color: #aacbdc; font-size: .75rem; text-align: center; }
.wifi-view-controls button { min-width: 2.5rem; min-height: 2.5rem; padding: .3rem .55rem; border: 1px solid #386277; border-radius: .5rem; color: #d7f1fc; background: #123145; font: inherit; cursor: pointer; }
.wifi-view-controls button:hover { border-color: #69d9f2; }
.wifi-view-controls [data-wifi-reset] { margin-left: auto; font-size: .68rem; }
.wifi-model-legend { padding-top: .25rem; }
@media (max-width: 35rem) {
    .wifi-view-controls { flex-wrap: wrap; gap: .35rem; }
    .wifi-view-controls p { font-size: .7rem; }
    .wifi-view-controls [data-wifi-reset] { margin-left: 0; }
    .wifi-callout-label { padding-inline: .3rem; }
}
/* Lewa kolumna zgłoszenia: większe, spójne ikony i uporządkowany przebieg kontaktu. */
.lead-head-copy { margin: 1.25rem 0 0; max-width: 34rem; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.lead-aside .lead-summary { margin-block: 1.6rem; border-radius: .8rem; padding: 1.2rem 1.35rem; gap: .25rem; }
.lead-tv-hint { gap: 1rem; padding: 1.3rem; margin-bottom: 1.1rem; border-radius: .8rem; align-items: center; }
.lead-tv-hint > .service-icon, .local-card > .service-icon { width: 3rem; height: 2.5rem; color: var(--brand-deep); }
.lead-tv-hint strong { font-size: 1rem; }
.lead-tv-hint span { margin-top: .35rem; font-size: .85rem; }
.lead-referral { display: grid; grid-template-columns: 3rem minmax(0,1fr); column-gap: 1rem; padding: 1.3rem; margin-bottom: 1.6rem; border-radius: .8rem; }
.lead-referral > :not(svg) { grid-column: 2; }
.lead-referral > svg { grid-column: 1; grid-row: 1 / 4; width: 3rem; height: 2.5rem; margin-top: .25rem; color: var(--brand-deep); }
.lead-referral > small { grid-column: 1 / -1; margin-top: .85rem; padding-top: .85rem; }
.lead-referral p { font-size: .85rem; }
.lead-next-heading { margin: 2rem 0 .85rem; color: var(--ink); font-size: .95rem; font-weight: 700; }
.lead-next { gap: 0; margin: 0 0 1.75rem; }
.lead-next li { position: relative; gap: 1rem; grid-template-columns: 2rem 1fr; padding-block: .6rem 1.1rem; }
.lead-next li:not(:last-child)::before { position: absolute; left: .95rem; top: 2.5rem; bottom: -.35rem; width: 1px; background: var(--brand-border); content: ""; }
.lead-next span { width: 2rem; height: 2rem; border-radius: .5rem; }
.lead-next strong { font-size: .95rem; }
.lead-next p { font-size: .84rem; }
.lead-intro address { padding-top: 1.3rem; border-top: 1px solid var(--brand-border); }
@media (max-width: 35rem) {
    .lead-tv-hint, .lead-referral { padding: 1rem; gap: .75rem; }
    .lead-head-copy { font-size: .9rem; }
}

.wifi-model:not(.has-orbit) .home-data-dot { display: none; }

@media (min-width: 56rem) and (max-height: 78rem) { .lead-intro { position: static; } }

/* Jedno świadome zaznaczenie, cztery niezależne decyzje w rozwijanych szczegółach. */
.consent-all { padding: .25rem 0 .8rem; }
.consent-all > span > span { display: block; margin-top: .4rem; font-size: .83rem; line-height: 1.6; }
.consent-documents { margin: 0 0 1.1rem 2rem; font-size: .82rem; }
.consent-documents a { color: var(--brand-deep); text-underline-offset: .2em; }
.consent-details { border-top: 1px solid var(--line); }
.consent-details > summary { display: grid; grid-template-columns: 1rem minmax(0,1fr); padding: 1rem 0 .3rem; gap: .35rem .5rem; list-style: none; align-items: center; cursor: pointer; color: var(--ink); font-size: .85rem; font-weight: 700; }
.consent-details > summary::before { content: "+"; font-size: 1.25rem; font-weight: 400; }
.consent-details[open] > summary::before { content: "−"; }
.consent-details > summary > [data-consent-count] { grid-column: 2; color: var(--muted); font-size: .73rem; font-weight: 400; }
.consent-details[open] > summary { padding-bottom: 1.1rem; }
.consent-details > summary::-webkit-details-marker { display: none; }
@media (min-width: 48rem) {
    .consent-details > summary { grid-template-columns: 1rem minmax(0,1fr) auto; }
    .consent-details > summary > [data-consent-count] { grid-column: 3; }
}
.turnstile-wrap { min-width: 0; margin: 1.5rem 0; }
.turnstile-status { color: var(--muted); font-size: .8rem; line-height: 1.5; margin: .65rem 0 0; }
.turnstile-wrap .text-button { margin-top: .6rem; }
.lead-tv-hint > .service-icon, .lead-referral > .service-icon { width: 2.4rem; height: 2rem; }
.lead-referral { grid-template-columns: 2.4rem minmax(0,1fr); }
html[data-theme="dark"] .consent-details > summary { color: #e6eef5; }

/* Urządzenia mają własny kontrast; jaśniejsze fale oznaczają aktywny nadajnik. */
.wifi-wave-set ellipse { stroke-width: 3; fill: #30cfee20; }
.wifi-coverage-ap, .wifi-coverage-mesh { stroke: #23d7f5; }
.wifi-coverage-ap ellipse, .wifi-coverage-mesh ellipse { fill: #00c6eb24; }
.wifi-device { filter: drop-shadow(0 2px 2px #001522a0); }
.wifi-callout-floor { color: #78e6f7; }