/* ==========================================================================
   Synvo Studio — v2
   Ciemna baza. Jedna myśl na ekran. Pomarańcz tylko na głównym przycisku
   i w sygnecie. Ruch „o krok w prawo” jako podpis marki.
   ========================================================================== */

:root {
  --bg: #0D0E10;
  --surface: #16171A;
  --surface-2: #1D1E22;
  --line: #26272B;
  --text: #F2F1ED;
  --text-2: #9A9BA0;
  --text-3: #5F6065;
  --accent: #E4612B;
  --accent-hover: #F07038;

  --display: "Unbounded", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --step: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.hl { color: var(--accent); }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* Pola do uzupełnienia — usunąć przed publikacją */
.todo { outline: 1px dashed rgba(228, 97, 43, .7); outline-offset: 3px; border-radius: 2px; }
.todo-note { margin-top: 28px; font-size: 14px; color: var(--text-3); }

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: clamp(30px, 4.2vw, 52px); }

/* ---------- Przycisk ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 16px/1 var(--body); color: #fff; text-decoration: none; cursor: pointer;
  background: var(--accent); border: 0; border-radius: 999px; padding: 18px 30px;
  transition: transform .35s var(--ease), background-color .2s;
}
.btn:hover { background: var(--accent-hover); transform: translateX(var(--step)); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ---------- Nawigacja ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px clamp(16px, 4vw, 48px);
  background: linear-gradient(var(--bg) 30%, rgba(13, 14, 16, 0));
}
.nav__logo img { height: 24px; width: auto; }
.nav__cta { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--text-2); transition: color .2s; }
.nav__cta:hover { color: var(--text); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__link { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--text-2); transition: color .2s; }
.nav__link:hover { color: var(--text); }

/* ---------- 1. Hero ---------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 120px 16px 80px;
}
.hero__mark { width: 76px; height: 76px; margin-bottom: 48px; overflow: visible; }
.hero__bottom, .hero__top { fill: var(--text); }
.hero__bar { fill: var(--accent); transform-box: fill-box; transform-origin: left center; }
/* Sygnet „robi krok” przy wejściu na stronę */
.hero__top { animation: step 1.1s var(--ease) .5s both; }
.hero__bar { animation: bar .6s var(--ease) 1.25s both; }
@keyframes step { from { transform: translateX(-8px); } to { transform: none; } }
@keyframes bar { from { transform: scaleX(0); } to { transform: none; } }

/* lokalność: pierwsza rzecz pod sygnetem */
.hero__place {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  font-size: 16px; font-weight: 500; color: var(--text);
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px;
}
.hero__place::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 { font-size: clamp(34px, 5.6vw, 80px); }
.hero__sub { font-size: clamp(18px, 1.7vw, 22px); color: var(--text-2); max-width: 560px; margin: 28px 0 44px; }
/* Cena i czas od razu na pierwszym ekranie — duże liczby, małe etykiety */
.hero__stats { display: flex; justify-content: center; margin-top: 52px; }
.hero__stats div { padding: 0 clamp(18px, 3.4vw, 44px); }
.hero__stats div + div { border-left: 1px solid var(--line); }
.hero__stats dt { font-size: 13px; color: var(--text-3); }
.hero__stats dd { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(20px, 2.2vw, 28px); margin-top: 6px; }

/* ---------- 2. Historia ---------- */
/* Sekcja jest wysoka, a tekst „przyklejony” — słowa rozjaśniają się, gdy przewijasz */
.story { height: 240vh; }
.story__inner {
  position: sticky; top: 0; height: 100vh; max-width: 1040px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center;
}
.story__text { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.6vw, 48px); line-height: 1.22; letter-spacing: -0.03em; }
.story__text + .story__text { margin-top: 1.1em; }
.story__text .w { opacity: .16; transition: opacity .25s linear; }
.story__text .w.on { opacity: 1; }
.story__text .w.hl { color: var(--accent); }
.story__sign { margin-top: 48px; color: var(--text-2); font-size: 15px; }

/* ---------- Sekcje ---------- */
.section { max-width: 1160px; margin: 0 auto; padding: 16vh clamp(16px, 4vw, 48px); }
.section__sub { color: var(--text-2); font-size: clamp(17px, 1.5vw, 20px); max-width: 560px; margin-top: 20px; }

/* ---------- 3. Kierunek ---------- */
/* Przełącznik po lewej; jasna „pigułka” przesuwa się pod wybrany styl */
.styles {
  position: relative; display: flex; gap: 4px; width: fit-content; margin: 48px 0 24px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.styles__pill {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--text);
  transition: transform .55s var(--ease), width .55s var(--ease);
}
.styles__pill.no-anim { transition: none; }
.styles button {
  position: relative; z-index: 1; font: 500 15px var(--body); color: var(--text-2); background: transparent; border: 0;
  border-radius: 999px; padding: 11px 22px; cursor: pointer; transition: color .35s var(--ease);
}
.styles button:hover { color: var(--text); }
.styles button[aria-selected="true"] { color: var(--bg); }
.styles button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.demo { border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.demo__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; }
.demo__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.demo__url { margin: 0 auto; transform: translateX(-20px); font-size: 12px; color: var(--text-3); background: var(--bg); border-radius: 8px; padding: 4px 16px; }
.demo__caption { margin-top: 18px; color: var(--text-2); font-size: 15px; min-height: 1.6em; }

/* Ekran podglądu: wszystko w jednostkach cqw, więc makiety skalują się jak zrzut ekranu */
.demo__screen { position: relative; aspect-ratio: 16 / 9.4; container-type: inline-size; overflow: hidden; }
.site {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; visibility: hidden; transform: scale(1.015);
  transition: opacity .55s var(--ease), transform .7s var(--ease), visibility 0s .55s;
}
.demo[data-style="calm"] .site--calm,
.demo[data-style="warm"] .site--warm,
.demo[data-style="bold"] .site--bold { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease), transform .7s var(--ease), visibility 0s; }
.site h4 { font-weight: inherit; }

/* --- SPOKOJNY --- (tło przygaszone, żeby nie świeciło na ciemnej stronie) */
.site--calm { background: #E6DFD3; color: #2A2622; font-family: var(--body); padding: 2.6cqw 5cqw; }
.calm__nav { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; font-size: 1.05cqw; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 2cqw; border-bottom: 1px solid #D2C9BA; }
.calm__nav span:nth-child(2), .calm__nav span:nth-child(5) { text-align: right; }
.calm__nav span { opacity: .65; }
.calm__nav .calm__phone { opacity: 1; font-weight: 600; letter-spacing: .08em; }
.calm__nav b { font: 500 1.9cqw "Cormorant Garamond", Georgia, serif; letter-spacing: .32em; padding: 0 3cqw; }
.calm__grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto 1fr; column-gap: 6cqw; padding-top: 3.2cqw; height: calc(100% - 4.5cqw); }
.calm__k { font-size: 1.05cqw; letter-spacing: .18em; text-transform: uppercase; color: #8E7C64; }
.calm__text h4 { font: 400 5.4cqw/0.98 "Cormorant Garamond", Georgia, serif; letter-spacing: -0.01em; margin: 1.4cqw 0 1.4cqw; }
.calm__text h4 em { font-style: italic; color: #8E6F50; }
.calm__p { font-size: 1.35cqw; line-height: 1.55; color: #635A51; max-width: 30cqw; }
.calm__cta { display: flex; align-items: center; gap: 1.8cqw; margin-top: 2.2cqw; }
.calm__btn { font-size: 1.1cqw; letter-spacing: .18em; text-transform: uppercase; padding: 1.3cqw 2.6cqw; background: #2A2622; color: #E6DFD3; }
.calm__alt { font-size: 1.15cqw; color: #635A51; border-bottom: 1px solid #B7AA97; padding-bottom: .2cqw; }
.calm__proof { margin-top: 1.8cqw; font-size: 1.1cqw; color: #635A51; }
.calm__proof span { color: #B8893E; letter-spacing: .1em; }
.calm__img {
  position: relative; grid-row: 1 / 3; grid-column: 2; border-radius: 20cqw 20cqw 0 0; margin-bottom: -3cqw;
  background: url("https://images.unsplash.com/photo-1580618672591-eb180b1a973f?auto=format&fit=crop&w=900&q=80") center / cover;
  filter: brightness(.94);
}
.calm__open { position: absolute; left: 50%; bottom: 5cqw; transform: translateX(-50%); white-space: nowrap; font-size: 1.05cqw; letter-spacing: .1em; text-transform: uppercase; background: #E6DFD3; color: #2A2622; padding: .8cqw 1.6cqw; }
.calm__list { align-self: end; padding-bottom: 2.6cqw; }
.calm__list li { display: flex; align-items: baseline; gap: 1cqw; font-size: 1.2cqw; padding: .8cqw 0; border-top: 1px solid #D2C9BA; }
.calm__list i { flex: 1; border-bottom: 1px dotted #B7AA97; transform: translateY(-.3cqw); }
.calm__list b { font: 500 1.55cqw "Cormorant Garamond", Georgia, serif; }

/* --- CIEPŁY --- (brzoskwinia przygaszona, białe elementy zamienione na kremowe) */
.site--warm { background: #ECD4BF; color: #3B2417; font-family: "Nunito", var(--body); padding: 2.4cqw 4.4cqw; }
.warm__nav { display: flex; align-items: center; gap: 2.6cqw; font-size: 1.3cqw; font-weight: 700; }
.warm__nav b { font-size: 2.6cqw; font-weight: 900; letter-spacing: -0.03em; margin-right: auto; }
.warm__nav b span { color: #D35A28; }
.warm__nav > span { opacity: .75; }
.warm__nav .warm__cta { opacity: 1; background: #3B2417; color: #F3E3D4; border-radius: 99px; padding: .9cqw 2cqw; }
.warm__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4cqw; align-items: center; height: calc(100% - 5cqw); }
.warm__rate { display: inline-flex; align-items: center; gap: .8cqw; font-size: 1.2cqw; font-weight: 700; background: #F5E6D8; border-radius: 99px; padding: .7cqw 1.4cqw; }
.warm__rate span { color: #D98A1E; letter-spacing: .1em; }
.warm__text h4 { font-size: 4cqw; font-weight: 900; line-height: 1.04; letter-spacing: -0.035em; margin: 1.8cqw 0 2cqw; }
.warm__chips { display: flex; gap: .8cqw; flex-wrap: wrap; }
.warm__chips span { font-size: 1.2cqw; font-weight: 700; border: 2px solid #D9B49A; border-radius: 99px; padding: .6cqw 1.4cqw; }
.warm__btn { display: inline-block; margin-top: 2.4cqw; background: #D35A28; color: #fff; font-size: 1.45cqw; font-weight: 800; border-radius: 99px; padding: 1.4cqw 2.8cqw; box-shadow: 0 .8cqw 2cqw rgba(180, 80, 40, .3); }
.warm__info { margin-top: 1.6cqw; font-size: 1.15cqw; font-weight: 600; color: #7A5A45; }
.warm__photo { position: relative; height: 82%; }
.warm__img {
  height: 100%; border-radius: 4cqw 4cqw 4cqw 14cqw; filter: brightness(.95);
  background: url("https://images.unsplash.com/photo-1634449571010-02389ed0f9b0?auto=format&fit=crop&w=900&q=80") center / cover;
}
.warm__badge {
  position: absolute; left: -4cqw; bottom: 3cqw; display: flex; align-items: center; gap: 1cqw;
  background: #F5E6D8; border-radius: 2cqw; padding: 1.2cqw 1.8cqw; font-size: 1.2cqw; line-height: 1.35;
  box-shadow: 0 1cqw 3cqw rgba(80, 40, 20, .2);
}
.warm__badge i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #3DBE7A; box-shadow: 0 0 0 .5cqw rgba(61, 190, 122, .2); }

/* --- ODWAŻNY --- (bez przesuwającego się paska; na dole konkrety zamiast hasła) */
.site--bold { background: #0B0B0C; color: #F2F2EE; font-family: var(--body); }
.bold__img {
  position: absolute; top: 0; right: 0; bottom: 0; width: 56%;
  background: url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=900&q=80") center / cover;
  filter: grayscale(1);
}
.bold__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0B0B0C 0%, rgba(11, 11, 12, .6) 30%, transparent 60%); }
.bold__nav { position: relative; display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 4cqw; font: 1.3cqw "Anton", Impact, sans-serif; letter-spacing: .08em; }
.bold__nav b { font-weight: 400; font-size: 2.4cqw; letter-spacing: .02em; margin-right: auto; }
.bold__nav span { opacity: .75; }
.bold__nav .bold__cta { opacity: 1; background: #D7FF3A; color: #0B0B0C; padding: .8cqw 1.8cqw; }
.bold__h { position: relative; font: 400 7.6cqw/1.08 "Anton", Impact, sans-serif; text-transform: uppercase; padding: .6cqw 4cqw 0; }
.bold__h em { font-style: normal; color: #D7FF3A; }
.bold__actions { position: relative; display: flex; align-items: center; gap: 2cqw; padding: 2cqw 4cqw 0; }
.bold__btn { background: #D7FF3A; color: #0B0B0C; font: 1.35cqw "Anton", Impact, sans-serif; letter-spacing: .08em; padding: 1.2cqw 2.2cqw; }
.bold__tel { font: 1.35cqw "Anton", Impact, sans-serif; letter-spacing: .08em; border-bottom: 2px solid #D7FF3A; padding-bottom: .2cqw; }
.bold__services { position: relative; display: flex; gap: 1.2cqw; padding: 2cqw 4cqw 0; }
.bold__services p { display: flex; align-items: baseline; gap: 1cqw; border: 1px solid #333; padding: 1cqw 1.6cqw; font: 1.2cqw "Anton", Impact, sans-serif; letter-spacing: .06em; background: rgba(11, 11, 12, .7); }
.bold__services i { font-style: normal; color: #D7FF3A; font-size: 1cqw; }
.bold__services b { font-weight: 400; color: #8A8A85; margin-left: .6cqw; }
.bold__info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4cqw; padding: 1.3cqw 4cqw; border-top: 1px solid #262626; background: rgba(11, 11, 12, .85); font: 1.15cqw "Anton", Impact, sans-serif; letter-spacing: .1em; color: #B9B9B4; }
.bold__info span:first-child { color: #D7FF3A; }

/* ---------- 4. Realizacje — suwak przed / po ---------- */
/* Wnętrze skaluje się z szerokością suwaka (jednostki cqw), więc makiety wyglądają tak samo na każdym ekranie */
.ba {
  position: relative; margin-top: 56px; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden;
  border: 1px solid var(--line); container-type: inline-size; user-select: none; touch-action: pan-y;
}
.ba__layer { position: absolute; inset: 0; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ba__handle span {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
.ba__handle span::before, .ba__handle span::after {
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
}
.ba__handle span::before { left: 13px; transform: rotate(45deg); }
.ba__handle span::after { right: 13px; transform: rotate(-135deg); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__range:focus-visible ~ .ba__handle span, .ba:has(.ba__range:focus-visible) .ba__handle span { outline: 2px solid var(--accent); outline-offset: 3px; }
.ba__tag {
  position: absolute; bottom: 18px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(13, 14, 16, .75); color: #fff; backdrop-filter: blur(8px); pointer-events: none;
}
.ba__tag--l { left: 18px; }
.ba__tag--r { right: 18px; }
/* opis pod suwakiem jak u Apple: wprowadzenie jasne, reszta przygaszona */
.ba__caption { margin-top: 22px; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.ba__caption b { color: var(--text); font-weight: 600; }

/* makieta „przed”: typowa strona lokalnego operatora sprzed lat */
.isp-old { position: relative; height: 100%; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
.isp-old__top { display: flex; align-items: flex-start; gap: 1.6cqw; background: #8E1B22; padding: 1cqw 1.6cqw; }
.isp-old__logo {
  flex: none; font: 900 2.4cqw Impact, "Arial Black", sans-serif; color: #FFE000; letter-spacing: .05em;
  background: linear-gradient(#E3001B, #A50013); border: .25cqw solid #FFE000; padding: .2cqw 1cqw; text-shadow: .15cqw .15cqw 0 #600;
}
.isp-old__top nav { display: flex; flex-wrap: wrap; gap: .9cqw 1.7cqw; padding-top: .5cqw; }
.isp-old__top nav span { color: #fff; font-weight: bold; font-size: 1.15cqw; }
.isp-old__badge { background: #fff; color: #C00 !important; border: 1px solid #C00; padding: 0 .5cqw; font-style: italic; }
.isp-old__bok { color: #FFE000 !important; }
.isp-old__hero {
  height: 17cqw; position: relative;
  background: url("https://images.unsplash.com/photo-1633367583895-08545d733dfe?auto=format&fit=crop&w=1000&q=50") center 25% / cover;
  filter: saturate(.55) contrast(1.1);
}
.isp-old__band {
  position: absolute; left: .5cqw; right: .5cqw; bottom: 0; height: 7cqw; background: rgba(142, 27, 34, .93);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: .5cqw;
}
.isp-old__band b { font: 400 1.9cqw Arial, sans-serif; letter-spacing: .06em; }
.isp-old__band span { font-size: 1.05cqw; color: #F2C7C9; }
.isp-old__band i { font-style: normal; font-size: .9cqw; color: #C9777C; letter-spacing: .4em; }
.isp-old__date { text-align: right; font-size: 1.1cqw; padding: 1.2cqw 1.6cqw 0; }
.isp-old__icons { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 1.4cqw 2cqw; }
.isp-old__icons div { display: flex; flex-direction: column; align-items: center; gap: .6cqw; }
.isp-old__icons svg { width: 6.6cqw; height: 6.6cqw; filter: drop-shadow(0 .5cqw .5cqw rgba(0, 0, 0, .35)); }
.isp-old__icons b { font-weight: 400; font-size: 1.7cqw; margin-top: .6cqw; }
.isp-old__icons span { font-size: 1cqw; }
.isp-old__cookies {
  position: absolute; left: 0; right: 0; bottom: 0; background: #8E1B22; color: #fff; font-size: .95cqw; line-height: 1.4;
  padding: 1.4cqw 5cqw 1.6cqw 1.8cqw;
}
.isp-old__cookies b { display: block; font-size: 1.3cqw; margin-bottom: .5cqw; }
.isp-old__cookies i {
  position: absolute; right: 1.6cqw; top: 1.2cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%;
  background: #F05A24; font-style: normal; text-align: center; line-height: 1.8cqw; font-size: 1cqw;
}

/* makieta „po”: ta sama marka, uporządkowana */
.isp-new { height: 100%; background: #FAF8F6; color: #1E1416; font-family: var(--body); padding: 3cqw 4cqw; display: flex; flex-direction: column; }
.isp-new__nav { display: flex; align-items: center; gap: 2.4cqw; font-size: 1.3cqw; }
.isp-new__nav b { display: flex; align-items: center; gap: .8cqw; font: 600 2.1cqw var(--display); letter-spacing: -0.05em; margin-right: auto; }
.isp-new__nav b i { width: 1.8cqw; height: 1.8cqw; border-radius: .5cqw; background: #D4202C; }
.isp-new__nav span { opacity: .65; }
.isp-new__nav .isp-new__call { opacity: 1; font-weight: 700; color: #D4202C; }
.isp-new__hero { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; align-items: center; padding-top: 2cqw; }
.isp-new__img {
  height: 100%; max-height: 42cqw; border-radius: 2.4cqw;
  background: url("https://images.unsplash.com/photo-1758687126262-cbb3066fbb0b?auto=format&fit=crop&w=900&q=75") center / cover;
}
.isp-new__k { font-size: 1.25cqw; font-weight: 700; color: #D4202C; }
.isp-new__h { font: 500 3.9cqw/1.06 var(--display); letter-spacing: -0.045em; margin: 1.1cqw 0 1.3cqw; }
.isp-new__p { font-size: 1.5cqw; opacity: .7; }
.isp-new__check {
  display: flex; align-items: center; justify-content: space-between; margin-top: 2.4cqw;
  background: #fff; border: 1px solid #E6DEDA; border-radius: 99px; padding: .6cqw .6cqw .6cqw 2cqw; font-size: 1.35cqw;
}
.isp-new__check span { opacity: .45; }
.isp-new__check b { background: #D4202C; color: #fff; border-radius: 99px; padding: 1.1cqw 2cqw; font-weight: 600; }
.isp-new__plans { display: flex; gap: 1cqw; margin-top: 1.8cqw; }
.isp-new__plans span { position: relative; flex: 1; text-align: center; border: 1px solid #E6DEDA; border-radius: 1.4cqw; padding: 1.1cqw 0 1cqw; font-size: 1.2cqw; background: #fff; }
.isp-new__plans small { display: block; font-size: 1cqw; color: #7A6D68; margin-top: .2cqw; }
.isp-new__plans em { position: absolute; top: -1cqw; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: .85cqw; font-weight: 700; background: #D4202C; color: #fff; border-radius: 99px; padding: .25cqw .9cqw; }
.isp-new__trust { margin-top: 1.6cqw; font-size: 1.1cqw; color: #7A6D68; }
.isp-new__trust span { color: #F5A623; letter-spacing: .08em; }
.isp-new__plans b { font: 500 2.2cqw var(--display); letter-spacing: -0.04em; margin-right: .3cqw; }
.isp-new__plans .on { border-color: #D4202C; box-shadow: 0 0 0 1px #D4202C; }

/* ---------- Darmowe sprawdzenie strony — druga opcja w kontakcie ---------- */
.audit { max-width: 480px; margin: 56px auto 0; }
.audit__or { display: flex; align-items: center; gap: 16px; color: var(--text-3); font-size: 13px; margin-bottom: 40px; }
.audit__or::before, .audit__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.audit h3 { font-size: clamp(20px, 2.2vw, 26px); }
.audit__sub { color: var(--text-2); font-size: 15px; margin-top: 10px; }
.audit__form { display: flex; gap: 6px; margin-top: 24px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.audit__form input {
  flex: 1; min-width: 0; font: 400 15px var(--body); color: var(--text); background: transparent; border: 0;
  padding: 12px 16px; border-radius: 999px;
}
.audit__form input + input { border-left: 1px solid var(--line); border-radius: 0; }
.audit__form input:focus { outline: none; }
.audit__form input::placeholder { color: var(--text-3); }
.audit__form [aria-invalid="true"] { box-shadow: inset 0 0 0 1px #E5484D; }
.audit__btn {
  flex: none; font: 600 15px var(--body); color: var(--bg); background: var(--text); border: 0; border-radius: 999px;
  padding: 12px 22px; cursor: pointer; transition: transform .35s var(--ease);
}
.audit__btn:hover { transform: translateX(4px); }
.audit__ok { margin-top: 16px; }

/* ---------- Czym to się różni: tekst się przewija, telefon stoi ---------- */
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: 24px; }
.why__steps { order: 1; }
.why__stage { order: 2; }
.why__item { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .5s var(--ease); }
.why__item.is-active { opacity: 1; }
.why__n { font-family: var(--display); font-size: 14px; color: var(--accent); }
.why__item > h3 { font-size: clamp(28px, 3.2vw, 44px); margin: 14px 0 18px; }
.why__item > p { color: var(--text-2); font-size: clamp(17px, 1.4vw, 19px); max-width: 460px; }
.why__sticky { position: sticky; top: 14vh; height: 72vh; }
/* ta sama karta co kafelki Synvo Care */
.why__frame {
  position: relative; container-type: size; height: 100%; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 60%, rgba(228, 97, 43, .12), transparent 70%), var(--surface);
  border: 1px solid var(--line); border-radius: 28px;
}

/* Pięć grafik, jeden styl. Wszystko w cqh, więc karty skalują się z wysokością ramki.
   Kolory kart: jasny papier, grafit, szarości i jeden akcent — pomarańcz Synvo. */
.why__visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(1.5cqh) scale(.98); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.why__visual.is-active { opacity: 1; transform: none; }

.wcard {
  --paper: #F4F1EC; --ink: #1B1C1E; --muted: #8A8B8F; --rule: #E4E0D8;
  width: 62cqh; height: 80cqh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--ink); font-family: var(--body);
  border-radius: 4.2cqh; box-shadow: 0 6cqh 12cqh -5cqh rgba(0, 0, 0, .75);
}
.wcard__bar { display: flex; align-items: center; gap: 1cqh; padding: 2.2cqh 3cqh; border-bottom: 1px solid var(--rule); }
.wcard__bar i { width: 1.3cqh; height: 1.3cqh; border-radius: 50%; background: #D8D3CA; }
.wcard__bar span { margin-left: auto; font-size: 1.9cqh; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.wcard__body { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2.6cqh; padding: 3.6cqh; }

/* wspólne drobiazgi */
.w-tag {
  align-self: center; position: relative; background: var(--ink); color: #fff; font-size: 1.8cqh; font-weight: 700;
  padding: 1cqh 1.8cqh; border-radius: 99px;
}
.w-tag::after { content: ""; position: absolute; left: 50%; bottom: -.7cqh; width: 1.4cqh; height: 1.4cqh; margin-left: -.7cqh; background: inherit; transform: rotate(45deg); }
.w-pin { display: inline-grid; place-items: center; width: 2.8cqh; height: 2.8cqh; margin-left: .8cqh; vertical-align: middle; border-radius: 50%; background: var(--accent); color: #fff; font: 700 1.6cqh var(--body); font-style: normal; }
.w-pulse { animation: w-pulse 1.8s var(--ease) 3; }
@keyframes w-pulse { 0%, 100% { box-shadow: 0 0 0 .5cqh var(--paper), 0 0 0 .9cqh var(--accent); } 50% { box-shadow: 0 0 0 .5cqh var(--paper), 0 0 0 1.6cqh rgba(228, 97, 43, .25); } }

/* mini strona używana w kartach 03 i 04 */
.w-mini { background: #fff; border: 1px solid var(--rule); border-radius: 2.6cqh; padding: 2.6cqh; display: grid; gap: 1.6cqh; }
.w-mini__nav { display: flex; align-items: center; justify-content: space-between; gap: 1cqh; font-size: 1.8cqh; }
.w-mini__nav b { font: 600 2.4cqh var(--display); letter-spacing: -0.04em; }
.w-mini__phone { font-weight: 700; color: var(--accent); }
.w-mini__h { font: 500 2.6cqh/1.12 var(--display); letter-spacing: -0.04em; }
.w-mini__btn { justify-self: start; background: var(--accent); color: #fff; font-size: 1.7cqh; font-weight: 700; border-radius: 99px; padding: 1.2cqh 2cqh; }
.w-mini > i { display: block; height: 1.1cqh; border-radius: 1cqh; background: #ECE8E1; }
.w-mini > i:last-child { width: 60%; }

/* 01 telefon */
.w-phone { justify-content: flex-start; gap: 2cqh; }
.w-phone__logo { font: 800 3.2cqh var(--display); letter-spacing: -0.05em; }
.w-phone__logo span { color: var(--accent); }
.w-phone__img { height: 26cqh; border-radius: 2.6cqh; background: url("https://images.unsplash.com/photo-1634449571010-02389ed0f9b0?auto=format&fit=crop&w=600&q=70") center / cover; }
.w-phone__h { font: 500 3.2cqh/1.1 var(--display); letter-spacing: -0.04em; }
.w-phone .w-tag { margin-top: auto; }
.w-phone__bar { display: flex; gap: 1.2cqh; }
.w-phone__bar span, .w-phone__bar b { flex: 1; text-align: center; border-radius: 99px; padding: 1.8cqh 0; font-size: 1.9cqh; font-weight: 700; box-shadow: 0 0 0 .5cqh var(--paper), 0 0 0 .9cqh var(--accent); }
.w-phone__bar span { background: #fff; }
.w-phone__bar b { background: var(--accent); color: #fff; }

/* 02 szybkość */
.w-speed { align-items: center; gap: 4cqh; }
.w-speed__ring { position: relative; width: 26cqh; height: 26cqh; }
.w-speed__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.w-speed__ring circle { fill: none; stroke-width: 8; }
.w-speed__track { stroke: var(--rule); }
.w-speed__val { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.4s var(--ease) .2s; }
.why__visual.is-active .w-speed__val { stroke-dashoffset: 6.5; }
.w-speed__ring p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.w-speed__ring b { font: 500 8cqh var(--display); letter-spacing: -0.05em; line-height: 1; }
.w-speed__ring span { font-size: 1.8cqh; color: var(--muted); margin-top: .8cqh; }
.w-speed__rows { width: 100%; }
.w-speed__rows p { display: flex; justify-content: space-between; font-size: 2cqh; color: var(--muted); margin-top: 2cqh; }
.w-speed__rows b { color: var(--ink); font-weight: 700; }
.w-speed__bar { display: block; height: 1.4cqh; border-radius: 99px; margin-top: 1cqh; width: 0; transition: width 1.2s var(--ease) .4s; }
.w-speed__bar--fast { background: var(--accent); }
.w-speed__bar--slow { background: #CFCAC1; }
.why__visual.is-active .w-speed__bar--fast { width: 19%; }
.why__visual.is-active .w-speed__bar--slow { width: 100%; }

/* 03 rozmowa → decyzja */
.w-talk__quote { background: var(--ink); color: #fff; border-radius: 2.6cqh 2.6cqh 2.6cqh .6cqh; padding: 2.6cqh 2.8cqh; }
.w-talk__quote p { font: 500 2.7cqh/1.25 var(--display); letter-spacing: -0.03em; }
.w-talk__quote span { display: block; margin-top: 1.2cqh; font-size: 1.7cqh; color: #A6A7AB; }
.w-talk__arrow { display: flex; align-items: center; gap: 1.4cqh; color: var(--muted); font-size: 1.7cqh; font-weight: 600; }
.w-talk__arrow::before, .w-talk__arrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* 04 każdy element ma powód */
.w-legend { display: grid; gap: 1.4cqh; }
.w-legend li { display: flex; align-items: center; gap: 1.4cqh; font-size: 2cqh; color: #4A4B4F; }
.w-legend b { flex: none; display: grid; place-items: center; width: 2.8cqh; height: 2.8cqh; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.6cqh; }

/* 05 wyszukiwarka — w kolorach Synvo, nie Google */
.w-search { justify-content: flex-start; }
.w-search__bar { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 99px; padding: 1.6cqh 2.4cqh 1.6cqh 5.4cqh; font-size: 2cqh; }
.w-search__bar::before { content: ""; position: absolute; left: 2.2cqh; top: 50%; width: 1.4cqh; height: 1.4cqh; margin-top: -1cqh; border: .35cqh solid var(--muted); border-radius: 50%; }
.w-search__bar::after { content: ""; position: absolute; left: 3.5cqh; top: 50%; width: .9cqh; height: .35cqh; margin-top: .5cqh; background: var(--muted); transform: rotate(45deg); }
.w-search__map {
  position: relative; height: 22cqh; border-radius: 2.6cqh;
  background:
    linear-gradient(90deg, transparent 47%, #fff 47% 53%, transparent 53%) 0 0 / 9cqh 9cqh,
    linear-gradient(0deg, transparent 47%, #fff 47% 53%, transparent 53%) 0 0 / 9cqh 9cqh,
    #E6E1D8;
}
.w-search__map i { position: absolute; left: 50%; top: 50%; width: 4cqh; height: 4cqh; margin: -4cqh 0 0 -2cqh; background: var(--accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 .6cqh 1.2cqh rgba(0, 0, 0, .2); }
.w-search__map i::after { content: ""; position: absolute; left: 1.3cqh; top: 1.3cqh; width: 1.4cqh; height: 1.4cqh; border-radius: 50%; background: #fff; }
.w-search__hit { background: #fff; border: 1px solid var(--rule); border-radius: 2.2cqh; padding: 2cqh 2.4cqh; }
.w-search__name { font: 600 2.4cqh var(--display); letter-spacing: -0.03em; }
.w-search__name span { font: 600 1.7cqh var(--body); color: var(--muted); letter-spacing: 0; margin-left: .6cqh; }
.w-search__meta { font-size: 1.7cqh; color: var(--muted); margin-top: .6cqh; }
.w-search__link { font-size: 1.7cqh; color: var(--accent); font-weight: 600; margin-top: .8cqh; }
.w-search__hit--dim { opacity: .55; }
.w-search__hit--dim i { display: block; height: 1.1cqh; border-radius: 1cqh; background: #ECE8E1; margin: .6cqh 0; }
.w-search__hit--dim i:last-child { width: 55%; }


/* ---------- 5. Trzy kroki — karuzela ---------- */
.steps-sec { padding-bottom: 16vh; }
.steps-sec__head { padding-bottom: 48px; }
/* lewy margines karuzeli wyrównany do treści sekcji */
.rail {
  --edge: max(clamp(16px, 4vw, 48px), calc((100vw - 1160px) / 2 + clamp(16px, 4vw, 48px)));
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--edge); scroll-padding: 0 var(--edge); scrollbar-width: none; outline: none;
}
.rail::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 min(86vw, 900px); scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 36px;
  display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 540px; overflow: hidden;
}
.card__copy { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; }
.card__n { font-family: var(--display); font-size: 14px; color: var(--text-3); }
.card h3 { font-size: clamp(30px, 3.4vw, 46px); margin: auto 0 16px; }
.card__copy p { color: var(--text-2); max-width: 340px; }
.card__visual { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(20px, 3vw, 40px); background: var(--surface-2); }

/* elementy pojawiają się, gdy karta wjeżdża na ekran */
.card [data-in] { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.card.is-in [data-in] { opacity: 1; transform: none; }

/* 01 — rozmowa w stylu iMessage */
/* Okno rozmowy ma stałą wysokość karty — stare wiadomości znikają pod maską u góry, karta nie rośnie */
.card__visual--chat { padding: 0; }
/* Bez własnego tła — dymki leżą bezpośrednio na karcie. --im-bg = kolor pod spodem (do ogonków) */
.imsg {
  --im-bg: var(--surface-2);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px 10px; overflow: hidden;
}
.emo { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.28em; margin: 0 1px; }
.card__visual--chat .imsg {
  position: absolute; inset: 28px clamp(16px, 3vw, 36px);
  -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%);
}
/* Wysokość nowego wiersza animuje script.js, więc starsze wiadomości płynnie przesuwają się w górę */
.row { flex: none; transition: height .45s var(--ease); }
.row + .row { margin-top: 5px; }
.pop { animation: pop .45s var(--ease) both; }
.row--me .pop { transform-origin: right bottom; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }
.b { transform-origin: left bottom; }
.row--me + .row:not(.row--me), .row:not(.row--me) + .row--me { margin-top: 16px; }
.b {
  position: relative; width: fit-content; max-width: 78%;
  margin: 0; padding: 10px 16px; border-radius: 22px;
  font-size: 16px; line-height: 1.35; letter-spacing: -0.01em;
  background: #3A3A3C; color: #fff;
}
.b--me { margin-left: auto; background: #0A84FF; }
/* „ogonek” dymka jak w iMessage */
.b.tail::before, .b.tail::after { content: ""; position: absolute; bottom: 0; height: 20px; }
.b.tail::before { left: -7px; width: 20px; background: inherit; border-bottom-right-radius: 15px; }
.b.tail::after { left: -10px; width: 10px; background: var(--im-bg); border-bottom-right-radius: 10px; }
.b--me.tail::before { left: auto; right: -7px; border-bottom-right-radius: 0; border-bottom-left-radius: 15px; }
.b--me.tail::after { left: auto; right: -10px; border-bottom-right-radius: 0; border-bottom-left-radius: 10px; }
.typing { display: flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; animation: dots 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
.b--file { display: flex; align-items: center; gap: 10px; }
.b--file i { width: 30px; height: 36px; border-radius: 5px; background: #F2F1ED; position: relative; flex: none; }
.b--file i::after { content: "PDF"; position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font: 700 8px var(--body); color: var(--accent); }
.b--file b { display: block; font-weight: 600; }
.b--file small { font-size: 12px; opacity: .7; }
.delivered { text-align: right; font-size: 11px; color: #8E8E93; padding: 3px 4px 0; }
.imsg--static { --im-bg: var(--surface); flex: 1.35; padding: 0 6px 0 0; }
.imsg--static .b { max-width: 92%; }

/* zielona kropka „na żywo” */
.live { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 600; flex: none; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3DD68C; animation: pulse 1.8s 3; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 214, 140, .5); } 100% { box-shadow: 0 0 0 9px rgba(61, 214, 140, 0); } }

/* ---------- Kroki 2 i 3 w stylu panelu klienta Synvo: ciemno, wyśrodkowane, pomarańcz jako akcent ---------- */
.card__visual--full { padding: 28px; align-items: center; justify-content: center; }
.syn-panel {
  width: 100%; max-width: 400px; background: var(--bg); border: 1px solid var(--line); border-radius: 24px;
  padding: 22px; color: var(--text); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.syn-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.syn-panel__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.syn-panel__brand img { flex: none; }
.syn-panel__brand b { display: block; font: 500 15px var(--display); letter-spacing: -0.03em; }
.syn-panel__brand span { display: block; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 02 — podgląd: śledzenie strony jak przesyłki */
.track__status { flex: none; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 99px; padding: 5px 11px; }
.track__steps { display: grid; padding-top: 4px; }
.track__steps li {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  padding: 9px 0 9px 32px; font-size: 14px; color: var(--text-3);
}
.track__steps li b { font-weight: 600; }
.track__steps li span { font-size: 12px; }
.track__steps li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--bg) center / 10px no-repeat; z-index: 1;
  transition: background-color .35s var(--ease), border-color .35s, box-shadow .35s;
}
.track__steps li + li::after { content: ""; position: absolute; left: 8.5px; top: -9px; height: 18px; width: 1.5px; background: var(--line); transition: background-color .35s; }
.track__steps li.is-done { color: var(--text); }
.track__steps li.is-done::before {
  border-color: var(--text); background-color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%230D0E10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.track__steps li.is-done + li::after { background: var(--text-2); }
.track__steps li.is-now { color: var(--text); }
.track__steps li.is-now::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px rgba(228, 97, 43, .22); }
.track__steps li.is-now span { color: var(--accent); font-weight: 700; }
.track__bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 4px; opacity: 0; transition: opacity .3s; }
.track__bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width 1.2s var(--ease); }
.track__steps li.is-now .track__bar { opacity: 1; }
.track__steps li.is-now .track__bar i { width: 60%; }
.track__news {
  margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; font-size: 13.5px; line-height: 1.45; color: var(--text-2);
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.track__news.is-on { opacity: 1; transform: none; }
.track__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.track__link { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--accent); }

/* 03 — start: domena online + panel Paszportu */
.go-wrap { width: 100%; max-width: 400px; display: grid; gap: 12px; }
.go__bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
}
.go__lock { position: relative; width: 11px; height: 9px; margin-top: 4px; border-radius: 2px; background: var(--text-3); flex: none; transition: background-color .4s; }
.go__lock::before { content: ""; position: absolute; left: 2px; top: -5px; width: 7px; height: 7px; border: 2px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; color: var(--text-3); transition: color .4s; }
.go__url { position: relative; flex: 1; height: 1.3em; overflow: hidden; }
.go__url span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .6s var(--ease), opacity .4s; }
.go__old { color: var(--text-3); }
.go__new { color: var(--text); font-weight: 600; transform: translateY(110%); opacity: 0; }
.go__status { flex: none; font-size: 11px; font-weight: 700; color: #0D0E10; background: #3DD68C; border-radius: 99px; padding: 4px 10px; opacity: 0; transform: scale(.8); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.go:not([data-step="0"]) .go__old { transform: translateY(-110%); opacity: 0; }
.go:not([data-step="0"]) .go__new { transform: none; opacity: 1; }
.go:not([data-step="0"]) .go__status { opacity: 1; transform: none; }
.go:not([data-step="0"]) .go__lock { background: #3DD68C; }
.go:not([data-step="0"]) .go__lock::before { color: #3DD68C; }
.go__pdf { flex: none; font-size: 12px; font-weight: 700; color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; }
.go__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.go__tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px;
  opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.go__tile.is-done { opacity: 1; transform: none; }
.go__tile span { font-size: 11px; color: var(--text-3); }
.go__tile b { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.go__tile small { font-size: 11px; color: var(--text-3); }
.go__tile:last-child small { color: var(--accent); font-weight: 700; }
.go__ok { width: 8px; height: 8px; border-radius: 50%; background: #3DD68C; }

/* Miejsce na prawdziwe nagrania: wystarczy wrzucić plik do assets/kroki/ */
.card__media { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__visual.has-media > :not(.card__media) { display: none; }
.card__visual.has-media .card__media { display: block; }

.rail-ctrl {
  max-width: 1160px; margin: 28px auto 0; padding: 0 clamp(16px, 4vw, 48px);
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
}
.rail-dots { display: flex; gap: 8px; margin-right: auto; }
.rail-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .4s var(--ease), background-color .4s; }
.rail-dots i.on { width: 28px; background: var(--text-2); }
/* Strzałki karuzeli: grube, zaokrąglone, w stylu przycisków Synvo; „krok” w stronę ruchu po najechaniu */
.rail-btn {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--text); color: var(--bg);
  transition: transform .35s var(--ease), opacity .25s, background-color .25s;
}
.rail-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn--next:hover:not(:disabled) { transform: translateX(6px); }
.rail-btn--prev:hover:not(:disabled) { transform: translateX(-6px); }
.rail-btn:active:not(:disabled) { transform: scale(.94); }
.rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rail-btn:disabled { background: var(--surface-2); color: var(--text-3); cursor: default; }

/* ---------- 6. Synvo Care — jak osobny produkt ---------- */
.care__intro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.care__intro .section__sub { margin-left: auto; margin-right: auto; }
.care__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.04em; }
.care__brand svg { width: 30px; height: 30px; fill: var(--text); }
.care__brand svg rect { fill: var(--accent); }
.care__brand b { font-weight: 500; color: var(--accent); }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px;
  padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 260px;
}
.tile--wide { grid-column: span 2; flex-direction: row; align-items: center; }
.tile--wide .tile__copy { flex: 1; }
.tile h3 { font-size: clamp(20px, 2vw, 26px); margin-bottom: 10px; }
.tile p { color: var(--text-2); font-size: 15px; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: 13px; color: var(--text) !important; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3DD68C; animation: pulse 1.8s infinite; }
.pill b { font-weight: 600; }
.tile .b { color: #fff; font-size: 16px; }
.pill--text { display: inline-block; border-radius: 16px; line-height: 1.5; }
.domain { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.domain__name { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; }
.domain__row { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; }
.domain__row span { color: var(--text-3); }
.domain__row b { font-weight: 600; }
.domain__row .ok { color: #3DD68C; }
.domain__bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 2px 0 8px; }
.domain__bar i { display: block; height: 100%; background: var(--text-2); border-radius: 99px; }

/* ---------- 6. Cena: wartość → cena → bonus ---------- */
.care__note { text-align: center; color: var(--text-2); margin-top: 40px; }
.care__note b { color: var(--text); font-weight: 600; }

.offer {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px;
  border: 1px solid var(--line); border-radius: 32px; overflow: hidden;
}
.offer__value { padding: clamp(28px, 4vw, 52px); }
.offer__buy { padding: clamp(28px, 4vw, 52px); background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.offer__label { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.offer__list { margin-top: 24px; display: grid; gap: 4px; }
.offer__list li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.offer__list li:last-child { border-bottom: 0; }
.offer__list li::before {
  content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 6px;
  border-left: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(-45deg);
}
.offer__list b { color: var(--text); font-weight: 600; }
.offer__price { font-family: var(--display); font-weight: 500; letter-spacing: -0.045em; line-height: 1; font-size: clamp(40px, 4.6vw, 60px); margin-top: 18px; }
.offer__terms { color: var(--text-3); font-size: 14px; margin-top: 12px; }
.offer__more { font-size: 13px; color: var(--text-3); margin-top: 6px; }
.offer__more a { color: var(--text-2); text-underline-offset: 3px; }
.offer__more a:hover { color: var(--text); }
.offer__bonus {
  position: relative; display: flex; align-items: center; gap: 14px; margin-top: 32px; text-decoration: none;
  padding: 20px 22px; border-radius: 20px; border: 1px solid rgba(228, 97, 43, .5);
  background: linear-gradient(135deg, rgba(228, 97, 43, .16), rgba(228, 97, 43, .03));
  transition: transform .35s var(--ease), border-color .2s;
}
.offer__bonus:hover { transform: translateX(var(--step)); border-color: var(--accent); }
.offer__bonus svg { flex: none; width: 34px; height: 34px; fill: var(--text); }
.offer__bonus svg rect { fill: var(--accent); }
.offer__bonus b { display: block; font-size: 17px; font-weight: 600; }
.offer__bonus small { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.offer__bonus em {
  position: absolute; top: -11px; right: 18px; font-style: normal; font-size: 12px; font-weight: 700;
  background: var(--accent); color: #fff; border-radius: 99px; padding: 4px 10px;
}
.offer__cta { margin-top: 20px; }
/* dwa plany opieki po 90 dniach: małe, spokojne, bez konkurowania z ceną strony */
.offer__plans { margin-top: auto; padding-top: 24px; display: grid; gap: 8px; }
.offer__plans-title { font-size: 13px; color: var(--text-3); }
.offer__plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.offer__plan b { display: block; font-size: 14px; font-weight: 600; }
.offer__plan span { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.offer__plan em { flex: none; font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-2); }
.offer__plan--full { border-color: rgba(228, 97, 43, .35); }
.offer__plans-note { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 4px; }

/* Wezwanie do działania w miejscach największej motywacji (po dowodzie i po planie) */
.nudge { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 56px; text-align: center; }
.nudge p { color: var(--text-2); font-size: 18px; }
.nudge--steps { max-width: 1160px; margin: 56px auto 0; padding: 0 clamp(16px, 4vw, 48px); }

/* ---------- 7. FAQ ---------- */
.faq { margin-top: 48px; max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative;
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--text-2); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 40px 26px 0; color: var(--text-2); }

/* ---------- 8. Kontakt ---------- */
.contact { text-align: center; padding: 18vh 16px 14vh; }
.contact h2 { font-size: clamp(36px, 6vw, 80px); }
.contact .section__sub { margin: 20px auto 0; }
.form { max-width: 480px; margin: 48px auto 0; display: grid; gap: 10px; text-align: left; }
.form input, .form textarea {
  font: 400 16px/1.5 var(--body); color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; resize: vertical;
}
.form input::placeholder, .form textarea::placeholder { color: var(--text-3); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--text-2); }
.form [aria-invalid="true"] { border-color: #E5484D; }
.form .btn { margin-top: 8px; }
.form__ok { text-align: center; color: var(--text); }
.form__legal { text-align: center; font-size: 12px; color: var(--text-3); margin-top: 6px; }
.contact__mail { display: inline-block; margin-top: 40px; color: var(--text-2); text-decoration: none; }
.contact__mail:hover { color: var(--text); }

.footer { padding: 32px clamp(16px, 4vw, 48px); border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; }
.footer__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.footer__logo { width: 200px; height: auto; }
.footer__right { text-align: right; }
.footer__note { display: block; margin-top: 4px; font-size: 11px; color: var(--text-3); opacity: .7; }
@media (max-width: 760px) {
  .footer__row { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .footer__logo { order: -1; width: 170px; }
  .footer__right { text-align: center; }
}
.footer__row a { text-decoration: none; }
.footer__row a:hover { color: var(--text); }

/* ---------- Pojawianie się ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .story__text .w { opacity: 1; }
  .story { height: auto; }
  .story__inner { position: static; height: auto; padding-top: 16vh; padding-bottom: 16vh; }
}

/* ---------- Telefon ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero__mark { width: 60px; height: 60px; margin-bottom: 36px; }
  .section { padding: 12vh 16px; }
  .story { height: 200vh; }
  .story__inner { padding: 0 16px; }
  .styles { display: flex; width: 100%; }
  .styles button { flex: 1; padding: 11px 8px; }
  .demo__screen { aspect-ratio: 9 / 15; }
  .demo__url { transform: none; }
  .ba { aspect-ratio: 4 / 3; border-radius: 20px; }
  .ba__handle span { width: 40px; height: 40px; }
  .ba__handle span::before { left: 9px; }
  .ba__handle span::after { right: 9px; }
  .audit__form { flex-wrap: wrap; border-radius: 24px; }
  .audit__form input { flex-basis: 100%; }
  .audit__btn { flex: 1; }
  .audit__form input + input { border-left: 0; border-top: 1px solid var(--line); }
  .tile--wide { flex-direction: column; align-items: stretch; }
  .card { border-radius: 28px; }
  .card { grid-template-columns: 1fr; min-height: 0; flex-basis: 88vw; }
  .card h3 { margin-top: 28px; }
  .hero__stats { flex-direction: column; width: 100%; max-width: 340px; margin-top: 40px; }
  .hero__stats div { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; }
  .hero__stats div + div { border-left: 0; border-top: 1px solid var(--line); }
  .hero__stats dd { margin: 0; font-size: 20px; }
  .rail-btn { width: 52px; height: 52px; }
  .why__grid { grid-template-columns: 1fr; gap: 0; }
  /* grafika pod każdym tekstem zamiast przyklejonej (patrz script.js) */
  .why__stage { display: none; }
  .why__item { min-height: 0; opacity: 1; justify-content: flex-start; padding: 0 0 56px; }
  .why__frame { border-radius: 24px; }
  .why__frame--inline { height: min(98vw, 400px); margin-top: 24px; }

  /* czytelniejsze teksty na telefonie */
  .hero__place { font-size: clamp(13px, 3.9vw, 15px); padding: 9px 14px; gap: 8px; white-space: nowrap; max-width: 100%; }
  .story__text { font-size: 31px; line-height: 1.2; }
  .section__sub { font-size: 18px; }
  .why__item > h3 { font-size: 30px; }
  .why__item > p { font-size: 18px; }
  .card__copy p { font-size: 17px; }
  .tile p { font-size: 16px; }

  /* karuzela „Od rozmowy do startu”: tekst i animacja na jednym ekranie */
  .card__copy { padding: 22px 22px 18px; }
  .card h3 { font-size: 28px; margin: 12px 0 8px; }
  .card__visual, .card__visual--chat { min-height: 0; height: clamp(250px, 44svh, 340px); }
  .card__visual--full { padding: 16px; }

  /* Synvo Care: mniejsze kafle, dwa małe obok siebie */
  .bento { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
  .tile { min-height: 0; padding: 20px; gap: 16px; border-radius: 22px; }
  .tile--wide { grid-column: 1 / -1; }
  .tile:not(.tile--wide) h3 { font-size: 18px; }
  .tile:not(.tile--wide) p { font-size: 15px; }
  .tile:not(.tile--wide) .pill { font-size: 12px; padding: 7px 10px; }
  .offer { grid-template-columns: 1fr; }
  .offer__buy { border-left: 0; border-top: 1px solid var(--line); }
  .rail { gap: 12px; }
}

/* Podgląd stylów na wąskim ekranie: makiety przechodzą w układ „telefonowy” */
@container (max-width: 560px) {
  .site--calm { padding: 5cqw 6cqw; }
  .calm__nav { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4cqw; }
  .calm__nav span { display: none; }
  .calm__nav .calm__phone { display: inline; font-size: 2.8cqw; }
  .calm__nav b { font-size: 4.6cqw; padding: 0; }
  .calm__grid { grid-template-columns: 1fr; grid-template-rows: auto; padding-top: 6cqw; height: auto; }
  .calm__k { font-size: 2.6cqw; }
  .calm__text h4 { font-size: 12cqw; margin: 3cqw 0; }
  .calm__p { font-size: 3.4cqw; max-width: none; }
  .calm__cta { flex-direction: column; align-items: flex-start; gap: 3cqw; margin-top: 5cqw; }
  .calm__btn { font-size: 2.8cqw; padding: 3cqw 5cqw; }
  .calm__alt { font-size: 3cqw; }
  .calm__proof { font-size: 3cqw; margin-top: 4cqw; }
  .calm__img { grid-row: auto; grid-column: auto; height: 62cqw; margin: 6cqw 0 0; border-radius: 40cqw 40cqw 0 0; }
  .calm__open { font-size: 2.6cqw; padding: 1.6cqw 3cqw; bottom: 6cqw; }
  .calm__list { display: none; }

  .site--warm { padding: 5cqw 6cqw; }
  .warm__nav b { font-size: 7cqw; }
  .warm__nav > span { display: none; }
  .warm__nav .warm__cta { display: inline; font-size: 3.2cqw; padding: 2cqw 4cqw; }
  .warm__grid { grid-template-columns: 1fr; gap: 6cqw; height: auto; padding-top: 6cqw; }
  .warm__rate { font-size: 2.9cqw; padding: 1.6cqw 3cqw; }
  .warm__text h4 { font-size: 8.8cqw; margin: 4cqw 0; }
  .warm__chips span { font-size: 3cqw; padding: 1.4cqw 3cqw; }
  .warm__btn { font-size: 3.6cqw; padding: 3.4cqw 6cqw; margin-top: 5cqw; }
  .warm__info { font-size: 3cqw; margin-top: 3cqw; }
  .warm__photo { height: 52cqw; }
  .warm__badge { left: 3cqw; bottom: 3cqw; font-size: 3cqw; padding: 2.4cqw 3.4cqw; border-radius: 4cqw; }
  .warm__badge i { width: 2.4cqw; height: 2.4cqw; }

  .bold__img { width: 100%; height: 52%; }
  .bold__img::after { background: linear-gradient(0deg, #0B0B0C, transparent 45%); }
  .bold__nav { font-size: 3.4cqw; padding: 5cqw 6cqw; }
  .bold__nav b { font-size: 6cqw; }
  .bold__nav span { display: none; }
  .bold__nav .bold__cta { display: inline; padding: 2cqw 3.6cqw; }
  .bold__h { font-size: 19cqw; padding: 26cqw 6cqw 0; }
  .bold__actions { flex-direction: column; align-items: flex-start; gap: 3cqw; padding: 5cqw 6cqw 0; }
  .bold__btn, .bold__tel { font-size: 3.6cqw; }
  .bold__btn { padding: 3cqw 5cqw; }
  .bold__services { flex-wrap: wrap; gap: 2cqw; padding: 5cqw 6cqw 0; }
  .bold__services p { font-size: 3.2cqw; padding: 2cqw 3cqw; }
  .bold__services i { font-size: 2.4cqw; }
  .bold__info { flex-wrap: wrap; gap: 1cqw 4cqw; font-size: 2.8cqw; padding: 3cqw 6cqw; }
}

/* ---------- Pasek na telefonie: Cena + Porozmawiajmy, zawsze pod kciukiem ---------- */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
    display: flex; gap: 8px; padding: 6px; border-radius: 999px;
    background: rgba(22, 23, 26, .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    transform: translateY(140%); transition: transform .45s var(--ease);
  }
  .dock.is-on { transform: none; }
  .dock a { flex: 1; text-align: center; text-decoration: none; font: 600 15px var(--body); border-radius: 999px; padding: 14px 0; }
  .dock__price { color: var(--text); }
  .dock__cta { background: var(--accent); color: #fff; }
  .footer { padding-bottom: 100px; }
  .nav__link { display: none; }
}