@charset "UTF-8";
/* ==========================================================================
   iSmile — arkusz główny
   Statyczny serwis HTML/CSS/JS. Jeden plik, podzielony na sekcje.
   Spis treści:
     01. Tokeny
     02. Reset i podstawy
     03. Typografia
     04. Układ (shell, section, grid)
     05. Przyciski
     06. Nagłówek i nawigacja
     07. Hero z wideo
     08. Karty i kafle
     09. Kroki, oś czasu, statystyki
     10. Pakiety
     11. Katalog prac (wideo)
     12. Cennik i kalkulator monet
     13. Technologia
     14. Panel klienta
     15. FAQ
     16. Opinie, logotypy, marquee
     17. Formularze
     18. Stopka
     19. Animacje i ujawnianie przy scrollu
     20. Strony tekstowe (dokumenty prawne)
     21. Dostępność, druk, zmniejszony ruch
   ========================================================================== */


/* ==========================================================================
   01. TOKENY
   ========================================================================== */
:root{
  /* Marka */
  --blue:        #3B68D1;
  --blue-600:    #2E55B8;
  --blue-700:    #1F3F97;
  --blue-ink:    #0C2CBC;
  --cyan:        #5FB4FF;
  --cyan-soft:   #A8D5FF;

  /* Neutralne */
  --ink:         #12173A;
  --ink-2:       #1E2347;
  --ink-70:      rgba(18,23,58,.70);
  --ink-55:      rgba(18,23,58,.55);
  --ink-40:      rgba(18,23,58,.40);
  --paper:       #FFFFFF;
  --mist:        #ECF2FC;
  --mist-2:      #F6F9FE;
  --line:        rgba(18,23,58,.10);
  --line-2:      rgba(18,23,58,.06);
  --line-blue:   rgba(59,104,209,.22);

  /* Ciemne tło sekcji */
  --night:       #0A0F2C;
  --night-2:     #111938;
  --night-line:  rgba(255,255,255,.12);
  --on-night:    rgba(255,255,255,.72);

  /* Gradienty marki */
  --grad-brand:  linear-gradient(135deg, var(--blue) 0%, var(--blue-ink) 100%);
  --grad-soft:   linear-gradient(135deg, var(--cyan) 0%, var(--blue) 70%);
  --grad-text:   linear-gradient(135deg, #FFFFFF 0%, var(--cyan-soft) 100%);
  --hairline:    linear-gradient(90deg, transparent, rgba(59,104,209,.45), transparent);
  --hairline-on-night: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);

  /* Cienie — zawsze dwuwarstwowe: styk + daleka poświata */
  --sh-1: 0 1px 2px rgba(18,23,58,.05), 0 6px 16px -8px rgba(18,23,58,.18);
  --sh-2: 0 2px 4px rgba(18,23,58,.05), 0 18px 40px -20px rgba(18,23,58,.28);
  --sh-3: 0 4px 8px rgba(18,23,58,.06), 0 34px 70px -28px rgba(27,58,140,.40);
  --sh-blue: 0 18px 40px -20px rgba(59,104,209,.55), 0 0 0 1px rgba(59,104,209,.16);
  --sh-inset-top: inset 0 1px 0 rgba(255,255,255,.75);

  /* Promienie */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-2xl: 48px;
  --r-pill: 999px;

  /* Ruch */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .2s;
  --t-med:  .42s;
  --t-slow: .8s;

  /* Rytm */
  --shell: 1240px;
  --shell-narrow: 880px;
  --gutter: clamp(20px, 4vw, 44px);
  --section-y: clamp(52px, 5.5vw, 96px);
  --header-h: 84px;

  /* Szum — subtelne ziarno na ciemnych blokach */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}


/* ==========================================================================
   02. RESET I PODSTAWY
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body{
  margin: 0;
  background: var(--mist-2);
  color: var(--ink-2);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked{ overflow: hidden; }

img, video, svg{ display: block; max-width: 100%; }
img{ height: auto; }

a{ color: inherit; text-decoration: none; }

button, input, select, textarea{ font: inherit; color: inherit; }

ul, ol{ margin: 0; padding: 0; list-style: none; }

/* Przeglądarki dają blockquote margines 40px z każdej strony — w kafelku
   opinii zwężało to tekst do wąskiej kolumny. */
blockquote, figure{ margin: 0; }

hr{ border: 0; height: 1px; background: var(--hairline); margin: 0; }

::selection{ background: rgba(59,104,209,.22); color: var(--ink); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--paper);
  color: var(--ink);
  padding: 14px 22px;
  border-radius: 0 0 var(--r-sm) 0;
  box-shadow: var(--sh-2);
}
.skip-link:focus{ left: 0; }

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (min-width: 1025px){
  ::-webkit-scrollbar{ width: 11px; }
  ::-webkit-scrollbar-track{ background: var(--mist); }
  ::-webkit-scrollbar-thumb{
    background: rgba(59,104,209,.45);
    border-radius: 99px;
    border: 3px solid var(--mist);
  }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(59,104,209,.75); }
}


/* ==========================================================================
   03. TYPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4, h5, h6{
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.022em;
  text-wrap: balance;
}

h1, .t-display{
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
h2, .t-h2{ font-size: clamp(1.9rem, 3.5vw, 3rem); letter-spacing: -.028em; }
h3, .t-h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.018em; }
h4, .t-h4{ font-size: 1.125rem; letter-spacing: -.012em; }

p{ margin: 0 0 1em; text-wrap: pretty; }
p:last-child{ margin-bottom: 0; }

.lead{
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-70);
}

/* łamanie wiersza tylko na szerokich ekranach — na telefonie tekst płynie normalnie */
.br-wide{ display: none; }
@media (min-width: 700px){ .br-wide{ display: inline; } }

.muted{ color: var(--ink-55); }
.tiny{ font-size: .78rem; line-height: 1.55; color: var(--ink-55); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before{
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .55;
}

.grad-text{
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.num{ font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }


/* ==========================================================================
   04. UKŁAD
   ========================================================================== */
.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow{ max-width: var(--shell-narrow); }

.section{
  position: relative;
  padding-block: var(--section-y);
  /* `clip` zamiast `hidden`: przycina poświaty wychodzące poza sekcję,
     ale NIE tworzy kontenera przewijania, więc position: sticky
     w środku (kalkulator, spis treści) działa dalej. */
  overflow-x: clip;
}
.section--tight{ padding-block: clamp(34px, 3.6vw, 60px); }
.section--flush-top{ padding-top: 0; }

.section--mist{ background: var(--mist-2); }
.section--mist-2{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--mist) 50%, #FFFFFF 100%);
}
.section--paper{ background: var(--paper); }

.section--night{
  background: var(--night);
  color: var(--on-night);
  isolation: isolate;
}
.section--night h1, .section--night h2, .section--night h3,
.section--night h4, .section--night .t-h2{ color: #fff; }
.section--night .eyebrow{ color: var(--cyan); }
.section--night .lead{ color: rgba(255,255,255,.72); }
.section--night .muted{ color: rgba(255,255,255,.58); }
.section--night .tiny{ color: rgba(255,255,255,.5); }

/* ziarno + poświata na ciemnych sekcjach */
.section--night::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.section--night::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: -10%;
  top: -30%;
  height: 90%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(59,104,209,.42) 0%, rgba(59,104,209,0) 70%);
  pointer-events: none;
}

.section__head{
  max-width: 760px;
  margin-bottom: clamp(30px, 3.4vw, 52px);
}
.section__head--center{ margin-inline: auto; text-align: center; }
.section__head--center .eyebrow::before{ display: none; }
.section__head p{ margin-top: 18px; }

.grid{ display: grid; gap: clamp(18px, 2.2vw, 30px); }
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--auto{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.split{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.split--reverse > :first-child{ order: 2; }

@media (max-width: 960px){
  .grid--3, .grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split{ grid-template-columns: 1fr; }
  .split--reverse > :first-child{ order: 0; }
}
@media (max-width: 620px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; }
}

.stack-sm > * + *{ margin-top: 12px; }
.stack > * + *{ margin-top: 22px; }
.center{ text-align: center; }
.mt-l{ margin-top: clamp(26px, 3vw, 42px); }

.hairline{
  height: 1px;
  background: var(--hairline);
  border: 0;
}


/* ==========================================================================
   05. PRZYCISKI
   ========================================================================== */
.btn{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background-color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft);
}

/* przetarcie światłem */
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease);
  pointer-events: none;
}

.btn__icon{
  display: inline-block;
  transition: transform var(--t-med) var(--ease);
}

.btn--primary{
  background-image: var(--grad-brand);
  background-color: var(--blue);
  color: #fff;
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--sh-blue);
}
.btn--ghost{
  background: rgba(255,255,255,.7);
  color: var(--blue-ink);
  border-color: var(--line-blue);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--light{
  background: #fff;
  color: var(--blue-ink);
  border-color: rgba(255,255,255,.9);
  box-shadow: var(--sh-1);
}
.btn--outline-light{
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--lg{ padding: 18px 38px; font-size: 1rem; }
.btn--block{ width: 100%; }

@media (hover: hover) and (pointer: fine){
  .btn:hover{ transform: translateY(-2px); box-shadow: var(--sh-2); }
  .btn--primary:hover{ box-shadow: 0 22px 46px -18px rgba(59,104,209,.7), 0 0 0 1px rgba(59,104,209,.2); }
  .btn:hover::after{ transform: translateX(130%); }
  .btn:hover .btn__icon{ transform: translateX(5px); }
  .btn--ghost:hover{ background: #fff; border-color: var(--blue); }
  .btn--outline-light:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); }
}
.btn:active{ transform: translateY(0) scale(.985); transition-duration: .08s; }

.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--blue);
  background-image: linear-gradient(90deg, var(--blue), var(--blue-ink));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 3px;
  transition: background-size .45s var(--ease);
}
.link-arrow .btn__icon{ transition: transform var(--t-med) var(--ease); }
@media (hover: hover){
  .link-arrow:hover{ background-size: 100% 1.5px; }
  .link-arrow:hover .btn__icon{ transform: translateX(4px); }
}


/* ==========================================================================
   06. NAGŁÓWEK I NAWIGACJA
   ========================================================================== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: background var(--t-med) var(--ease-soft),
              box-shadow var(--t-med) var(--ease-soft),
              border-color var(--t-med) var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.site-header::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,10,30,.42) 0%, rgba(5,10,30,0) 100%);
  opacity: 1;
  transition: opacity var(--t-med) var(--ease-soft);
  pointer-events: none;
}
.site-header.is-stuck{
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 34px -26px rgba(18,23,58,.7);
}
.site-header.is-stuck::before{ opacity: 0; }

.site-header__inner{
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand{ display: flex; align-items: center; flex: 0 0 auto; }
.brand img{
  width: 132px;
  transition: filter var(--t-med) var(--ease-soft);
  filter: brightness(0) invert(1);
}
.site-header.is-stuck .brand img,
.site-header--solid .brand img{ filter: none; }

.nav{ margin-left: auto; }
.nav__list{ display: flex; align-items: center; gap: 4px; }
.nav__link{
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255,255,255,.88);
  transition: color var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft);
}
.site-header.is-stuck .nav__link{ color: var(--ink-70); }
.nav__link::after{
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .36s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .nav__link:hover::after{ transform: scaleX(1); transform-origin: left center; }
  .nav__link:hover{ color: #fff; }
  .site-header.is-stuck .nav__link:hover{ color: var(--blue-ink); }
}
.nav__link.is-active{ color: #fff; }
.site-header.is-stuck .nav__link.is-active{ color: var(--blue-ink); }
.nav__link.is-active::after{ transform: scaleX(1); }

.header-actions{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.header-actions .btn{ padding: 12px 22px; font-size: .88rem; }

.burger{
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.site-header.is-stuck .burger{ border-color: var(--line); background: #fff; }
.burger__bars{ position: relative; width: 20px; height: 2px; }
.burger__bars, .burger__bars::before, .burger__bars::after{
  display: block;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) linear, background var(--t-med) var(--ease-soft);
}
.site-header.is-stuck .burger__bars,
.site-header.is-stuck .burger__bars::before,
.site-header.is-stuck .burger__bars::after{ background: var(--ink); }
.burger__bars::before, .burger__bars::after{
  content: "";
  position: absolute;
  left: 0; width: 100%; height: 2px;
}
.burger__bars::before{ top: -6px; }
.burger__bars::after{ top: 6px; }
.burger[aria-expanded="true"] .burger__bars{ background: transparent !important; }
.burger[aria-expanded="true"] .burger__bars::before{ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after{ transform: translateY(-6px) rotate(-45deg); }

/* szuflada mobilna */
.drawer{
  position: fixed;
  inset: 0;
  z-index: 890;
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  background: rgba(10,15,44,.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-soft), visibility var(--t-med);
}
.drawer.is-open{ opacity: 1; visibility: visible; }
.drawer__body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px var(--gutter) 48px;
  overflow-y: auto;
}
.drawer__link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  opacity: 0;
  transform: translateY(14px);
}
.drawer.is-open .drawer__link{
  animation: drawerIn .5s var(--ease) forwards;
}
.drawer.is-open .drawer__link:nth-child(1){ animation-delay: .05s; }
.drawer.is-open .drawer__link:nth-child(2){ animation-delay: .1s; }
.drawer.is-open .drawer__link:nth-child(3){ animation-delay: .15s; }
.drawer.is-open .drawer__link:nth-child(4){ animation-delay: .2s; }
.drawer.is-open .drawer__link:nth-child(5){ animation-delay: .25s; }
.drawer.is-open .drawer__link:nth-child(6){ animation-delay: .3s; }
.drawer__link span{ color: var(--cyan); font-size: .8rem; letter-spacing: .1em; }
.drawer__actions{
  display: grid;
  gap: 12px;
  margin-top: 32px;
}
@keyframes drawerIn{ to{ opacity: 1; transform: none; } }

@media (max-width: 1024px){
  .nav{ display: none; }
  .burger{ display: inline-flex; margin-left: auto; }
  .header-actions{ display: none; }
}


/* ==========================================================================
   07. HERO Z WIDEO
   ========================================================================== */
.hero{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 940px);
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(56px, 8vw, 110px);
  overflow: hidden;
  background: var(--night);
}
.hero--compact{
  min-height: min(76svh, 720px);
  align-items: center;
}

.hero__media{
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* delikatne, powolne zbliżenie — hero przestaje być statycznym tłem */
  animation: heroDrift 34s var(--ease-soft) infinite alternate;
}
@keyframes heroDrift{
  from{ transform: scale(1.04); }
  to  { transform: scale(1.12); }
}

/* przyciemnienie: pion (czytelność tekstu) + poświata marki */
.hero__scrim{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(6,11,34,.74) 0%, rgba(6,11,34,.34) 46%, rgba(6,11,34,0) 76%),
    linear-gradient(180deg, rgba(6,11,34,.55) 0%, rgba(6,11,34,.12) 32%, rgba(6,11,34,.70) 100%),
    radial-gradient(90% 70% at 18% 88%, rgba(12,44,188,.5) 0%, rgba(12,44,188,0) 70%);
}
.hero__scrim::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .2;
  mix-blend-mode: overlay;
}

.hero__inner{ position: relative; width: 100%; }
.hero__content{ max-width: 780px; }
.hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 12px;
  margin-bottom: 26px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.hero__dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(95,180,255,.65);
  animation: pulseDot 2.6s var(--ease-soft) infinite;
}
@keyframes pulseDot{
  0%  { box-shadow: 0 0 0 0 rgba(95,180,255,.6); }
  70% { box-shadow: 0 0 0 10px rgba(95,180,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(95,180,255,0); }
}

.hero__title{
  color: #fff;
  text-shadow: 0 2px 40px rgba(6,11,34,.5);
}
.hero__title em{
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead{
  max-width: 640px;
  margin-top: 26px;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.62;
  color: rgba(255,255,255,.82);
}
.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.hero__meta{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero__meta div{ min-width: 0; }
.hero__meta dt{
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: #fff;
}
.hero__meta dd{
  margin: 4px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(255,255,255,.62);
}

.hero__scroll{
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  gap: 8px;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.hero__scroll i{
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  animation: scrollHint 2.4s var(--ease-soft) infinite;
  transform-origin: top center;
}
@keyframes scrollHint{
  0%  { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100%{ transform: scaleY(1) translateY(42px); opacity: 0; }
}

@media (max-width: 900px){
  .hero__meta{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .hero{ min-height: min(94svh, 780px); }
  .hero__scroll{ display: none; }
  .hero__meta{ gap: 20px 24px; margin-top: 34px; padding-top: 24px; }
  .hero__meta dt{ font-size: 1.4rem; }
  .hero__meta dd{ font-size: .76rem; }
  .hero__actions .btn{ flex: 1 1 100%; }
}


/* ==========================================================================
   08. KARTY I KAFLE
   ========================================================================== */
.card{
  position: relative;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, #FBFCFF 100%);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.card::before{
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: var(--hairline);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine){
  .card--lift:hover{ transform: translateY(-6px); box-shadow: var(--sh-2); }
}

.card--glass{
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.74);
}
.card--glass::before{ background: var(--hairline-on-night); }
.card--glass h3, .card--glass h4{ color: #fff; }

.card__icon{
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 22px;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, #fff, var(--mist));
  box-shadow: 0 0 0 1px var(--line-blue) inset, var(--sh-1);
}
.card__icon img{ width: 28px; height: 28px; object-fit: contain; }
.card--glass .card__icon{
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset;
}
.card--glass .card__icon img{ filter: brightness(0) invert(1); }

.card h3, .card h4{ margin-bottom: 10px; }
.card p{ color: inherit; font-size: .95rem; }
.card:not(.card--glass) p{ color: var(--ink-70); }

.media-frame{
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--mist);
  box-shadow: var(--sh-3);
  border: 1px solid rgba(255,255,255,.7);
}
.media-frame img{ width: 100%; }
.media-frame--tall img{ aspect-ratio: 4/5; object-fit: cover; }
.media-frame--wide img{ aspect-ratio: 16/10; object-fit: cover; }

/* poświata pod ilustracją — tani sposób na "drogie" światło */
.glow-wrap{ position: relative; }
.glow-wrap::before{
  content: "";
  position: absolute;
  inset: 8% -6% -10% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(59,104,209,.34) 0%, rgba(59,104,209,0) 72%);
  filter: blur(18px);
  pointer-events: none;
}


/* ==========================================================================
   09. KROKI, OŚ CZASU, STATYSTYKI
   ========================================================================== */
.steps{ position: relative; }
.steps__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 960px){ .steps__grid{ grid-template-columns: 1fr; } }
/* karty obok siebie: każdy tytuł w dwóch liniach, żeby stały na równi */
.br-steps{ display: none; }
@media (min-width: 961px){ .br-steps{ display: inline; } }

.step{ position: relative; z-index: 1; }
.step__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px; height: 56px;
  margin-bottom: 22px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(145deg, #fff, var(--mist));
  color: var(--blue-ink);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 0 0 1px var(--line-blue) inset, var(--sh-1);
}
.section--night .step__num{
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset;
}
.step__media{
  width: 44px; height: 44px;
  margin-bottom: 16px;
  object-fit: contain;
}
.step h3{ margin-bottom: 10px; }
.step p{ color: var(--ink-70); font-size: .95rem; }
.section--night .step p{ color: rgba(255,255,255,.66); }

/* Krok jako karta: ikona po lewej, numer jako etykieta nad tytułem,
   opis pod spodem na pełnej szerokości. Ten sam układ na wszystkich
   szerokościach — na desktopie karty stoją obok siebie w siatce. */
.step--icon{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon num"
    "icon title"
    "text text";
  column-gap: clamp(14px, 1.4vw, 20px);
  align-items: center;
  /* treść od góry: przy krótszym opisie wolne miejsce zostaje na dole karty,
     zamiast rozpychać wiersze i obniżać tytuł względem sąsiednich kart */
  align-content: start;
  height: 100%;
  padding: clamp(18px, 1.9vw, 30px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, #FBFCFF 100%);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .step--icon:hover{ transform: translateY(-5px); box-shadow: var(--sh-2); }
}

.step--icon .step__media{
  grid-area: icon;
  display: grid;
  place-items: center;
  width: clamp(56px, 4.6vw, 68px);
  height: clamp(56px, 4.6vw, 68px);
  margin: 0;
  padding: clamp(12px, 1vw, 15px);
  align-self: start;
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, #fff, var(--mist));
  box-shadow: 0 0 0 1px var(--line-blue) inset;
  color: var(--blue-ink);
}
.step--icon .step__media svg{ width: 100%; height: 100%; }

.step--icon .step__num{
  grid-area: num;
  justify-self: start;
  min-width: 0; height: auto;
  margin: 0; padding: 0;
  background: none;
  box-shadow: none;
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--blue);
}

.step--icon h3{
  grid-area: title;
  margin: 3px 0 0;
  font-size: clamp(1.04rem, 1.2vw, 1.18rem);
  line-height: 1.3;
}

.step--icon p{
  grid-area: text;
  margin-top: clamp(12px, 1.2vw, 18px);
  font-size: .92rem;
}

@media (max-width: 960px){
  .steps__grid{ gap: 12px; }
}

/* pionowa oś czasu */
.timeline{ position: relative; display: grid; gap: 0; }
.timeline::before{
  content: "";
  position: absolute;
  left: 27px; top: 14px; bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-blue) 8%, var(--line-blue) 92%, transparent);
}
.timeline__item{
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(18px, 3vw, 34px);
  padding-block: clamp(20px, 2.4vw, 30px);
}
.timeline__dot{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, var(--mist));
  color: var(--blue-ink);
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 0 0 1px var(--line-blue) inset, var(--sh-1);
}
.timeline__item.is-visible .timeline__dot{
  animation: dotPop .6s var(--ease) both;
}
@keyframes dotPop{
  from{ transform: scale(.55); opacity: 0; }
  to  { transform: scale(1); opacity: 1; }
}
.timeline__body h3{ margin-bottom: 8px; }
.timeline__body p{ color: var(--ink-70); }
@media (max-width: 620px){
  .timeline::before{ left: 22px; }
  .timeline__item{ grid-template-columns: 46px 1fr; }
  .timeline__dot{ width: 46px; height: 46px; font-size: .85rem; }
}

/* statystyki */
.stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 860px){ .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat{
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.stat__value{
  display: block;
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__label{
  display: block;
  margin-top: 12px;
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(255,255,255,.6);
}


/* ==========================================================================
   10. PAKIETY
   ========================================================================== */
.plans{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}
@media (max-width: 980px){ .plans{ grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.plan{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(236,242,252,.94) 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--sh-2);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.plan::before{
  content: "";
  position: absolute;
  top: 0; left: 16%; right: 16%;
  height: 1px;
  background: var(--hairline);
}
@media (hover: hover) and (pointer: fine){
  .plan:hover{ transform: translateY(-8px); box-shadow: var(--sh-3); }
}

.plan--featured{
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.98) 0%, rgba(236,242,252,.95) 36%, rgba(59,104,209,.16) 100%);
  border-color: var(--line-blue);
  box-shadow: var(--sh-blue), var(--sh-3);
}
@media (min-width: 981px){
  .plan--featured{ transform: translateY(-14px); }
  .plan--featured:hover{ transform: translateY(-22px); }
}

.plan__badge{
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: #fff;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 10px 22px -12px rgba(12,44,188,.85);
}
.plan__name{
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.plan__for{
  margin-top: 8px;
  font-size: .92rem;
  color: var(--ink-55);
  min-height: 3em;
}
.plan__coins{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.plan__coins b{
  font-size: clamp(2.2rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan__coins span{ font-size: .92rem; color: var(--ink-55); }
.plan__discount{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(59,104,209,.1);
  color: var(--blue-ink);
  font-size: .82rem;
  font-weight: 500;
}
.plan__price{
  margin-top: 22px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan__price small{ display: block; font-size: .78rem; font-weight: 400; color: var(--ink-40); letter-spacing: 0; }
.plan__desc{ margin-top: 18px; font-size: .92rem; color: var(--ink-70); }
.plan__includes{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-inset-top);
}

.plan__includes-ico{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff 0%, var(--mist) 100%);
  box-shadow: 0 0 0 1px var(--line-blue) inset, var(--sh-1);
  color: var(--blue-ink);
}
.plan__includes-ico svg{ width: 27px; height: 27px; }

.plan__includes-txt{
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-55);
}
.plan__includes-txt b{
  display: block;
  margin-bottom: 2px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
}

/* w wyróżnionym pakiecie kafelek ikony dostaje kolor marki */
.plan--featured .plan__includes-ico{
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(12,44,188,.85);
}
.plan .btn{ margin-top: 26px; }
.plan__note{
  margin-top: 18px;
  font-size: .68rem;
  line-height: 1.5;
  color: var(--ink-40);
}

.plans__note{
  margin-top: clamp(22px, 2.4vw, 32px);
  text-align: center;
  font-size: .9rem;
  color: var(--ink-55);
}
.plans__note a{
  color: var(--blue);
  font-weight: 500;
  background-image: linear-gradient(90deg, var(--blue), var(--blue-ink));
  background-size: 100% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .4s var(--ease), color var(--t-fast) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine){
  .plans__note a:hover{ background-size: 0% 1.5px; color: var(--blue-ink); }
}

/* --- przełącznik „Wybieram N-Scan | Mam swój skaner | Zlecam bez pakietu” -- */
.scanner-switch{
  --pad: 6px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  width: min(760px, 100%);
  margin: 0 auto clamp(18px, 2vw, 26px);
  padding: var(--pad);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
/* przesuwana „pigułka” pod aktywnym przyciskiem */
.scanner-switch::before{
  content: "";
  position: absolute;
  top: var(--pad); bottom: var(--pad); left: var(--pad);
  width: calc((100% - 2 * var(--pad)) / 3);
  border-radius: calc(var(--r-lg) - var(--pad));
  background: var(--grad-brand);
  box-shadow: 0 10px 22px -12px rgba(12,44,188,.9);
  transition: transform var(--t-med) var(--ease);
}
[data-mode="own"] > .scanner-switch::before{ transform: translateX(100%); }
[data-mode="postpaid"] > .scanner-switch::before{ transform: translateX(200%); }

.scanner-switch__btn{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border: 0;
  border-radius: calc(var(--r-lg) - var(--pad));
  background: none;
  text-align: center;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-soft);
}
.scanner-switch__btn b{
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease-soft);
}
.scanner-switch__btn small{
  font-size: .74rem;
  line-height: 1.35;
  color: var(--ink-55);
  transition: color var(--t-fast) var(--ease-soft);
}
.scanner-switch__btn:hover b{ color: var(--blue-ink); }
.scanner-switch__btn.is-active b{ color: #fff; }
.scanner-switch__btn.is-active small{ color: rgba(255,255,255,.78); }
.scanner-switch__btn:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }

/* telefon: trzy pozycje jedna pod drugą, pigułka jedzie w pionie */
@media (max-width: 640px){
  .scanner-switch{ grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .scanner-switch::before{
    right: var(--pad);
    width: auto;
    bottom: auto;
    height: calc((100% - 2 * var(--pad)) / 3);
  }
  [data-mode="own"] > .scanner-switch::before{ transform: translateY(100%); }
  [data-mode="postpaid"] > .scanner-switch::before{ transform: translateY(200%); }
  .scanner-switch__btn{
    gap: 1px;
    padding: 11px 18px;
    text-align: left;
  }
}

/* ukrywanie wariantów — element widać tylko w trybach wpisanych w data-variant
   (np. data-variant="nscan own"); działa także bez JS (domyślnie N-Scan) */
[data-scanner-scope][data-mode="nscan"] [data-variant]:not([data-variant~="nscan"]),
[data-scanner-scope][data-mode="own"] [data-variant]:not([data-variant~="own"]),
[data-scanner-scope][data-mode="postpaid"] [data-variant]:not([data-variant~="postpaid"]){ display: none !important; }

[data-scanner-scope] [data-variant]{ animation: variantIn .45s var(--ease) both; }
@keyframes variantIn{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: none; }
}

.scanner-band__aside{
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--cyan-soft);
}

/* --- pas „skaner w pakiecie" nad kartami pakietów --------------------- */
.scanner-band{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: clamp(24px, 2.6vw, 38px);
  padding: clamp(26px, 2.8vw, 40px);
  border-radius: var(--r-xl);
  background: var(--night);
  color: rgba(255,255,255,.72);
  box-shadow: var(--sh-3);
}
.scanner-band::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: .14;
  mix-blend-mode: overlay;
}
.scanner-band::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% -10% auto -30%;
  height: 170%;
  background: radial-gradient(42% 46% at 28% 45%, rgba(59,104,209,.6), transparent 70%);
}

.scanner-band__head{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
}

.scanner-band__ico{
  display: grid;
  place-items: center;
  width: clamp(64px, 5.4vw, 84px);
  height: clamp(64px, 5.4vw, 84px);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}
.scanner-band__ico svg{ width: 58%; height: 58%; }

.scanner-band__label{
  margin: 0 0 6px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.scanner-band__title{
  margin: 0;
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -.025em;
}
.scanner-band__lead{
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: rgba(255,255,255,.76);
}

.scanner-band__points{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(24px, 2.4vw, 32px);
  padding-top: clamp(22px, 2.2vw, 30px);
  border-top: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 860px){
  .scanner-band__points{ grid-template-columns: 1fr; gap: 16px; }
  .scanner-band__head{ grid-template-columns: 1fr; }
}
.scanner-band__points li{
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(255,255,255,.62);
}
.scanner-band__points b{
  display: block;
  margin-bottom: 5px;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}

.scanner-band__link{
  margin-top: clamp(22px, 2.2vw, 30px);
  color: var(--cyan);
  background-image: linear-gradient(90deg, var(--cyan), var(--cyan));
}

/* --- wariant „Zlecam bez pakietu” ----------------------------------------- */
/* pas ma poświatę po prawej, żeby odróżniał się od pasów skanera */
.scanner-band--postpaid::after{
  inset: -60% -30% auto -10%;
  background: radial-gradient(40% 46% at 78% 42%, rgba(95,180,255,.42), transparent 70%);
}

.plan--postpaid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1040px;
  margin-inline: auto;
  border-color: var(--line-blue);
  box-shadow: var(--sh-blue), var(--sh-2);
}
.plan--postpaid .plan__price{ font-size: clamp(2.2rem, 3.6vw, 2.9rem); letter-spacing: -.04em; line-height: 1; }
.plan--postpaid .plan__price small{ margin-top: 8px; letter-spacing: 0; }
.plan--postpaid .feature-list{ margin-top: 0; }
.plan--postpaid .feature-list li:first-child{ padding-top: 4px; }
.plan--postpaid__cta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.plan--postpaid__cta .btn{ margin-top: 0; flex: 1 1 auto; }
.plan--postpaid .plan__note{ font-size: .78rem; }
.plan--postpaid .plan__note a{ color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
  .plan--postpaid:hover{ transform: none; }
}
@media (max-width: 860px){
  .plan--postpaid{ grid-template-columns: 1fr; max-width: 520px; }
}

.plan__badge--soft{
  background: rgba(59,104,209,.1);
  color: var(--blue-ink);
}

/* --- wyróżnik N-Scan: protokół stanu zębów pacjenta --------------------- */
.protocol__eyebrow::before{ display: none; }
.protocol__badge{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(95,180,255,.32), rgba(59,104,209,.18));
  border: 1px solid rgba(168,213,255,.35);
  color: #fff;
}
.protocol__badge svg{ width: 20px; height: 20px; }
.protocol .lead{ margin-top: 16px; }
.protocol .feature-list{ margin-top: 22px; }
.protocol__actions{ display: flex; flex-wrap: wrap; gap: 12px; }

.protocol__media{ position: relative; }
/* etykieta „Analiza AI” przyklejona do zdjęcia */
.protocol__chip{
  position: absolute;
  left: clamp(-18px, -1.4vw, -8px);
  bottom: clamp(22px, 3vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: rgba(10,15,44,.72);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  color: #fff;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
}
.protocol__chip i{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(95,180,255,.6);
  animation: aiPulse 2.2s ease-out infinite;
}
@keyframes aiPulse{
  0%  { box-shadow: 0 0 0 0 rgba(95,180,255,.6); }
  70% { box-shadow: 0 0 0 10px rgba(95,180,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(95,180,255,0); }
}
@media (max-width: 980px){
  .protocol__chip{ left: 12px; bottom: 16px; }
}

/* ramka-wyróżnik w pasie N-Scan (ciemne tło) */
.scanner-band__feature{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: clamp(20px, 2.2vw, 28px);
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: linear-gradient(100deg, rgba(95,180,255,.16), rgba(59,104,209,.08) 60%, rgba(255,255,255,.03));
  border: 1px solid rgba(168,213,255,.28);
  color: #fff;
  transition: border-color var(--t-fast) var(--ease-soft), transform var(--t-med) var(--ease);
}
.scanner-band__feature-ico{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
}
.scanner-band__feature-ico svg{ width: 26px; height: 26px; }
.scanner-band__feature-txt small{
  display: block;
  margin-bottom: 2px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.scanner-band__feature-txt b{ font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.scanner-band__feature-go{ font-size: 1.2rem; color: var(--cyan); transition: transform var(--t-med) var(--ease); }
@media (hover: hover) and (pointer: fine){
  .scanner-band__feature:hover{ border-color: rgba(168,213,255,.55); }
  .scanner-band__feature:hover .scanner-band__feature-go{ transform: translateX(4px); }
}

/* ramka-wyróżnik w opisie N-Scan na stronie Technologia (jasne tło) */
.nscan-feature{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin: 22px 0 20px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: linear-gradient(110deg, rgba(95,180,255,.14), rgba(255,255,255,.85) 70%);
  border: 1px solid var(--line-blue);
  box-shadow: var(--sh-1), var(--sh-inset-top);
  color: var(--ink-70);
  font-size: .86rem;
  line-height: 1.5;
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.nscan-feature__ico{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(12,44,188,.85);
}
.nscan-feature__ico svg{ width: 28px; height: 28px; }
.nscan-feature__txt small{
  display: block;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
}
.nscan-feature__txt b{ display: block; margin: 2px 0 3px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.nscan-feature__go{ font-size: 1.2rem; color: var(--blue); transition: transform var(--t-med) var(--ease); }
@media (hover: hover) and (pointer: fine){
  .nscan-feature:hover{ transform: translateY(-2px); box-shadow: var(--sh-2); }
  .nscan-feature:hover .nscan-feature__go{ transform: translateX(4px); }
}
@media (max-width: 520px){
  .scanner-band__feature, .nscan-feature{ grid-template-columns: auto 1fr; }
  .scanner-band__feature-go, .nscan-feature__go{ display: none; }
}

/* mała plakietka „+ protokół stanu zębów (AI)” na kartach N-Scan */
.tag-ai{
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(59,104,209,.1);
  color: var(--blue-ink);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.3;
}
a.tag-ai:hover{ background: rgba(59,104,209,.18); }

/* kolumna „Bez pakietu” w tabeli porównawczej — wyróżniony tylko nagłówek,
   żeby nie konkurowała z podświetlonym pakietem Grow */
.compare thead .compare__postpaid{ color: var(--blue-ink); }

/* tabela porównawcza */
.compare{
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.compare caption{ text-align: left; padding-bottom: 18px; color: var(--ink-55); font-size: .86rem; }
.compare th, .compare td{
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.compare thead th{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-ink);
  border-bottom-color: var(--line-blue);
}
.compare tbody th{ font-weight: 500; color: var(--ink-70); }
.compare td{ color: var(--ink); font-weight: 500; }
.compare .is-featured{ background: rgba(59,104,209,.055); }
.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ==========================================================================
   11. KATALOG PRAC (WIDEO)
   ========================================================================== */
.catalog{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 980px){ .catalog{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .catalog{ grid-template-columns: 1fr; } }

.tile{
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* tytuł u góry kafla, produkt pod nim */
  aspect-ratio: 4 / 5;           /* --z i --ty wyliczone pod te proporcje */
  padding: 22px 24px;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* tło w kolorze tła filmów — pomniejszony kadr (--z < 1) nie ma widocznych krawędzi */
  background: #FDFDFD;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.tile__video{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Każdy film ma model innej wielkości i na innej wysokości kadru.
     --z (skala) i --ty (przesunięcie, % wysokości kafla) ustawiane w HTML
     na każdym kaflu dopasowują kadr tak, żeby modele w klatce spoczynkowej
     miały podobną wielkość, zaczynały się pod tytułem i stały na wspólnej
     linii podstawy (ok. 91% wysokości kafla). Wyliczenie: README, „Kafle”. */
  object-position: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 1;
  transform: translateY(var(--ty, 0%)) scale(var(--z, 1.02));
  transition: transform .9s var(--ease), opacity var(--t-med) var(--ease-soft);
}
.tile__shade{
  position: absolute;
  inset: 0;
  z-index: -1;
  /* cieniowanie odwrócone: ciemny pas pod tytułem u góry, czysty produkt niżej */
  background: linear-gradient(180deg,
              rgba(8,13,38,.92) 0%,
              rgba(8,13,38,.7) 15%,
              rgba(8,13,38,.26) 31%,
              rgba(8,13,38,0) 44%);
  transition: background var(--t-med) var(--ease-soft);
}
.tile__num{
  position: static;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(8,13,38,.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  color: rgba(255,255,255,.9);
}
.tile h3{
  color: #fff;
  font-size: 1.22rem;
  line-height: 1.25;
}
.tile__more{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: .84rem;
  color: var(--cyan-soft);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .tile:hover{ transform: translateY(-6px); box-shadow: var(--sh-3); }
  .tile:hover .tile__video{ transform: translateY(var(--ty, 0%)) scale(calc(var(--z, 1.02) * 1.06)); opacity: 1; }
  .tile:hover .tile__more{ opacity: 1; transform: none; }
}
.tile.is-active .tile__more{ opacity: 1; transform: none; }


/* --- kafel w opakowaniu: link + osobny przycisk podglądu ---------------- */
.tile-wrap{
  position: relative;
  display: flex;
}
.tile-wrap > .tile{ flex: 1 1 auto; }

.tile__zoom{
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(8,13,38,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              background var(--t-fast) var(--ease-soft);
}
.tile__zoom svg{ width: 17px; height: 17px; }
.tile-wrap:hover .tile__zoom,
.tile__zoom:focus-visible{ opacity: 1; transform: none; }
.tile__zoom:hover{ background: var(--blue); border-color: transparent; }
@media (hover: none){
  .tile__zoom{ opacity: 1; transform: none; }
}

/* --- element klikalny otwierający lightbox ------------------------------ */
[data-zoom-src]{ cursor: zoom-in; }

.zoomable{ position: relative; }
.zoomable::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(12,44,188,0);
  transition: background var(--t-med) var(--ease-soft);
  pointer-events: none;
}
.zoomable__hint{
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(8,13,38,.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  pointer-events: none;
}
.zoomable__hint svg{ width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine){
  .zoomable:hover .zoomable__hint{ opacity: 1; transform: none; }
  .zoomable:hover::after{ background: rgba(12,44,188,.1); }
}
@media (hover: none){
  .zoomable__hint{ opacity: 1; transform: none; }
}
.zoomable:focus-visible .zoomable__hint{ opacity: 1; transform: none; }

/* --- miniatury galerii: aktywna jest wyróżniona ------------------------- */
.tech__gallery img{ cursor: pointer; }
.tech__gallery img.is-current{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  opacity: .55;
}
.media-frame img{ transition: opacity var(--t-med) var(--ease-soft); }
.media-frame.is-swapping img{ opacity: 0; }

/* --- LIGHTBOX ----------------------------------------------------------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 18px;
  padding: clamp(56px, 7vw, 76px) clamp(14px, 4vw, 56px) clamp(20px, 3vw, 34px);
  background: rgba(6,11,34,.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-soft), visibility var(--t-med);
}
.lightbox.is-open{ opacity: 1; visibility: visible; }

/* Kadr jest elementem siatki o wierszu 1fr, więc ma określoną wysokość.
   Flex z min-height: 0 sprawia, że procentowe max-height dziecka ma się
   do czego odnieść — w siatce wiersz dopasowywał się do treści i wideo
   pionowe wychodziło poza ekran. Druga granica w jednostkach svh jest
   zabezpieczeniem niezależnym od układu. */
.lightbox__stage{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.lightbox__stage img,
.lightbox__stage video{
  max-width: 100%;
  max-height: min(100%, calc(100svh - 170px));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
  background: #070B1E;
  animation: lightboxIn .42s var(--ease) both;
}
@keyframes lightboxIn{
  from{ opacity: 0; transform: scale(.96); }
  to  { opacity: 1; transform: none; }
}

.lightbox__bar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  text-align: center;
}
.lightbox__caption{ max-width: 60ch; }
.lightbox__count{
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}

.lightbox__btn{
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-soft),
              transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease-soft);
}
.lightbox__btn:hover{ background: rgba(255,255,255,.2); transform: scale(1.06); }
.lightbox__btn svg{ width: 18px; height: 18px; }
.lightbox__close{ top: clamp(12px, 2vw, 22px); right: clamp(12px, 3vw, 26px); }
.lightbox__prev{ left: clamp(8px, 2vw, 26px); top: 50%; transform: translateY(-50%); }
.lightbox__next{ right: clamp(8px, 2vw, 26px); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover{ transform: translateY(-50%) scale(1.06); }
.lightbox__next:hover{ transform: translateY(-50%) scale(1.06); }
.lightbox__prev[hidden], .lightbox__next[hidden]{ display: none; }

@media (max-width: 620px){
  .lightbox{ padding: 62px 10px 18px; }
  .lightbox__btn{ width: 42px; height: 42px; }
  .lightbox__prev{ left: 6px; }
  .lightbox__next{ right: 6px; }
  .lightbox__stage img,
  .lightbox__stage video{ max-height: min(100%, calc(100svh - 150px)); }
  .lightbox__bar{ flex-direction: column; gap: 6px; font-size: .78rem; }
}

/* ==========================================================================
   12. CENNIK I KALKULATOR MONET
   ========================================================================== */
.pricing__tools{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}
.search{
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}
.search input{
  width: 100%;
  padding: 14px 18px 14px 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: .92rem;
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
.search input:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(59,104,209,.14);
}
.search svg{
  position: absolute;
  left: 17px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--ink-40);
  pointer-events: none;
}

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-soft);
}
.chip:hover{ border-color: var(--line-blue); color: var(--blue-ink); }
.chip.is-active{
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(12,44,188,.9);
}

.price-group{ margin-bottom: 42px; }
.price-group__title{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-blue);
}
.price-group__title h3{ font-size: 1.15rem; }
.price-group__title span{ font-size: .78rem; color: var(--ink-40); }

.price-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 14px;
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--line-2);
  transition: background var(--t-fast) var(--ease-soft);
}
.price-row:hover{ background: rgba(59,104,209,.045); }
.price-row__name{ font-size: .95rem; color: var(--ink); }
.price-row__coins{
  font-size: .78rem;
  color: var(--blue-ink);
  background: rgba(59,104,209,.1);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-row__price{
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 96px;
  text-align: right;
}
@media (max-width: 560px){
  .price-row{ grid-template-columns: 1fr auto; }
  .price-row__coins{ grid-column: 1; grid-row: 2; justify-self: start; }
}
.price-empty{
  padding: 40px;
  text-align: center;
  color: var(--ink-55);
}

/* kalkulator */
.calc{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 900px){ .calc{ grid-template-columns: 1fr; } }

.calc__list{ display: grid; gap: 10px; }
.section__head p.calc__hint{
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 2px solid var(--blue);
  background: rgba(59, 104, 209, .06);
  border-radius: 0 10px 10px 0;
  font-size: .92rem;
  color: var(--ink-70);
}
.calc__item{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line-2);
}
.calc__item b{ display: block; font-size: .92rem; font-weight: 500; }
.calc__item small{ color: var(--ink-40); font-size: .76rem; }
.stepper{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--mist);
}
.stepper button{
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease-soft);
}
.stepper button:hover{ background: var(--blue); color: #fff; }
.stepper button:active{ transform: scale(.9); }
.stepper output{
  min-width: 34px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calc__summary{
  position: sticky;
  top: calc(var(--header-h) + 20px);
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-xl);
  background: var(--night);
  color: rgba(255,255,255,.7);
  box-shadow: var(--sh-3);
  isolation: isolate;
  overflow: hidden;
}
.calc__summary::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -20% auto -20%;
  height: 80%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(59,104,209,.5), transparent 70%);
}
.calc__summary h3{ color: #fff; margin-bottom: 20px; }
.calc__line{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .9rem;
}
.calc__line b{ color: #fff; font-variant-numeric: tabular-nums; }
.calc__total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 22px;
}
.calc__total span{ font-size: .86rem; }
.calc__total b{
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.calc__hint{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(95,180,255,.12);
  border: 1px solid rgba(95,180,255,.22);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--cyan-soft);
}


/* ==========================================================================
   13. TECHNOLOGIA
   ========================================================================== */
.tech{ display: grid; gap: clamp(48px, 5.5vw, 88px); }
.tech__item{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(30px, 4.5vw, 72px);
  align-items: center;
}
.tech__item:nth-child(even) > :first-child{ order: 2; }
@media (max-width: 940px){
  .tech__item{ grid-template-columns: 1fr; }
  .tech__item:nth-child(even) > :first-child{ order: 0; }
}
.tech__name{
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -.04em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tech__gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.tech__gallery img{
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
@media (hover: hover){
  .tech__gallery img:hover{ transform: translateY(-4px) scale(1.03); box-shadow: var(--sh-2); }
}

.feature-list{ display: grid; gap: 2px; margin-top: 8px; }
.feature-list li{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-2);
}
.feature-list li:last-child{ border-bottom: 0; }
.feature-list b{ display: block; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.feature-list p{ font-size: .9rem; color: var(--ink-70); margin: 0; }
.feature-list .tick{
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(59,104,209,.1);
  color: var(--blue-ink);
  margin-top: 2px;
}
.feature-list .tick svg{ width: 13px; height: 13px; }
.section--night .feature-list li{ border-bottom-color: rgba(255,255,255,.1); }
.section--night .feature-list b{ color: #fff; }
.section--night .feature-list p{ color: rgba(255,255,255,.62); }
.section--night .feature-list .tick{ background: rgba(255,255,255,.1); color: var(--cyan); }


/* ==========================================================================
   14. PANEL KLIENTA
   ========================================================================== */
.panel-feature{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 4vw, 66px);
  align-items: center;
}
.panel-feature:nth-child(even) > :first-child{ order: 2; }
@media (max-width: 940px){
  .panel-feature{ grid-template-columns: 1fr; }
  .panel-feature:nth-child(even) > :first-child{ order: 0; }
}
.panel-features{ display: grid; gap: clamp(44px, 5vw, 76px); }

.shot{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--sh-3);
}
.shot::before{
  content: "";
  display: block;
  height: 34px;
  background: linear-gradient(180deg, #F3F6FC, #E9EFFA);
  border-bottom: 1px solid var(--line-2);
}
.shot::after{
  content: "";
  position: absolute;
  top: 13px; left: 16px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #E5A0A0;
  box-shadow: 14px 0 0 #E7CB9B, 28px 0 0 #A6D4A8;
}
.shot img{ width: 100%; display: block; }

.pipeline{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.pipeline li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  font-size: .84rem;
  color: rgba(255,255,255,.8);
}
.pipeline li b{
  color: var(--cyan);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
}


/* ==========================================================================
   15. FAQ
   ========================================================================== */
.faq{ display: grid; gap: 10px; }
.faq__item{
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.faq__item[open]{ border-color: var(--line-blue); box-shadow: var(--sh-2); }
.faq__q{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease-soft);
}
.faq__q::-webkit-details-marker{ display: none; }
.faq__q:hover{ color: var(--blue-ink); }
.faq__q i{
  flex: 0 0 auto;
  position: relative;
  width: 20px; height: 20px;
  margin-left: auto;
}
.faq__q i::before, .faq__q i::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: var(--blue);
  border-radius: 2px;
  transform: translate(-50%,-50%);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) linear;
}
.faq__q i::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq__item[open] .faq__q i::after{ transform: translate(-50%,-50%) rotate(0deg); opacity: 0; }
.faq__a{
  padding: 0 26px 24px;
  color: var(--ink-70);
  font-size: .95rem;
}
.faq__item[open] .faq__a{ animation: faqIn .38s var(--ease) both; }
@keyframes faqIn{
  from{ opacity: 0; transform: translateY(-8px); }
  to  { opacity: 1; transform: none; }
}


/* ==========================================================================
   16. OPINIE, LOGOTYPY, MARQUEE
   ========================================================================== */
.marquee{
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display: flex;
  gap: clamp(36px, 6vw, 84px);
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marquee{ to{ transform: translateX(-50%); } }
.marquee__item{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-40);
  white-space: nowrap;
}
.marquee__item::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line-blue);
}
.section--night .marquee__item{ color: rgba(255,255,255,.42); }
.section--night .marquee__item::before{ background: rgba(255,255,255,.25); }

.quotes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}
@media (max-width: 700px){ .quotes{ grid-template-columns: 1fr; } }
.quote{
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, #FBFCFF 100%);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .quote:hover{ transform: translateY(-5px); box-shadow: var(--sh-2); }
}
.quote blockquote{ margin: 0; }
.quote__mark{
  font-size: 3rem;
  line-height: .7;
  color: var(--line-blue);
  margin-bottom: 14px;
}
.quote p{
  color: var(--ink-70);
  font-size: 1.02rem;
  line-height: 1.62;
  text-wrap: pretty;
}
.quote__by{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
}
.quote__mark{ margin-bottom: 10px; }
.quote__avatar{
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  flex: 0 0 auto;
}
.quote__by b{ display: block; font-size: .9rem; font-weight: 500; }
.quote__by small{ color: var(--ink-40); font-size: .78rem; }

/* poziomy pasek ze statusami klienta */
.tiers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 760px){ .tiers{ grid-template-columns: 1fr; } }
.tier{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.8vw, 34px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.tier__name{
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.tier h3{ margin: 14px 0 10px; color: #fff; }
.tier p{ font-size: .9rem; color: rgba(255,255,255,.62); }
.tier__bar{
  display: block;          /* <span> jest liniowy — bez tego height jest ignorowane */
  height: 4px;
  margin-top: 26px;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.tier__bar i{
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--grad-soft);
  box-shadow: 0 0 18px -2px rgba(95,180,255,.55);
  transition: width 1.4s var(--ease);
}
.tier__bar{ margin-top: auto; }
.tier p{ margin-bottom: 4px; }
.tier.is-visible .tier__bar i{ width: var(--fill, 40%); }


/* ==========================================================================
   17. FORMULARZE
   ========================================================================== */
.form{
  display: grid;
  gap: 18px;
}
.form__row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 620px){ .form__row{ grid-template-columns: 1fr; } }

.field{ display: grid; gap: 8px; }
.field > label{
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-70);
}
.field input, .field textarea, .field select{
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.94);
  font-size: .95rem;
  transition: border-color var(--t-fast) var(--ease-soft),
              box-shadow var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft);
}
.field textarea{ min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-40); }
.field input:hover, .field textarea:hover, .field select:hover{ border-color: var(--line-blue); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline: none;
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(59,104,209,.14);
}
.field.has-error input, .field.has-error textarea{
  border-color: #D45A5A;
  box-shadow: 0 0 0 4px rgba(212,90,90,.12);
}
.field__error{
  font-size: .78rem;
  color: #C24B4B;
  min-height: 1.2em;
}

.check{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--ink-55);
  cursor: pointer;
}
.check input{
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-soft);
}
.check input:checked{
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 8px 16px -10px rgba(12,44,188,.9);
}
.check input:checked::after{
  content: "";
  display: block;
  width: 5px; height: 10px;
  margin: 3px auto 0;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check a{ color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* pole-pułapka na boty — niewidoczne dla ludzi i czytników ekranu */
.hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status{
  padding: 16px 20px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  display: none;
}
.form__status.is-ok{
  display: block;
  background: rgba(59,104,209,.1);
  border: 1px solid var(--line-blue);
  color: var(--blue-ink);
}
.form__status.is-err{
  display: block;
  background: rgba(212,90,90,.1);
  border: 1px solid rgba(212,90,90,.28);
  color: #A83E3E;
}

.contact-card{
  display: grid;
  gap: 26px;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-xl);
  background: var(--night);
  color: rgba(255,255,255,.72);
  box-shadow: var(--sh-3);
  isolation: isolate;
  overflow: hidden;
}
.contact-card::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -20% -50% -20%;
  height: 80%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(59,104,209,.5), transparent 70%);
}
.contact-card h3{ color: #fff; }
.contact-item{ display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
.contact-item__ico{
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--cyan);
}
.contact-item__ico svg{ width: 18px; height: 18px; }
.contact-item small{
  display: block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 4px;
}
.contact-item a, .contact-item span{ color: #fff; font-size: .98rem; }
.contact-item a{ transition: color var(--t-fast) var(--ease-soft); }
.contact-item a:hover{ color: var(--cyan); }


/* ==========================================================================
   18. STOPKA
   ========================================================================== */
.site-footer{
  position: relative;
  background: var(--night);
  color: rgba(255,255,255,.62);
  isolation: isolate;
  overflow: hidden;
}
.site-footer::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: .14;
  mix-blend-mode: overlay;
}

.footer-cta{
  position: relative;
  padding-block: clamp(48px, 5.5vw, 84px);
  border-bottom: 1px solid var(--night-line);
  isolation: isolate;
  overflow-x: clip;
}
.footer-cta::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -10% auto -10%;
  height: 130%;
  background: radial-gradient(45% 50% at 30% 40%, rgba(59,104,209,.45), transparent 70%);
}
.footer-cta__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 900px){ .footer-cta__grid{ grid-template-columns: 1fr; } }
.footer-cta h2{ color: #fff; }
.footer-cta p{ color: rgba(255,255,255,.7); margin-top: 18px; }
.footer-cta__actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.footer-cta__media{ border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); }

.footer-main{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(26px, 3vw, 48px);
  padding-block: clamp(40px, 4.4vw, 64px);
}
@media (max-width: 900px){ .footer-main{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .footer-main{ grid-template-columns: 1fr; } }

.footer-brand img{ width: 138px; filter: brightness(0) invert(1); }
.footer-brand p{ margin-top: 20px; font-size: .9rem; max-width: 300px; }

.footer-col h4{
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col li + li{ margin-top: 12px; }
.footer-col a{
  font-size: .92rem;
  color: rgba(255,255,255,.62);
  transition: color var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease);
  display: inline-block;
}
.footer-col a:hover{ color: #fff; transform: translateX(3px); }

.socials{ display: flex; gap: 10px; margin-top: 24px; }
.socials a{
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  transition: all var(--t-fast) var(--ease-soft);
}
.socials a:hover{ background: var(--blue); border-color: transparent; transform: translateY(-3px); }
.socials svg{ width: 18px; height: 18px; }

.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 28px;
  border-top: 1px solid var(--night-line);
  font-size: .82rem;
  color: rgba(255,255,255,.45);
}
.footer-bottom ul{ display: flex; flex-wrap: wrap; gap: 20px; }
.footer-bottom a:hover{ color: #fff; }


/* ==========================================================================
   19. ANIMACJE I UJAWNIANIE PRZY SCROLLU
   ========================================================================== */
/* ZASADA: treść jest domyślnie widoczna. Ukrywamy ją dopiero wtedy, gdy
   skrypt potwierdzi klasą `reveal-ready` na <html>, że potrafi ją odsłonić.
   Dzięki temu błąd skryptu, wyłączony JavaScript albo uśpiony
   IntersectionObserver nie zostawiają pustej strony. */
.reveal-ready [data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.reveal-ready [data-reveal].is-visible{
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal="left"]{ transform: translateX(-34px); }
.reveal-ready [data-reveal="right"]{ transform: translateX(34px); }
.reveal-ready [data-reveal="zoom"]{ transform: scale(.94); }
.reveal-ready [data-reveal="fade"]{ transform: none; }
.reveal-ready [data-reveal].is-visible{ transform: none; }

/* pasek postępu czytania */
.progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-soft);
  z-index: 1000;
  pointer-events: none;
}

.float-slow{ animation: floatSlow 8s var(--ease-soft) infinite; }
@keyframes floatSlow{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-12px); }
}


/* ==========================================================================
   20. STRONY TEKSTOWE
   ========================================================================== */
.doc{
  max-width: 820px;
  font-size: .98rem;
  line-height: 1.8;
  color: var(--ink-70);
}
.doc h2{
  margin: 48px 0 18px;
  font-size: 1.45rem;
  letter-spacing: -.02em;
}
.doc h2:first-child{ margin-top: 0; }
.doc h3{ margin: 32px 0 12px; font-size: 1.12rem; }
.doc p{ margin-bottom: 1.1em; }
.doc ul, .doc ol{
  margin: 0 0 1.3em;
  padding-left: 22px;
  list-style: disc;
}
.doc ol{ list-style: decimal; }
.doc li{ margin-bottom: .5em; }
.doc a{ color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.doc strong, .doc b{ color: var(--ink); font-weight: 600; }
.doc table{ width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: .9rem; }
.doc th, .doc td{ padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.doc th{ background: var(--mist); font-weight: 600; color: var(--ink); }

.doc-toc{
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: 26px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  font-size: .88rem;
}
.doc-toc h4{ margin-bottom: 16px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.doc-toc li + li{ margin-top: 10px; }
.doc-toc a{ color: var(--ink-70); transition: color var(--t-fast) var(--ease-soft); }
.doc-toc a:hover{ color: var(--blue-ink); }

.doc-layout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(30px, 4vw, 66px);
  align-items: start;
}
@media (max-width: 900px){
  .doc-layout{ grid-template-columns: 1fr; }
  .doc-toc{ position: static; }
}


/* ==========================================================================
   20b. BANER ZGÓD COOKIES
   Karta w prawym dolnym rogu (na telefonie na całą szerokość). Nie zasłania
   strony i nie blokuje przewijania — „Odrzuć” ma tę samą wagę co „Akceptuj”.
   ========================================================================== */
.consent{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  width: min(440px, calc(100vw - 32px));
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.consent.is-open{ opacity: 1; transform: none; }
.consent[hidden]{ display: none; }

.consent__card{
  position: relative;
  padding: 22px 22px 18px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3), var(--sh-inset-top);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.consent__card::before{
  content: "";
  position: absolute;
  inset: 0 24px auto;
  height: 1px;
  background: var(--hairline);
}

.consent__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.consent__ico{
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--mist);
  color: var(--blue);
}
.consent__ico svg{ width: 22px; height: 22px; }
.consent__title{ margin: 0; font-weight: 600; font-size: 1rem; color: var(--ink); }
.consent__text{ margin: 0; font-size: .84rem; line-height: 1.6; color: var(--ink-70); }
.consent__text a{ color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.consent__prefs{
  display: grid;
  gap: 8px;
  margin-top: 16px;
  animation: variantIn .35s var(--ease);
}
.consent__prefs[hidden]{ display: none; }
.consent__opt{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--mist-2);
  border: 1px solid var(--line-2);
  cursor: pointer;
}
.consent__opt b{ display: block; font-size: .88rem; font-weight: 600; color: var(--ink); }
.consent__opt small{ display: block; margin-top: 2px; font-size: .76rem; line-height: 1.5; color: var(--ink-55); }
.consent__opt input{ position: absolute; opacity: 0; pointer-events: none; }
.consent__switch{
  flex: none;
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: var(--r-pill);
  background: rgba(18,23,58,.16);
  transition: background-color .25s var(--ease-soft, ease);
}
.consent__switch::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(18,23,58,.25);
  transition: transform .25s var(--ease);
}
.consent__opt input:checked + .consent__switch{ background: var(--blue); }
.consent__opt input:checked + .consent__switch::after{ transform: translateX(18px); }
.consent__opt input:focus-visible + .consent__switch{ outline: 2px solid var(--blue); outline-offset: 2px; }
.consent__opt.is-locked{ cursor: default; }
.consent__opt.is-locked .consent__switch{ opacity: .45; }

.consent__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.consent__actions .btn{ padding: 11px 18px; font-size: .86rem; }
.consent__actions [hidden]{ display: none; }
.consent__link{
  margin-right: auto;
  padding: 8px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .84rem;
  font-weight: 500;
  color: var(--blue-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.footer-bottom__btn{
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.footer-bottom__btn:hover{ color: #fff; }

@media (max-width: 560px){
  .consent{ right: 12px; left: 12px; bottom: 12px; width: auto; }
  .consent__card{ padding: 18px 16px 14px; }
  .consent__actions .btn{ flex: 1 1 auto; }
  .consent__link{ flex-basis: 100%; margin-right: 0; text-align: left; }
}


/* ==========================================================================
   21. DOSTĘPNOŚĆ, DRUK, ZMNIEJSZONY RUCH
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal]{ opacity: 1 !important; transform: none !important; }
  .reveal-ready [data-reveal]{ opacity: 1 !important; transform: none !important; }
  .hero__video{ animation: none; }
}

@media print{
  .site-header, .drawer, .progress, .hero__media, .hero__scroll,
  .footer-cta, .socials, .btn, .consent{ display: none !important; }
  body{ background: #fff; color: #000; }
  .hero{ min-height: auto; padding: 40px 0; background: #fff; }
  .hero__title, .hero__lead{ color: #000; text-shadow: none; }
  .section{ padding-block: 24px; }
}