/* lupikmedia.pl – strona firmowa Lupik Media. Barwy jak demo.lupikmedia.pl (wejscie/): granat nocy, błękit Lupika, pomarańcz z kropki znaku.
   Krój: Playfair Display (nagłówki H1/H2 – elegancki serif) + Manrope (tekst, UI). Zaokrąglenia maks. 6 px, umiar w efektach. Fonty lokalne. */
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(../fonts/manrope-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Manrope'; font-weight: 400; font-display: swap; src: url(../fonts/manrope-latin-400-normal.woff2) format('woff2'); 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: 'Manrope'; font-weight: 600; font-display: swap; src: url(../fonts/manrope-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Manrope'; font-weight: 600; font-display: swap; src: url(../fonts/manrope-latin-600-normal.woff2) format('woff2'); 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: 'Manrope'; font-weight: 700; font-display: swap; src: url(../fonts/manrope-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Manrope'; font-weight: 700; font-display: swap; src: url(../fonts/manrope-latin-700-normal.woff2) format('woff2'); 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: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/playfair-display-400-700-normal-latin-ext.woff2) format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/playfair-display-400-700-normal-latin.woff2) format('woff2'); 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: 'Playfair Display'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/playfair-display-400-600-italic-latin-ext.woff2) format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/playfair-display-400-600-italic-latin.woff2) format('woff2'); 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; }

/* =====================================================================================================================
   lupikmedia.pl – arkusz „pro”: jasne tła, cienkie linie, lekki serif (Playfair Display) w nagłówkach, Manrope w tekście,
   granat jako jedyny mocny kolor, błękit Lupika tylko w drobnych akcentach. Zaokrąglenia 2–4 px, brak poświat i gradientów.
   ===================================================================================================================== */
:root {
  --ink: #0F1720; --ink-2: #3D4852; --ink-3: #6B7682; --ink-4: #98A2AD;
  --navy: #0B1F33; --navy-2: #13293F; --navy-3: #1C3A57;
  --paper: #FBFBF9; --bialy: #FFFFFF; --stone: #F2F1EC; --stone-2: #E9E8E2; --linia: #E2E1DB; --linia-2: #D3D2CB;
  --brand: #0F6CA8; --brand-jasny: #5FB4E6; --kropka: #F97316;
  --ok: #1E7F5C; --uwaga: #B7791F; --blad: #B42318;
  --p1: var(--brand); --p2: #1E7F5C; --p3: #5B4BB5; --p4: #B85C1E;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-naglowek: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --r: 3px; --r-s: 2px; --r-xs: 2px;
  --cien: 0 1px 2px rgba(15,23,32,.04), 0 18px 48px -20px rgba(15,23,32,.18);
  --cien-duzy: 0 2px 4px rgba(15,23,32,.06), 0 40px 90px -30px rgba(15,23,32,.35);
  --wrap: 1200px;
  --gora-h: 80px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--gora-h) + 16px); }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2 { margin: 0; font-family: var(--font-naglowek); font-weight: 500; line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; color: var(--ink); }
h1 em, h2 em { font-style: italic; font-weight: 400; }
h3, h4 { margin: 0; font-family: var(--font); font-weight: 700; line-height: 1.3; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.ik { width: 18px; height: 18px; flex: none; }
.ikony { position: absolute; width: 0; height: 0; overflow: hidden; }
.pomin { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 14px; background: var(--navy); color: #fff; font-weight: 600; }
.pomin:focus { left: 8px; }
.etykieta { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.etykieta::before { content: ""; width: 28px; height: 1px; background: var(--ink-3); }
.etykieta--jasna { color: rgba(255,255,255,.62); }
.etykieta--jasna::before { background: rgba(255,255,255,.4); }
.lead { font-size: clamp(17px, 1.4vw, 19.5px); font-weight: 400; color: var(--ink-2); line-height: 1.6; max-width: 60ch; }
.podglad-znak { position: fixed; z-index: 60; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 8px 16px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }

/* Przyciski: granat, wersaliki, kanty */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border: 1px solid var(--navy); border-radius: var(--r-s); background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.btn:hover { background: var(--navy-3); border-color: var(--navy-3); }
.btn .ik { width: 16px; height: 16px; transition: transform .25s; }
.btn:hover .ik { transform: translateX(4px); }
.btn--maly { min-height: 44px; padding: 0 18px; font-size: 11.5px; }
.btn--duzy { min-height: 58px; padding: 0 30px; }
.btn--jasny { background: #fff; color: var(--navy); border-color: #fff; }
.btn--jasny:hover { background: var(--stone); border-color: var(--stone); color: var(--navy); }
.btn--duch { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--duch:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn--ramka { background: transparent; color: var(--navy); border-color: var(--linia-2); }
.btn--ramka:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--linia-2); padding-bottom: 3px; transition: border-color .2s; }
.link:hover { border-color: var(--ink); }
.link .ik { width: 14px; height: 14px; }

/* ===== Nagłówek ===== */
.gora { position: sticky; top: 0; z-index: 50; background: rgba(251,251,249,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.gora.jest-cien { border-color: var(--linia); }
.gora__in { display: flex; align-items: center; gap: 24px; height: var(--gora-h); }
.marka { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; text-decoration: none; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.marka img { width: 36px; height: 36px; border-radius: 4px; }
.marka b { font-weight: 700; }
.marka span { font-weight: 500; }
.marka--jasna { color: #fff; }
.menu { margin-left: 24px; flex: 1; }
.menu > ul { display: flex; align-items: center; gap: 4px; }
.menu > ul > li { position: relative; }
.menu > ul > li > a { display: inline-flex; align-items: center; white-space: nowrap; height: 40px; padding: 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.menu > ul > li > a:hover, .menu > ul > li > a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.menu__grupa { display: flex; align-items: center; }
.menu__rozwin { width: 24px; height: 40px; margin-left: -8px; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; }
.menu__rozwin .ik { width: 14px; height: 14px; transition: transform .2s; }
.menu__grupa:hover .menu__rozwin .ik, .menu__rozwin[aria-expanded="true"] .ik { transform: rotate(180deg); }
.menu__pod { position: absolute; left: 0; top: calc(100% + 10px); z-index: 5; width: 340px; padding: 10px; background: #fff; border: 1px solid var(--linia); box-shadow: var(--cien-duzy); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.menu__grupa:hover .menu__pod, .menu__grupa:focus-within .menu__pod, .menu__grupa.otwarta .menu__pod { opacity: 1; visibility: visible; transform: none; }
.menu__pod a { display: flex; align-items: center; gap: 14px; padding: 11px 12px; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink); border-radius: var(--r-s); }
.menu__pod a:hover, .menu__pod a[aria-current] { background: var(--stone); }
.menu__pod .ik { width: 18px; height: 18px; color: var(--ink-3); }
.menu__pod small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.menu__dol { display: none; }
.gora__akcje { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.gora__klient { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); text-decoration: none; }
.gora__klient:hover { color: var(--ink); }
.gora__klient .ik { width: 15px; height: 15px; color: var(--ink-3); }
.gora__cta { background: transparent; color: var(--navy); }
.gora__cta:hover { background: var(--navy); color: #fff; }
.burger { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--linia-2); border-radius: var(--r-s); background: #fff; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.burger span { display: block; height: 1.5px; background: var(--ink); transition: transform .25s, opacity .25s; }

/* ===== Hero: jasny, redakcyjny ===== */
.hero { position: relative; background: var(--paper); border-bottom: 1px solid var(--linia); overflow: hidden; }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 112px); }
.hero h1 { margin: 26px 0 24px; font-size: clamp(40px, 4.8vw, 66px); line-height: 1.06; }
.hero h1 em { color: var(--brand); }
.hero__lead { max-width: 520px; font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-2); }
.hero__pill { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.hero__pill::before { content: ""; width: 28px; height: 1px; background: var(--ink-3); }
.hero__pill img { display: none; }
.sprawdz { position: relative; margin-top: 32px; display: flex; align-items: stretch; gap: 0; border: 1px solid var(--linia-2); background: #fff; }
.sprawdz label { position: relative; flex: 1; display: flex; align-items: center; }
.sprawdz label .ik { position: absolute; left: 18px; width: 17px; height: 17px; color: var(--ink-4); }
.sprawdz input { width: 100%; height: 58px; padding: 0 16px 0 46px; border: 0; background: transparent; color: var(--ink); font-size: 16.5px; font-weight: 500; }
.sprawdz input::placeholder { color: var(--ink-4); }
.sprawdz input:focus { outline: none; }
.sprawdz:focus-within { border-color: var(--navy); }
.sprawdz .btn { border-radius: 0; border: 0; border-left: 1px solid var(--navy); }
.sprawdz__pod { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
.sprawdz__pod a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linia-2); }
.sprawdz__pod a:hover { text-decoration-color: var(--ink); }
.hero__punkty { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linia); }
.hero__punkty li { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.hero__punkty .ik { width: 14px; height: 14px; color: var(--brand); }

/* makieta laptop + telefon (proporcje w % szerokości sceny) na płaskim kamiennym tle */
.scena2 { position: relative; margin: 0; }
.scena2::before { content: ""; position: absolute; inset: -6% -12% -4% 6%; z-index: -1; background: var(--stone); }
.urzadzenia { position: relative; aspect-ratio: 100 / 66; }
.mac { position: absolute; left: 0; top: 0; width: 86%; }
.mac__ekran { position: relative; padding: 2.2% 2.2% 2.6%; border-radius: 3% 3% 0 0 / 4.8% 4.8% 0 0; background: #0E1013; box-shadow: 0 0 0 1.5px #3A3F47 inset, 0 0 0 1px #1A1D22, 0 40px 80px -36px rgba(15,23,32,.55); }
.mac__ekran::before { content: ""; position: absolute; left: 50%; top: .9%; width: .9%; aspect-ratio: 1; border-radius: 50%; background: #2A2F36; transform: translateX(-50%); }
.mac__matryca { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #1A1D22; }
.mac__podstawa { position: relative; height: 0; padding-bottom: 3.6%; margin: 0 -6.5%; border-radius: 0 0 46% 46% / 0 0 100% 100%; background: linear-gradient(180deg, #E4E8EC 0%, #C9CFD6 45%, #9DA4AD 100%); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 26px 40px -18px rgba(15,23,32,.5); }
.mac__podstawa::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 38%; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #B4BBC3, #CED4DA); transform: translateX(-50%); }
.iphone { position: absolute; right: 0; bottom: 0; width: 23%; padding: 1.4%; border-radius: 15% / 7.2%; background: #121417; box-shadow: 0 0 0 1.5px #3A3F47 inset, 0 0 0 1px #0B0C0E, 0 36px 60px -24px rgba(15,23,32,.6); }
.iphone::before { content: ""; position: absolute; left: 50%; top: 3.2%; z-index: 2; width: 30%; height: 2.6%; border-radius: 99px; background: #050607; transform: translateX(-50%); }
.iphone__ekran { position: relative; aspect-ratio: 520 / 1125; overflow: hidden; border-radius: 12% / 5.6%; background: #1A1D22; }
.rot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .9s ease; }
.rot img + img { opacity: 0; }
.rot.is-b img + img { opacity: 1; }
.rot.is-b img:first-child { opacity: 0; }
.realizacja { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--linia-2); }
.realizacja__tekst { display: grid; gap: 4px; min-width: 0; }
.realizacja__tekst small { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.realizacja__tekst b { font-family: var(--font-naglowek); font-weight: 500; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realizacja__kropki { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; max-width: 50%; }
.realizacja__kropki button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--linia-2); cursor: pointer; transition: background .3s, width .3s; }
.realizacja__kropki button:hover { background: var(--ink-3); }
.realizacja__kropki button[aria-current="true"] { width: 22px; border-radius: 99px; background: var(--ink); }

/* pasek faktów: cztery kolumny z cienkimi liniami */
.fakty { background: var(--paper); border-bottom: 1px solid var(--linia); }
.fakty__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fakty__in > div { display: flex; gap: 14px; align-items: flex-start; padding: 26px 24px 26px 0; }
.fakty__in > div + div { padding-left: 24px; border-left: 1px solid var(--linia); }
.fakty .ik { width: 20px; height: 20px; margin-top: 2px; color: var(--ink-3); }
.fakty strong { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; }
.fakty p { margin-top: 3px; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

/* ===== Sekcje ===== */
.sekcja { padding: clamp(72px, 9vw, 128px) 0; }
.sekcja--szara { background: var(--stone); }
.sekcja--biala { background: #fff; }
.sekcja--ciemna { background: var(--navy); color: #fff; }
.sekcja--ciemna h1, .sekcja--ciemna h2, .sekcja--ciemna h3 { color: #fff; }
.sekcja--ciasna { padding: clamp(44px, 5vw, 64px) 0; }
.sekcja__glowa { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.sekcja__glowa h2 { margin-top: 20px; font-size: clamp(30px, 3.4vw, 46px); }
.sekcja__glowa--srodek { grid-template-columns: 1fr; text-align: center; max-width: 760px; margin-inline: auto; }
.sekcja__glowa--srodek .etykieta { justify-content: center; }
.sekcja__glowa--srodek .lead { margin-inline: auto; }
.sekcja--ciemna .lead { color: rgba(255,255,255,.7); }
.sekcja--ciemna .etykieta { color: rgba(255,255,255,.62); }
.sekcja--ciemna .etykieta::before { background: rgba(255,255,255,.4); }
.siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linia); border-left: 1px solid var(--linia); }
.siatka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siatka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kafel { --a: var(--ink); position: relative; padding: 36px 30px 34px; border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); background: transparent; transition: background .25s; }
.kafel:hover { background: #fff; }
.sekcja--szara .kafel:hover { background: #fff; }
.kafel__ik { display: block; width: 24px; height: 24px; margin-bottom: 26px; color: var(--ink-3); }
.kafel__ik .ik { width: 24px; height: 24px; }
.kafel h3 { margin-bottom: 12px; font-size: 18px; }
.kafel p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
a.kafel { display: block; text-decoration: none; color: inherit; }
a.kafel .kafel__dalej { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
a.kafel .kafel__dalej .ik { width: 14px; height: 14px; transition: transform .25s; }
a.kafel:hover .kafel__dalej .ik { transform: translateX(4px); }
.kafel__grupa { position: absolute; top: 26px; right: 28px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.sekcja--ciemna .siatka { border-color: rgba(255,255,255,.14); }
.sekcja--ciemna .kafel { border-color: rgba(255,255,255,.14); color: #fff; }
.sekcja--ciemna .kafel:hover { background: rgba(255,255,255,.04); }
.sekcja--ciemna .kafel p { color: rgba(255,255,255,.7); }
.sekcja--ciemna .kafel__ik { color: rgba(255,255,255,.6); }
.dwa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.dwa--odwr > :first-child { order: 2; }
.tekst h2 { margin-top: 20px; font-size: clamp(28px, 3.2vw, 40px); }
.tekst > p { margin-top: 18px; color: var(--ink-2); font-size: 17px; }
.sekcja--ciemna .tekst > p { color: rgba(255,255,255,.72); }
.punkty { display: grid; gap: 14px; margin-top: 26px; }
.punkty li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.punkty li .ik { width: 15px; height: 15px; margin-top: 6px; color: var(--brand); }
.punkty b { color: var(--ink); font-weight: 700; }
.sekcja--ciemna .punkty li { color: rgba(255,255,255,.78); }
.sekcja--ciemna .punkty b { color: #fff; }
.sekcja--ciemna .punkty li .ik { color: var(--brand-jasny); }
.akcje { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 32px; }

/* kompozycja: okno przeglądarki + telefon */
.kompozycja { position: relative; padding: 0 0 56px; }
.okno { position: relative; background: #fff; box-shadow: var(--cien-duzy); overflow: hidden; border: 1px solid var(--linia); }
.okno__pasek { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--stone); border-bottom: 1px solid var(--linia); }
.okno__pasek i { width: 8px; height: 8px; border-radius: 50%; background: var(--linia-2); }
.okno__pasek span { margin-left: 10px; padding: 2px 10px; background: #fff; font-size: 11px; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.okno img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.okno a { display: block; }
.tel { position: absolute; right: -4%; bottom: 0; width: 27%; min-width: 120px; border: 5px solid #0B1220; border-radius: 18px; background: #0B1220; box-shadow: var(--cien-duzy); overflow: hidden; }
.tel img { display: block; width: 100%; aspect-ratio: 390 / 780; object-fit: cover; object-position: top; border-radius: 12px; }
.kompozycja--lewo .tel { right: auto; left: -4%; }
.plywak { position: absolute; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; color: var(--ink); border: 1px solid var(--linia); box-shadow: var(--cien); font-size: 13.5px; line-height: 1.35; }
.plywak b { display: block; font-family: var(--font-naglowek); font-weight: 500; font-size: 17px; }
.plywak small { color: var(--ink-3); font-size: 12.5px; }
.plywak__ik { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ink-3); flex: none; border: 1px solid var(--linia); }
.plywak__ik .ik { width: 18px; height: 18px; }
.plywak--lg { left: -5%; bottom: 14%; }
.plywak--pg { left: -5%; top: 10%; }

/* ===== Proces: lista redakcyjna z dużymi numerami ===== */
.kroki { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linia-2); }
.kroki--4 { grid-template-columns: repeat(4, 1fr); }
.kroki--3 { grid-template-columns: repeat(3, 1fr); }
.krok { position: relative; padding: 28px 28px 8px 0; border-right: 1px solid var(--linia); margin-right: 28px; }
.krok:last-child { border-right: 0; margin-right: 0; }
.krok__nr { display: block; margin-bottom: 18px; font-family: var(--font-naglowek); font-weight: 400; font-size: 44px; line-height: 1; color: var(--ink-4); }
.krok__nr::before { content: "0"; }
.krok--ty .krok__nr { color: var(--brand); }
.krok h3 { font-size: 17.5px; margin-bottom: 10px; }
.krok p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.krok__kto { display: inline-block; margin-top: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.krok--ty .krok__kto { color: var(--brand); }
.sekcja--szara .kroki { border-color: var(--linia-2); }

/* ===== Pakiety ===== */
.pakiety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linia-2); background: #fff; }
.pakiet { --a: var(--ink); position: relative; display: flex; flex-direction: column; padding: 40px 34px 36px; border-right: 1px solid var(--linia); }
.pakiet:last-child { border-right: 0; }
.pakiet--wyr { background: var(--navy); color: #fff; }
.pakiet--wyr h3, .pakiet--wyr .pakiet__cena b { color: #fff; }
.pakiet__znak { position: absolute; top: 18px; right: 34px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-jasny); }
.pakiet__nazwa { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.pakiet--wyr .pakiet__nazwa { color: rgba(255,255,255,.62); }
.pakiet__nazwa span { font-family: var(--font-naglowek); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--ink-4); }
.pakiet h3 { margin-top: 18px; font-family: var(--font-naglowek); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.pakiet__pod { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pakiet--wyr .pakiet__pod { color: rgba(255,255,255,.6); }
.pakiet__haslo { margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.pakiet--wyr .pakiet__haslo { color: rgba(255,255,255,.76); }
.pakiet__praca { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); }
.pakiet--wyr .pakiet__praca { color: rgba(255,255,255,.8); }
.pakiet__praca .ik { width: 15px; height: 15px; color: var(--ink-3); }
.pakiet__cena { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linia); }
.pakiet--wyr .pakiet__cena { border-color: rgba(255,255,255,.18); }
.pakiet__cena b { display: block; font-family: var(--font-naglowek); font-size: 40px; font-weight: 400; letter-spacing: -.01em; line-height: 1; }
.pakiet__cena b small { font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pakiet--wyr .pakiet__cena b small { color: rgba(255,255,255,.6); }
.pakiet__cena span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.pakiet--wyr .pakiet__cena span { color: rgba(255,255,255,.62); }
.pakiet__cena + .pakiet__cena { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--linia); }
.pakiet--wyr .pakiet__cena + .pakiet__cena { border-color: rgba(255,255,255,.18); }
.pakiet__cena--dalej b { font-size: 26px; }
.pakiet__cena--tekst b { font-size: 26px; }
.cechy { display: grid; gap: 10px; margin-top: 24px; }
.cechy li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pakiet--wyr .cechy li { color: rgba(255,255,255,.8); }
.cechy li .ik { width: 14px; height: 14px; margin-top: 4px; color: var(--brand); }
.pakiet--wyr .cechy li .ik { color: var(--brand-jasny); }
.cechy li.cecha--nie { color: var(--ink-4); }
.pakiet--wyr .cechy li.cecha--nie { color: rgba(255,255,255,.4); }
.cechy li.cecha--nie .ik { color: var(--linia-2); }
.pakiet--wyr .cechy li.cecha--nie .ik { color: rgba(255,255,255,.3); }
.pakiet .btn { margin-top: 28px; width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; }
.pakiet--wyr .btn { background: #fff; color: var(--navy); border-color: #fff; }
.pakiet--wyr .btn:hover { background: var(--brand-jasny); border-color: var(--brand-jasny); }
.pakiet__dla { margin-top: 16px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.pakiet--wyr .pakiet__dla { color: rgba(255,255,255,.58); }
.pakiet__akcja { margin-top: auto; }
.cena-dopisek { margin-top: 26px; font-size: 13.5px; color: var(--ink-3); text-align: center; max-width: 900px; margin-inline: auto; line-height: 1.6; }
.cena-dopisek b { color: var(--ink-2); }
.cena-dopisek .link { margin-left: 8px; }

/* Ty / My */
.podzial { display: grid; grid-template-columns: 1fr 1.2fr; margin-top: 22px; border: 1px solid var(--linia); }
.pakiet--wyr .podzial { border-color: rgba(255,255,255,.18); }
.podzial > div { padding: 14px 16px 16px; }
.podzial__my { border-left: 1px solid var(--linia); }
.pakiet--wyr .podzial__my { border-color: rgba(255,255,255,.18); }
.podzial__kto { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.pakiet--wyr .podzial__kto { color: rgba(255,255,255,.6); }
.podzial__kto img { width: 18px; height: 18px; border-radius: 3px; }
.podzial ul { display: grid; gap: 8px; }
.podzial li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.pakiet--wyr .podzial li { color: rgba(255,255,255,.8); }
.podzial li .ik { width: 13px; height: 13px; margin-top: 4px; color: var(--ink-4); }
.podzial__my li .ik { color: var(--brand); }
.pakiet--wyr .podzial__my li .ik { color: var(--brand-jasny); }

/* porównanie w tabeli */
.porownanie { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border: 1px solid var(--linia); }
.porownanie th, .porownanie td { padding: 16px 18px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
.porownanie th { font-weight: 700; }
.porownanie thead th { font-family: var(--font-naglowek); font-weight: 500; font-size: 19px; border-bottom: 1px solid var(--ink); }
.porownanie tbody th { width: 24%; color: var(--ink-3); font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.porownanie td .ik { width: 16px; height: 16px; color: var(--brand); }
.porownanie td .ik--nie { color: var(--linia-2); }
.porownanie td small { display: block; color: var(--ink-3); font-size: 13px; }
.porownanie .wyr { background: var(--stone); }

/* cennik / zakres: wiersze z liniami */
.cennik { display: grid; gap: 0; border-top: 1px solid var(--linia-2); }
.cennik li { display: grid; grid-template-columns: 1fr auto; gap: 6px 32px; align-items: center; padding: 22px 4px; border-bottom: 1px solid var(--linia); }
.cennik b { font-family: var(--font-naglowek); font-weight: 500; font-size: 20px; }
.cennik p { grid-column: 1; font-size: 15px; color: var(--ink-2); max-width: 70ch; }
.cennik .cennik__cena { grid-row: 1 / span 2; font-family: var(--font-naglowek); font-weight: 400; font-size: 24px; text-align: right; white-space: nowrap; }
.cennik .cennik__cena small { display: block; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cennik .cennik__cena--brak { font-family: var(--font); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ===== Realizacje: karuzela na płaskim granacie ===== */
.realizacje { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: clamp(72px, 9vw, 120px) 0; }
.realizacje h2 { color: #fff; }
.realizacje__gora { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.realizacje__gora h2 { margin-top: 20px; font-size: clamp(30px, 3.4vw, 46px); }
.realizacje__gora .lead { margin-top: 16px; color: rgba(255,255,255,.68); }
.strzalki { display: flex; gap: 0; flex: none; border: 1px solid rgba(255,255,255,.3); }
.strzalki button { width: 52px; height: 48px; border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.strzalki button + button { border-left: 1px solid rgba(255,255,255,.3); }
.strzalki button:hover { background: rgba(255,255,255,.1); }
.tor { position: relative; display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(24px, calc((100vw - var(--wrap)) / 2)); padding: 4px max(24px, calc((100vw - var(--wrap)) / 2)) 24px; scrollbar-width: none; }
.tor::-webkit-scrollbar { display: none; }
.karta { flex: 0 0 min(520px, 82vw); scroll-snap-align: start; text-decoration: none; color: inherit; }
.karta__obraz { position: relative; overflow: hidden; background: #1A1D22; box-shadow: 0 30px 60px -28px rgba(0,0,0,.8); }
.karta__obraz > img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .7s ease; }
.karta:hover .karta__obraz > img { transform: scale(1.03); }
.karta__tel { position: absolute; right: 5%; bottom: -14%; width: 24%; border: 4px solid #0B1220; border-radius: 14px; background: #0B1220; box-shadow: 0 20px 40px -14px rgba(0,0,0,.8); overflow: hidden; transition: transform .5s ease; }
.karta__tel img { display: block; width: 100%; aspect-ratio: 390 / 700; object-fit: cover; object-position: top; border-radius: 10px; }
.karta:hover .karta__tel { transform: translateY(-10%); }
.karta__opis { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.karta h3 { font-family: var(--font-naglowek); font-weight: 500; font-size: 21px; color: #fff; }
.karta p { margin: 4px 0 0; color: rgba(255,255,255,.58); font-size: 14px; }
.karta__tag { flex: none; padding-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.realizacje__dol { position: relative; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.realizacje__dol p { font-size: 13.5px; color: rgba(255,255,255,.58); }

/* lista realizacji (/realizacje/) */
.projekty { display: grid; gap: 0; }
.projekt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--linia); }
.projekt:nth-child(even) > :first-child { order: 2; }
.projekt .kompozycja { padding-bottom: 44px; }
.projekt__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 16px; }
.projekt__meta span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.projekt h2 { font-size: clamp(26px, 2.8vw, 36px); }
.projekt > div > p { margin-top: 14px; color: var(--ink-2); }
.projekt__zgoda { display: inline-block; margin-top: 16px; padding: 5px 10px; border: 1px solid #E8C8A8; background: #FFF7EF; color: #8A4A12; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }

/* ===== FAQ ===== */
.pytania { max-width: 880px; margin-inline: auto; border-top: 1px solid var(--linia-2); }
.pytania details { border-bottom: 1px solid var(--linia); }
.pytania summary { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-family: var(--font-naglowek); font-size: 20px; font-weight: 500; cursor: pointer; list-style: none; }
.pytania summary::-webkit-details-marker { display: none; }
.pytania summary::after { content: '+'; flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--font); font-size: 18px; font-weight: 400; color: var(--ink-3); transition: transform .25s; }
.pytania details[open] summary::after { transform: rotate(45deg); }
.pytania details p { margin: 0 0 24px; color: var(--ink-2); max-width: 760px; }
.sekcja--ciemna .pytania, .sekcja--ciemna .pytania details { border-color: rgba(255,255,255,.16); }
.sekcja--ciemna .pytania details p { color: rgba(255,255,255,.72); }

/* ===== Zasady (ciemny pas, siatka z liniami) ===== */
.zasady { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); }
.zasada { padding: 30px 28px 32px; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.zasada .ik { width: 22px; height: 22px; color: rgba(255,255,255,.6); margin-bottom: 22px; }
.zasada h3 { font-size: 17px; margin-bottom: 10px; color: #fff; }
.zasada p { font-size: 14.5px; color: rgba(255,255,255,.68); line-height: 1.55; }

/* ===== Formularz (ciemna sekcja z kreatorem) ===== */
.formularz { position: relative; background: var(--navy); color: #fff; }
.formularz__in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; padding: clamp(72px, 9vw, 120px) 0; }
.formularz__tekst { position: relative; }
.formularz h2 { margin-top: 20px; font-size: clamp(30px, 3.4vw, 46px); color: #fff; }
.formularz__lead { margin-top: 18px; max-width: 520px; font-size: 17.5px; color: rgba(255,255,255,.72); }
.dostaniesz { display: grid; gap: 14px; margin-top: 28px; max-width: 500px; }
.dostaniesz li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.5; }
.dostaniesz .ik { width: 18px; height: 18px; margin-top: 3px; color: rgba(255,255,255,.55); }
.dostaniesz b { color: #fff; }
.formularz__maskotka { position: absolute; left: 0; bottom: 0; width: 220px; height: auto; opacity: .95; }
.kreator { position: relative; padding: clamp(28px, 3vw, 40px); background: #fff; color: var(--ink); box-shadow: var(--cien-duzy); }
.kreator__postep { display: flex; gap: 4px; margin-bottom: 26px; }
.kreator__postep span { flex: 1; height: 2px; background: var(--linia-2); transition: background .3s; }
.kreator__postep span.zrobiony { background: var(--navy); }
.bez-js .kreator__postep { display: none; }
.kreator__krok { animation: wejdz .35s ease; }
.bez-js .kreator__krok + .kreator__krok { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--linia); }
@keyframes wejdz { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kreator__pytanie { margin: 0 0 6px; font-family: var(--font-naglowek); font-size: 25px; font-weight: 500; }
.kreator__pomoc { margin: 0 0 20px; color: var(--ink-3); font-size: 14.5px; }
.wybor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.wybor label { position: relative; cursor: pointer; }
.wybor input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wybor span { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border: 1px solid var(--linia-2); background: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.3; transition: border-color .2s, background .2s; }
.wybor span .ik { width: 18px; height: 18px; color: var(--ink-4); transition: color .2s; }
.wybor input:checked + span { border-color: var(--navy); background: var(--stone); }
.wybor input:checked + span .ik { color: var(--navy); }
.wybor input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.pole { position: relative; margin-bottom: 16px; }
.pole label { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pole label small { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--ink-3); }
.pole input, .pole textarea { display: block; width: 100%; padding: 14px 14px; border: 1px solid var(--linia-2); border-radius: 0; background: #fff; color: var(--ink); font-weight: 500; transition: border-color .2s; }
.pole textarea { resize: vertical; min-height: 88px; }
.pole input:focus, .pole textarea:focus { outline: none; border-color: var(--navy); }
.pole--url input { padding-left: 44px; font-size: 16.5px; }
.pole--url .ik { position: absolute; left: 15px; bottom: 17px; width: 16px; height: 16px; color: var(--ink-4); }
.sprawdzimy { margin: -4px 0 18px; padding: 14px 16px; background: var(--stone); font-size: 14px; color: var(--ink-2); }
.sprawdzimy p { font-weight: 700; color: var(--ink); }
.sprawdzimy .domena { color: var(--brand); }
.sprawdzimy ul { display: grid; gap: 4px; margin-top: 8px; }
.sprawdzimy li { position: relative; padding-left: 18px; transition: opacity .4s, transform .4s; }
.js .sprawdzimy li { opacity: 0; transform: translateX(-6px); }
.js .sprawdzimy li.widoczny { opacity: 1; transform: none; }
.sprawdzimy li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--ink-3); }
.wybrany { display: inline-flex; align-items: center; gap: 10px; margin: -4px 0 14px; padding: 8px 8px 8px 12px; border: 1px solid var(--linia-2); font-size: 13.5px; color: var(--ink-2); }
.wybrany b { color: var(--ink); }
.wybrany button { width: 24px; height: 24px; border: 0; background: none; color: var(--ink-3); font-size: 16px; cursor: pointer; }
.wybrany button:hover { color: var(--ink); }
.pole-faks { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.zgoda { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.zgoda input { width: 16px; height: 16px; flex: none; margin: 3px 0 0; accent-color: var(--navy); }
.kreator__blad { margin: 14px 0 0; padding: 12px 14px; border-left: 2px solid var(--blad); background: #FDF3F2; color: #8A1C1C; font-size: 14px; font-weight: 600; }
.kreator__akcje { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.kreator__akcje .btn { flex: 1; white-space: normal; }
.kreator__wstecz { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }
.kreator__wstecz:hover { color: var(--ink); }
.kreator__wstecz .ik { width: 14px; height: 14px; }
.kreator__bezp { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }
.kreator__bezp .ik { width: 14px; height: 14px; color: var(--ink-4); }
.kreator__sukces { text-align: center; padding: 18px 0 6px; }
.kreator__sukces-ik { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 18px; border: 1px solid var(--linia-2); border-radius: 50%; color: var(--ok); }
.kreator__sukces-ik .ik { width: 26px; height: 26px; }
.kreator__sukces h3 { margin-bottom: 10px; font-family: var(--font-naglowek); font-weight: 500; font-size: 27px; }
.kreator__sukces p { color: var(--ink-2); }
.kreator__sukces-dalej { margin-top: 16px; font-size: 14px; }
.kreator__sukces-dalej a { color: var(--ink); font-weight: 700; }
.kreator[data-wyslano] > :not(.kreator__sukces) { display: none; }

/* ===== Narzędzie: wynik testu ===== */
.narzedzie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.narzedzie h2 { margin-top: 16px; }
.narzedzie .sprawdz { margin-top: 22px; }
.narzedzie .sprawdz__pod { color: var(--ink-3); }
.narzedzie .punkty { margin-top: 28px; }
.czekam { display: flex; align-items: center; gap: 16px; padding: 24px 26px; background: #fff; border: 1px solid var(--linia); font-weight: 600; color: var(--ink-2); }
.czekam i { width: 20px; height: 20px; flex: none; border: 2px solid var(--linia-2); border-top-color: var(--navy); border-radius: 50%; animation: kreci 1s linear infinite; }
@keyframes kreci { to { transform: rotate(360deg); } }
.czekam small { display: block; font-weight: 500; color: var(--ink-3); font-size: 13.5px; }
.wynik { --a: var(--ok); padding: 28px; background: #fff; border: 1px solid var(--linia); box-shadow: var(--cien); animation: wejdz .4s ease; }
.wynik--srednia { --a: var(--uwaga); }
.wynik--slaba { --a: var(--blad); }
.wynik__glowa { display: flex; gap: 24px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--linia); }
.wynik__kolo { position: relative; width: 96px; height: 96px; flex: none; }
.wynik__kolo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wynik__kolo circle { fill: none; stroke-width: 2.4; }
.wynik__tor { stroke: var(--stone-2); }
.wynik__luk { stroke: var(--a); stroke-linecap: butt; transition: stroke-dasharray 1s ease; }
.wynik__kolo b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-naglowek); font-size: 32px; font-weight: 400; }
.wynik__host { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); word-break: break-all; }
.wynik__ocena { margin-top: 4px; font-family: var(--font-naglowek); font-size: 26px; font-weight: 500; color: var(--a); }
.wynik__pods { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.wynik__lista { display: grid; gap: 0; margin-top: 8px; }
.wynik__test { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--linia); }
.wynik__test:last-child { border-bottom: 0; }
.wynik__test b { display: block; font-size: 15px; }
.wynik__test p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.wynik__ik { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; margin-top: 1px; }
.wynik__ik .ik { width: 13px; height: 13px; }
.wynik__test--ok .wynik__ik { background: #E6F2EC; color: var(--ok); }
.wynik__test--uwaga .wynik__ik { background: #FBF1DF; color: var(--uwaga); }
.wynik__test--blad .wynik__ik { background: #FBE7E5; color: var(--blad); }
.wynik__test--info .wynik__ik { background: var(--stone); color: var(--ink-3); }
.wynik__dopisek { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; background: var(--stone); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.wynik__dopisek .ik { width: 15px; height: 15px; margin-top: 3px; color: var(--ink-3); }
.wynik__cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.wynik__cta .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; }
.wynik__cta p { font-size: 13.5px; color: var(--ink-3); }
.narzedzie__pusty { padding: 30px; border: 1px dashed var(--linia-2); color: var(--ink-3); font-size: 15px; display: grid; gap: 12px; }
.narzedzie__pusty b { color: var(--ink); font-family: var(--font-naglowek); font-weight: 500; font-size: 20px; }

/* ===== Podstrony: jasny nagłówek ===== */
.podhero { position: relative; background: var(--paper); border-bottom: 1px solid var(--linia); }
.podhero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 88px); align-items: center; padding: clamp(44px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.podhero__in--sam { grid-template-columns: 1fr; max-width: 860px; }
.podhero h1 { margin-top: 22px; font-size: clamp(34px, 4.2vw, 56px); }
.podhero .lead { margin-top: 20px; }
.podhero__akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.podhero__akcje .btn--jasny { background: var(--navy); color: #fff; border-color: var(--navy); }
.podhero__akcje .btn--jasny:hover { background: var(--navy-3); border-color: var(--navy-3); }
.podhero__akcje .btn--duch { color: var(--navy); border-color: var(--linia-2); }
.podhero__akcje .btn--duch:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.podhero .etykieta--jasna { color: var(--ink-3); }
.podhero .etykieta--jasna::before { background: var(--ink-3); }
.podhero__etykieta { margin-top: 20px; }
.okruchy { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.okruchy a { color: var(--ink-3); text-decoration: none; }
.okruchy a:hover { color: var(--ink); }
.okruchy [aria-current] { color: var(--ink); }
.podhero .kompozycja { padding-bottom: 44px; }
.podhero .kafel { border: 1px solid var(--linia); background: #fff; padding: 32px; }
.podhero .kafel h3 { font-family: var(--font-naglowek); font-weight: 500; font-size: 24px; }
.podhero .kafel p { color: var(--ink-2); }
.podhero__lista { padding: 30px 32px; background: #fff; border: 1px solid var(--linia); }
.podhero__lista-tytul { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.podhero__lista .punkty { margin-top: 16px; }
.podhero__lista .punkty li { color: var(--ink-2); font-size: 15px; }
.standardy { display: grid; gap: 0; margin-top: 20px; border-top: 1px solid rgba(255,255,255,.2); }
.standardy li { padding: 14px 0 14px 18px; border-bottom: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.25); font-size: 15px; color: rgba(255,255,255,.82); }
.standardy__zasada { border-left-color: var(--brand-jasny) !important; }
.h2-maly { font-size: 28px; }

/* O nas: kompetencje jak CV, rekomendacje */
.cv { display: grid; gap: 0; border-top: 1px solid var(--linia-2); }
.cv__poz { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 36px 0; border-bottom: 1px solid var(--linia); }
.cv__poz .kafel__ik { margin: 4px 0 0; }
.cv__poz h3 { font-family: var(--font-naglowek); font-weight: 500; font-size: 25px; margin-bottom: 12px; }
.cv__poz > div > p { color: var(--ink-2); max-width: 72ch; }
.cv__fakty { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
.cv__fakty li { padding: 6px 12px; border: 1px solid var(--linia-2); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--ink-2); }
.rekomendacje { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linia-2); border-left: 1px solid var(--linia-2); }
.rekomendacja { margin: 0; padding: 32px; border-right: 1px solid var(--linia-2); border-bottom: 1px solid var(--linia-2); background: #fff; }
.rekomendacja p { font-family: var(--font-naglowek); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--ink); }
.rekomendacja footer { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.rekomendacja footer b { display: block; color: var(--ink); font-weight: 700; }
.zespol { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.osoba { padding: 22px; border: 1px solid var(--linia); background: #fff; }

/* Polityka prywatności / treść */
.tresc { max-width: 840px; }
.tresc h2 { margin: 48px 0 16px; font-size: 28px; }
.tresc h3 { margin: 26px 0 10px; font-size: 18px; }
.tresc p, .tresc li { color: var(--ink-2); font-size: 16px; }
.tresc p + p { margin-top: 12px; }
.tresc ul, .tresc ol { display: grid; gap: 8px; margin: 12px 0; padding-left: 22px; list-style: disc; }
.tresc ol { list-style: decimal; }
.tresc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.tresc th, .tresc td { padding: 10px 12px; border: 1px solid var(--linia); text-align: left; vertical-align: top; }
.tresc th { background: var(--stone); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tresc .spis { padding: 22px 26px; background: var(--stone); margin: 20px 0 8px; }
.tresc .spis ol { margin: 10px 0 0; columns: 2; gap: 28px; }
.tresc .spis a { color: var(--ink); text-decoration: none; }
.tresc .spis a:hover { text-decoration: underline; }
.tresc .wersja { font-size: 14px; color: var(--ink-3); }
.tresc code { padding: 1px 6px; background: var(--stone); font-size: 14px; }

/* kontakt */
.kontakt-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linia-2); border-left: 1px solid var(--linia-2); }
.kontakt-karta { padding: 32px 30px; border-right: 1px solid var(--linia-2); border-bottom: 1px solid var(--linia-2); background: #fff; }
.kontakt-karta .ik { width: 22px; height: 22px; color: var(--ink-3); margin-bottom: 20px; }
.kontakt-karta h3 { font-family: var(--font-naglowek); font-weight: 500; font-size: 22px; margin-bottom: 10px; }
.kontakt-karta p { font-size: 15px; color: var(--ink-2); }
.kontakt-karta a.link { margin-top: 16px; }
.kontakt-karta address { font-style: normal; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ===== Stopka ===== */
.stopka { background: var(--navy); color: rgba(255,255,255,.68); font-size: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.stopka__gora { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 36px; padding: clamp(56px, 7vw, 88px) 0 48px; }
.stopka__marka p { margin-top: 18px; max-width: 280px; line-height: 1.55; }
.stopka__sprawdz { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 4px; }
.stopka__sprawdz:hover { border-color: #fff; }
.stopka__sprawdz .ik { width: 14px; height: 14px; }
.stopka__kol { display: grid; gap: 10px; align-content: start; }
.stopka__kol a { color: rgba(255,255,255,.7); text-decoration: none; }
.stopka__kol a:hover { color: #fff; }
.stopka__tytul { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.stopka__mail, .stopka__tel { font-weight: 700; color: #fff !important; }
.stopka address { font-style: normal; line-height: 1.6; margin-top: 4px; }
.stopka__rej { font-size: 12.5px; color: rgba(255,255,255,.45); }
.stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 22px 0 30px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.5); }
.stopka__dol a { color: rgba(255,255,255,.7); text-decoration: none; }
.stopka__dol a:hover { color: #fff; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(11,31,51,.94); }
.lightbox figure { margin: 0; max-width: min(1400px, 100%); max-height: 100%; display: grid; gap: 12px; justify-items: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 90px); box-shadow: 0 40px 90px rgba(0,0,0,.6); }
.lightbox figcaption { color: rgba(255,255,255,.75); font-size: 13px; letter-spacing: .04em; }
.lightbox__zamknij { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }

/* wjazd sekcji: samo przenikanie */
.js .wjazd { opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s ease; }
.js .wjazd.widoczny { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .wjazd { opacity: 1; transform: none; transition: none; }
  .rot img { transition: none; }
  .kreator__krok, .wynik { animation: none; }
}

/* ===== Responsywność ===== */
@media (max-width: 1100px) {
  :root { --gora-h: 68px; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--gora-h)); height: calc(100dvh - var(--gora-h)); z-index: 49; margin: 0; padding: 12px 24px 28px; overflow-y: auto; background: var(--paper); border-top: 1px solid var(--linia); display: none; flex-direction: column; }
  .menu-otwarte .menu { display: flex; }
  .menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > ul > li > a { height: 54px; font-size: 14px; padding: 0 4px; border-bottom: 1px solid var(--linia); width: 100%; }
  .menu > ul > li > a:hover, .menu > ul > li > a[aria-current] { border-bottom-color: var(--linia); }
  .menu__grupa { flex-wrap: wrap; }
  .menu__grupa > a { flex: 1; }
  .menu__rozwin { width: 54px; height: 54px; margin: 0; }
  .menu__pod { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 4px 0 12px; display: none; background: transparent; }
  .menu__grupa.otwarta .menu__pod { display: block; }
  .menu__dol { display: grid; gap: 14px; margin-top: auto; padding-top: 24px; }
  .menu__klient { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 8px 0; font-size: 14px; }
  .menu__klient .ik { color: var(--ink-3); }
  .gora__klient, .gora__cta { display: none; }
  .burger { display: flex; }
  .menu-otwarte .burger span:first-child { transform: translateY(6.5px) rotate(45deg); }
  .menu-otwarte .burger span:nth-child(2) { opacity: 0; }
  .menu-otwarte .burger span:last-child { transform: translateY(-6.5px) rotate(-45deg); }
  .stopka__gora { grid-template-columns: 1fr 1fr 1fr; }
  .stopka__marka { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .hero__in, .formularz__in, .dwa, .podhero__in, .projekt, .narzedzie { grid-template-columns: 1fr; }
  .dwa--odwr > :first-child, .projekt:nth-child(even) > :first-child { order: 0; }
  .scena2 { max-width: 640px; margin-inline: auto; }
  .fakty__in { grid-template-columns: 1fr 1fr; }
  .fakty__in > div { padding: 20px 16px 20px 0; }
  .fakty__in > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .fakty__in > div:nth-child(-n+2) { border-bottom: 1px solid var(--linia); }
  .sekcja__glowa { grid-template-columns: 1fr; }
  .siatka, .siatka--4 { grid-template-columns: 1fr 1fr; }
  .kroki, .kroki--4 { grid-template-columns: 1fr 1fr; }
  .krok { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--linia); padding: 24px 0 24px; }
  .pakiety { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; }
  .pakiet { border-right: 0; border-bottom: 1px solid var(--linia); }
  .pakiet:last-child { border-bottom: 0; }
  .zasady { grid-template-columns: 1fr 1fr; }
  .formularz__tekst { padding-bottom: 0; }
  .formularz__maskotka { display: none; }
  .kontakt-siatka, .rekomendacje { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sprawdz { flex-direction: column; }
  .sprawdz .btn { border-left: 0; border-top: 1px solid var(--navy); width: 100%; }
  .porownanie { display: block; overflow-x: auto; font-size: 14px; }
  .realizacje__gora { flex-direction: column; align-items: flex-start; }
  .tor { padding-inline: 24px; gap: 18px; }
  .karta { flex-basis: min(420px, 84vw); }
  .podzial { grid-template-columns: 1fr; }
  .podzial__my { border-left: 0; border-top: 1px solid var(--linia); }
  .tresc .spis ol { columns: 1; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { width: min(100% - 36px, var(--wrap)); }
  .hero h1 { font-size: clamp(34px, 9.5vw, 42px); }
  .siatka, .siatka--4, .siatka--2, .kroki, .kroki--4, .zasady, .fakty__in { grid-template-columns: 1fr; }
  .fakty__in > div, .fakty__in > div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--linia); }
  .fakty__in > div:last-child { border-bottom: 0; }
  .wybor { grid-template-columns: 1fr; }
  .wybor--2 { grid-template-columns: 1fr 1fr; }
  .kreator { padding: 24px 20px; }
  .kreator__akcje { flex-wrap: wrap; }
  .kreator__akcje .btn { flex-basis: 100%; }
  .tel { width: 34%; right: -2%; }
  .plywak { display: none; }
  .stopka__gora { grid-template-columns: 1fr; gap: 28px; }
  .wynik__glowa { flex-direction: column; align-items: flex-start; }
  .cennik li { grid-template-columns: 1fr; }
  .cennik .cennik__cena { grid-row: auto; text-align: left; }
  .cv__poz { grid-template-columns: 1fr; gap: 14px; }
  .btn { white-space: normal; text-align: center; }
}

/* ===== Hero jako wizytówka: ciemny granat + ściana realizacji w perspektywie ===== */
.hero { background: var(--navy); color: #fff; border-bottom: 0; min-height: min(88vh, 900px); display: grid; align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 46%, rgba(11,31,51,.7) 58%, rgba(11,31,51,.1) 100%); z-index: 1; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none; background: linear-gradient(180deg, transparent, var(--navy)); z-index: 1; }
.hero__in { grid-template-columns: minmax(0, 1fr); padding: clamp(64px, 8vw, 120px) 0 clamp(72px, 9vw, 128px); z-index: 2; }
.hero__tekst { max-width: 580px; }
.hero h1 { color: #fff; font-size: clamp(42px, 5.2vw, 74px); }
.hero h1 em { color: var(--brand-jasny); }
.hero__lead { color: rgba(255,255,255,.74); }
.hero__pill { color: rgba(255,255,255,.62); }
.hero__pill::before { background: rgba(255,255,255,.45); }
.hero .sprawdz { border-color: transparent; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.hero .sprawdz:focus-within { border-color: var(--brand-jasny); }
.hero .sprawdz__pod { color: rgba(255,255,255,.58); }
.hero .sprawdz__pod a { color: #fff; text-decoration-color: rgba(255,255,255,.35); }
.hero .sprawdz__pod a:hover { text-decoration-color: #fff; }
.hero__punkty { border-top-color: rgba(255,255,255,.16); }
.hero__punkty li { color: rgba(255,255,255,.82); }
.hero__punkty .ik { color: var(--brand-jasny); }
.hero__podpis { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.link--jasny { color: #fff; border-color: rgba(255,255,255,.35); }
.link--jasny:hover { border-color: #fff; }
/* ściana: trzy kolumny zrzutów, pętla w CSS (każda kolumna ma dwa komplety obrazków → translateY(-50%)) */
@keyframes plyn { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .sciana__kol { animation: none; } }
@media (max-width: 1280px) {
  .hero__tekst { max-width: 520px; }
}
@media (max-width: 1000px) {
  .hero { min-height: 0; display: block; }
  .hero::before { background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 55%, rgba(11,31,51,.6) 75%, rgba(11,31,51,.2) 100%); }
  .hero__in { padding-bottom: 0; }
  .hero__tekst { max-width: none; }
  .hero__podpis { margin-top: 8px; padding-bottom: 48px; }
}

/* =====================================================================================================================
   Strona główna „studio”: pełnoekranowy hero, ziarno, pokaz projektów, pas branż, liczby, proces przyklejony, lista redakcyjna,
   usługi jako rozwijana lista, nagłówek przezroczysty nad hero.
   ===================================================================================================================== */
.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* nagłówek: przezroczysty nad ciemnym hero, jasny po przewinięciu */
.glowna .gora:not(.jest-cien) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: rgba(255,255,255,.1); }
.glowna .gora:not(.jest-cien) .marka, .glowna .gora:not(.jest-cien) .menu > ul > li > a, .glowna .gora:not(.jest-cien) .gora__klient { color: #fff; }
.glowna .gora:not(.jest-cien) .menu > ul > li > a:hover, .glowna .gora:not(.jest-cien) .menu > ul > li > a[aria-current] { border-bottom-color: #fff; }
.glowna .gora:not(.jest-cien) .menu__rozwin, .glowna .gora:not(.jest-cien) .gora__klient .ik { color: rgba(255,255,255,.7); }
.glowna .gora:not(.jest-cien) .gora__cta { color: #fff; border-color: rgba(255,255,255,.45); }
.glowna .gora:not(.jest-cien) .gora__cta:hover { background: #fff; color: var(--navy); border-color: #fff; }
.glowna .gora:not(.jest-cien) .burger { background: transparent; border-color: rgba(255,255,255,.4); }
.glowna .gora:not(.jest-cien) .burger span { background: #fff; }
.glowna .gora:not(.jest-cien).menu-otwarte { background: var(--paper); }
.glowna .gora:not(.jest-cien).menu-otwarte .marka { color: var(--ink); }
.glowna .gora:not(.jest-cien).menu-otwarte .burger { border-color: var(--linia-2); }
.glowna .gora:not(.jest-cien).menu-otwarte .burger span { background: var(--ink); }
.glowna .gora { margin-bottom: calc(-1 * var(--gora-h)); }

/* hero na cały ekran */
.hero { min-height: 100svh; min-height: 100vh; display: grid; align-items: stretch; }
.hero__in { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 40px; padding: calc(var(--gora-h) + clamp(40px, 6vh, 80px)) 0 clamp(36px, 5vh, 56px); min-height: 100svh; }
.hero__tekst { max-width: 640px; }
.hero h1 { font-size: clamp(42px, 5.6vw, 84px); line-height: 1.02; margin: 26px 0 28px; }
.hero h1 .slowo { display: inline-block; }
.js .hero h1 .slowo { opacity: 0; transform: translateY(.45em) rotate(1.5deg); animation: slowo 1s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
@keyframes slowo { to { opacity: 1; transform: none; } }
.js .hero__pill, .js .hero__lead, .js .hero .sprawdz, .js .hero .sprawdz__pod, .js .hero__dol { opacity: 0; animation: wejdz-hero 1s cubic-bezier(.2,.75,.2,1) forwards; }
.js .hero__pill { animation-delay: .05s; }
.js .hero__lead { animation-delay: .85s; }
.js .hero .sprawdz { animation-delay: 1s; }
.js .hero .sprawdz__pod { animation-delay: 1.15s; }
.js .hero__dol { animation-delay: 1.3s; }
@keyframes wejdz-hero { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__lead { font-size: clamp(17px, 1.45vw, 20px); max-width: 540px; }
.hero__dol { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 32px; max-width: 640px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
.hero__punkty { margin: 0; padding: 0; border: 0; }
.hero__przewin { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); text-decoration: none; }
.hero__przewin:hover { color: #fff; }
.hero__przewin i { position: relative; width: 1px; height: 44px; background: rgba(255,255,255,.3); overflow: hidden; }
.hero__przewin i::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #fff; animation: przewin 2.2s ease-in-out infinite; }
@keyframes przewin { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }
/* ściana: reaguje na mysz (zmienne --mx/--my z JS), wjeżdża przy ładowaniu */
.hero::after { height: 200px; }

/* pas branż */
.przewijak { overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--linia); padding: 18px 0; }
.przewijak__tor { display: flex; align-items: center; gap: 34px; width: max-content; animation: przewijak 60s linear infinite; }
.przewijak span { font-family: var(--font-naglowek); font-style: italic; font-size: 22px; color: var(--ink-2); white-space: nowrap; }
.przewijak i { width: 5px; height: 5px; border-radius: 50%; background: var(--kropka); flex: none; }
@keyframes przewijak { to { transform: translateX(-50%); } }
.przewijak:hover .przewijak__tor { animation-play-state: paused; }

/* pokaz wybranych projektów */
.pokaz { padding: clamp(72px, 9vw, 128px) 0; overflow: hidden; }
.pokaz__glowa { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.pokaz__glowa h2 { margin-top: 20px; font-size: clamp(32px, 3.8vw, 52px); color: #fff; }
.pokaz__numery { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
.pokaz__numery button { display: flex; align-items: center; gap: 18px; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); background: none; color: rgba(255,255,255,.55); font: 600 14px/1.3 var(--font); letter-spacing: .02em; text-align: left; cursor: pointer; transition: color .25s, padding-left .25s; }
.pokaz__numery button span { font-family: var(--font-naglowek); font-size: 15px; color: rgba(255,255,255,.35); }
.pokaz__numery button:hover { color: #fff; }
.pokaz__numery button[aria-current] { color: #fff; padding-left: 14px; }
.pokaz__numery button[aria-current] span { color: var(--brand-jasny); }
.pokaz__scena { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.pokaz__ramka { position: relative; background: #0E1013; box-shadow: 0 60px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.pokaz__ramka .okno__pasek { background: #16191D; border-bottom-color: rgba(255,255,255,.08); }
.pokaz__ramka .okno__pasek i { background: #3A3F47; }
.pokaz__ramka .okno__pasek span { background: #0E1013; color: rgba(255,255,255,.55); }
.pokaz__ekrany { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pokaz__ekrany img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 8s linear; }
.pokaz__ekrany img.jest { opacity: 1; transform: scale(1); }
.pokaz__postep { height: 2px; background: rgba(255,255,255,.1); }
.pokaz__postep i { display: block; height: 100%; width: 0; background: var(--brand-jasny); }
.pokaz__postep i.leci { width: 100%; transition: width var(--czas, 7s) linear; }
.pokaz__tel { position: absolute; left: calc(63% - 170px); bottom: -7%; width: 13%; min-width: 120px; max-width: 180px; aspect-ratio: 390 / 790; border: 5px solid #0B1220; border-radius: 22px; background: #0B1220; box-shadow: 0 40px 80px -24px rgba(0,0,0,.9); overflow: hidden; z-index: 2; }
.pokaz__tel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 16px; opacity: 0; transition: opacity 1s ease; }
.pokaz__tel img.jest { opacity: 1; }
.pokaz__opis { position: relative; min-height: 360px; }
.pokaz__karta { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.pokaz__karta.jest { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.pokaz__licznik { font-family: var(--font-naglowek); font-size: 15px; color: var(--brand-jasny); letter-spacing: .04em; }
.pokaz__licznik span { color: rgba(255,255,255,.4); }
.pokaz__karta h3 { margin-top: 14px; font-family: var(--font-naglowek); font-weight: 500; font-size: clamp(28px, 2.6vw, 36px); color: #fff; }
.pokaz__branza { margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pokaz__tekst { margin-top: 18px; font-size: 15.5px; color: rgba(255,255,255,.76); line-height: 1.6; }
.pokaz__cechy { display: grid; gap: 8px; margin: 20px 0 24px; }
.pokaz__cechy li { position: relative; padding-left: 20px; font-size: 14px; color: rgba(255,255,255,.85); }
.pokaz__cechy li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--brand-jasny); }
.pokaz__ster { display: flex; gap: 0; margin-top: 28px; border: 1px solid rgba(255,255,255,.25); width: max-content; }
.pokaz__ster button { width: 52px; height: 48px; border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.pokaz__ster button + button { border-left: 1px solid rgba(255,255,255,.25); }
.pokaz__ster button:hover { background: rgba(255,255,255,.1); }
.pokaz__dol { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.pokaz__dol p { font-size: 13.5px; color: rgba(255,255,255,.58); }

/* liczby */
.liczby { background: var(--paper); border-bottom: 1px solid var(--linia); }
.liczby__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.liczby__in > div { padding: clamp(36px, 4vw, 56px) 28px clamp(36px, 4vw, 56px) 0; }
.liczby__in > div + div { padding-left: 28px; border-left: 1px solid var(--linia); }
.liczby b { display: block; font-family: var(--font-naglowek); font-weight: 400; font-size: clamp(44px, 4.6vw, 68px); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.liczby span { display: block; margin-top: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.5; max-width: 30ch; }

/* proces: lewa kolumna przyklejona, kroki rozświetlają się przy przewijaniu */
.proces { padding: clamp(72px, 9vw, 128px) 0; }
.proces__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.proces__przyklej { position: sticky; top: calc(var(--gora-h) + 40px); }
.proces__przyklej h2 { margin-top: 20px; font-size: clamp(32px, 3.6vw, 48px); }
.proces__przyklej .lead { margin-top: 20px; }
.proces__duzy { margin-top: 36px; font-family: var(--font-naglowek); font-weight: 400; font-size: clamp(96px, 11vw, 160px); line-height: .9; letter-spacing: -.03em; color: var(--ink); }
.proces__duzy span { display: inline-block; min-width: 1.2em; transition: opacity .3s; }
.proces__duzy small { font-size: .22em; color: var(--ink-4); letter-spacing: 0; margin-left: .2em; }
.proces__kroki { border-top: 1px solid var(--linia-2); }
.proces__krok { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 40px 0; border-bottom: 1px solid var(--linia); opacity: .38; transition: opacity .5s ease; }
.proces__krok.jest { opacity: 1; }
.proces__nr { font-family: var(--font-naglowek); font-size: 30px; line-height: 1; color: var(--ink-4); padding-top: 4px; }
.proces__krok.jest .proces__nr { color: var(--brand); }
.proces__krok--ty.jest .proces__nr { color: var(--kropka); }
.proces__krok h3 { font-family: var(--font-naglowek); font-weight: 500; font-size: 26px; margin-bottom: 12px; }
.proces__krok p { font-size: 16px; color: var(--ink-2); line-height: 1.6; max-width: 56ch; }
.proces__krok .krok__kto { margin-top: 14px; }

/* lista redakcyjna (co dostajesz) */
.lista-redakcyjna { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); border-top: 1px solid var(--linia-2); }
.lista-redakcyjna li { display: grid; grid-template-columns: 56px 1fr 24px; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--linia); align-items: start; }
.lista-redakcyjna__nr { font-family: var(--font-naglowek); font-size: 24px; color: var(--ink-4); padding-top: 2px; }
.lista-redakcyjna h3 { font-size: 18px; margin-bottom: 8px; }
.lista-redakcyjna p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.lista-redakcyjna__ik { width: 22px; height: 22px; color: var(--ink-4); margin-top: 2px; }

/* usługi jako rozwijana lista */
.akordeon { border-top: 1px solid var(--linia-2); }
.akordeon__poz { border-bottom: 1px solid var(--linia); }
.akordeon__poz summary { display: grid; grid-template-columns: 60px 1fr auto 40px; gap: 20px; align-items: center; padding: 26px 0; cursor: pointer; list-style: none; }
.akordeon__poz summary::-webkit-details-marker { display: none; }
.akordeon__nr { font-family: var(--font-naglowek); font-size: 18px; color: var(--ink-4); }
.akordeon__tytul { font-family: var(--font-naglowek); font-weight: 500; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.15; color: var(--ink); transition: transform .3s; }
.akordeon__poz summary:hover .akordeon__tytul { transform: translateX(8px); }
.akordeon__grupa { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.akordeon__plus { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linia-2); border-radius: 50%; color: var(--ink-2); transition: transform .3s, background .3s, color .3s; }
.akordeon__plus .ik { width: 16px; height: 16px; }
.akordeon__poz[open] .akordeon__plus { transform: rotate(45deg); background: var(--navy); color: #fff; border-color: var(--navy); }
.akordeon__tresc { display: grid; grid-template-columns: 80px minmax(0, 1.1fr) minmax(0, .9fr); gap: 0 32px; padding: 0 0 34px; }
.akordeon__tresc p { grid-column: 2; font-size: 16.5px; color: var(--ink-2); line-height: 1.6; max-width: 56ch; }
.akordeon__tresc ul { grid-column: 3; display: grid; gap: 8px; align-content: start; }
.akordeon__tresc li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--ink-2); }
.akordeon__tresc li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--ink-3); }
.akordeon__tresc .link { grid-column: 2; margin-top: 22px; justify-self: start; }

@media (max-width: 1100px) {
  .glowna .gora:not(.jest-cien).menu-otwarte .menu { background: var(--paper); }
  .pokaz__glowa { grid-template-columns: 1fr; }
  .pokaz__numery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 1000px) {
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero__in { min-height: 0; padding-top: calc(var(--gora-h) + 40px); padding-bottom: 0; gap: 28px; }
  .hero__dol { border-top: 0; padding-top: 0; }
  .hero__przewin { display: none; }
  .pokaz__scena { grid-template-columns: 1fr; gap: 48px; }
  .pokaz__tel { left: auto; right: 4%; bottom: auto; top: 36%; width: 22%; }
  .pokaz__opis { min-height: 0; }
  .liczby__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liczby__in > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .liczby__in > div:nth-child(-n+2) { border-bottom: 1px solid var(--linia); }
  .proces__in { grid-template-columns: 1fr; }
  .proces__przyklej { position: static; }
  .proces__duzy { display: none; }
  .proces__krok { opacity: 1; }
  .lista-redakcyjna { grid-template-columns: 1fr; }
  .akordeon__tresc { grid-template-columns: 1fr; gap: 16px; }
  .akordeon__tresc p, .akordeon__tresc ul, .akordeon__tresc .link { grid-column: 1; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(36px, 10vw, 44px); }
  .pokaz__numery { grid-template-columns: 1fr; }
  .pokaz__tel { display: none; }
  .liczby__in { grid-template-columns: 1fr; }
  .liczby__in > div, .liczby__in > div + div { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--linia); }
  .liczby__in > div:last-child { border-bottom: 0; }
  .akordeon__poz summary { grid-template-columns: 40px 1fr 40px; }
  .akordeon__grupa { display: none; }
  .proces__krok { grid-template-columns: 48px 1fr; }
  .przewijak span { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero h1 .slowo, .js .hero__pill, .js .hero__lead, .js .hero .sprawdz, .js .hero .sprawdz__pod, .js .hero__dol, .js .sciana__kol { animation: none; opacity: 1; transform: none; }
  .przewijak__tor, .hero__przewin i::after { animation: none; }
  .pokaz__ekrany img { transition: opacity .3s; transform: none; }
}


/* ===== Hero: galeria 12 kafli (3×4) w kontenerze strony; kafle zmieniają się po jednym ===== */
.hero::before, .hero::after { display: none; }
.hero__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "tekst galeria" "dol galeria"; gap: 24px clamp(40px, 5vw, 80px); align-items: center; justify-content: stretch; }
.hero__tekst { grid-area: tekst; max-width: 600px; }
.hero__dol { grid-area: dol; max-width: 600px; }
.galeria { grid-area: galeria; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-self: center; }
.galeria__kafel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #1A1D22; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 40px -24px rgba(0,0,0,.8); }
.js .galeria__kafel { opacity: 0; animation: wejdz-hero 1s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: calc(var(--i, 0) * 60ms + 250ms); }
.galeria__kafel img { transition: opacity 1.1s ease; }
@media (max-width: 1000px) {
  .hero__in { grid-template-columns: 1fr; grid-template-areas: "tekst" "galeria" "dol"; gap: 32px; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .galeria__kafel:nth-child(n+7) { display: none; }
  .hero__dol { border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .js .galeria__kafel { animation: none; opacity: 1; } }

/* ===== Korzyści (co daje Ci ta strona) ===== */
.korzysci__glowne { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: clamp(48px, 6vw, 80px); }
.korzysci__tekst h3 { margin-top: 18px; font-family: var(--font-naglowek); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); }
.korzysci__tekst > p { margin-top: 16px; color: var(--ink-2); font-size: 16.5px; }
.korzysci__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linia-2); border-left: 1px solid var(--linia-2); }
.korzysci__lista li { position: relative; padding: 30px 26px 30px; border-right: 1px solid var(--linia-2); border-bottom: 1px solid var(--linia-2); background: #fff; }
.korzysci__nr { display: block; font-family: var(--font-naglowek); font-size: 15px; color: var(--ink-4); margin-bottom: 22px; }
.korzysci__ik { position: absolute; top: 28px; right: 24px; width: 20px; height: 20px; color: var(--ink-4); }
.korzysci__lista h3 { font-size: 17.5px; margin-bottom: 10px; }
.korzysci__lista p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 1000px) { .korzysci__glowne { grid-template-columns: 1fr; } .korzysci__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .korzysci__lista { grid-template-columns: 1fr; } }
/* ===== Hero „wow”: zorza światła, galeria jako przechylona tafla z odblaskiem, szklane pole narzędzia, gradient na kursywie ===== */
.hero { background: radial-gradient(120% 90% at 85% 0%, #10304D 0%, var(--navy) 45%, #081625 100%); }
.zorza { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.zorza i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; mix-blend-mode: screen; will-change: transform; }
.zorza i:nth-child(1) { width: 60vw; height: 60vw; left: 35%; top: -30%; background: radial-gradient(circle, rgba(31,127,196,.9), rgba(31,127,196,0) 62%); animation: zorza1 26s ease-in-out infinite alternate; }
.zorza i:nth-child(2) { width: 46vw; height: 46vw; left: 56%; top: 30%; background: radial-gradient(circle, rgba(56,189,248,.6), rgba(56,189,248,0) 62%); animation: zorza2 32s ease-in-out infinite alternate; }
.zorza i:nth-child(3) { width: 40vw; height: 40vw; left: -12%; top: 50%; background: radial-gradient(circle, rgba(91,75,181,.55), rgba(91,75,181,0) 62%); animation: zorza3 38s ease-in-out infinite alternate; }
@keyframes zorza1 { to { transform: translate(-12%, 14%) scale(1.15); } }
@keyframes zorza2 { to { transform: translate(-18%, -16%) scale(.9); } }
@keyframes zorza3 { to { transform: translate(20%, -22%) scale(1.2); } }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 em { background: linear-gradient(92deg, #9BD9FF 0%, #5FB4E6 45%, #C7E9FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__pill::before { background: var(--brand-jasny); }
.hero .sprawdz { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12); }
.hero .sprawdz input { color: #fff; }
.hero .sprawdz input::placeholder { color: rgba(255,255,255,.5); }
.hero .sprawdz label .ik { color: rgba(255,255,255,.55); }
.hero .sprawdz:focus-within { border-color: rgba(255,255,255,.5); }
.hero .sprawdz .btn { background: #fff; color: var(--navy); border-left: 1px solid rgba(255,255,255,.18); }
.hero .sprawdz .btn:hover { background: var(--brand-jasny); color: var(--navy); }
/* galeria: tafla w lekkiej perspektywie, kolumny o różnej wysokości, odblask na kaflach */
.galeria { position: relative; perspective: 1600px; }
.galeria__tafla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; transform: rotateY(calc(-7deg + var(--mx, 0) * 3deg)) rotateX(calc(3deg + var(--my, 0) * -2deg)); transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.galeria__kol { display: flex; flex-direction: column; gap: 16px; transform: translateY(calc(var(--k, 0) * 1px + var(--s, 0) * var(--p, 0) * 1px)); transition: transform .4s ease-out; }
.galeria__kol:nth-child(1) { --k: 28; --p: -30; }
.galeria__kol:nth-child(2) { --k: -22; --p: -70; }
.galeria__kol:nth-child(3) { --k: 10; --p: -45; }
.galeria__kafel { box-shadow: 0 30px 60px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px -20px rgba(56,189,248,.25); border: 0; }
.galeria__kafel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 28%, rgba(255,255,255,0) 50%, rgba(0,0,0,.15) 100%); }
.galeria::before { content: ""; position: absolute; inset: 10% -6% -12% -6%; z-index: -1; background: radial-gradient(60% 60% at 50% 60%, rgba(31,127,196,.35), transparent 70%); filter: blur(30px); }
.galeria__plakietka { position: absolute; left: -18px; bottom: -26px; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; box-shadow: 0 30px 60px -28px rgba(0,0,0,.8); }
.galeria__plakietka b { font-family: var(--font-naglowek); font-weight: 400; font-size: 40px; line-height: 1; }
.galeria__plakietka span { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.72); letter-spacing: .02em; }
.js .galeria__plakietka { opacity: 0; animation: wejdz-hero 1s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: 1.2s; }
@media (max-width: 1000px) {
  .galeria__tafla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; transform: none; }
  .galeria__kol { gap: 10px; transform: none; }
  .galeria__kol:nth-child(3) { display: none; }
  .galeria__kafel:nth-child(n+7) { display: block; }
  .galeria__plakietka { position: static; margin-top: 16px; width: max-content; }
  .zorza i { filter: blur(60px); }
}
@media (prefers-reduced-motion: reduce) { .zorza i { animation: none; } .galeria__tafla, .galeria__kol { transition: none; } }

/* ===== Hero: mozaika kafli z fragmentami projektów jako tło całego hero ===== */
.hero__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "dol"; }
.galeria, .galeria__plakietka { display: none; }
.mozaika { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: dense; gap: 5px; overflow: hidden; }
.mozaika__kafel { position: relative; overflow: hidden; background: #0E1A28; }
.mozaika__kafel--duzy { grid-column: span 2; grid-row: span 2; }
.mozaika__kafel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.6s ease, transform 12s linear; filter: saturate(.92) brightness(.78) contrast(1.02); transform-origin: center; }
.mozaika__kafel img.c1 { object-position: 50% 0%; }
.mozaika__kafel img.c2 { object-position: 50% 35%; }
.mozaika__kafel img.c3 { object-position: 50% 100%; }
.mozaika__kafel img.c4 { object-position: 0% 20%; transform: scale(1.9); transform-origin: 10% 20%; }
.mozaika__kafel img.c5 { object-position: 100% 10%; transform: scale(1.8); transform-origin: 90% 15%; }
.mozaika__kafel img.c6 { object-position: 50% 60%; transform: scale(2.2); transform-origin: 50% 60%; }
.mozaika__kafel img.c7 { object-position: 20% 85%; transform: scale(1.6); transform-origin: 20% 85%; }
.mozaika__kafel img + img { opacity: 0; }
.mozaika__kafel.is-b img + img { opacity: 1; }
.mozaika__kafel.is-b img:first-child { opacity: 0; }
.js .mozaika__kafel { opacity: 0; animation: wejdz-hero 1.4s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: calc(var(--i, 0) * 35ms); }
.hero::before { display: block; content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,31,51,.96) 0%, rgba(11,31,51,.9) 30%, rgba(11,31,51,.62) 52%, rgba(11,31,51,.3) 75%, rgba(11,31,51,.45) 100%),
              linear-gradient(180deg, rgba(11,31,51,.7) 0%, rgba(11,31,51,0) 22%, rgba(11,31,51,0) 70%, rgba(11,31,51,.85) 100%); }
.zorza { z-index: 0; opacity: .7; }
.zorza i { mix-blend-mode: screen; }
.hero > .wrap { z-index: 1; }
.hero__tekst { max-width: 640px; }
.hero__dol { max-width: 640px; }
@media (max-width: 1000px) {
  .mozaika { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .hero::before { background: linear-gradient(180deg, rgba(11,31,51,.9) 0%, rgba(11,31,51,.86) 60%, rgba(11,31,51,.92) 100%); }
  .hero__in { grid-template-areas: "tekst" "dol"; }
}
@media (prefers-reduced-motion: reduce) { .js .mozaika__kafel { animation: none; opacity: 1; } .mozaika__kafel img { transition: none; } }
.hero::before { z-index: 1; }
.zorza { z-index: 1; opacity: .55; }
.hero > .wrap { z-index: 2; }
.hero.grain::after { display: block; z-index: 1; }
.mozaika__kafel img { filter: saturate(.9) brightness(.7) contrast(1.02); }
/* głębia: co piąty kafel lekko rozmyty i ciemniejszy, duże kafle ostre */
.mozaika__kafel:nth-child(5n+2):not(.mozaika__kafel--duzy) img { filter: saturate(.8) brightness(.55) blur(1.5px); }
/* mniej i większych kafli: 5 kolumn na komputerze, 2 na telefonie; rozmycie tylko na jednym rzędzie co trzeci */
.mozaika { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mozaika__kafel:nth-child(5n+2):not(.mozaika__kafel--duzy) img { filter: saturate(.9) brightness(.7) contrast(1.02); }
.mozaika__kafel:nth-child(3n+1):not(.mozaika__kafel--duzy) img { filter: saturate(.8) brightness(.58) blur(1px); }
@media (max-width: 1000px) { .mozaika { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .mozaika__kafel--duzy { grid-column: span 2; grid-row: span 1; } }

/* ===== Animowany pokaz panelu (komputer + telefon), pętla 14 s na wspólnej osi czasu ===== */
.pdemo { position: relative; padding-bottom: 40px; }
.pdemo__desk { position: relative; background: #fff; border: 1px solid var(--linia); box-shadow: var(--cien-duzy); overflow: hidden; }
.pdemo__uklad { display: grid; grid-template-columns: 118px 1fr 1fr; min-height: 300px; font-size: 11.5px; color: var(--ink-2); }
.pdemo__menu { padding: 14px 12px; background: var(--navy); color: rgba(255,255,255,.7); display: grid; align-content: start; gap: 6px; }
.pdemo__menu b { color: #fff; font-size: 12px; margin-bottom: 8px; }
.pdemo__menu span { padding: 5px 8px; border-radius: 3px; }
.pdemo__menu span.jest { background: rgba(255,255,255,.12); color: #fff; }
.pdemo__menu span i { float: right; font-style: normal; background: var(--brand-jasny); color: var(--navy); font-weight: 700; padding: 0 5px; border-radius: 8px; font-size: 10px; }
.pdemo__edycja { padding: 16px 16px 14px; border-right: 1px solid var(--linia); }
.pdemo__tytul { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.pdemo__tytul + .pdemo__tytul, .pdemo__wiersz + .pdemo__tytul { margin-top: 16px; }
.pdemo__wiersz { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linia); border-radius: 3px; background: #fff; margin-bottom: 6px; }
.pdemo__wiersz b { font-weight: 600; color: var(--ink); position: relative; }
.pdemo__wiersz b em, .pdemo__godz b em { font-style: normal; }
.pdemo__wiersz--pole { animation: pd-pole 14s infinite; }
@keyframes pd-pole { 0%, 13% { border-color: var(--linia); box-shadow: none; } 15%, 30% { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,108,168,.15); } 32%, 100% { border-color: var(--linia); box-shadow: none; } }
.pdemo__stare { animation: pd-stare 14s infinite; }
.pdemo__nowe { position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; width: 0; animation: pd-nowe 14s steps(11) infinite; }
@keyframes pd-stare { 0%, 17% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes pd-nowe { 0%, 17% { width: 0; } 24%, 100% { width: 100%; } }
.pdemo__przel { position: relative; width: 30px; height: 17px; border-radius: 9px; background: #CBD2D9; flex: none; transition: background .3s; animation: pd-przel 14s infinite; }
.pdemo__przel u { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); animation: pd-przel-u 14s infinite; }
@keyframes pd-przel { 0%, 36% { background: #CBD2D9; } 37%, 100% { background: var(--ok); } }
@keyframes pd-przel-u { 0%, 36% { transform: translateX(0); } 37%, 100% { transform: translateX(13px); } }
.pdemo__btn { position: relative; margin-top: 14px; width: 100%; height: 32px; border: 0; border-radius: 3px; background: var(--navy); color: #fff; font: 700 11px/32px var(--font); letter-spacing: .1em; text-transform: uppercase; overflow: hidden; cursor: default; }
.pdemo__btn span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pdemo__btn .ik { width: 13px; height: 13px; }
.pdemo__btn-a { animation: pd-btn-a 14s infinite; }
.pdemo__btn-b { background: var(--ok); opacity: 0; animation: pd-btn-b 14s infinite; }
@keyframes pd-btn-a { 0%, 54% { transform: scale(1); } 55% { transform: scale(.96); } 56%, 100% { transform: scale(1); } }
@keyframes pd-btn-b { 0%, 55% { opacity: 0; } 57%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
.pdemo__podglad { padding: 16px; background: var(--stone); }
.pdemo__strona { position: relative; background: #fff; border: 1px solid var(--linia); border-radius: 3px; padding: 10px; min-height: 190px; overflow: hidden; }
.pdemo__naglowek { display: block; height: 34px; margin-bottom: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--navy), var(--navy-3)); }
.pdemo__baner { max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0; padding: 0 8px; border-radius: 3px; background: #FFF4E0; color: #8A4A12; font-weight: 700; font-size: 10.5px; line-height: 24px; animation: pd-baner 14s infinite; }
@keyframes pd-baner { 0%, 39% { max-height: 0; opacity: 0; margin-bottom: 0; } 42%, 88% { max-height: 24px; opacity: 1; margin-bottom: 8px; } 92%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; } }
.pdemo__godz { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid var(--linia); color: var(--ink-2); }
.pdemo__godz b { color: var(--ink); position: relative; }
.pdemo__godz .pdemo__stare { animation-name: pd-stare-podglad; }
.pdemo__godz .pdemo__nowe { animation: pd-nowe-podglad 14s infinite; }
@keyframes pd-stare-podglad { 0%, 25% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes pd-nowe-podglad { 0%, 25% { width: 0; opacity: 0; } 26%, 100% { width: 100%; opacity: 1; } }
.pdemo__przycisk { display: block; width: 46%; height: 20px; margin-top: 12px; border-radius: 3px; background: var(--brand); }
.pdemo__kursor { position: absolute; left: 0; top: 0; width: 14px; height: 14px; pointer-events: none; z-index: 3; animation: pd-kursor 14s infinite; }
.pdemo__kursor::before { content: ""; position: absolute; inset: 0; background: var(--ink); clip-path: polygon(0 0, 100% 55%, 60% 60%, 80% 100%, 65% 100%, 45% 65%, 0 85%); filter: drop-shadow(0 1px 1px rgba(255,255,255,.8)); }
@keyframes pd-kursor { 0% { transform: translate(60%, 70%); opacity: 0; } 6% { opacity: 1; } 14% { transform: translate(49%, 29%); } 15% { transform: translate(49%, 29%) scale(.85); } 16%, 29% { transform: translate(49%, 29%) scale(1); } 36% { transform: translate(52%, 58%); } 37% { transform: translate(52%, 58%) scale(.85); } 38%, 47% { transform: translate(52%, 58%) scale(1); } 54% { transform: translate(40%, 80%); } 55% { transform: translate(40%, 80%) scale(.85); } 56%, 70% { transform: translate(40%, 80%) scale(1); } 80% { transform: translate(60%, 70%); opacity: 1; } 86%, 100% { opacity: 0; } }
.pdemo__kursor { left: 0; top: 0; }
/* kursor liczony w % szerokości/wysokości ramki: przesunięcie przez pozycję absolutną w % */
.pdemo__desk .pdemo__kursor { position: absolute; width: 1%; height: 1%; left: 0; top: 0; }
.pdemo__desk .pdemo__kursor::before { width: 14px; height: 14px; inset: auto; }
/* telefon */
.pdemo__tel { position: absolute; right: -4%; bottom: 0; width: 26%; min-width: 150px; border: 5px solid #0B1220; border-radius: 22px; background: #0B1220; box-shadow: var(--cien-duzy); overflow: hidden; }
.pdemo__tel-ekran { position: relative; background: #fff; border-radius: 17px; padding: 14px 10px 12px; aspect-ratio: 390 / 640; font-size: 10.5px; color: var(--ink-2); }
.pdemo__tel-glowa { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pdemo__tel-glowa b { font-family: var(--font-naglowek); font-weight: 500; font-size: 16px; color: var(--ink); }
.pdemo__tel-glowa span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.pdemo__tel .pdemo__wiersz { padding: 7px 8px; }
.pdemo__przel--tel { animation-name: pd-przel-tel; }
.pdemo__przel--tel u { animation-name: pd-przel-tel-u; }
@keyframes pd-przel-tel { 0%, 64% { background: #CBD2D9; } 65%, 100% { background: var(--ok); } }
@keyframes pd-przel-tel-u { 0%, 64% { transform: translateX(0); } 65%, 100% { transform: translateX(13px); } }
.pdemo__przel--tel2, .pdemo__przel--tel2 u { animation: none; }
.pdemo__zapisano { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding: 6px 8px; border-radius: 3px; background: #E6F2EC; color: var(--ok); font-weight: 700; font-size: 10px; opacity: 0; animation: pd-zapisano 14s infinite; }
.pdemo__zapisano .ik { width: 11px; height: 11px; }
@keyframes pd-zapisano { 0%, 66% { opacity: 0; transform: translateY(4px); } 68%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.pdemo__palec { position: absolute; left: 72%; top: 24%; width: 22px; height: 22px; border-radius: 50%; background: rgba(15,108,168,.25); border: 2px solid rgba(15,108,168,.6); opacity: 0; animation: pd-palec 14s infinite; }
@keyframes pd-palec { 0%, 58% { opacity: 0; transform: scale(.6); } 62% { opacity: 1; transform: scale(1); } 65% { transform: scale(.75); } 68% { opacity: 1; transform: scale(1.3); } 72%, 100% { opacity: 0; } }
@media (max-width: 1000px) { .pdemo { padding-bottom: 0; } .pdemo__tel { display: none; } }
@media (max-width: 600px) { .pdemo__uklad { grid-template-columns: 1fr 1fr; } .pdemo__menu { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pdemo * { animation: none !important; }
  .pdemo__stare { opacity: 0; } .pdemo__nowe { width: 100%; opacity: 1; }
  .pdemo__przel, .pdemo__przel--tel { background: var(--ok); } .pdemo__przel u { transform: translateX(13px); }
  .pdemo__baner { max-height: 24px; opacity: 1; margin-bottom: 8px; } .pdemo__btn-b { opacity: 1; } .pdemo__zapisano { opacity: 1; } .pdemo__kursor { display: none; }
}

/* ===== Hero: uporządkowana galeria całych ekranów projektów ===== */
.mozaika { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: max-content; grid-auto-flow: row; align-content: start; gap: 12px; padding: 12px; }
.mozaika__kafel { aspect-ratio: 16 / 10; border-radius: 4px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 40px -24px rgba(0,0,0,.8); }
.mozaika__kafel--duzy { grid-column: auto; grid-row: auto; }
.mozaika__kafel img, .mozaika__kafel:nth-child(3n+1) img, .mozaika__kafel:nth-child(5n+2) img { object-position: 50% 0; transform: none; filter: saturate(.9) brightness(.72) contrast(1.02); transition: opacity 1.6s ease; }
.hero::before { background: linear-gradient(90deg, rgba(11,31,51,.97) 0%, rgba(11,31,51,.92) 32%, rgba(11,31,51,.7) 50%, rgba(11,31,51,.42) 72%, rgba(11,31,51,.55) 100%),
  linear-gradient(180deg, rgba(11,31,51,.75) 0%, rgba(11,31,51,.05) 25%, rgba(11,31,51,.05) 65%, rgba(11,31,51,.95) 100%); }
.hero h1 { font-size: clamp(40px, 4.4vw, 72px); }
.hero h1 em { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--brand-jasny); }
.hero__tekst { max-width: 620px; }
@media (min-width: 1700px) { .hero__in { padding-top: calc(var(--gora-h) + 60px); } .hero__tekst, .hero__dol { max-width: 680px; } }
@media (max-width: 1000px) { .mozaika { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; } .hero::before { background: linear-gradient(180deg, rgba(11,31,51,.9) 0%, rgba(11,31,51,.86) 60%, rgba(11,31,51,.94) 100%); } }

/* ===== Hero: jedna kolumna o stałej szerokości, równy rytm pionowy, atuty w siatce 2×2 ===== */
.hero__tekst, .hero__dol { max-width: 600px; }
.hero__pill { margin: 0; }
.hero h1 { margin: 22px 0 22px; font-size: clamp(40px, 4.2vw, 68px); line-height: 1.04; }
.hero__lead { max-width: none; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.6; color: rgba(255,255,255,.78); }
.sprawdz { margin-top: 32px; height: 58px; border-radius: 3px; }
.sprawdz label { padding: 0; }
.sprawdz input { height: 56px; font-size: 16px; }
.sprawdz .btn { min-height: 56px; padding: 0 24px; border-radius: 0 3px 3px 0; }
.sprawdz__pod { margin-top: 12px; gap: 6px 16px; font-size: 13px; }
.sprawdz__pod span::after { content: "·"; margin-left: 16px; color: rgba(255,255,255,.35); }
.hero__in { gap: 32px; }
.hero__dol { display: block; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.hero__punkty { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0; padding: 0; border: 0; }
.hero__punkty li { font-size: 13.5px; letter-spacing: .02em; color: rgba(255,255,255,.85); }
.hero__przewin { display: none; }
@media (max-width: 860px) { .sprawdz { height: auto; } .sprawdz .btn { border-radius: 0 0 3px 3px; } .sprawdz__pod span::after { content: none; } }
@media (max-width: 600px) { .hero__punkty { grid-template-columns: 1fr; gap: 10px; } }

/* ===== Makieta panelu: telefon pełniejszy; na małych ekranach zamiast komputera duży telefon ===== */
.pdemo__tel-podglad { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px; border-radius: 3px; background: var(--navy); color: rgba(255,255,255,.85); font-size: 9.5px; opacity: 0; animation: pd-telpod 14s infinite; }
.pdemo__tel-podglad i { width: 22px; height: 14px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-jasny)); flex: none; }
.pdemo__tel-podglad b { color: #fff; }
@keyframes pd-telpod { 0%, 70% { opacity: 0; transform: translateY(4px); } 73%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.pdemo__tel .pdemo__wiersz--pole { animation-name: pd-pole-tel; }
@keyframes pd-pole-tel { 0%, 40% { border-color: var(--linia); box-shadow: none; } 42%, 56% { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,108,168,.15); } 58%, 100% { border-color: var(--linia); box-shadow: none; } }
.pdemo__tel .pdemo__stare { animation-name: pd-stare-tel; }
.pdemo__tel .pdemo__nowe { animation-name: pd-nowe-tel; }
@keyframes pd-stare-tel { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes pd-nowe-tel { 0%, 45% { width: 0; } 52%, 100% { width: 100%; } }
.pdemo__tel-ekran { aspect-ratio: auto; min-height: 0; padding-bottom: 16px; }
@media (max-width: 1000px) {
  .pdemo { display: grid; justify-items: center; padding: 8px 0 0; }
  .pdemo__desk { display: none; }
  .pdemo__tel { display: block; position: relative; right: auto; bottom: auto; width: min(100%, 300px); min-width: 0; border-width: 6px; border-radius: 28px; }
  .pdemo__tel-ekran { border-radius: 22px; padding: 18px 14px 16px; font-size: 13px; }
  .pdemo__tel-glowa b { font-size: 20px; }
  .pdemo__tel .pdemo__wiersz { padding: 10px 12px; margin-bottom: 8px; }
  .pdemo__przel { width: 36px; height: 20px; border-radius: 10px; }
  .pdemo__przel u { width: 16px; height: 16px; }
  @keyframes pd-przel-tel-u { 0%, 64% { transform: translateX(0); } 65%, 100% { transform: translateX(16px); } }
  .pdemo__zapisano { font-size: 12px; padding: 8px 10px; }
  .pdemo__zapisano .ik { width: 13px; height: 13px; }
  .pdemo__tel-podglad { font-size: 11.5px; padding: 10px; }
  .pdemo__palec { left: 74%; top: 17%; width: 28px; height: 28px; }
}

/* narzędzie na jasnej stronie /sprawdz/: białe pole, ciemny tekst, granatowy przycisk */
.narzedzie .sprawdz { background: #fff; border: 1px solid var(--linia-2); box-shadow: var(--cien); backdrop-filter: none; }
.narzedzie .sprawdz input { color: var(--ink); }
.narzedzie .sprawdz input::placeholder { color: var(--ink-4); }
.narzedzie .sprawdz label .ik { color: var(--ink-4); }
.narzedzie .sprawdz:focus-within { border-color: var(--navy); }
.narzedzie .sprawdz .btn { background: var(--navy); color: #fff; border-left: 1px solid var(--navy); }
.narzedzie .sprawdz .btn:hover { background: var(--navy-3); }
.narzedzie .sprawdz__pod { color: var(--ink-3); }
.narzedzie .sprawdz__pod span::after { content: none; }

/* ===== Nagłówek: mniej pozycji, spokojniejsza typografia ===== */
:root { --gora-h: 76px; }
.gora__in { gap: 32px; }
.marka { font-size: 19px; gap: 12px; }
.marka img { width: 38px; height: 38px; }
.menu { margin-left: 8px; }
.menu > ul { gap: 8px; }
.menu > ul > li > a { height: 42px; padding: 0 12px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); border-bottom: 0; border-radius: 3px; }
.menu > ul > li > a:hover, .menu > ul > li > a[aria-current] { color: var(--ink); background: var(--stone); }
.glowna .gora:not(.jest-cien) .menu > ul > li > a:hover, .glowna .gora:not(.jest-cien) .menu > ul > li > a[aria-current] { background: rgba(255,255,255,.1); border-bottom: 0; }
.menu__rozwin { margin-left: -10px; }
.menu__pod { width: 360px; padding: 8px; border-radius: 4px; }
.menu__pod a { padding: 10px 12px; font-size: 14.5px; }
.menu__pod small { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.menu__pod-grupa { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linia); }
.gora__akcje { gap: 12px; }
.gora__cta { font-size: 12px; letter-spacing: .12em; min-height: 42px; padding: 0 18px; }
@media (max-width: 1100px) {
  .menu > ul > li > a { height: 54px; font-size: 17px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--linia); }
  .menu > ul > li > a:hover, .menu > ul > li > a[aria-current] { background: transparent; }
  .menu__pod-grupa { margin-top: 4px; padding-top: 4px; }
}

/* ===== Nagłówek nad hero: wyraźny, ciemny pasek z cienką linią, hero zaczyna się pod nim ===== */
.glowna .gora { margin-bottom: 0; }
.glowna .gora:not(.jest-cien) { background: rgba(9,25,42,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.14); }
.glowna .gora:not(.jest-cien) .menu > ul > li > a { color: rgba(255,255,255,.82); }
.glowna .gora:not(.jest-cien) .menu > ul > li > a:hover, .glowna .gora:not(.jest-cien) .menu > ul > li > a[aria-current] { color: #fff; background: rgba(255,255,255,.08); }
.glowna .gora:not(.jest-cien) .gora__cta { background: #fff; color: var(--navy); border-color: #fff; }
.glowna .gora:not(.jest-cien) .gora__cta:hover { background: var(--brand-jasny); border-color: var(--brand-jasny); }
.glowna .hero { min-height: calc(100vh - var(--gora-h)); min-height: calc(100svh - var(--gora-h)); }
.glowna .hero__in { min-height: calc(100svh - var(--gora-h)); padding-top: clamp(40px, 6vh, 72px); }
@media (max-width: 1000px) { .glowna .hero__in { min-height: 0; padding-top: 40px; } }

/* ===== Nagłówek: elementy ozdobne ze smakiem – linia światła na górze, podkreślenia rosnące od lewej, znak z podpisem ===== */
:root { --gora-h: 80px; }
.gora::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-jasny) 35%, rgba(95,180,230,.15) 70%, transparent 100%); pointer-events: none; }
.marka { align-items: center; gap: 13px; }
.marka img { width: 40px; height: 40px; border-radius: 6px; box-shadow: 0 6px 16px -8px rgba(15,108,168,.6); }
.marka__slowo { display: grid; line-height: 1.05; }
.marka__slowo small { margin-top: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-4); }
.glowna .gora:not(.jest-cien) .marka__slowo small { color: rgba(255,255,255,.5); }
.menu > ul > li > a { position: relative; background: transparent !important; border-radius: 0; padding: 0 2px; margin: 0 10px; }
.menu > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.menu > ul > li > a:hover::after, .menu > ul > li > a[aria-current]::after { transform: scaleX(1); }
.menu > ul > li > a[aria-current]::after { background: var(--brand); }
.glowna .gora:not(.jest-cien) .menu > ul > li > a[aria-current]::after { background: var(--brand-jasny); }
.menu__rozwin { margin-left: -6px; }
.gora__cta { position: relative; transition: background .25s, border-color .25s, color .25s, box-shadow .35s, transform .25s; }
.gora__cta:hover { box-shadow: 0 10px 30px -12px rgba(95,180,230,.55); transform: translateY(-1px); }
.glowna .gora:not(.jest-cien) .gora__cta { box-shadow: 0 10px 30px -14px rgba(95,180,230,.45); }
.gora__cta .ik { transition: transform .3s; }
.gora__cta:hover .ik { transform: translateX(4px); }
@media (max-width: 1100px) {
  .menu > ul > li > a { margin: 0; padding: 0 4px; }
  .menu > ul > li > a::after { display: none; }
  .marka__slowo small { display: none; }
}

/* ===== Hero: pole narzędzia zaraz pod nagłówkiem, motto w serifie pod spodem; znak słowny w jednej linii ===== */
.marka__slowo { display: block; white-space: nowrap; }
.marka__slowo small { display: block; }
.hero h1 { margin-bottom: 26px; }
.hero .sprawdz { margin-top: 0; }
.hero__motto { margin: 34px 0 0; padding-left: 22px; border-left: 1px solid rgba(95,180,230,.7); }
.hero__motto em { display: block; font-family: var(--font-naglowek); font-style: italic; font-weight: 400; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; color: #fff; }
.hero__motto span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.66); }
.js .hero__motto { opacity: 0; animation: wejdz-hero 1s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: 1.2s; }
.js .hero .sprawdz { animation-delay: .85s; }
.js .hero .sprawdz__pod { animation-delay: 1s; }
.js .hero__dol { animation-delay: 1.35s; }
@media (prefers-reduced-motion: reduce) { .js .hero__motto { animation: none; opacity: 1; } }

/* =====================================================================================================================
   HERO 2: spokojny granat, kolumna tekstu + scena z przewijanymi pełnymi stronami (przeglądarka + telefon)
   ===================================================================================================================== */
.glowna .gora, .glowna .gora:not(.jest-cien) { background: #081A2C; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.glowna .gora.jest-cien { background: rgba(251,251,249,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--linia); }
.hero2 { position: relative; overflow: hidden; background: #0A1E33; color: #fff; isolation: isolate; }
.hero2::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 78% 40%, rgba(46,128,190,.28), transparent 70%), radial-gradient(40% 50% at 10% 100%, rgba(95,180,230,.08), transparent 70%), linear-gradient(180deg, #081A2C 0%, #0A1E33 40%, #0B2238 100%); }
.hero2::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero2__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 104px); align-items: center; min-height: calc(100svh - var(--gora-h)); padding: clamp(56px, 8vh, 104px) 0 clamp(64px, 9vh, 112px); }
.hero2__etykieta { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.hero2__etykieta::before { content: ""; width: 32px; height: 1px; background: var(--brand-jasny); }
.hero2 h1 { margin: 28px 0 26px; font-family: var(--font-naglowek); font-weight: 400; font-size: clamp(40px, 4.4vw, 70px); line-height: 1.05; letter-spacing: -.015em; color: #fff; }
.hero2 h1 em { font-style: italic; font-weight: 400; color: #8FCBEE; }
.hero2 h1 .slowo { display: inline-block; }
.js .hero2 h1 .slowo { opacity: 0; transform: translateY(.4em); animation: slowo 1.1s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.hero2__lead { max-width: 500px; font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.65; color: rgba(255,255,255,.7); }
.hero2__form { display: flex; align-items: center; gap: 6px; max-width: 520px; margin-top: 36px; padding: 6px; background: #fff; border-radius: 6px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); }
.hero2__form label { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.hero2__form label .ik { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--ink-4); }
.hero2__form input { width: 100%; height: 50px; padding: 0 12px 0 42px; border: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; }
.hero2__form input::placeholder { color: var(--ink-4); }
.hero2__form input:focus { outline: none; }
.hero2__form:focus-within { box-shadow: 0 0 0 3px rgba(95,180,230,.45), 0 24px 60px -24px rgba(0,0,0,.6); }
.hero2__form .btn { min-height: 50px; border-radius: 4px; background: var(--navy); border-color: var(--navy); }
.hero2__form .btn:hover { background: var(--brand); border-color: var(--brand); }
.hero2__pod { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.55); }
.hero2__pod a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 1px; }
.hero2__pod a:hover { border-color: #fff; }
.hero2__pod .ik { width: 13px; height: 13px; }
.hero2__liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; margin: 48px 0 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.hero2__liczby div { padding-right: 18px; }
.hero2__liczby div + div { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.12); }
.hero2__liczby dt { font-family: var(--font-naglowek); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; color: #fff; }
.hero2__liczby dd { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.55); }
.js .hero2__lead, .js .hero2__form, .js .hero2__pod, .js .hero2__liczby, .js .hero2__etykieta { opacity: 0; animation: wejdz-hero 1s cubic-bezier(.2,.75,.2,1) forwards; }
.js .hero2__etykieta { animation-delay: .05s; }
.js .hero2__lead { animation-delay: .8s; }
.js .hero2__form { animation-delay: .95s; }
.js .hero2__pod { animation-delay: 1.05s; }
.js .hero2__liczby { animation-delay: 1.2s; }

/* scena: przeglądarka + telefon, w środku przewijane pełne strony */
.scena3 { position: relative; margin: 0; padding: 0 0 72px; }
.js .scena3 { opacity: 0; animation: wejdz-hero 1.3s cubic-bezier(.2,.75,.2,1) .35s forwards; }
.scena3__swiatlo { position: absolute; inset: 6% -10% 10% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(70,160,220,.32), transparent 70%); filter: blur(30px); }
.przegl { position: relative; border-radius: 10px; overflow: hidden; background: #0D1520; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 100px -40px rgba(0,0,0,.85), 0 20px 40px -24px rgba(0,0,0,.6); }
.przegl__pasek { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #121C29; border-bottom: 1px solid rgba(255,255,255,.06); }
.przegl__pasek i { width: 10px; height: 10px; border-radius: 50%; background: #2B3645; }
.przegl__pasek i:nth-child(1) { background: #E5655B; } .przegl__pasek i:nth-child(2) { background: #E2B341; } .przegl__pasek i:nth-child(3) { background: #5DB463; }
.przegl__pasek span { flex: 1; max-width: 60%; margin: 0 auto; padding: 4px 12px; border-radius: 5px; background: #0B131D; color: rgba(255,255,255,.55); font-size: 11.5px; letter-spacing: .02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateX(-20px); }
.przegl__ekran { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.przegl__ekran img, .smartfon__ekran img { position: absolute; left: 0; top: 0; width: 100%; height: auto; will-change: transform; transition: opacity .9s ease; }
.przegl__ekran img.znika, .smartfon__ekran img.znika { opacity: 0; }
.smartfon { position: absolute; right: -3%; bottom: 0; width: 25%; min-width: 132px; padding: 7px; border-radius: 30px; background: #0B0F16; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -24px rgba(0,0,0,.9); }
.smartfon::before { content: ""; position: absolute; left: 50%; top: 13px; z-index: 2; width: 28%; height: 9px; border-radius: 99px; background: #000; transform: translateX(-50%); }
.smartfon__ekran { position: relative; aspect-ratio: 390 / 820; overflow: hidden; border-radius: 23px; background: #fff; }
.scena3__podpis { position: absolute; left: 0; right: 30%; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.scena3__nazwa { display: grid; gap: 4px; min-width: 0; transition: opacity .5s; }
.scena3__nazwa b { font-family: var(--font-naglowek); font-weight: 400; font-size: 20px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scena3__nazwa small { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scena3__kreski { display: flex; gap: 6px; flex: none; padding-bottom: 6px; }
.scena3__kreski button { position: relative; width: 26px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.scena3__kreski button::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.2); }
.scena3__kreski i { position: absolute; left: 0; top: 6px; height: 2px; width: 0; border-radius: 2px; background: #8FCBEE; }
.scena3__kreski button.byl i { width: 100%; }
.scena3__kreski button.teraz i { width: 100%; transition: width var(--czas, 9s) linear; }
.scena3__kreski button.start i { width: 0; transition: none; }

@media (max-width: 1100px) {
  .hero2__in { grid-template-columns: 1fr; min-height: 0; gap: 56px; padding: 48px 0 56px; }
  .hero2__tekst { max-width: 640px; }
  .scena3 { max-width: 720px; width: 100%; margin: 0 auto; }
}
@media (max-width: 700px) {
  .hero2__in { padding: 36px 0 44px; gap: 44px; }
  .hero2 h1 { font-size: clamp(36px, 10.5vw, 46px); margin: 20px 0 18px; }
  .hero2__lead { font-size: 16.5px; }
  .hero2__form { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .hero2__form .btn { width: 100%; }
  .hero2__pod { font-size: 13px; }
  .hero2__liczby { margin-top: 36px; padding-top: 20px; }
  .hero2__liczby div + div { padding-left: 12px; }
  .hero2__liczby div { padding-right: 8px; }
  .hero2__liczby dt { font-size: 28px; }
  .hero2__liczby dd { font-size: 11.5px; }
  .scena3 { padding-bottom: 64px; }
  .przegl { display: none; }
  .smartfon { position: relative; right: auto; bottom: auto; width: 62%; min-width: 0; margin: 0 auto; border-radius: 36px; padding: 8px; }
  .smartfon__ekran { border-radius: 28px; }
  .scena3__swiatlo { inset: 0 0 10% 0; }
  .scena3__podpis { right: 0; justify-content: center; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero2 h1 .slowo, .js .hero2__lead, .js .hero2__form, .js .hero2__pod, .js .hero2__liczby, .js .hero2__etykieta, .js .scena3 { animation: none; opacity: 1; transform: none; }
}
/* proporcje sceny i rytm pionowy (dopracowanie) */
.hero2__in { gap: clamp(40px, 5vw, 88px); padding: clamp(40px, 6vh, 80px) 0 clamp(48px, 7vh, 88px); }
.hero2 h1 { font-size: clamp(40px, 4.2vw, 66px); margin: 24px 0 22px; }
.hero2__form { margin-top: 32px; }
.hero2__liczby { margin-top: 40px; padding-top: 22px; }
.scena3 { margin-right: calc(-1 * clamp(0px, 3vw, 48px)); }
@media (max-width: 1100px) { .scena3 { margin-right: auto; } }
.wrap--szeroki { width: min(100% - 48px, 1360px); }
@media (min-width: 1101px) { .hero2__in { grid-template-columns: minmax(460px, 5fr) minmax(0, 7fr); } }
@media (min-width: 1600px) { .hero2 h1 { font-size: 70px; } .hero2__lead, .hero2__form, .hero2__liczby { max-width: 540px; } }
.hero2__form .btn { padding: 0 22px; }
/* hero2: układ jednokolumnowy poniżej 1100 px (ostatnie słowo w kaskadzie) */
@media (max-width: 1100px) {
  .hero2__in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 56px; padding: 48px 0 56px; }
  .hero2__tekst { max-width: 640px; }
  .scena3 { max-width: 720px; width: 100%; margin: 0 auto; }
}
@media (max-width: 700px) {
  .wrap--szeroki { width: min(100% - 36px, 1360px); }
  .hero2__in { padding: 32px 0 48px; gap: 48px; }
  .hero2__etykieta { font-size: 10.5px; letter-spacing: .18em; }
  .hero2__etykieta::before { width: 22px; }
  .hero2 h1 { font-size: clamp(36px, 10.4vw, 46px); line-height: 1.06; margin: 18px 0 18px; }
  .hero2__form { margin-top: 26px; }
  .hero2__form label { min-height: 52px; }
  .hero2__liczby { margin-top: 32px; }
}
/* hero2: wyrównanie do siatki nagłówka; szerzej dopiero na dużych ekranach (nagłówek też) */
.wrap--szeroki { width: min(100% - 48px, var(--wrap)); }
.scena3 { margin-right: 0; }
@media (min-width: 1600px) { .wrap--szeroki, .gora > .wrap { width: min(100% - 96px, 1400px); } }
@media (max-width: 700px) {
  .wrap--szeroki { width: min(100% - 36px, var(--wrap)); }
  .scena3 { padding-bottom: 0; }
  .scena3__podpis { position: static; margin-top: 22px; }
}

/* ===== Sekcja Lupik.pl: dwa telefony z aplikacją, karta profilu, liczba, przyciski sklepów ===== */
.lupik2 { position: relative; aspect-ratio: 1 / 1.02; max-width: 560px; width: 100%; margin: 0 auto; }
.lupik2__swiatlo { position: absolute; inset: 12% 6% 8% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(56,160,230,.35), transparent 72%); filter: blur(24px); }
.lupik2__tel { position: absolute; padding: 7px; border-radius: 34px; background: #0B0F16; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -28px rgba(0,0,0,.85); }
.lupik2__ekran { position: relative; aspect-ratio: 600 / 1298; overflow: hidden; border-radius: 27px; background: #fff; }
.lupik2__ekran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lupik2__tel--przod { left: 14%; top: 2%; width: 42%; z-index: 2; }
.lupik2__tel--tyl { right: 6%; top: 12%; width: 38%; z-index: 1; transform: rotate(4deg); opacity: .96; }
.lupik2__karta { position: absolute; left: 0; bottom: 17%; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); white-space: nowrap; }
.lupik2__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), #38A3E0); color: #fff; font-family: var(--font-naglowek); font-size: 16px; }
.lupik2__dane b { display: block; font-size: 14.5px; }
.lupik2__dane small { display: block; font-size: 12px; color: var(--ink-3); }
.lupik2__link { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 7px 10px; border-radius: 6px; background: var(--stone); font-size: 12px; font-weight: 700; color: var(--brand-ciemny); }
.lupik2__link .ik { width: 13px; height: 13px; }
.lupik2__chip { position: absolute; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.lupik2__chip b { font-family: var(--font-naglowek); font-weight: 400; font-size: 30px; line-height: 1; }
.lupik2__chip span { font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.7); }
.sklepy2 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sklep2 { display: inline-flex; align-items: center; gap: 12px; min-width: 180px; padding: 10px 18px 10px 14px; border-radius: 10px; background: #000; border: 1px solid rgba(255,255,255,.28); color: #fff; text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
.sklep2:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.6); box-shadow: 0 16px 36px -16px rgba(0,0,0,.8); }
.sklep2 svg { width: 26px; height: 26px; flex: none; }
.sklep2 span { display: grid; line-height: 1.1; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.sklep2 small { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.75); letter-spacing: .02em; }
@media (max-width: 1000px) { .lupik2 { order: 2; max-width: 480px; margin-top: 12px; } }
@media (max-width: 600px) {
  .lupik2 { aspect-ratio: 1 / 1.15; }
  .lupik2__tel--przod { left: 6%; width: 50%; }
  .lupik2__tel--tyl { right: 2%; width: 44%; }
  .lupik2__karta { bottom: 17%; padding: 10px 12px 10px 10px; gap: 10px; }
  .lupik2__link { display: none; }
  .lupik2__chip { bottom: 0; padding: 10px 14px; }
  .lupik2__chip b { font-size: 24px; }
  .sklep2 { flex: 1 1 150px; min-width: 0; }
}

/* Lupik.pl: komputer + aplikacja (nadpisuje układ dwóch telefonów) */
.lupik2 { aspect-ratio: 1 / .9; max-width: 600px; }
.lupik2__okno { position: absolute; left: 0; top: 7%; width: 86%; z-index: 1; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 90px -30px rgba(0,0,0,.85); }
.lupik2__pasek { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #EEF1F4; border-bottom: 1px solid #DDE3E8; }
.lupik2__pasek i { width: 9px; height: 9px; border-radius: 50%; background: #C9D1D8; }
.lupik2__pasek span { margin: 0 auto; padding: 3px 40px; border-radius: 5px; background: #fff; font-size: 11px; color: var(--ink-3); transform: translateX(-14px); }
.lupik2__ekran--pc { aspect-ratio: 1600 / 1000; border-radius: 0; }
.lupik2__tel--przod { left: auto; right: 0; top: 24%; width: 30%; z-index: 2; }
.lupik2__karta { left: 5%; bottom: 3%; }
.lupik2__chip { right: auto; left: 46%; bottom: auto; top: 0; transform: translateX(-50%); z-index: 3; background: rgba(11,31,51,.72); }
@media (max-width: 600px) {
  .lupik2 { aspect-ratio: 1 / 1; }
  .lupik2__okno { top: 12%; width: 90%; }
  .lupik2__pasek { height: 20px; padding: 0 8px; gap: 4px; }
  .lupik2__pasek i { width: 6px; height: 6px; }
  .lupik2__pasek span { padding: 1px 22px; font-size: 9px; }
  .lupik2__tel--przod { right: 0; left: auto; top: 26%; width: 34%; padding: 5px; border-radius: 22px; }
  .lupik2__tel--przod .lupik2__ekran { border-radius: 18px; }
  .lupik2__karta { left: 0; bottom: 4%; }
  .lupik2__chip { left: 0; top: 0; transform: none; }
}
.lupik2 { aspect-ratio: 1 / .96; }
.lupik2__okno { top: 13%; }
.lupik2__tel--przod { top: 29%; }
@media (max-width: 600px) {
  .lupik2 { aspect-ratio: 1 / 1.1; }
  .lupik2__okno { top: 20%; }
  .lupik2__tel--przod { top: 33%; }
  .lupik2__karta { bottom: 2%; }
}

/* hero2 bez liczb: szersza kolumna tekstu, mniejsza scena podniesiona nad oś tekstu */
.hero2 h1 { text-wrap: balance; }
@media (min-width: 1101px) {
  .hero2__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 4.5vw, 80px); }
  .hero2 h1 { font-size: clamp(44px, 4vw, 64px); }
  .scena3 { width: 100%; max-width: 620px; justify-self: end; margin-top: clamp(-96px, -7vh, -40px); }
  .smartfon { width: 23%; }
}
@media (min-width: 1600px) { .scena3 { max-width: 680px; } .hero2 h1 { font-size: 68px; } }
@media (min-width: 1101px) {
  .scena3__podpis { right: 26%; }
  .scena3__kreski button { width: 18px; }
  .scena3__nazwa small { white-space: normal; }
}
.scena3__nazwa small { white-space: normal; }
@media (max-width: 700px) { .hero2__marka { display: none; } }

/* ===== HERO 2: tło – zorza, siatka kolumn, cienkie okręgi z orbitującymi punktami, linia horyzontu ===== */
.hero2 { background: #06162A; }
.hero2::before { background: linear-gradient(180deg, #061527 0%, #081C31 45%, #0A2139 100%); }
.hero2::after { z-index: 0; opacity: .05; }
.hero2__tlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero2__zorza { position: absolute; left: 52%; top: -18%; width: 70vw; max-width: 1100px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30,118,190,.42), rgba(30,118,190,.12) 55%, transparent 75%); filter: blur(30px);
  animation: zorza 26s ease-in-out infinite alternate; }
.hero2__zorza--2 { left: -22%; top: 40%; width: 55vw; max-width: 820px;
  background: radial-gradient(closest-side, rgba(56,170,200,.16), rgba(56,170,200,.05) 55%, transparent 75%); animation-duration: 32s; animation-direction: alternate-reverse; }
@keyframes zorza { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 8%, 0) scale(1.12); } }
.hero2__siatka { position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(160,205,240,.07) 1px, transparent 1px), linear-gradient(0deg, rgba(160,205,240,.045) 1px, transparent 1px);
  background-size: 120px 120px; background-position: calc(50% + 60px) 0;
  -webkit-mask-image: radial-gradient(75% 70% at 66% 42%, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
          mask-image: radial-gradient(75% 70% at 66% 42%, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%); }
.hero2__luki { position: absolute; left: 72%; top: 46%; width: min(1120px, 86vw); height: auto; transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.hero2__luki circle:not([fill]) { stroke: rgba(143,203,238,.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero2__luki circle.mocniej { stroke: rgba(143,203,238,.2); }
.hero2__luki circle.kreski { stroke: rgba(143,203,238,.22); stroke-dasharray: 2 9; transform-origin: 500px 500px; animation: obrot 140s linear infinite; }
.hero2__luki .orbita { transform-origin: 500px 500px; animation: obrot 60s linear infinite; }
.hero2__luki .orbita--2 { animation-duration: 90s; animation-direction: reverse; }
.hero2__luki .orbita--3 { animation-duration: 48s; }
@keyframes obrot { to { transform: rotate(360deg); } }
.hero2__horyzont { position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,203,238,.45) 35%, rgba(143,203,238,.65) 66%, transparent); }
.hero2__horyzont::after { content: ""; position: absolute; left: 20%; right: 10%; bottom: 0; height: 120px;
  background: radial-gradient(50% 100% at 60% 100%, rgba(70,160,220,.16), transparent 70%); }
@media (max-width: 1100px) {
  .hero2__luki { left: 50%; top: auto; bottom: -6%; width: 150vw; transform: translate(-50%, 0); }
  .hero2__zorza { left: 10%; top: 35%; width: 120vw; }
  .hero2__siatka { background-size: 80px 80px; background-position: calc(50% + 40px) 0;
    -webkit-mask-image: radial-gradient(90% 60% at 50% 70%, #000 0%, rgba(0,0,0,.3) 50%, transparent 80%); mask-image: radial-gradient(90% 60% at 50% 70%, #000 0%, rgba(0,0,0,.3) 50%, transparent 80%); }
}
@media (prefers-reduced-motion: reduce) { .hero2__zorza, .hero2__luki circle.kreski, .hero2__luki .orbita { animation: none; } }
/* tło hero: wyraźniej */
.hero2__zorza { background: radial-gradient(closest-side, rgba(36,130,205,.55), rgba(36,130,205,.16) 55%, transparent 76%); }
.hero2__zorza--2 { background: radial-gradient(closest-side, rgba(60,175,205,.2), rgba(60,175,205,.06) 55%, transparent 76%); }
.hero2__siatka { background-image: linear-gradient(90deg, rgba(160,205,240,.09) 1px, transparent 1px), linear-gradient(0deg, rgba(160,205,240,.06) 1px, transparent 1px); }
.hero2__luki circle:not([fill]) { stroke: rgba(143,203,238,.18); }
.hero2__luki circle.mocniej { stroke: rgba(143,203,238,.32); }
.hero2__luki circle.kreski { stroke: rgba(143,203,238,.38); }
.hero2__snop { position: absolute; left: 50%; top: -10%; width: 70%; height: 95%; transform: rotate(-14deg); transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(150,210,250,.13), rgba(150,210,250,.03) 60%, transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(18px); animation: snop 14s ease-in-out infinite alternate; }
@keyframes snop { from { opacity: .7; } to { opacity: 1; transform: rotate(-10deg); } }
@media (max-width: 1100px) { .hero2__snop { left: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero2__snop { animation: none; } }
.hero2__snop { left: 30%; top: 0; width: 80%; height: 100%; transform: none; clip-path: none; filter: none; transform-origin: 62% 0;
  background: conic-gradient(from 168deg at 62% -4%, transparent 0deg, rgba(150,210,250,.1) 9deg, rgba(150,210,250,.14) 13deg, rgba(150,210,250,.1) 17deg, transparent 27deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 55%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 55%, transparent 90%); }
@keyframes snop { from { opacity: .65; transform: rotate(0deg); } to { opacity: 1; transform: rotate(4deg); } }
@media (max-width: 1100px) { .hero2__snop { left: -10%; width: 120%; } }
/* tło hero: mocniej (2) */
.hero2__zorza { background: radial-gradient(closest-side, rgba(40,138,215,.7), rgba(40,138,215,.2) 55%, transparent 76%); }
.hero2__zorza--2 { background: radial-gradient(closest-side, rgba(70,185,215,.26), rgba(70,185,215,.08) 55%, transparent 76%); }
.hero2__siatka { background-image: linear-gradient(90deg, rgba(160,205,240,.11) 1px, transparent 1px), linear-gradient(0deg, rgba(160,205,240,.075) 1px, transparent 1px); }
.hero2__luki circle:not([fill]) { stroke: rgba(143,203,238,.24); }
.hero2__luki circle.mocniej { stroke: rgba(160,215,245,.45); }
.hero2__luki circle.kreski { stroke: rgba(160,215,245,.5); }
.hero2__luki circle.kreski--2 { stroke: rgba(160,215,245,.28); stroke-dasharray: 1 14; animation-duration: 200s; animation-direction: reverse; }
.hero2__luki circle.poswiata { stroke: rgba(95,180,230,.35); stroke-width: 10; filter: blur(8px); animation: poswiata 7s ease-in-out infinite alternate; }
@keyframes poswiata { from { opacity: .45; } to { opacity: 1; } }
.hero2__luki .orbita circle[fill^="url"] { transform-box: fill-box; transform-origin: center; transform: scale(1.5); }
.hero2__luki .iskry circle { fill: #CFEAFB; animation: iskra 4s ease-in-out infinite alternate; }
.hero2__luki .iskry circle:nth-child(2n) { animation-delay: -1.3s; animation-duration: 5s; }
.hero2__luki .iskry circle:nth-child(3n) { animation-delay: -2.6s; animation-duration: 6s; }
@keyframes iskra { from { opacity: .15; } to { opacity: .9; } }
.hero2__snop { background: conic-gradient(from 168deg at 62% -4%, transparent 0deg, rgba(150,210,250,.15) 9deg, rgba(160,215,250,.22) 13deg, rgba(150,210,250,.15) 17deg, transparent 27deg); }
.hero2__horyzont { background: linear-gradient(90deg, transparent, rgba(143,203,238,.6) 35%, rgba(170,220,250,.85) 66%, transparent); }
.hero2__horyzont::after { background: radial-gradient(50% 100% at 60% 100%, rgba(70,160,220,.26), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .hero2__luki circle.poswiata, .hero2__luki .iskry circle { animation: none; } }

/* podhero jednokolumnowe: bez odstępów siatki, wyrównane do treści poniżej, ciaśniej */
.podhero__in--sam { display: block; max-width: none; padding: clamp(32px, 4vw, 56px) 0 clamp(40px, 4.5vw, 60px); }
.podhero__in--sam h1 { max-width: 920px; margin-top: 18px; }
.podhero__in--sam .lead { max-width: 760px; margin-top: 16px; }
.podhero + .sekcja { padding-top: clamp(48px, 6vw, 84px); }

/* ===== HERO 2: pierwsze wejście – cały widok składa się na oczach klienta =====
   okręgi tła rysują się, przeglądarka wjeżdża, telefon dolatuje później, podpis na końcu; w ekranach „pusta” strona z hasłem,
   na której strona klienta zostaje „namalowana” pociągnięciami (maska z 6 pasm, naprzemiennie w lewo i w prawo). */
.plotno { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; gap: 14px; padding: 8%; text-align: center;
  background: #F7F5F0 radial-gradient(60% 50% at 50% 40%, #fff, transparent 70%); color: var(--navy); pointer-events: none; }
.plotno small { font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.plotno b { font-family: var(--font-naglowek); font-weight: 400; font-size: clamp(18px, 4cqw, 36px); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.plotno b em { font-style: italic; color: var(--brand); }
.plotno i { display: block; width: 36px; height: 1px; margin: 6px auto 0; background: var(--brand); transform-origin: left; }
.plotno--tel { gap: 10px; padding: 14% 10%; }
.plotno--tel small { font-size: 8px; letter-spacing: .24em; }
.plotno--tel b { font-size: clamp(15px, 9.5cqw, 21px); }
.przegl__ekran, .smartfon__ekran { container-type: inline-size; }
.farba { position: absolute; inset: 0; z-index: 2; overflow: hidden; transform-origin: 50% 40%;
  -webkit-mask-image: linear-gradient(180deg, #000 var(--a), transparent var(--b));
          mask-image: linear-gradient(180deg, #000 var(--a), transparent var(--b)); }
.farba.gotowa, .bez-js .farba { -webkit-mask-image: none; mask-image: none; }
@property --a { syntax: '<length-percentage>'; inherits: false; initial-value: -80%; }
@property --b { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
/* „wywoływanie”: bardzo miękka granica (80% wysokości) schodzi z góry na dół, obraz ledwo zauważalnie osiada; żadnych filtrów */
@keyframes maluj { from { --a: -80%; --b: 0%; } to { --a: 100%; --b: 180%; } }
@keyframes osiada { from { transform: scale(1.035); } to { transform: none; } }
.farba.maluje { animation: maluj 1.9s cubic-bezier(.45,0,.25,1) forwards, osiada 2.2s cubic-bezier(.2,.6,.2,1) forwards; }
.farba img { position: absolute; left: 0; top: 0; width: 100%; height: auto; will-change: transform; }
.hero2 h1 { min-height: 3.15em; }
@media (prefers-reduced-motion: reduce) { .farba { -webkit-mask-image: none; mask-image: none; } }
/* choreografia wejścia (fill backwards: po animacji wraca styl zwykły, więc parallax może ustawiać transform) */
.scena3 { perspective: 1600px; }
.przegl, .smartfon { transform-style: preserve-3d; will-change: transform; }
.js .scena3 { animation-duration: .8s; animation-delay: .2s; }
.js .przegl { animation: wjazd-przegl 1.2s cubic-bezier(.2,.75,.2,1) .45s backwards; }
@keyframes wjazd-przegl { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: none; } }
.js .smartfon { animation: wjazd-tel 1.1s cubic-bezier(.2,.75,.2,1) 1.1s backwards; }
@keyframes wjazd-tel { from { opacity: 0; transform: translate(36px, 56px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.js .scena3__podpis { animation: wejdz-hero 1s cubic-bezier(.2,.75,.2,1) 1.8s backwards; }
.js .hero2__luki circle.rys { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rysuj 2.4s cubic-bezier(.3,0,.2,1) var(--d, 0s) forwards; }
@keyframes rysuj { to { stroke-dashoffset: 0; } }
.js .hero2__siatka { animation-name: zjaw; animation-duration: 1.8s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; animation-delay: .3s; }
@keyframes zjaw { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .przegl, .js .smartfon, .js .scena3__podpis, .js .hero2__luki circle.rys, .js .hero2__siatka { animation: none; }
  .js .hero2__luki circle.rys { stroke-dashoffset: 0; }
}

/* ===== Ścieżka pod hero: 6 kroków w linii + mini formularz zbierający e-mail/adres ===== */
.sciezka { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 7vw, 100px); background: var(--paper); border-bottom: 1px solid var(--linia); }
.sciezka__glowa { max-width: 820px; }
.sciezka__glowa h2 { margin-top: 18px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; text-wrap: balance; }
.sciezka__glowa h2 em { font-style: italic; color: var(--brand); }
.sciezka__kroki { counter-reset: krok; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linia-2); }
.sciezka__krok { position: relative; padding: 26px 22px 26px 0; border-right: 1px solid var(--linia); }
.sciezka__krok + .sciezka__krok { padding-left: 22px; }
.sciezka__krok:last-child { border-right: 0; }
.sciezka__krok::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: transparent; }
.sciezka__krok--darmo::before { background: var(--brand); }
.sciezka__nr { display: block; font-family: var(--font-naglowek); font-size: 28px; line-height: 1; color: var(--ink-4); }
.sciezka__krok--darmo .sciezka__nr { color: var(--brand); }
.sciezka__krok h3 { margin-top: 16px; font-family: var(--font-naglowek); font-weight: 500; font-size: 19px; line-height: 1.2; }
.sciezka__krok p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.sciezka__krok small { display: inline-block; margin-top: 12px; padding: 3px 8px; border-radius: 4px; background: var(--stone); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sciezka__krok--darmo small { background: #E6F2FA; color: var(--brand-ciemny); }
.szybki { margin-top: clamp(36px, 4vw, 52px); padding: clamp(22px, 2.6vw, 34px); border-radius: 10px; background: var(--navy); color: #fff; box-shadow: 0 30px 70px -40px rgba(11,31,51,.7); }
.szybki__pola { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) auto; gap: 12px; align-items: end; }
.szybki__pole { display: grid; gap: 6px; }
.szybki__pole span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.szybki__pole span i { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: rgba(143,203,238,.16); font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: none; color: #8FCBEE; vertical-align: 1px; }
.szybki__pole input { height: 54px; padding: 0 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.07); color: #fff; font-size: 16px; font-weight: 500; transition: border-color .2s, background .2s; }
.szybki__pole input::placeholder { color: rgba(255,255,255,.4); }
.szybki__pole input:focus { outline: none; border-color: #8FCBEE; background: rgba(255,255,255,.1); }
.szybki .btn { min-height: 54px; padding: 0 24px; }
.szybki__pod { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.55); }
.szybki__pod a { color: rgba(255,255,255,.8); }
.szybki__pod.blad { color: #FFB4A8; }
.szybki__dzieki { margin-top: 14px; font-size: 16px; color: #fff; }
.szybki__dzieki b { color: #8FCBEE; }
@media (max-width: 1100px) {
  .sciezka__kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .sciezka__krok { padding: 22px 18px 22px 0; border-top: 1px solid var(--linia-2); }
  .sciezka__krok:nth-child(3n) { border-right: 0; }
  .sciezka__krok:nth-child(3n + 1) { padding-left: 0; }
  .szybki__pola { grid-template-columns: 1fr 1fr; }
  .szybki .btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 700px) {
  .sciezka__kroki { grid-template-columns: 1fr; margin-top: 28px; }
  .sciezka__krok, .sciezka__krok + .sciezka__krok, .sciezka__krok:nth-child(3n + 1) { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 18px 0; border-right: 0; }
  .sciezka__krok::before { display: none; }
  .sciezka__krok--darmo { border-left: 2px solid var(--brand); padding-left: 12px; }
  .sciezka__nr { grid-row: 1 / span 3; font-size: 24px; padding-top: 2px; }
  .sciezka__krok h3 { margin-top: 0; font-size: 18px; }
  .sciezka__krok small { margin-top: 8px; }
  .szybki { padding: 20px 16px; border-radius: 8px; }
  .szybki__pola { grid-template-columns: 1fr; }
}

/* ===== Sekcja „Masz tylko profil?”: powody dla strony + mostek social → strona (post wędruje do aktualności) ===== */
.social { background: var(--paper); border-top: 1px solid var(--linia); }
.social__glowa { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.social__glowa h2 { margin-top: 18px; font-size: clamp(30px, 3.4vw, 46px); text-wrap: balance; }
.social__glowa h2 em { font-style: italic; color: var(--brand); }
.social__uklad { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.social__powody { counter-reset: p; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linia-2); }
.social__powod { counter-increment: p; display: grid; grid-template-columns: 26px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--linia); }
.social__powod .ik { width: 24px; height: 24px; margin-top: 2px; color: var(--brand); }
.social__powod h3 { font-family: var(--font-naglowek); font-weight: 500; font-size: 21px; line-height: 1.2; }
.social__powod h3::before { content: "0" counter(p) "  "; font-size: 13px; letter-spacing: .1em; color: var(--ink-4); vertical-align: 4px; font-family: var(--font-tekst); font-weight: 700; }
.social__powod p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.social__most { position: sticky; top: calc(var(--gora-h) + 32px); padding: clamp(24px, 2.8vw, 36px); border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 40px 80px -40px rgba(11,31,51,.7); }
.social__most h3 { margin-top: 26px; font-family: var(--font-naglowek); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.social__most > p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); }
.social__pakiet { color: rgba(255,255,255,.9) !important; }
.social__pakiet b { color: #8FCBEE; font-weight: 600; }
.social__most .akcje { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.social__most .btn { background: #fff; color: var(--navy); border-color: #fff; }
.social__most .btn:hover { background: var(--stone); border-color: var(--stone); }
.social__most .btn--ramka { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.social__most .btn--ramka:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
/* mostek: karta posta → strzałka → karta strony z aktualnościami; pętla 9 s: post „wchodzi”, po chwili pojawia się na stronie */
.most { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: 10px; align-items: center; }
.most__karta { padding: 10px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 10px; box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); }
.most__glowka { display: flex; align-items: center; gap: 7px; }
.most__glowka b { display: block; font-size: 10px; }
.most__glowka small { display: block; font-size: 8.5px; color: var(--ink-3); }
.most__awatar { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #38A3E0); flex: none; }
.most__foto { display: block; height: 54px; margin-top: 8px; border-radius: 5px; background: linear-gradient(135deg, #F3C9A8, #C96B57 60%, #7A2E3F); }
.most__tekst { display: grid; gap: 4px; margin-top: 8px; }
.most__tekst i { display: block; height: 5px; border-radius: 3px; background: #E3E6EA; }
.most__strzalka { display: grid; justify-items: center; gap: 4px; color: #8FCBEE; }
.most__strzalka .ik { width: 22px; height: 22px; animation: obrot 6s linear infinite; }
.most__strzalka em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.most__pasek { display: flex; align-items: center; gap: 4px; margin: -4px -4px 8px; padding: 5px 6px; border-radius: 5px 5px 0 0; background: #EEF1F4; }
.most__pasek i { width: 5px; height: 5px; border-radius: 50%; background: #C9D1D8; }
.most__pasek span { margin: 0 auto; font-size: 8px; color: var(--ink-3); }
.most__naglowek { display: block; font-family: var(--font-naglowek); font-size: 12px; }
.most__wpis { display: grid; grid-template-columns: 34px 1fr; gap: 7px; align-items: center; margin-top: 7px; padding: 6px; border-radius: 5px; background: var(--stone); }
.most__miniatura { height: 30px; border-radius: 4px; background: linear-gradient(135deg, #F3C9A8, #C96B57 60%, #7A2E3F); }
.most__wpis .most__tekst { margin-top: 0; }
.js .most__karta--post { animation: most-post 9s ease-in-out infinite; }
.js .most__wpis { animation: most-wpis 9s ease-in-out infinite; }
@keyframes most-post { 0%, 6% { opacity: 0; transform: translateY(8px); } 14%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes most-wpis { 0%, 36% { opacity: 0; transform: translateX(-8px); } 46%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .most__karta--post, .js .most__wpis, .most__strzalka .ik { animation: none; } }
@media (max-width: 1000px) {
  .social__glowa, .social__uklad { grid-template-columns: 1fr; }
  .social__most { position: static; }
}
@media (max-width: 700px) {
  .social__powod { grid-template-columns: 22px 1fr; gap: 12px; padding: 20px 0; }
  .social__powod h3 { font-size: 19px; }
  .social__most { padding: 20px 16px; border-radius: 10px; }
  .most { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr); gap: 8px; }
  .most__foto { height: 40px; }
  .social__most .akcje .btn { width: 100%; }
}
.most__glowka > span { min-width: 0; }
.most__glowka b, .most__glowka small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .most__glowka { gap: 5px; } .most__awatar { width: 16px; height: 16px; } .most__glowka b { font-size: 9px; } .most__glowka small { font-size: 7.5px; } }

/* ===== Odchudzenie strony głównej: krótkie głowy sekcji, 4 kafle, 3 hasła, mostek na całą szerokość, pas „więcej” ===== */
.sekcja__glowa--krotka { grid-template-columns: 1fr; max-width: 900px; }
.sekcja__glowa--krotka h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08; text-wrap: balance; }
.sekcja__glowa--krotka h2 em { font-style: italic; color: var(--brand); }
.korzysci__tekst h3 { font-size: clamp(28px, 2.8vw, 36px); }
.punkty--duze li { font-size: 17px; }
.punkty--duze li b { color: var(--ink); }
.korzysci__start { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linia); font-size: 15px; color: var(--ink-2); }
.korzysci__start b { color: var(--ink); }
.kafle4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.kafle4 li { padding: 30px 26px 28px; border: 1px solid var(--linia); border-radius: 10px; background: #fff; }
.kafle4 .ik { width: 28px; height: 28px; color: var(--brand); }
.kafle4 h3 { margin-top: 18px; font-family: var(--font-naglowek); font-weight: 500; font-size: 22px; line-height: 1.15; }
.kafle4 p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.social__hasla { counter-reset: h; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(36px, 4vw, 56px); padding: 0; list-style: none; border-top: 1px solid var(--linia-2); }
.social__hasla li { counter-increment: h; position: relative; padding: 30px 32px 34px 0; font-family: var(--font-naglowek); font-weight: 400; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.18; letter-spacing: -.01em; border-right: 1px solid var(--linia); text-wrap: balance; }
.social__hasla li + li { padding-left: 32px; }
.social__hasla li:last-child { border-right: 0; padding-right: 0; }
.social__hasla li::before { content: "0" counter(h); display: block; margin-bottom: 16px; font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--brand); }
.social__most { position: static; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 3.4vw, 48px); }
.social__most-obraz .most { gap: 14px; }
.social__most-obraz .most__karta { font-size: 11px; padding: 12px; }
.social__most-obraz .most__foto { height: 72px; }
.social__most-tekst h3 { margin-top: 0; }
@media (max-width: 1000px) {
  .kafle4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social__hasla { grid-template-columns: 1fr; border-top: 0; }
  .social__hasla li, .social__hasla li + li { padding: 20px 0; border-right: 0; border-top: 1px solid var(--linia); }
  .social__hasla li::before { margin-bottom: 8px; }
  .social__most { grid-template-columns: 1fr; }
}
@media (max-width: 700px) { .kafle4 { grid-template-columns: 1fr; gap: 10px; } .kafle4 li { padding: 22px 20px; } .social__hasla li { font-size: 24px; } }
.wiecej { background: var(--paper); border-top: 1px solid var(--linia); padding: clamp(48px, 6vw, 80px) 0; }
.wiecej__siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wiecej__karta { display: flex; flex-direction: column; padding: 28px 26px 26px; border: 1px solid var(--linia); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; transition: border-color .25s, transform .25s, box-shadow .25s; }
a.wiecej__karta:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 24px 50px -30px rgba(11,31,51,.4); }
.wiecej__karta h3 { margin-top: 16px; font-family: var(--font-naglowek); font-weight: 500; font-size: 22px; line-height: 1.2; text-wrap: balance; }
.wiecej__karta > p:not(.etykieta) { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.wiecej__karta .link { margin-top: auto; padding-top: 18px; }
.wiecej__karta ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.wiecej__karta li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.wiecej__karta li .ik { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--brand); }
@media (max-width: 900px) { .wiecej__siatka { grid-template-columns: 1fr; } }
.social__most-tekst p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
.social__most-tekst .social__pakiet { margin-top: 12px; }
.social__most-tekst .akcje { margin-top: 22px; }


/* ===== Menu: usługi na górze (26.10.2026); reszta (realizacje, proces, poradnik, o nas, kontakt) w stopce i w menu na telefonie ===== */
@media (max-width: 1280px) { .menu > ul > li > a { margin: 0 6px; font-size: 14px; } }
.menu__wiecej { display: none; }
@media (max-width: 1100px) {
  .menu__wiecej { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0; padding: 0; }
  .menu__wiecej a { font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 8px 0; }
  .menu__wiecej a[aria-current] { color: var(--brand); }
}

/* ===== Jak to działa: przyciski zamiast mini formularza (asystent wyżej) ===== */
.sciezka__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(32px, 4vw, 48px); }
.sciezka__dopisek { flex-basis: 100%; font-size: 13.5px; color: var(--ink-3); }
@media (min-width: 1000px) { .sciezka__dopisek { flex-basis: auto; margin-left: 8px; } }

/* ===== Asystent: szybkie pytania w oknie czatu (wzór: lepszastronainternetu.pl v4 + v3), kolory Lupika ===== */
.asystent { position: relative; padding: clamp(56px, 7vw, 96px) 0; background: var(--stone); border-bottom: 1px solid var(--linia); }
.asystent__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.asystent__tekst h2 { margin-top: 18px; font-size: clamp(30px, 3.4vw, 46px); }
.asystent__tekst h2 em { color: var(--brand); }
.asystent__tekst .lead { margin-top: 18px; }
.asystent__atuty { display: grid; gap: 12px; margin-top: 26px; }
.asystent__atuty li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); }
.asystent__atuty .ik { color: var(--ok); margin-top: 3px; }
.asystent__atuty b { color: var(--ink); }
.asystent__alt { margin-top: 24px; font-size: 14px; color: var(--ink-3); }
.asystent__alt a { color: var(--ink-2); }
.czat { display: flex; flex-direction: column; height: min(640px, 82vh); min-height: 520px; background: #fff; border: 1px solid var(--linia); border-radius: 12px; overflow: hidden; box-shadow: var(--cien-duzy); }
.czat__brak { padding: 24px; }
.czat__glowa { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--navy); color: #fff; }
.czat__awatar { width: 40px; height: 40px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.czat__awatar img { width: 32px; height: 32px; }
.czat__kto { flex: 1; min-width: 0; line-height: 1.2; }
.czat__kto b { display: block; font-size: 15px; }
.czat__kto span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.czat__kto span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.czat__krok { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); white-space: nowrap; }
.czat__od-nowa { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
.czat__od-nowa:hover { background: rgba(255,255,255,.1); }
.czat__postep { height: 4px; background: var(--navy-2); }
.czat__postep span { display: block; height: 100%; width: var(--postep, 12%); background: linear-gradient(90deg, var(--brand), var(--brand-jasny)); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.czat__log { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); overscroll-behavior: contain; }
.czat__dymek { max-width: 86%; padding: 11px 15px; border-radius: 14px; font-size: 15px; line-height: 1.45; animation: czat-wejscie .25s both; }
.czat__dymek--bot { align-self: flex-start; background: #fff; border: 1px solid var(--linia); color: var(--ink); border-bottom-left-radius: 4px; }
.czat__dymek--pytanie { font-weight: 700; }
.czat__dymek--ja { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; font-weight: 600; }
.czat__dymek--pisze { display: flex; gap: 4px; padding: 14px 16px; }
.czat__dymek--pisze span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); animation: czat-pisze 1s infinite; }
.czat__dymek--pisze span:nth-child(2) { animation-delay: .15s; } .czat__dymek--pisze span:nth-child(3) { animation-delay: .3s; }
@keyframes czat-wejscie { from { opacity: 0; transform: translateY(6px); } }
@keyframes czat-pisze { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.czat__wybory { padding: 12px 14px 14px; border-top: 1px solid var(--linia); background: #fff; }
.czat__wybory:empty { display: none; }
.czat__opcje { display: flex; flex-wrap: wrap; gap: 8px; }
.czat__opcje--duze { flex-direction: column; flex-wrap: nowrap; }
.czat__opcja { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border: 1.5px solid var(--linia-2); border-radius: 10px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; animation: czat-wejscie .3s both; animation-delay: calc(var(--i, 0) * 50ms); }
.czat__opcja:hover { border-color: var(--brand); background: #F3F8FC; }
.czat__opcja:active { transform: scale(.985); }
.czat__opcja-ik { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #E8F2FA; color: var(--brand); flex: none; }
.czat__opcja-ik .ik { width: 18px; height: 18px; }
.czat__opcja-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.czat__opcja-pod { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.czat__opcja-znak { display: none; color: var(--ink-4); margin-left: auto; }
.czat__opcje--duze .czat__opcja { width: 100%; padding: 11px 14px 11px 11px; font-size: 15px; }
.czat__opcje--duze .czat__opcja-ik { width: 42px; height: 42px; }
.czat__opcje--duze .czat__opcja-ik .ik { width: 21px; height: 21px; }
.czat__opcje--duze .czat__opcja-znak { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; transition: transform .18s, color .18s; }
.czat__opcja:hover .czat__opcja-znak { color: var(--brand); transform: translateX(3px); }
.czat__opcja[aria-pressed="true"] { border-color: var(--brand); background: #E8F2FA; }
.czat__opcja[aria-pressed="true"] .czat__opcja-ik { background: var(--brand); color: #fff; }
.czat__wstecz, .czat__pomin { background: none; border: 0; padding: 8px 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.czat__wstecz::before { content: "‹ "; }
.czat__wstecz:hover, .czat__pomin:hover { color: var(--ink); }
.czat__form { display: grid; gap: 8px; }
.czat__etykieta { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.czat__opcjonalne { font-weight: 500; letter-spacing: 0; text-transform: none; }
.czat__form-wiersz { display: flex; gap: 8px; }
.czat__form-wiersz input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1.5px solid var(--linia-2); border-radius: 8px; background: #fff; color: var(--ink); font-size: 15px; }
.czat__form-wiersz input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,108,168,.15); }
.czat__form-wiersz .btn { min-height: 48px; padding: 0 18px; white-space: nowrap; }
.czat__form-dol { display: flex; gap: 12px; }
.czat__blad { font-size: 13px; color: var(--blad); }
.czat__karta { align-self: stretch; background: #fff; border: 1px solid var(--linia); border-radius: 12px; padding: 16px; animation: czat-wejscie .3s both; }
.czat__odpowiedzi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.czat__odpowiedzi li { font-size: 12px; font-weight: 700; color: var(--brand); background: #E8F2FA; border-radius: 999px; padding: 4px 10px; }
.czat__wskazowki { counter-reset: w; display: grid; gap: 10px; }
.czat__wskazowki li { counter-increment: w; display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; padding: 10px 12px; border-radius: 8px; background: var(--stone); animation: czat-wejscie .3s both; animation-delay: calc(var(--i, 0) * 120ms); }
.czat__wskazowki li::before { content: counter(w); grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--kropka); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.czat__wskazowki b { font-size: 14.5px; }
.czat__wskazowki p { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.czat__pakiet { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.czat__pakiet b { color: var(--ink); }
.czat__link { color: var(--brand); font-weight: 700; }
.czat__male { margin: 14px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.czat__sprawdz { width: 100%; justify-content: center; }
.czat__kontakt { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linia); }
.czat__kontakt .czat__male { margin-top: 0; }
.czat__drobne { margin-top: 8px; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.czat__drobne a { color: var(--ink-2); }
.czat__dzieki { font-size: 15px; font-weight: 600; color: var(--ok); }
@media (max-width: 1000px) { .asystent__in { grid-template-columns: 1fr; } .czat { height: min(600px, 78vh); } }
@media (max-width: 600px) { .czat { border-radius: 8px; } .czat__log { padding: 14px 12px; } .czat__glowa { padding: 12px 14px; } .czat__krok { display: none; } .czat__form-wiersz { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .czat__dymek, .czat__opcja, .czat__karta, .czat__wskazowki li { animation: none; } }

/* ===== Makieta panelu LupikCMS: górny pasek z nazwą firmy, menu z ikonami, podgląd jak mini strona (26.10.2026) ===== */
.pdemo__desk { border-radius: 8px; }
.pdemo__gorny { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; background: var(--navy-2); color: #fff; font-size: 12px; font-weight: 700; }
.pdemo__znak { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--kropka); color: #fff; font-size: 10px; }
.pdemo__narz { margin-left: auto; display: flex; gap: 6px; }
.pdemo__narz i { width: 18px; height: 18px; border-radius: 4px; background: rgba(255,255,255,.12); }
.pdemo__uklad { grid-template-columns: 132px 1fr 1fr; }
.pdemo__menu { padding: 12px 10px; background: var(--navy); gap: 2px; }
.pdemo__menu span { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 5px; font-size: 11px; }
.pdemo__menu span .ik { width: 13px; height: 13px; opacity: .8; }
.pdemo__menu span.jest { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 2px 0 0 var(--brand-jasny); }
.pdemo__menu span i { margin-left: auto; float: none; }
.pdemo__edycja { padding: 16px; background: var(--stone); border-right: 0; }
.pdemo__wiersz { border-radius: 6px; box-shadow: 0 1px 2px rgba(15,23,32,.04); }
.pdemo__btn { border-radius: 6px; }
.pdemo__podglad { background: #E9ECEF; }
.pdemo__strona { border-radius: 6px; box-shadow: 0 10px 24px -16px rgba(15,23,32,.5); padding: 0 0 10px; }
.pdemo__naglowek { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; margin: 0; border-radius: 6px 6px 0 0; background: var(--navy); }
.pdemo__logo { width: 14px; height: 14px; border-radius: 3px; background: var(--kropka); }
.pdemo__nav { width: 16px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.45); }
.pdemo__nav:first-of-type { margin-left: 4px; }
.pdemo__cta { margin-left: auto; width: 26px; height: 10px; border-radius: 2px; background: var(--brand-jasny); }
.pdemo__hero { margin: 0 0 8px; padding: 12px 10px; background: linear-gradient(135deg, #15314F, #0F6CA8); color: #fff; }
.pdemo__hero b { display: block; font-family: var(--font-naglowek); font-weight: 500; font-size: 13px; line-height: 1.1; }
.pdemo__hero small { display: block; margin-top: 3px; font-size: 9px; color: rgba(255,255,255,.7); }
.pdemo__strona .pdemo__baner { margin-left: 8px; margin-right: 8px; }
.pdemo__godz { margin: 0 10px; }
.pdemo__przycisk { margin: 10px 10px 0; }

/* ===== Most: post z Facebooka → aktualności na stronie (26.10.2026): prawdziwszy post, mini strona z siatką wpisów, miniatura „leci” ===== */
.most { position: relative; grid-template-columns: minmax(0, .95fr) 76px minmax(0, 1.2fr); gap: 6px; }
.most__strzalka em { font-size: 7.5px; letter-spacing: .06em; }
.most__karta { padding: 12px; border-radius: 10px; font-size: 11px; box-shadow: 0 24px 40px -22px rgba(0,0,0,.7); }
.most__glowka b { font-size: 11.5px; }
.most__glowka small { display: flex; align-items: center; gap: 4px; font-size: 9px; }
.most__glowka small .ik { width: 10px; height: 10px; color: #1877F2; }
.most__awatar { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; font-size: 9px; font-weight: 800; font-style: normal; }
.most__foto { position: relative; height: 68px; margin-top: 9px; border-radius: 6px; overflow: hidden; }
.most__foto::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.35), transparent 50%); }
.most__reakcje { display: flex; gap: 10px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #EEF1F4; font-size: 9px; color: var(--ink-3); }
.most__reakcje em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.most__reakcje em::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #1877F2; }
.most__reakcje em:nth-child(2)::before { background: #E3E6EA; }
.most__strzalka { gap: 6px; }
.most__strzalka .ik { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: rgba(143,203,238,.15); box-sizing: content-box; }
.most__strzalka::before, .most__strzalka::after { content: ""; display: block; height: 1px; width: 100%; background: repeating-linear-gradient(90deg, rgba(143,203,238,.6) 0 4px, transparent 4px 8px); }
.most__www-glowa { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; margin: 0 0 8px; border-radius: 4px; background: var(--navy); }
.most__logo { width: 12px; height: 12px; border-radius: 3px; background: var(--kropka); }
.most__nav { width: 14px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.45); }
.most__nav:first-of-type { margin-left: 3px; }
.most__cta { margin-left: auto; width: 22px; height: 9px; border-radius: 2px; background: var(--brand-jasny); }
.most__naglowek { font-size: 13px; margin-bottom: 6px; }
.most__siatka { display: grid; grid-template-columns: 1fr; gap: 5px; }
.most__wpis { position: relative; margin-top: 0; grid-template-columns: 40px 1fr; }
.most__miniatura { height: 32px; }
.most__miniatura--2 { background: linear-gradient(135deg, #BFD9EA, #4F8EB8 60%, #1F4D73); }
.most__miniatura--3 { background: linear-gradient(135deg, #DCE8D2, #7FA86B 60%, #3F6B4F); }
.most__wpis--nowy { animation: most-nowy 6s infinite; }
.most__wpis--nowy em { position: absolute; top: -7px; right: 6px; padding: 1px 6px; border-radius: 999px; background: var(--kropka); color: #fff; font-size: 8px; font-weight: 800; font-style: normal; letter-spacing: .08em; text-transform: uppercase; opacity: 0; animation: most-nowy-znak 6s infinite; }
@keyframes most-nowy { 0%, 48% { background: var(--stone); box-shadow: none; } 55%, 92% { background: #E8F2FA; box-shadow: 0 0 0 1.5px var(--brand); } 100% { background: var(--stone); box-shadow: none; } }
@keyframes most-nowy-znak { 0%, 50% { opacity: 0; transform: translateY(3px); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.most__lot { position: absolute; z-index: 2; left: 5%; top: 32%; width: 14%; height: 52px; border-radius: 6px; background: linear-gradient(135deg, #F3C9A8, #C96B57 60%, #7A2E3F); box-shadow: 0 12px 24px -10px rgba(0,0,0,.7); opacity: 0; pointer-events: none; animation: most-lot 6s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes most-lot { 0%, 10% { opacity: 0; transform: translate(0, 0) scale(1); } 14% { opacity: 1; } 48% { opacity: 1; transform: translate(335%, 72%) scale(.55); } 52%, 100% { opacity: 0; transform: translate(335%, 72%) scale(.5); } }
@media (max-width: 600px) { .most { grid-template-columns: 1fr; } .most__strzalka::before, .most__strzalka::after { display: none; } .most__lot { display: none; } }
@media (prefers-reduced-motion: reduce) { .most__lot { display: none; } .most__wpis--nowy, .most__wpis--nowy em { animation: none; } .most__wpis--nowy { background: #E8F2FA; box-shadow: 0 0 0 1.5px var(--brand); } .most__wpis--nowy em { opacity: 1; } }
.social__czytaj { margin-top: 18px; font-size: 14px; }
.social__czytaj a { display: inline-flex; align-items: center; gap: 8px; color: #8FCBEE; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(143,203,238,.4); }
.social__czytaj a:hover { border-bottom-color: #8FCBEE; }
.social__czytaj .ik { width: 15px; height: 15px; }

/* ===== Poradnik (artykuł) ===== */
.artykul { max-width: 780px; }
.artykul__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; font-size: 13.5px; color: var(--ink-3); }
.artykul__tresc { margin-top: clamp(28px, 3vw, 40px); font-size: 17.5px; line-height: 1.7; color: var(--ink-2); }
.artykul__tresc h2 { margin: 44px 0 14px; font-size: clamp(24px, 2.4vw, 32px); color: var(--ink); }
.artykul__tresc h3 { margin: 28px 0 10px; font-size: 19px; color: var(--ink); }
.artykul__tresc p { margin: 0 0 16px; }
.artykul__tresc ul, .artykul__tresc ol { margin: 0 0 18px; padding-left: 22px; }
.artykul__tresc ul { list-style: disc; } .artykul__tresc ol { list-style: decimal; }
.artykul__tresc li { margin-bottom: 6px; }
.artykul__tresc li::marker { color: var(--brand); }
.artykul__tresc a { color: var(--brand); }
.artykul__tresc strong { color: var(--ink); }
.artykul__ramka { margin: 24px 0; padding: 18px 22px; border-left: 3px solid var(--brand); background: #fff; border-radius: 0 8px 8px 0; box-shadow: var(--cien); }
.artykul__ramka p:last-child { margin-bottom: 0; }
.artykul__cta { margin: 36px 0 0; padding: 24px; border-radius: 10px; background: var(--navy); color: #fff; }
.artykul__cta h3 { color: #fff; margin: 0 0 8px; }
.artykul__cta p { color: rgba(255,255,255,.75); margin-bottom: 16px; }
.artykul__cta .btn { background: #fff; color: var(--navy); border-color: #fff; }
.artykul__cta .btn:hover { background: var(--stone); border-color: var(--stone); }

/* Strona główna: otwarte menu na telefonie ma jasne tło, więc pozycje główne wracają do ciemnego koloru (26.10.2026) */
.glowna .gora:not(.jest-cien).menu-otwarte .menu > ul > li > a { color: var(--ink-2); }
.glowna .gora:not(.jest-cien).menu-otwarte .menu > ul > li > a:hover, .glowna .gora:not(.jest-cien).menu-otwarte .menu > ul > li > a[aria-current] { color: var(--ink); background: transparent; }