/* ═══════════════════════════════════════════════════════════════
   ŚWIAT WANIEN SPA — autorski motyw v3
   System klas wzorowany na architekturze swiat-podlog (Esumo):
   utility-first typografia i tła + sekcje-panele + prawy bleed.
   Fonty: Archivo Expanded (display) + Montserrat (tekst)
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Font: PP Monument Extended (jak swiatpodlog.com.pl) ----------
   Zakres wag 100-900 wskazuje na jeden plik Regular — dzięki temu przeglądarka
   nie syntetyzuje sztucznego pogrubienia (font sam w sobie jest "extended"). */
@font-face{
  font-family:"PP Monument Extended";
  src:url("../fonts/PPMonumentExtended-Regular.otf") format("opentype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* Montserrat — self-hosted (fonty zmienne 400-800, latin + latin-ext dla PL znaków) */
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-italic-latin.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-italic-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 0. Tokeny ---------- */
:root{
  --c-dark:      #0f2033;   /* głęboki granat — panele ciemne */
  --c-darker:    #0a1626;
  --c-green:     #1c5d8f;   /* morski błękit — akcent akcji */
  --c-green-ink: #12405f;
  --c-green-soft:#dbeaf6;
  --c-aqua:      #4cc6e9;   /* świetlisty cyjan — woda */
  --c-gold:      #4cc6e9;   /* jasny błękit — akcent (dawniej złoto) */
  --c-gold-ink:  #177ca1;
  --c-beige:     #e4e9f0;   /* chłodna jasna ramka */
  --c-light:     #f2f4f7;   /* jasne tło sekcji */
  --c-sand:      #c2ccd8;   /* linie, ramki */
  --c-grey:      #75808d;   /* tekst drugorzędny */
  --c-ink:       #16222e;   /* tekst główny */
  --c-white:     #fff;
  --c-danger:    #c0453f;

  --radius:   20px;
  --radius-s: 12px;
  --pill:     96px;
  --shadow-s: 0 2px 12px rgba(15,32,51,.07);
  --shadow-m: 0 18px 44px -16px rgba(15,32,51,.22);
  --shadow-l: 0 36px 80px -24px rgba(15,32,51,.35);
  --ease:     cubic-bezier(.22,.75,.25,1);

  --font-display: "PP Monument Extended", "Archivo", "Arial Black", sans-serif;
  --font-body:    "Montserrat", "Segoe UI", sans-serif;
}

/* ---------- 1. Reset i baza ---------- */
*{ box-sizing:border-box; }
::selection{ color:#fff; background:var(--c-green); }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  font-size:15px; line-height:180%;
  margin:0; padding:0;
  color:var(--c-ink); background:var(--c-white);
  overflow-x:hidden;
}
/* overflow-x:clip na html i body — animacje wejścia (translateX) nie mogą
   tworzyć poziomego przewijania na telefonach */
html, body{ overflow-x:hidden; overflow-x:clip; }
/* touch-action:manipulation usuwa zoom po podwójnym tapnięciu i opóźnienie 300ms
   na elementach interaktywnych; tap-highlight bez szarego błysku */
a, button, input, select, textarea, label{ touch-action:manipulation; }
html{ -webkit-tap-highlight-color:transparent; }
/* kotwice nie chowają się pod sticky nagłówkiem */
section[id], footer[id], div[id]{ scroll-margin-top:88px; }
a{ color:inherit; text-decoration:none; }
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  [data-aq-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ---------- 2. Typografia (utility) ---------- */
.h1,.h2,.h3,.h4,.h5,.header-small{
  font-family:var(--font-display);
  font-stretch:125%;                 /* oś szerokości — charakter "extended" */
  font-weight:560; letter-spacing:-.01em;
}
.h1{ font-size:clamp(30px,4.6vw,54px); line-height:118%; }
.h2{ font-size:clamp(26px,3.4vw,40px); line-height:124%; }
.h3{ font-size:clamp(21px,2.4vw,29px); line-height:126%; }
.h4{ font-size:clamp(18px,2vw,23px);  line-height:130%; }
.h5{ font-size:18px; line-height:130%; }
.header-small{ font-size:15px; line-height:140%; }
.normal{ font-size:15px; line-height:180%; }
.small{ font-size:14px; line-height:160%; }
.xsmall{ font-size:13px; line-height:150%; }
.xxsmall{ font-size:12px; line-height:150%; }
.text-display{ font-family:var(--font-display); font-stretch:125%; font-weight:560; }
.text-uppercase{ text-transform:uppercase; letter-spacing:.14em; }
.text-center{ text-align:center; }
.text-white{ color:#fff; }
.text-ink{ color:var(--c-ink); }
.text-grey{ color:var(--c-grey); }
.text-green{ color:var(--c-green); }
.text-gold{ color:var(--c-gold); }
.text-beige{ color:var(--c-beige); }
.text-sand{ color:var(--c-sand); }

/* Etykieta sekcji — mały uppercase z kreską */
.label{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-stretch:125%;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-green);
}
.label::before{ content:""; width:26px; height:1px; background:var(--c-gold); }
.bg-dark .label, .why .label, .showreel .label, .contact-form .label{ color:var(--c-aqua); }

/* ---------- 3. Tła ---------- */
.bg-white{ background-color:#fff; }
.bg-light{ background-color:var(--c-light); }
.bg-beige{ background-color:var(--c-beige); }
.bg-dark{ background-color:var(--c-dark); }
.bg-darker{ background-color:var(--c-darker); }
.bg-green{ background-color:var(--c-green); }

/* ---------- 4. Kontenery i siatka ---------- */
.container{ width:95%; max-width:1560px; margin:0 auto; }
.container-narrow{ width:95%; max-width:1180px; margin:0 auto; }
/* sygnaturowy prawy bleed — treść dobita do prawej krawędzi ekranu */
.container-bleed{ width:min(97.5%, calc(50% + 780px)); margin-left:auto; }
.row{ display:flex; flex-wrap:wrap; justify-content:space-between; }
.align-center{ align-items:center; }
.section{ padding:clamp(64px,8vw,120px) 0; }
.section-gap{ margin:clamp(64px,8vw,112px) 0; }

/* ---------- 5. Przyciski ---------- */
.primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:var(--pill); cursor:pointer;
  font-family:var(--font-display); font-stretch:125%;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  transition:.45s var(--ease); white-space:nowrap; line-height:1.2;
}
.primary svg{ width:15px; height:15px; flex:none; transition:transform .35s var(--ease); }
.primary:hover svg{ transform:translateX(4px); }
.primary.bg-green{ color:#fff; }
.primary.bg-green:hover{ background-color:var(--c-dark); }
.primary.bg-gold{ background-color:var(--c-gold); color:var(--c-darker); }
.primary.bg-gold:hover{ background-color:var(--c-dark); color:#fff; }
.primary.bg-white{ color:var(--c-ink); }
.primary.bg-white:hover{ background-color:var(--c-beige); }
.primary.outline-white{ border:2px solid #fff; color:#fff; }
.primary.outline-white:hover{ background-color:#fff; color:var(--c-dark); }
.primary.outline-dark{ border:1.5px solid var(--c-sand); color:var(--c-ink); }
.primary.outline-dark:hover{ border-color:var(--c-ink); }
.primary.wide{ width:100%; }

/* Read-more — podkreślony span + strzałka (jak u wzorca) */
.read-more{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; transition:.4s;
}
.read-more span{ padding:2px 0; border-bottom:1px solid currentColor; }
.read-more svg{ width:11px; height:11px; transition:transform .35s var(--ease); }
.read-more:hover{ color:var(--c-green); }
.read-more:hover svg{ transform:translate(3px,-3px); }

/* Okrągłe strzałki nawigacji karuzel */
.carousel-nav{ display:flex; gap:10px; }
.carousel-nav button{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--c-sand); background:#fff; color:var(--c-ink);
  transition:.4s var(--ease);
}
.carousel-nav button svg{ width:18px; height:18px; }
.carousel-nav button:hover{ background:var(--c-green); border-color:var(--c-green); color:#fff; }
.carousel-nav.on-dark button{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.carousel-nav.on-dark button:hover{ background:#fff; color:var(--c-dark); border-color:#fff; }

/* ---------- 6. Header ---------- */
header.bar{ padding:9px 0; font-size:12px; }
header.bar .row{ align-items:center; gap:16px; }
header.bar ul{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
header.bar ul li a, header.bar ul li span{ display:flex; align-items:center; gap:7px; color:#d7e3de; }
header.bar ul li svg{ width:13px; height:13px; color:var(--c-gold); }
header.bar .phone{ font-weight:700; color:#fff; letter-spacing:.03em; transition:.3s; }
header.bar .phone:hover{ color:var(--c-aqua); }
@media (max-width:900px){ header.bar ul li:nth-child(n+2){ display:none; } }

header.navigation{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
header.navigation.aq-nav--solid{ border-bottom-color:var(--c-beige); box-shadow:var(--shadow-s); }
header.navigation .row{ align-items:center; padding:14px 0; gap:clamp(16px,2vw,28px); }
.nav-phone{
  display:flex; align-items:center; gap:9px; margin-left:auto;
  font-family:var(--font-display); font-stretch:125%;
  font-size:13.5px; font-weight:640; white-space:nowrap; transition:.3s;
}
.nav-phone svg{ width:16px; height:16px; color:var(--c-green); }
.nav-phone small{
  display:block; font-family:var(--font-body); font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c-grey); line-height:1.3;
}
.nav-phone:hover{ color:var(--c-green); }
@media (max-width:1300px){ .nav-phone{ display:none; } }
.brand{ display:flex; align-items:center; gap:12px; }
.brand svg{ width:44px; height:44px; }
.brand .brand-name{
  font-family:var(--font-display); font-stretch:125%; font-weight:700;
  font-size:15px; line-height:1.15; letter-spacing:.02em; color:var(--c-ink);
}
.brand .brand-name small{
  display:block; font-size:9px; font-weight:700; letter-spacing:.34em;
  text-transform:uppercase; color:var(--c-gold);
}
header.navigation nav ul{ display:flex; gap:4px; }
header.navigation nav ul > li{ position:relative; }
header.navigation nav ul > li > a{
  position:relative; display:flex; align-items:center; gap:6px;
  padding:10px 13px; border-radius:var(--pill);
  font-size:13.5px; font-weight:600; transition:background .3s, color .3s;
}
header.navigation nav ul > li > a:hover{ background:var(--c-light); }
header.navigation nav ul > li > a.active{ background:var(--c-green-soft); color:var(--c-green-ink); }
header.navigation nav ul > li > a .caret{ width:11px; height:11px; transition:transform .3s var(--ease); }
header.navigation nav ul > li:hover > a .caret{ transform:rotate(180deg); }
.nav-progress{ position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--c-gold); }
.nav-divider{ width:1px; height:26px; background:var(--c-beige); flex:none; }
@media (max-width:1300px){ .nav-divider{ display:none; } }

/* Mega-menu modeli */
.submenu{
  position:absolute; top:calc(100% + 14px); left:-24px; z-index:60;
  width:640px; padding:18px;
  background:#fff; border:1px solid var(--c-beige); border-radius:var(--radius);
  box-shadow:0 30px 70px -18px rgba(15,32,51,.28), 0 4px 16px rgba(15,32,51,.08);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.98);
  transform-origin:top left;
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
header.navigation nav ul > li:hover > .submenu,
header.navigation nav ul > li:focus-within > .submenu{ opacity:1; visibility:visible; transform:none; }
/* mostek + dziubek wskazujący pozycję w menu */
.submenu::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.submenu::after{
  content:""; position:absolute; top:-7px; left:52px;
  width:14px; height:14px; background:#fff; transform:rotate(45deg);
  border-left:1px solid var(--c-beige); border-top:1px solid var(--c-beige);
  border-radius:3px 0 0 0;
}
.sm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sm-card{
  display:flex; flex-direction:column; gap:3px;
  padding:10px; border-radius:14px;
  transition:background .3s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sm-card:hover{ background:var(--c-light); transform:translateY(-3px); box-shadow:var(--shadow-s); }
.sm-img{
  position:relative; border-radius:10px; overflow:hidden; aspect-ratio:16/10; margin-bottom:8px;
}
.sm-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.sm-card:hover .sm-img img{ transform:scale(1.07); }
.sm-badge{
  position:absolute; top:8px; left:8px;
  padding:3px 10px; border-radius:var(--pill);
  font-family:var(--font-display); font-stretch:125%;
  font-size:8.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.sm-badge.mint{ background:var(--c-green-soft); color:var(--c-green-ink); }
.sm-badge.gold{ background:#ddf3fb; color:var(--c-gold-ink); }
.sm-tier{
  font-family:var(--font-display); font-stretch:125%;
  font-size:8.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-aqua);
}
.sm-card b{ font-family:var(--font-display); font-stretch:125%; font-size:14.5px; font-weight:640; color:var(--c-ink); line-height:1.3; }
.sm-card small{ font-size:10.5px; color:var(--c-grey); line-height:1.5; }
.sm-card .sm-price{
  margin-top:6px; font-family:var(--font-display); font-stretch:125%;
  font-size:13px; font-weight:640; color:var(--c-green-ink);
}
.sm-card .sm-price s{
  margin-left:6px; font-family:var(--font-body); font-size:10.5px; font-weight:500;
  color:var(--c-grey); text-decoration-color:var(--c-danger);
}
.sm-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding:14px 6px 0; border-top:1px solid var(--c-light);
}
@media (max-width:1120px){
  .submenu{ display:none; }
  header.navigation nav ul > li > a .caret{ display:none; }
  header.navigation nav ul > li > a{ padding:6px 0; border-radius:0; }
  header.navigation nav ul > li > a:hover, header.navigation nav ul > li > a.active{ background:none; color:var(--c-aqua); }
}

.burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.burger span{ width:25px; height:2px; background:var(--c-ink); border-radius:2px; transition:.35s var(--ease); }
.burger.aq-burger--x span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.aq-burger--x span:nth-child(2){ opacity:0; }
.burger.aq-burger--x span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* Elementy szuflady — widoczne tylko na mobile */
.menu-backdrop, .drawer-head, .drawer-cta{ display:none; }

@media (max-width:1120px){
  /* backdrop-filter na sticky headerze więzi position:fixed dzieci —
     na mobile wyłączamy blur (tło i tak jest ~nieprzezroczyste) */
  header.navigation{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:#fff;
  }
  /* Przyciemnione tło za szufladą */
  .menu-backdrop{
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(6,13,22,.55);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .4s;
  }
  body.menu-open .menu-backdrop{ opacity:1; pointer-events:auto; }
  /* Szuflada z prawej */
  header.navigation nav{
    position:fixed; top:0; right:0; bottom:0; left:auto; z-index:60;
    width:min(340px, 86vw);
    background:var(--c-darker); color:#fff;
    display:flex; flex-direction:column;
    padding:18px 22px calc(22px + env(safe-area-inset-bottom));
    transform:translateX(105%);
    transition:transform .5s var(--ease);
    box-shadow:-40px 0 90px rgba(0,0,0,.5);
    overflow-y:auto;
  }
  header.navigation nav.aq-menu--open{ transform:none; }
  /* Nagłówek szuflady */
  .drawer-head{
    display:flex; align-items:center; gap:12px;
    padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1);
  }
  .drawer-head > svg{ width:34px; height:34px; flex:none; }
  .drawer-title{
    font-family:var(--font-display); font-stretch:125%;
    font-size:12.5px; font-weight:700; letter-spacing:.06em; color:#fff;
  }
  .drawer-close{
    margin-left:auto; width:40px; height:40px; flex:none;
    display:grid; place-items:center; border-radius:50%;
    background:rgba(255,255,255,.08); color:#fff; transition:.3s;
  }
  .drawer-close svg{ width:17px; height:17px; }
  .drawer-close:active{ background:var(--c-aqua); color:var(--c-darker); }
  /* Linki — lista z kaskadowym wejściem */
  header.navigation nav ul{ flex-direction:column; gap:0; margin-top:8px; }
  header.navigation nav ul > li{ border-bottom:1px solid rgba(255,255,255,.07); }
  header.navigation nav ul > li > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 2px; border-radius:0;
    color:#fff; font-family:var(--font-display); font-stretch:125%;
    font-size:15px; font-weight:400; letter-spacing:.02em;
  }
  header.navigation nav ul > li > a::after{
    content:"→"; font-family:var(--font-body); font-size:15px;
    color:rgba(255,255,255,.35); transition:.3s var(--ease);
  }
  header.navigation nav ul > li > a:active::after{ color:var(--c-aqua); transform:translateX(3px); }
  header.navigation nav ul > li > a:hover,
  header.navigation nav ul > li > a.active{ background:none; color:var(--c-aqua); }
  /* Kaskada przy otwarciu */
  header.navigation nav ul > li{
    opacity:0; transform:translateX(28px);
    transition:opacity .45s var(--ease), transform .45s var(--ease);
  }
  header.navigation nav.aq-menu--open ul > li{ opacity:1; transform:none; }
  header.navigation nav.aq-menu--open ul > li:nth-child(1){ transition-delay:.08s }
  header.navigation nav.aq-menu--open ul > li:nth-child(2){ transition-delay:.13s }
  header.navigation nav.aq-menu--open ul > li:nth-child(3){ transition-delay:.18s }
  header.navigation nav.aq-menu--open ul > li:nth-child(4){ transition-delay:.23s }
  header.navigation nav.aq-menu--open ul > li:nth-child(5){ transition-delay:.28s }
  header.navigation nav.aq-menu--open ul > li:nth-child(6){ transition-delay:.33s }
  header.navigation nav.aq-menu--open ul > li:nth-child(7){ transition-delay:.38s }
  /* CTA na dole szuflady */
  .drawer-cta{
    display:flex; flex-direction:column; gap:14px;
    margin-top:auto; padding-top:20px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .drawer-phone{
    display:flex; align-items:center; gap:12px;
    font-family:var(--font-display); font-stretch:125%;
    font-size:14.5px; color:#fff;
  }
  .drawer-phone svg{ width:19px; height:19px; flex:none; color:var(--c-aqua); }
  .drawer-phone small{
    display:block; font-family:var(--font-body); font-size:10.5px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:#7d92a4; margin-top:2px;
  }
  header.navigation .nav-cta{ display:none; }
  .burger{ display:flex; margin-left:auto; }
}

/* ---------- 7. HERO (minimalne, czyste) ---------- */
.hero{
  width:100%; margin:0; border-radius:0; overflow:hidden; position:relative;
  min-height:clamp(440px, 64vh, 680px);
  display:flex; align-items:center;
  padding:clamp(56px,7vw,110px) 0;
  color:#fff;
}
.hero .container{ width:95%; max-width:1560px; margin:0 auto; }
.hero-simple{
  max-width:720px; display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  position:relative; z-index:2;
}
.hero-simple h1{ text-shadow:0 4px 40px rgba(0,0,0,.55); }
.hero-simple h1 em{ font-style:normal; color:var(--c-gold); }
.hero-simple .sub{ color:#dbe6e2; font-size:15.5px; max-width:54ch; line-height:1.8; }
.hero-simple .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
@media (max-width:760px){
  .hero{ padding:56px 0 60px; }
  .hero-simple{ gap:18px; }
  .hero-simple .cta-row .primary{ width:100%; }
}

/* ---------- 7b. Pasek korzyści (biały, czysty) ---------- */
.benefit-strip{ background:#fff; border-bottom:1px solid var(--c-beige); padding:clamp(20px,3vw,32px) 0; }
.benefit-strip ul{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:14px 28px;
}
.benefit-strip li{ display:flex; align-items:center; gap:13px; }
.benefit-strip .b-ico{
  width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:12px;
  background:var(--c-green-soft); color:var(--c-green-ink);
}
.benefit-strip .b-ico svg{ width:20px; height:20px; }
.benefit-strip b{
  display:block; font-family:var(--font-display); font-stretch:125%;
  font-size:12.5px; font-weight:640; color:var(--c-ink); line-height:1.4;
}
.benefit-strip li > span:last-child{ font-size:12px; color:var(--c-grey); line-height:1.5; }
@media (max-width:560px){
  .benefit-strip ul{ grid-template-columns:1fr 1fr; gap:14px 10px; }
  .benefit-strip li{ flex-direction:column; align-items:flex-start; gap:8px; }
}
.hero > img.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform:scale(1.05); animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1) } }
/* Podwójny scrim: mocny lewy panel pod tekst + pion na górę i dół */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(6,15,27,.96) 0%, rgba(6,15,27,.86) 30%, rgba(6,15,27,.42) 58%, rgba(6,15,27,.55) 100%),
    linear-gradient(to bottom, rgba(6,15,27,.85) 0%, transparent 26%, transparent 62%, rgba(6,15,27,.88) 100%);
}
/* Poświata akwamarynowa przy wodzie */
.hero .glow{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(52% 44% at 66% 66%, rgba(76,198,233,.16), transparent 70%);
}
/* Gigantyczny napis-watermark w tle */
.hero .watermark{
  position:absolute; right:-1.5vw; bottom:-3vw; z-index:1;
  font-family:var(--font-display); font-stretch:125%;
  font-size:clamp(120px,17vw,300px); line-height:1; letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.07);
  user-select:none; pointer-events:none;
}
.hero .ticks{
  position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:0 20px; width:min(100%,1400px);
}
.hero .ticks li{
  display:flex; align-items:center; gap:10px;
  padding:9px 18px; border-radius:var(--pill);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.hero .ticks svg{ width:15px; height:15px; flex:none; color:var(--c-aqua); }
.hero .ticks span{
  font-family:var(--font-display); font-stretch:125%;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.4;
  white-space:nowrap;
}
.hero .ticks span br{ display:none; }
@media (max-width:900px){ .hero .ticks li:nth-child(n+3){ display:none; } }
.hero .row{
  position:relative; z-index:2; align-items:center; justify-content:space-between;
  gap:clamp(32px,4vw,64px); flex-wrap:nowrap;
}
@media (max-width:1000px){ .hero .row{ flex-wrap:wrap; } }
.hero .hero-left{ flex:1; min-width:min(520px,100%); display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.hero .toplabel{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-stretch:125%;
  font-size:11.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--c-beige);
}
.hero .toplabel::before{ content:""; width:34px; height:2px; background:var(--c-gold); }
.hero .toplabel .pulse{
  width:8px; height:8px; border-radius:50%; background:var(--c-aqua);
  box-shadow:0 0 14px var(--c-aqua); animation:pulse 2.2s infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
.hero h1{ max-width:19ch; text-shadow:0 4px 40px rgba(0,0,0,.55); }
.hero h1 em{
  font-style:normal; color:var(--c-gold); position:relative; white-space:nowrap;
}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background:linear-gradient(90deg, var(--c-gold), transparent); border-radius:2px;
}
.hero .sub{ max-width:56ch; color:#dbe6e2; font-size:15.5px; }
.hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }

/* Linia pod korzyściami */
.hero-under{
  display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:500; color:#b8c6d2; line-height:1.6;
  max-width:600px;
}
.hero-under .pulse{
  flex:none; width:8px; height:8px; border-radius:50%; background:var(--c-aqua);
  box-shadow:0 0 14px var(--c-aqua); animation:pulse 2.2s infinite;
}

/* ---------- Multi-step w hero-form ---------- */
.steps-progress{ display:flex; align-items:center; gap:12px; margin:10px 0 16px; }
.steps-progress .bar{ flex:1; height:4px; border-radius:4px; background:var(--c-light); overflow:hidden; }
.steps-progress .bar i{
  display:block; height:100%; width:33.33%;
  background:linear-gradient(90deg, var(--c-green), var(--c-aqua));
  border-radius:4px; transition:width .5s var(--ease);
}
.steps-progress small{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-grey); white-space:nowrap; }
.steps-progress small b{ color:var(--c-green-ink); }
.steps-track{ position:relative; overflow:hidden; }
.steps-track .step{ display:none; border:0; padding:0; margin:0; min-width:0; }
.steps-track .step.is-active{ display:block; animation:stepIn .45s var(--ease) both; }
.steps-track .step.is-active.is-back{ animation-name:stepInBack; }
@keyframes stepIn{ from{ opacity:0; transform:translateX(46px) } to{ opacity:1; transform:none } }
@keyframes stepInBack{ from{ opacity:0; transform:translateX(-46px) } to{ opacity:1; transform:none } }
.step-q{
  font-family:var(--font-display); font-stretch:125%;
  font-size:14.5px; font-weight:640; margin:0 0 14px; color:var(--c-ink);
}
/* Kafelki wyboru wanny */
.opt-grid{ display:grid; gap:10px; }
.opt{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:12px 14px; border-radius:14px;
  border:1.5px solid var(--c-beige); background:#fdfefe;
  transition:.35s var(--ease); cursor:pointer;
}
.opt:hover{ border-color:var(--c-green); box-shadow:var(--shadow-s); transform:translateX(4px); }
.opt.is-sel{ border-color:var(--c-green); background:var(--c-green-soft); }
.opt-ico{
  width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:12px;
  background:var(--c-green-soft); color:var(--c-green-ink); transition:.35s var(--ease);
}
.opt:hover .opt-ico, .opt.is-sel .opt-ico{ background:var(--c-green); color:#fff; }
.opt-ico svg{ width:21px; height:21px; }
.opt-ico.opt-num{
  font-family:var(--font-display); font-stretch:125%;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.opt b{ display:block; font-size:13.5px; font-weight:700; color:var(--c-ink); line-height:1.4; }
.opt small{ display:block; font-size:11.5px; color:var(--c-grey); line-height:1.5; }
.opt-go{ width:14px; height:14px; margin-left:auto; flex:none; color:var(--c-sand); transition:.3s var(--ease); }
.opt:hover .opt-go{ color:var(--c-green); transform:translateX(3px); }
/* Nawigacja kroków */
.step-nav{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.step-nav .primary{ flex:1; }
.step-back{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:12px 16px; border-radius:var(--pill);
  font-size:12px; font-weight:700; color:var(--c-grey);
  transition:.3s;
}
.step-back svg{ width:13px; height:13px; }
.step-back:hover{ color:var(--c-ink); background:var(--c-light); }

/* Korzyści w hero — grid 2×2 szklanych kart */
.hero-benefits{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-top:8px; max-width:600px;
}
@media (max-width:560px){ .hero-benefits{ grid-template-columns:1fr; } }
.hero-benefits li{
  display:flex; align-items:flex-start; gap:14px;
  font-size:12px; font-weight:400; color:#93a9a3; line-height:1.55; letter-spacing:.01em;
  padding:16px; border-radius:16px;
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:.45s var(--ease);
}
.hero-benefits li:hover{
  background:linear-gradient(145deg, rgba(76,198,233,.14), rgba(255,255,255,.04));
  border-color:rgba(76,198,233,.4);
  transform:translateY(-4px);
}
.hero-benefits .b-ico{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:12px; background:rgba(76,198,233,.12);
  border:1px solid rgba(76,198,233,.25); color:var(--c-aqua);
  transition:.45s var(--ease);
}
.hero-benefits li:hover .b-ico{ background:var(--c-aqua); color:var(--c-darker); box-shadow:0 0 24px rgba(76,198,233,.5); }
.hero-benefits .b-ico svg{ width:20px; height:20px; }
.hero-benefits li b{
  display:block; color:#fff; font-weight:400; font-size:13px;
  font-family:var(--font-display); font-stretch:125%; letter-spacing:.03em;
  margin-bottom:3px;
}

/* Formularz w hero */
.hero .hero-form{
  width:min(440px,100%); flex:none; position:relative;
  background:#fff; border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 40px 90px -20px rgba(0,0,0,.6);
  padding:clamp(24px,2.6vw,36px); color:var(--c-ink);
  overflow:hidden;
}
.hero .hero-form::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--c-gold), #8fd8f4 45%, var(--c-green) 100%);
}
.hero .hero-form .badge-24{
  position:absolute; top:16px; right:-42px; transform:rotate(38deg);
  background:var(--c-green); color:#fff; padding:6px 48px;
  font-family:var(--font-display); font-stretch:125%;
  font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.hero .hero-form .form-head{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.hero .hero-form .form-head .head-sub{
  display:block; font-style:normal; margin-top:4px;
  font-family:var(--font-display); font-stretch:125%;
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-gold-ink);
}
.hero .hero-form .form-head .badge{
  width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--c-green-soft); color:var(--c-green);
}
.hero .hero-form .form-head .badge svg{ width:22px; height:22px; }
.hero .hero-form .form-head h3{ font-size:16px; line-height:1.35; }
.hero .hero-form > p{ color:var(--c-grey); font-size:12.5px; margin:8px 0 18px; }
.hero .hero-form .form-row{ gap:10px; margin-bottom:10px; grid-template-columns:1fr 1fr; }
@media (max-width:420px){ .hero .hero-form .form-row{ grid-template-columns:1fr; } }
.hero .hero-form .field input,
.hero .hero-form .field select{ padding:11px 14px; font-size:13.5px; height:45px; }
.hero .hero-form .field label{ margin-bottom:4px; font-size:10px; }
.hero .hero-form .consent{ margin:10px 0 12px; font-size:10.5px; }
.hero .hero-form .form-note{ margin-top:10px; font-size:10.5px; display:flex; align-items:center; justify-content:center; gap:6px; }
.hero .hero-form .form-note svg{ width:12px; height:12px; color:var(--c-green); }
.hero .hero-form .form-social{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--c-light);
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:11px; font-weight:600; color:var(--c-grey);
}
.hero .hero-form .form-social .stars{ color:var(--c-gold); letter-spacing:2px; font-size:12px; }
.hero .hero-form .form-social b{ color:var(--c-ink); }
.hero .stats{
  position:relative; z-index:2; margin:clamp(28px,3.5vw,48px) auto 0;
  width:min(95%,1180px);
  display:flex; justify-content:space-around; gap:clamp(16px,3vw,40px); flex-wrap:wrap;
  padding:20px clamp(16px,3vw,40px);
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.hero .stats div{ text-align:center; position:relative; }
.hero .stats div + div::before{
  content:""; position:absolute; left:calc(-1 * clamp(8px,1.5vw,20px)); top:50%;
  transform:translateY(-50%); width:1px; height:34px; background:rgba(255,255,255,.14);
}
@media (max-width:760px){ .hero .stats div + div::before{ display:none; } }
.hero .stats b{
  display:block; font-family:var(--font-display); font-stretch:125%;
  font-size:clamp(24px,2.6vw,36px); font-weight:640; line-height:1.1; color:#fff;
}
.hero .stats b i{ font-style:normal; color:var(--c-aqua); }
.hero .stats span{
  font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#a7bcb6;
}

/* ---------- 8. Pasek showroom (addresses) ---------- */
.addresses{ margin:22px 0; }
.addresses .container{
  border-radius:var(--radius); border:1px solid var(--c-sand);
  padding:22px clamp(20px,3vw,34px);
}
.addresses .row{ align-items:center; gap:clamp(18px,3vw,44px); flex-wrap:wrap; }
.addresses .bar-label{
  font-family:var(--font-display); font-stretch:125%;
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.7; max-width:170px;
}
.addresses .single-address{ flex:1; min-width:200px; padding-left:clamp(18px,3vw,44px); border-left:1px solid var(--c-beige); }
.addresses .single-address p{ margin:0 0 8px; font-size:13.5px; color:var(--c-grey); line-height:1.55; }
.addresses .single-address strong{ color:var(--c-ink); font-size:14px; }
@media (max-width:860px){
  .addresses .bar-label{ max-width:none; }
  .addresses .single-address{ border-left:0; padding-left:0; flex-basis:100%; }
}

/* ---------- 9. Sekcja modeli (prawy bleed + karuzela) ---------- */
.models .container-bleed{ display:flex; gap:clamp(28px,4vw,64px); align-items:flex-start; }
.models .desc-wrapper{
  width:min(340px,30%); flex:none; position:sticky; top:110px;
  display:flex; flex-direction:column; gap:22px; align-items:flex-start;
}
.models .desc-wrapper p{ color:var(--c-grey); }
.models .carousel{
  flex:1; min-width:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:min(430px,88vw);
  gap:22px; overflow-x:auto; padding:6px 6px 26px;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.models .carousel::-webkit-scrollbar{ display:none; }
@media (max-width:1080px){
  .models .container-bleed{ flex-direction:column; }
  .models .desc-wrapper{ position:static; width:100%; }
  .models .carousel{ width:100%; }
}

/* Karta modelu */
.single-model{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; scroll-snap-align:start;
  border:1px solid var(--c-beige);
  box-shadow:var(--shadow-s);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .5s, filter .5s;
}
.single-model:hover{ box-shadow:var(--shadow-m); transform:translateY(-6px); }
.single-model.featured{ border-color:var(--c-gold); box-shadow:0 0 0 1px var(--c-gold), var(--shadow-m); }
.single-model.aq-model--dim{ opacity:.35; filter:grayscale(.7); }
.single-model.aq-model--hit{ box-shadow:0 0 0 2px var(--c-green), var(--shadow-m); }
.single-model .media{ display:block; position:relative; aspect-ratio:4/2.9; overflow:hidden; cursor:pointer; }
.single-model .media .tier b{ display:block; }
.single-model .media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.single-model:hover .media img{ transform:scale(1.06); }
.single-model .media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,22,38,.62), transparent 48%);
}
.single-model .media .promo{
  position:absolute; top:16px; left:16px; z-index:2;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--c-green); color:#fff;
  font-family:var(--font-display); font-stretch:125%;
  font-size:11.5px; font-weight:700;
  box-shadow:0 8px 20px -6px rgba(10,22,38,.55);
}
.single-model .media .chips{ position:absolute; top:16px; right:16px; z-index:2; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px; border-radius:var(--pill);
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-family:var(--font-display); font-stretch:125%;
}
.chip.mint{ background:var(--c-green-soft); color:var(--c-green-ink); }
.chip.gold{ background:#ddf3fb; color:var(--c-gold-ink); }
.chip.dark{ background:rgba(10,22,38,.85); color:#cfe8e2; }
button.chip{ transition:.35s var(--ease); }
button.chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-s); }
.chip.aq-active{ outline:2px solid var(--c-green); outline-offset:1px; }
.single-model .media .tier{ position:absolute; left:20px; bottom:16px; z-index:2; color:#fff; }
.single-model .media .tier small{
  display:block; font-size:10px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--c-gold);
  font-family:var(--font-display); font-stretch:125%;
}
.single-model .media .tier b{ font-family:var(--font-display); font-stretch:125%; font-size:27px; font-weight:640; letter-spacing:.01em; }
.single-model .body{ display:flex; flex-direction:column; flex:1; padding:26px 26px 28px; }
.single-model .specs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  padding-bottom:18px; border-bottom:1px dashed var(--c-sand);
}
.single-model .specs li{ text-align:center; }
.single-model .specs b{
  display:block; font-family:var(--font-display); font-stretch:125%;
  font-size:16.5px; font-weight:640; color:var(--c-ink); line-height:1.3;
}
.single-model .specs span{ font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-grey); }
.single-model .desc{ padding:16px 0; color:var(--c-grey); font-size:13.5px; line-height:1.75; flex:1; }
.single-model .perks{ display:grid; gap:9px; padding-bottom:18px; }
.single-model .perks li{ display:flex; gap:10px; align-items:flex-start; font-size:13px; font-weight:600; line-height:1.55; }
.single-model .perks svg{ width:15px; height:15px; flex:none; color:var(--c-green); margin-top:3px; }
.single-model .gift{
  display:flex; gap:12px; align-items:center;
  background:#eef9fd; border:1px dashed var(--c-gold); border-radius:var(--radius-s);
  padding:12px 15px; margin-bottom:20px; font-size:12.5px; line-height:1.55;
}
.single-model .gift svg{ width:21px; height:21px; flex:none; color:var(--c-gold); }
.single-model .gift b{ color:var(--c-gold-ink); }
.single-model .pricing{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.single-model .price{
  font-family:var(--font-display); font-stretch:125%;
  font-size:clamp(27px,2.4vw,33px); font-weight:640; line-height:1; color:var(--c-ink);
}
.single-model .price small{ font-size:14px; color:var(--c-grey); font-weight:600; }
.single-model .was{ color:var(--c-grey); font-size:14px; text-decoration:line-through; text-decoration-color:var(--c-danger); text-decoration-thickness:2px; }
.single-model .save{
  display:inline-block; margin-top:4px; padding:4px 12px; border-radius:var(--pill);
  background:var(--c-green-soft); color:var(--c-green-ink);
  font-size:11px; font-weight:700; letter-spacing:.04em;
}
.single-model .installment{ margin:8px 0 18px; font-size:12.5px; color:var(--c-grey); }
.single-model .installment b{ color:var(--c-green); }
.single-model .compare-link{ text-align:center; margin-top:12px; }

/* Tabela porównawcza */
.compare{ overflow-x:auto; margin-top:clamp(40px,5vw,64px); border-radius:var(--radius); border:1px solid var(--c-beige); }
.compare table{ width:100%; min-width:780px; border-collapse:collapse; background:#fff; }
.compare th,.compare td{ padding:15px 22px; text-align:center; border-bottom:1px solid var(--c-light); font-size:13.5px; }
.compare thead th{
  background:var(--c-dark); color:#fff;
  font-family:var(--font-display); font-stretch:125%; font-size:14px; font-weight:640;
}
.compare thead th small{
  display:block; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--c-gold); font-weight:700; margin-top:3px;
}
.compare td:first-child{ text-align:left; font-weight:700; color:var(--c-grey); white-space:nowrap; font-size:12.5px; }
.compare tbody tr:nth-child(even) td{ background:var(--c-light); }
.compare td b{ color:var(--c-green); }
.price-note{ margin-top:18px; font-size:11.5px; color:var(--c-grey); line-height:1.7; }

/* ---------- 10. Kategorie / inspiracje (prawy bleed) ---------- */
.categories .container-bleed{ display:flex; gap:clamp(28px,4vw,64px); align-items:center; }
.categories .desc-wrapper{
  width:min(340px,30%); flex:none;
  display:flex; flex-direction:column; gap:22px; align-items:flex-start;
}
.categories .desc-wrapper p{ color:var(--c-grey); }
.categories .carousel{
  flex:1; min-width:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:min(320px,80vw);
  gap:18px; overflow-x:auto; padding:6px 6px 22px;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.categories .carousel::-webkit-scrollbar{ display:none; }
.single-category{
  position:relative; height:420px; border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  scroll-snap-align:start; isolation:isolate; cursor:pointer;
}
.single-category > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .9s var(--ease); }
.single-category:hover > img{ transform:scale(1.07); }
.single-category::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(10,22,38,.78) 10%, rgba(10,22,38,.05) 52%);
}
.single-category h3{
  position:absolute; left:22px; bottom:22px; width:calc(100% - 44px); z-index:3; color:#fff;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.single-category h3 i{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.55); border-radius:50%; font-style:normal;
  transition:.35s var(--ease);
}
.single-category h3 i svg{ width:14px; height:14px; }
.single-category:hover h3 i{ background:#fff; color:var(--c-dark); transform:translate(3px,-3px); }
.single-category .cat-note{
  position:absolute; top:18px; left:20px; z-index:3;
}
@media (max-width:1080px){
  .categories .container-bleed{ flex-direction:column; align-items:flex-start; }
  .categories .desc-wrapper{ width:100%; }
  .categories .carousel{ width:100%; }
  .single-category{ height:360px; }
}

/* ---------- 10b. Showreel — wideo w akcji ---------- */
.showreel{ background:var(--c-dark); color:#fff; position:relative; overflow:hidden; }
.showreel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 420px at 85% 8%, rgba(76,198,233,.1), transparent 60%);
}
.showreel .head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,48px); position:relative;
}
.showreel .head-row p{ color:#a7b8c4; max-width:52ch; }
.showreel .head-row h2{ color:#fff; }

/* Duże intro */
.reel-hero{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-l); isolation:isolate;
}
.reel-hero video{ width:100%; aspect-ratio:21/9; object-fit:cover; display:block; }
@media (max-width:760px){ .reel-hero video{ aspect-ratio:16/10; } }
.reel-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,22,38,.55), transparent 40%);
}
.reel-hero .reel-caption{
  position:absolute; left:clamp(16px,3vw,32px); bottom:clamp(14px,2.5vw,26px); z-index:2;
  display:flex; align-items:center; gap:14px;
}
.reel-hero .reel-caption .live{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--pill);
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:var(--font-display); font-stretch:125%;
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.reel-hero .reel-caption .live i{
  width:7px; height:7px; border-radius:50%; background:var(--c-aqua);
  box-shadow:0 0 12px var(--c-aqua); animation:pulse 2.2s infinite; font-style:normal;
}
.reel-hero .sound-toggle{
  position:absolute; right:clamp(16px,3vw,32px); bottom:clamp(14px,2.5vw,26px); z-index:3;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; transition:.35s var(--ease);
}
.reel-hero .sound-toggle:hover{ background:#fff; color:var(--c-dark); }
.reel-hero .sound-toggle svg{ width:20px; height:20px; }
.reel-hero .sound-toggle .on{ display:none; }
.reel-hero .sound-toggle.is-on .on{ display:block; }
.reel-hero .sound-toggle.is-on .off{ display:none; }

/* Kafelki realizacji */
.reel-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:18px; margin-top:18px;
}
.reel-tile{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  isolation:isolate; background:var(--c-darker);
}
.reel-tile video{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.reel-tile::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,22,38,.82) 8%, rgba(10,22,38,.05) 55%);
  transition:opacity .4s;
}
.reel-tile.is-playing::after{ opacity:.35; }
.reel-tile .tile-info{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:2; pointer-events:none;
}
.reel-tile .tile-info small{
  display:inline-block; margin-bottom:6px; padding:4px 12px; border-radius:var(--pill);
  background:rgba(76,198,233,.16); color:var(--c-aqua);
  font-family:var(--font-display); font-stretch:125%;
  font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.reel-tile .tile-info b{
  display:block; font-family:var(--font-display); font-stretch:125%;
  font-weight:400; font-size:15.5px; line-height:1.4; color:#fff;
}
.reel-tile .tile-info span{ display:block; margin-top:4px; font-size:12px; color:#a7b8c4; line-height:1.6; }
.reel-tile .play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; transition:.4s var(--ease); pointer-events:none;
}
.reel-tile:hover .play-btn{ background:var(--c-aqua); border-color:var(--c-aqua); color:var(--c-darker); transform:translate(-50%,-50%) scale(1.08); }
.reel-tile.is-playing .play-btn{ opacity:0; }
.reel-tile .play-btn svg{ width:24px; height:24px; margin-left:3px; }

/* ---------- 11. Panel "Dlaczego my" ---------- */
.why{ color:var(--c-beige); }
.why .points-wrapper{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--c-dark);
  padding:clamp(48px,6vw,96px) clamp(24px,4vw,56px);
  padding-right:clamp(24px,30vw,430px);
}
.why .points-wrapper > img.side-media{
  position:absolute; right:0; top:0; width:min(370px,28vw); height:100%; object-fit:cover;
}
.why .points-wrapper::after{
  content:""; position:absolute; right:min(360px,27vw); top:0; bottom:0; width:140px;
  background:linear-gradient(to right, var(--c-dark), transparent); pointer-events:none;
}
@media (max-width:1000px){
  .why .points-wrapper{ padding-right:clamp(24px,4vw,56px); }
  .why .points-wrapper > img.side-media, .why .points-wrapper::after{ display:none; }
}
.why .desc-wrapper{ position:relative; z-index:2; display:flex; flex-direction:column; gap:22px; max-width:640px; }
.why .desc-wrapper h2{ color:#fff; }
.why .desc-wrapper p{ color:#b9cbc5; }
.why .points{
  position:relative; z-index:2;
  margin-top:clamp(40px,5vw,72px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(28px,4vw,48px) clamp(22px,3vw,40px);
}
.why .points li{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.why .points .ico{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:rgba(76,198,233,.1); border:1px solid rgba(76,198,233,.22); color:var(--c-aqua);
}
.why .points .ico svg{ width:24px; height:24px; }
.why .points h3{ color:#fff; font-size:16px; font-family:var(--font-display); font-stretch:125%; font-weight:640; }
.why .points p{ font-size:13px; color:#a3b6b0; line-height:1.75; }

/* CTA-karty pod panelem (single-cta) */
.why .contact-wrapper{ margin-top:20px; }
.why .contact-wrapper .row{ gap:20px; }
.single-cta{
  position:relative; flex:1; min-width:min(430px,100%);
  border-radius:var(--radius); overflow:hidden;
  display:flex; align-items:center; gap:clamp(18px,2.5vw,32px);
  padding:20px; transition:.45s var(--ease);
}
.single-cta:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); }
.single-cta > img{ width:min(240px,36%); aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-s); flex:none; }
.single-cta .cta-body{ display:flex; flex-direction:column; gap:8px; padding-right:34px; }
.single-cta .cta-body h3{ font-size:17px; }
.single-cta .cta-body p{ font-size:13px; line-height:1.7; }
.single-cta .corner{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  transition:.35s var(--ease);
}
.single-cta .corner svg{ width:13px; height:13px; }
.single-cta:hover .corner{ transform:translate(3px,-3px); }
.single-cta.bg-white{ border:1px solid var(--c-beige); color:var(--c-ink); }
.single-cta.bg-white .cta-body p{ color:var(--c-grey); }
.single-cta.bg-white .corner{ background:var(--c-green-soft); color:var(--c-green); }
.single-cta.bg-dark{ color:#fff; }
.single-cta.bg-dark .cta-body p{ color:#b9cbc5; }
.single-cta.bg-dark .corner{ background:rgba(255,255,255,.12); color:#fff; }

/* ---------- 12. Doradca ---------- */
.advisor .row{ gap:clamp(36px,5vw,80px); align-items:center; }
.advisor .photo-wrapper{ position:relative; width:min(460px,100%); }
.advisor .photo-wrapper img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
.advisor .photo-card{
  position:absolute; left:clamp(-24px,-2vw,-12px); bottom:26px;
  background:#fff; border-radius:var(--radius-s); box-shadow:var(--shadow-l);
  padding:16px 20px; display:flex; gap:14px; align-items:center; max-width:320px;
}
@media (max-width:640px){ .advisor .photo-card{ left:12px; right:12px; max-width:none; } }
.advisor .photo-card svg{ width:26px; height:26px; flex:none; color:var(--c-green); }
.advisor .photo-card b{ display:block; font-size:13.5px; }
.advisor .photo-card small{ font-size:11.5px; color:var(--c-grey); line-height:1.5; display:block; }
.advisor .desc-wrapper{ flex:1; min-width:min(480px,100%); display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.advisor .desc-wrapper > p{ color:var(--c-grey); }
.advisor .duty-list{ display:grid; gap:16px; width:100%; }
.advisor .duty-list li{
  display:flex; gap:16px; align-items:flex-start;
  padding:16px 18px; border:1px solid var(--c-beige); border-radius:var(--radius-s);
  transition:.4s var(--ease);
}
.advisor .duty-list li:hover{ border-color:var(--c-green); box-shadow:var(--shadow-s); }
.advisor .duty-list .n{
  width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:var(--c-green-soft); color:var(--c-green-ink);
  font-family:var(--font-display); font-stretch:125%; font-weight:700; font-size:13px;
}
.advisor .duty-list b{ display:block; font-size:14px; margin-bottom:2px; }
.advisor .duty-list p{ font-size:13px; color:var(--c-grey); line-height:1.7; }

/* ---------- 13. Opinie (testimonies) ---------- */
.testimonies .testi-row{ gap:clamp(32px,4vw,64px); align-items:stretch; flex-wrap:nowrap; }
@media (max-width:1000px){ .testimonies .testi-row{ flex-wrap:wrap; } }
.testimonies .left-wrapper{
  width:min(420px,100%); display:flex; flex-direction:column; gap:22px; align-items:flex-start;
}
.testimonies .left-wrapper p{ color:var(--c-grey); }
.testimonies .left-wrapper .carousel-nav{ margin-top:auto; padding-top:26px; }
.testimonies .rating-summary{ display:flex; align-items:center; gap:14px; }
.testimonies .rating-summary b{
  font-family:var(--font-display); font-stretch:125%; font-size:34px; font-weight:640; line-height:1;
}
.testimonies .rating-summary .stars{ color:var(--c-gold); letter-spacing:2px; font-size:15px; }
.testimonies .rating-summary small{ display:block; color:var(--c-grey); font-size:12px; }
.testimonies .carousel{
  flex:1; min-width:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:min(440px,88vw);
  gap:20px; overflow-x:auto; padding:6px 6px 18px;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.testimonies .carousel::-webkit-scrollbar{ display:none; }
.single-testimony{
  border:1px solid var(--c-sand); border-radius:var(--radius);
  padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:14px;
  scroll-snap-align:start; background:#fff;
}
.single-testimony .stars{ color:var(--c-gold); letter-spacing:3px; font-size:14px; }
.single-testimony blockquote{ font-size:14px; line-height:1.85; color:var(--c-ink); flex:1; }
.single-testimony hr{ width:100%; border:none; border-top:1px solid var(--c-beige); margin:4px 0; }
.single-testimony .author-wrapper{ display:flex; align-items:center; gap:16px; }
.single-testimony .author-wrapper .avatar{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--c-green); color:#fff;
  font-family:var(--font-display); font-stretch:125%; font-weight:700; font-size:14px;
}
.single-testimony .author-wrapper b{ display:block; font-size:13.5px; }
.single-testimony .author-wrapper small{ color:var(--c-grey); font-size:12px; }

/* ---------- 14. Formularz wyceny (contact panel) ---------- */
.contact-form .panel{
  border-radius:var(--radius); overflow:hidden; position:relative;
  background:var(--c-dark);
  padding:clamp(44px,6vw,88px) clamp(22px,4vw,72px);
}
.contact-form .panel .panel-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.contact-form .panel::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(115deg, rgba(10,22,38,.96) 0%, rgba(10,22,38,.9) 45%, rgba(10,22,38,.82) 100%),
    radial-gradient(760px 420px at 88% 12%, rgba(76,198,233,.14), transparent 60%);
}
.contact-form .row{ position:relative; z-index:2; gap:clamp(36px,5vw,80px); align-items:center; }
.contact-form .desc{ flex:1; min-width:min(440px,100%); display:flex; flex-direction:column; gap:24px; align-items:flex-start; color:#fff; }
.contact-form .desc > p{ color:#b9cbc5; }
.contact-form .benefits{ display:grid; gap:13px; }
.contact-form .benefits li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:#d7e3de; line-height:1.7; }
.contact-form .benefits svg{ width:17px; height:17px; flex:none; color:var(--c-gold); margin-top:3px; }
.contact-form .phone-box{
  display:flex; align-items:center; gap:16px; margin-top:6px;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-s);
  padding:18px 22px; background:rgba(255,255,255,.05);
}
.contact-form .phone-box svg{ width:30px; height:30px; color:var(--c-aqua); flex:none; }
.contact-form .phone-box small{
  display:block; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#8fa8a2;
}
.contact-form .phone-box a{
  font-family:var(--font-display); font-stretch:125%; font-size:21px; font-weight:640; color:#fff; transition:.3s;
}
.contact-form .phone-box a:hover{ color:var(--c-aqua); }
.contact-form .form-wrapper{
  width:min(560px,100%); background:#fff; border-radius:var(--radius);
  padding:clamp(26px,3.4vw,44px); box-shadow:var(--shadow-l); color:var(--c-ink);
}
.contact-form .form-wrapper > p{ color:var(--c-grey); font-size:13.5px; margin:6px 0 22px; }
.form-row{ display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-bottom:14px; }
@media (max-width:480px){ .form-row{ grid-template-columns:1fr; } }
.field input,.field select{ height:50px; }
.field label{
  display:block; margin-bottom:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-grey);
  font-family:var(--font-display); font-stretch:125%;
}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border-radius:var(--radius-s);
  border:1.5px solid var(--c-beige); background:#fdfcf9;
  font:inherit; font-size:14px; color:var(--c-ink);
  transition:border-color .3s, box-shadow .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--c-green); box-shadow:0 0 0 4px rgba(28,93,143,.12);
}
.aq-field--error input,.aq-field--error select,.aq-field--error textarea{
  border-color:var(--c-danger); box-shadow:0 0 0 4px rgba(192,69,63,.12);
}
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:11.5px; color:var(--c-grey); line-height:1.6; margin:16px 0 20px; }
.consent input{ margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--c-green); }
.consent.aq-field--error{ color:var(--c-danger); }
.form-note{ text-align:center; font-size:11.5px; color:var(--c-grey); margin-top:12px; }
.form-error{
  margin:0 0 12px; padding:11px 14px; border-radius:var(--radius-s);
  background:rgba(192,69,63,.09); border:1px solid rgba(192,69,63,.35);
  color:var(--c-danger); font-size:12.5px; font-weight:600; line-height:1.55;
}
.primary[disabled]{ opacity:.6; pointer-events:none; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form-success{ display:none; text-align:center; padding:40px 12px; }
.form-success svg{ width:60px; height:60px; margin:0 auto 18px; color:var(--c-green); }
.form-success p{ color:var(--c-grey); margin-top:8px; }
.aq-form--sent .form-fields{ display:none; }
.aq-form--sent .form-success{ display:block; }

/* ---------- 15. FAQ ---------- */
.faq .container-narrow > .row{ gap:clamp(32px,4vw,64px); align-items:flex-start; }
.faq .left-wrapper{ width:min(380px,100%); display:flex; flex-direction:column; gap:22px; align-items:flex-start; position:sticky; top:110px; }
.faq .left-wrapper p{ color:var(--c-grey); }
.faq .list{ flex:1; min-width:min(480px,100%); display:grid; gap:12px; }
.faq .single-faq{
  background:#fff; border:1px solid var(--c-beige); border-radius:var(--radius-s);
  overflow:hidden; transition:border-color .35s, box-shadow .35s;
}
.faq .single-faq.aq-open{ border-color:var(--c-green); box-shadow:var(--shadow-s); }
.faq .single-faq .head{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  padding:19px 22px; font-weight:700; font-size:14.5px; line-height:1.5;
}
.faq .single-faq .head svg{ width:18px; height:18px; margin-left:auto; flex:none; color:var(--c-green); transition:transform .4s var(--ease); }
.faq .single-faq.aq-open .head svg{ transform:rotate(45deg); }
.faq .single-faq .content{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq .single-faq .content p{ padding:0 22px 20px; color:var(--c-grey); font-size:13.5px; line-height:1.8; }
@media (max-width:900px){ .faq .left-wrapper{ position:static; } }

/* ---------- 16. Stopka ---------- */
footer.main{ background:var(--c-darker); color:#8fa8a2; padding:clamp(48px,6vw,80px) 0 26px; }
footer.main .row{ gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08); }
footer.main .col{ display:flex; flex-direction:column; gap:6px; min-width:200px; }
footer.main h4{
  font-family:var(--font-display); font-stretch:125%;
  color:#fff; font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:12px;
}
footer.main a{ padding:4px 0; font-size:13.5px; transition:color .3s; }
footer.main a:hover{ color:var(--c-aqua); }
footer.main .brand .brand-name{ color:#fff; }
footer.main .about{ font-size:13px; line-height:1.8; max-width:36ch; margin-top:14px; }
footer.main .meta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding-top:22px; font-size:11.5px; }

/* ---------- 16b. Popup wyceny ---------- */
.popup{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; padding:20px;
  background:rgba(10,22,38,.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.popup.open{ opacity:1; visibility:visible; }
.popup .popup-card{
  width:min(520px,100%); max-height:calc(100vh - 40px); overflow-y:auto;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-l);
  padding:clamp(26px,4vw,40px); position:relative;
  transform:translateY(26px) scale(.97); transition:transform .4s var(--ease);
}
.popup.open .popup-card{ transform:none; }
.popup .popup-close{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-light); color:var(--c-ink); transition:.3s;
}
.popup .popup-close:hover{ background:var(--c-dark); color:#fff; }
.popup .popup-close svg{ width:16px; height:16px; transform:rotate(45deg); }
.popup .popup-model{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px; border-radius:var(--pill);
  background:var(--c-green-soft); color:var(--c-green-ink);
  font-family:var(--font-display); font-stretch:125%;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:14px;
}
.popup h3{ margin-bottom:6px; }
.popup .popup-card > p{ color:var(--c-grey); font-size:13px; margin:0 0 20px; }
.popup .consent{ font-size:10.5px; }

/* ---------- 17. Mobilny pasek CTA ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:none; gap:10px;
  padding:10px 4% calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,22,38,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);
}
.mobile-bar .primary{ flex:1; padding:13px 10px; font-size:11px; }
@media (max-width:760px){ .mobile-bar{ display:flex; } body{ padding-bottom:68px; } }
body.menu-open .mobile-bar{ display:none; }

/* ---------- 17b. Komfort formularzy na telefonie / tablecie ---------- */
@media (max-width:1120px){
  /* 16px zapobiega auto-zoomowi iOS Safari przy fokusie pola */
  .field input, .field select, .field textarea{ font-size:16px; }
  .field input, .field select{ height:52px; }
  .hero .hero-form .field input,
  .hero .hero-form .field select{ font-size:16px; height:52px; padding:12px 14px; }
  .field label{ font-size:11px; }
  .hero .hero-form .field label{ font-size:11px; }
  .consent input{ width:20px; height:20px; }
}
@media (max-width:760px){
  .consent{ font-size:12px; }
  .hero .hero-form .consent{ font-size:11.5px; }
  .primary{ padding:16px 22px; }
  .popup .popup-card{ padding:22px 18px; }
  .hero .hero-form{ padding:22px 18px; }
  .contact-form .form-wrapper{ padding:22px 18px; }
}

/* ---------- 20. Strona produktowa ---------- */
.p-hero{ position:relative; overflow:hidden; background:var(--c-dark); color:#fff; padding:clamp(48px,6vw,88px) 0 clamp(48px,6vw,80px); }
.p-hero > img.p-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; }
.p-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(10,22,38,.95) 0%, rgba(10,22,38,.75) 55%, rgba(10,22,38,.55) 100%); }
.p-hero .row{ position:relative; z-index:2; align-items:center; gap:clamp(28px,4vw,64px); flex-wrap:nowrap; }
@media (max-width:1000px){ .p-hero .row{ flex-wrap:wrap; } }
.p-hero .p-info{ flex:1; min-width:min(480px,100%); display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; font-size:11.5px; color:#7d92a4; }
.breadcrumb a{ transition:.3s; }
.breadcrumb a:hover{ color:var(--c-aqua); }
.breadcrumb span::before{ content:"/"; margin-right:8px; color:#44586c; }
.p-hero h1{ color:#fff; }
.p-hero h1 small{
  display:block; font-family:var(--font-display); font-stretch:125%;
  font-size:12px; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--c-aqua); margin-bottom:8px;
}
.p-hero .p-tagline{ color:#b8c6d2; font-size:15.5px; max-width:54ch; }
.p-keyspecs{ display:flex; flex-wrap:wrap; gap:10px; }
.p-keyspecs li{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 18px; border-radius:var(--radius-s);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.p-keyspecs b{ font-family:var(--font-display); font-stretch:125%; font-size:15.5px; font-weight:640; color:#fff; line-height:1.2; }
.p-keyspecs span{ font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8fa5b8; }
.p-price-box{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-top:4px; }
.p-price-box .price{ font-family:var(--font-display); font-stretch:125%; font-size:clamp(30px,3.4vw,40px); font-weight:640; line-height:1; color:#fff; }
.p-price-box .price small{ font-size:15px; color:#8fa5b8; font-weight:600; }
.p-price-box .was{ color:#8fa5b8; font-size:15px; text-decoration:line-through; text-decoration-color:var(--c-danger); text-decoration-thickness:2px; }
.p-price-box .save{ display:inline-block; margin-top:4px; padding:4px 12px; border-radius:var(--pill); background:rgba(76,198,233,.14); color:var(--c-aqua); font-size:11.5px; font-weight:700; }
.p-hero .installment{ font-size:13px; color:#8fa5b8; }
.p-hero .installment b{ color:var(--c-aqua); }
.p-hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.p-hero .p-photo{ width:min(480px,100%); flex:none; position:relative; }
.p-hero .p-photo img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-l);
}
.p-hero .p-photo .promo{
  position:absolute; top:18px; left:18px;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-green); color:#fff;
  font-family:var(--font-display); font-stretch:125%; font-size:12px; font-weight:700;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.5);
}
.p-hero .p-photo .chip{ position:absolute; top:24px; right:18px; }

/* Sekcja opisu */
.p-desc .row{ gap:clamp(32px,4vw,72px); align-items:flex-start; }
.p-desc .col-text{ flex:1.2; min-width:min(460px,100%); display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.p-desc .col-text p{ color:var(--c-grey); line-height:1.9; }
.p-desc .col-side{ flex:1; min-width:min(360px,100%); display:flex; flex-direction:column; gap:14px; }
.p-perk{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 18px; border:1px solid var(--c-beige); border-radius:var(--radius-s);
  background:#fff; transition:.35s var(--ease);
}
.p-perk:hover{ border-color:var(--c-green); box-shadow:var(--shadow-s); }
.p-perk svg{ width:20px; height:20px; flex:none; color:var(--c-green); margin-top:2px; }
.p-perk b{ display:block; font-size:13.5px; margin-bottom:2px; }
.p-perk p{ font-size:12.5px; color:var(--c-grey); line-height:1.65; }
.p-gift{
  display:flex; gap:12px; align-items:center;
  background:#eef9fd; border:1px dashed var(--c-gold); border-radius:var(--radius-s);
  padding:14px 16px; font-size:13px; line-height:1.6;
}
.p-gift svg{ width:22px; height:22px; flex:none; color:var(--c-gold); }
.p-gift b{ color:var(--c-gold-ink); }

/* Pełna specyfikacja */
.p-spec-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:12px; margin-top:clamp(24px,3vw,40px); }
.p-spec-grid li{
  display:flex; flex-direction:column; gap:4px;
  background:#fff; border:1px solid var(--c-beige); border-radius:var(--radius-s);
  padding:18px 20px;
}
.p-spec-grid span{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-grey); }
.p-spec-grid b{ font-family:var(--font-display); font-stretch:125%; font-size:16px; font-weight:640; color:var(--c-ink); }

/* W cenie zestawu */
.p-included{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:14px; margin-top:clamp(24px,3vw,40px); }
.p-included li{
  padding:20px; border-radius:var(--radius-s);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.p-included .ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:rgba(76,198,233,.12); color:var(--c-aqua); }
.p-included .ico svg{ width:20px; height:20px; }
.p-included b{ color:#fff; font-size:13.5px; font-family:var(--font-display); font-stretch:125%; font-weight:400; }
.p-included p{ font-size:12.5px; color:#a7b8c4; line-height:1.7; }

/* Porównanie mini + wskaźnik bieżącego */
.compare td.is-current{ background:var(--c-green-soft) !important; }
.compare .model-link{ color:var(--c-green); font-weight:700; border-bottom:1px solid currentColor; }
.compare .model-link:hover{ color:var(--c-green-ink); }

/* Opinia na stronie produktu */
.p-review{ max-width:760px; margin:0 auto; text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.p-review .stars{ color:var(--c-gold); letter-spacing:4px; font-size:17px; }
.p-review blockquote{ font-size:16.5px; line-height:1.9; color:var(--c-ink); }
.p-review footer{ font-size:13px; color:var(--c-grey); }
.p-review footer b{ color:var(--c-ink); }

/* ---------- 21. Strony prawne ---------- */
.legal h1{ margin-bottom:6px; }
.legal-updated{ color:var(--c-grey); font-size:12.5px; margin-bottom:28px; }
.legal h2{ margin:30px 0 10px; }
.legal p{ color:var(--c-grey); margin-bottom:12px; line-height:1.85; font-size:14px; }
.legal p strong{ color:var(--c-ink); }
.legal ul{ margin:0 0 14px 18px; list-style:disc; }
.legal ul li{ color:var(--c-grey); font-size:14px; line-height:1.8; margin-bottom:6px; }
.legal a:not(.primary){ color:var(--c-green); text-decoration:underline; }

/* ---------- 22. Obszar dojazdu (miasta) ---------- */
.areas{ background:#fff; padding:clamp(36px,5vw,64px) 0; border-top:1px solid var(--c-beige); }
.areas .row{ align-items:center; gap:clamp(20px,3vw,48px); flex-wrap:wrap; }
.areas .areas-info{ max-width:400px; display:flex; flex-direction:column; gap:10px; }
.areas .areas-info p{ color:var(--c-grey); font-size:13.5px; line-height:1.75; }
.areas .city-list{ flex:1; min-width:min(420px,100%); display:flex; flex-wrap:wrap; gap:8px; }
.areas .city-list li{
  padding:8px 16px; border-radius:var(--pill);
  border:1px solid var(--c-beige); background:var(--c-light);
  font-size:12.5px; font-weight:600; color:var(--c-ink);
}
.areas .city-list li.more{ background:none; border-style:dashed; color:var(--c-grey); font-weight:500; }

/* ---------- 18. Animacje wejścia (AQUA engine) ---------- */
[data-aq-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--aq-delay,0s); }
[data-aq-reveal="left"]{ transform:translateX(-40px); }
[data-aq-reveal="right"]{ transform:translateX(40px); }
[data-aq-reveal="zoom"]{ transform:scale(.94); }
[data-aq-reveal].aq-in{ opacity:1; transform:none; }

/* ---------- 19. Wydajność na telefonie ----------
   Telefony: bez animacji wejścia (50+ warstw kompozycji rujnuje scroll),
   bez kosztownych blurów i bez animacji zoomu hero. */
@media (max-width:1120px){
  [data-aq-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero > img.hero-bg{ animation:none; transform:none; }
  .hero-benefits li,
  .reel-hero .reel-caption .live,
  .reel-hero .sound-toggle,
  .reel-tile .play-btn{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .menu-backdrop{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(6,13,22,.66); }
  .hero-benefits li{ background:rgba(255,255,255,.07); }
}