/* ============================================================
   WAP-ROL — Dark Premium Theme
   Granulated lime for agriculture — single page
   ============================================================ */

/* Czcionki lokalne (RODO: bez połączeń z Google). Te same pliki i deklaracje co w Google Fonts
   (Fraunces opsz,wght 340–600; Inter 400/500/600/700), tylko podzbiory latin i latin-ext (polskie znaki).
   Inter to jeden plik zmienny, zadeklarowany osobno dla każdej grubości — tak jak robi to Google. */
@font-face{ font-family: 'Fraunces'; font-style: normal; font-weight: 340 600; font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Fraunces'; font-style: normal; font-weight: 340 600; font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --bg:        #0a0a0a;
  --surface:   #111312;
  --surface-2: #161918;
  --line:      rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.05);

  --green-deep:   #2d5a27;
  --green-bright: #4a9e3f;
  --green-glow:   #6fd45e;
  /* te same kolory jako kanały RGB (do rgba); w strefach podmieniane na zielenie z logo, hero zostaje bez zmian */
  --glow-rgb: 111,212,94; --bright-rgb: 74,158,63; --deep-rgb: 45,90,39;

  --ink:       #f3f5f1;
  --ink-soft:  rgba(243,245,241,.68);
  --ink-faint: rgba(243,245,241,.42);

  --serif: 'Fraunces', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1240px;

  /* Paleta z logo WAP-ROL (zmierzone w logo-wap-rol-cropped.png):
     zieleń napisu #6FC700, ciemna zieleń liścia #237700, żółty słońca #FEFD00 */
  --zielen-logo:        #6FC700; /* przyciski, kreski przy małych napisach, ikonki, akcenty */
  --zielen-logo-ciemna: #237700; /* ciemna zieleń liścia z logo: mały tekst i ikony na bieli (5,4:1; #6FC700 ma tam tylko 2,0:1) */
  --zielen-logo-jasna:  #95DB62; /* ten sam odcień rozjaśniony: akcent jako tekst na ciemnych kartach */
  --zolty-logo:         #FEFD00; /* tylko drobne akcenty (gwiazdki w opiniach) */
  --zielen-ciemna:      #24410A; /* oklch(.34 .087 134): odcień #6FC700 przyciemniony; biały tekst 11,4:1 */
  --zielen-karta:       #294A0D; /* karty na ciemnej zieleni: o ton jaśniejsze */
  --biel:               #FAF9F4; /* ciepła biel jasnych sekcji */
  --ink-karta:          rgba(243,245,241,.82); /* drobny tekst w kartach na ciemnej zieleni */
  --tekst-biel:         #1B2514; /* nagłówki na bieli: ciemna zieleń z odcienia logo */
  --akapit-biel:        #51584D; /* akapity na bieli */
  --karta-biel:         #FFFFFF;
  --linia-biel:         rgba(27,37,20,.11);
  --cien-biel:          0 1px 2px rgba(27,37,20,.05), 0 14px 34px -22px rgba(27,37,20,.30);
  --logo-rgb: 111,199,0;
  --ciemna-rgb: 36,65,10;

  /* Faktura tła: ta sama technika co na framefusion.pl — jeden kafelek SVG niesie
     szum (fractalNoise) i wzór <pattern> z cienką poziomą linią co 4 px, jak rzędy na polu.
     Leży POD treścią (tło strefy), więc nie zmienia pikseli tekstu. */
  --faktura-biel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cdefs%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpattern id='l' width='1' height='4' patternUnits='userSpaceOnUse'%3E%3Crect width='1' height='1' fill='%236FC700' fill-opacity='.0225'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='160' height='160' filter='url(%23z)' opacity='.04'/%3E%3Crect width='160' height='160' fill='url(%23l)'/%3E%3C/svg%3E");
  --faktura-ciemna: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cdefs%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpattern id='l' width='1' height='4' patternUnits='userSpaceOnUse'%3E%3Crect width='1' height='1' fill='%23A8EF76' fill-opacity='.0135'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='160' height='160' filter='url(%23z)' opacity='.05'/%3E%3Crect width='160' height='160' fill='url(%23l)'/%3E%3C/svg%3E");
  /* w przejściu: linie w zieleni logo, pośrednie krycie (widać je i na bieli, i na ciemnej zieleni) */
  --faktura-szew: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cdefs%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpattern id='l' width='1' height='4' patternUnits='userSpaceOnUse'%3E%3Crect width='1' height='1' fill='%236FC700' fill-opacity='.018'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='160' height='160' filter='url(%23z)' opacity='.045'/%3E%3Crect width='160' height='160' fill='url(%23l)'/%3E%3C/svg%3E");

  /* przejście między strefami: cała pusta przestrzeń między ostatnią treścią a pierwszą treścią następnej */
  --przejscie: 240px;
  --odstep: calc(var(--przejscie) / 2);
  /* przejścia z trawą: wyższe, żeby trawa zmieściła się w pustej przestrzeni i nie weszła na treść */
  --przejscie-trawa: 225px; /* 25.09.2026: było 300px, odstępy przy szwach mniejsze o 25% */
  --odstep-trawa: calc(var(--przejscie-trawa) / 2);

  /* ziarno: ten sam szum fractalNoise co na framefusion.pl, tylko odbarwiony i ledwo widoczny */
  --ziarno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23z)' opacity='.05'/%3E%3C/svg%3E");
}
@media (max-width: 768px){
  :root{
    --przejscie: 140px;
    --przejscie-trawa: 128px; /* 25.09.2026: było 170px */
  }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: linear-gradient(to bottom, #0a0f0a 0%, #080808 50%, #0a0f0a 100%) fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html{ overflow-x: hidden; }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 480;
  letter-spacing: -.01em;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}
h1{ font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 420; }
h2{ font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3{ font-size: 1.18rem; font-weight: 560; font-family: var(--sans); letter-spacing: -.01em; }
em{ font-style: italic; color: var(--green-glow); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 12.5px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--green-glow);
  font-weight:600;
}
.eyebrow::before{
  content:''; display:inline-block; width:24px; height:1px; background: var(--green-glow); opacity:.6;
}
.lede{ color: var(--ink-soft); font-size: 17px; max-width: 56ch; }

section{ padding: 110px 0; position: relative; }
@media (max-width: 720px){ section{ padding: 72px 0; } }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
@media (max-width: 880px){
  .grid-2{ grid-template-columns: 1fr; gap: 44px; }
  .grid-3{ grid-template-columns: 1fr; }
}

.section-head{ max-width: 680px; margin: 0 auto 8px; text-align:center; }
.section-head h2{ margin-top: 16px; }
.section-foot{ display:flex; justify-content:center; margin-top: 52px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 600; letter-spacing:.01em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .4s, color .3s;
  white-space: nowrap;
}
.btn svg{ width:17px; height:17px; transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(4px); }
.btn:hover{ transform: translateY(-2px); }

.btn-primary{
  background: linear-gradient(135deg, var(--green-bright), var(--green-deep));
  color: #f7fbf4;
  box-shadow: 0 8px 30px -8px rgba(var(--bright-rgb),.55);
}
.btn-primary:hover{ box-shadow: 0 14px 40px -8px rgba(var(--bright-rgb),.75); }

.btn-ghost{
  background: rgba(255,255,255,.03);
  border-color: var(--line);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ border-color: rgba(var(--glow-rgb),.45); background: rgba(var(--glow-rgb),.06); }

/* ---------- Header ---------- */
.site-header{
  position: fixed; top: 18px; left: 0; right: 0; z-index: 100;
  display:flex; justify-content:center;
  pointer-events:none;
}
.nav-row{
  pointer-events:all;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  width: min(1180px, calc(100% - 36px));
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  background: rgba(17,19,18,.65);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 40px -16px rgba(0,0,0,.6);
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.site-header.scrolled .nav-row{
  background: rgba(10,10,10,.78);
  box-shadow: 0 14px 50px -14px rgba(0,0,0,.75);
}

.brand{ display:flex; align-items:center; gap: 12px; }
.brand-logo{
  display:inline-flex; align-items:center;
  transition: transform .35s var(--ease), filter .4s;
}
.brand:hover .brand-logo{ transform: translateY(-1px); filter: brightness(1.12); }
.brand-logo img{ display:block; height: 40px; width: auto; }

.nav-links{ display:flex; align-items:center; gap: 6px; }
.nav-links a{
  position:relative; padding: 10px 18px; font-size: 14px; font-weight:500; color: var(--ink-soft);
  border-radius: 999px; transition: color .3s, background .3s;
}
.nav-links a:hover{ color: var(--ink); background: rgba(255,255,255,.04); }
.nav-links a.active{ color:#0c130b; background: linear-gradient(135deg, var(--green-glow), var(--green-bright)); }

.nav-cta{ display:flex; align-items:center; gap: 14px; }
.nav-tel{
  display:flex; align-items:center; gap:8px; font-size: 13.5px; color: var(--ink-soft); font-weight:500;
  white-space: nowrap;
}
.nav-tel svg{ width:16px; height:16px; color: var(--green-glow); }
.nav-cta .btn{ padding: 11px 22px; font-size: 13.5px; }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background: rgba(255,255,255,.04); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  pointer-events:all;
}
.nav-toggle span{ width:18px; height:1.5px; background: var(--ink); display:block; transition: transform .35s var(--ease), opacity .25s; }
.nav-toggle.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* 981–1240 px: logo nie może się ściskać, a linki łamać na 2 linie — ciaśniejsze odstępy */
.brand{ flex-shrink: 0; }
.nav-links a{ white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1240px){
  .nav-row{ gap: 10px; padding-left: 18px; }
  .nav-links{ gap: 0; }
  .nav-links a{ padding: 10px 10px; font-size: 13.5px; }
  .nav-cta{ gap: 10px; }
  .nav-cta .btn{ padding: 11px 16px; }
}
@media (min-width: 981px) and (max-width: 1060px){
  .nav-links a{ padding: 10px 8px; }
}
@media (max-width: 980px){
  .nav-links, .nav-tel{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-row{ flex-wrap: wrap; }
}
@media (max-width: 560px){
  .nav-cta .btn span{ display:none; }
  .nav-row{ padding: 10px 10px 10px 16px; }
}

.mobile-menu{
  position: fixed; inset: 0; z-index: 99;
  background: rgba(8,9,8,.92); backdrop-filter: blur(18px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 8px;
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a{ font-family: var(--serif); font-size: clamp(2rem,7vw,2.6rem); padding: 14px 0; color: var(--ink-soft); transition: color .3s; }
.mobile-menu a:hover, .mobile-menu a:focus-visible{ color: var(--green-glow); }
.mobile-menu .btn{ margin-top: 22px; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  padding-top: 140px;
  overflow: hidden;
}

/* Video background */
.hero-video{
  position: absolute; inset: 0; z-index: 0;
}
.hero-video video,
.hero-video img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.hero-video-overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.75);
}
/* Film z polem na wietrze: poster leży pod spodem (zapas, gdy autoplay nie działa), film pojawia się dopiero, gdy gra */
.hero-video .hero-film-poster,
.hero-video .hero-film{
  position: absolute; inset: 0;
  object-position: 62% 100%;
  transform: scale(1.16); transform-origin: 62% 100%;
}
.hero-video .hero-film{ opacity: 0; transition: opacity .9s ease; }
.hero-video .hero-film.gra{ opacity: 1; }
@media (max-width: 768px){
  /* telefon: kadr z prawej części ujęcia (rozmyty pierwszy plan) */
  .hero-video .hero-film-poster,
  .hero-video .hero-film{ object-position: 92% 100%; transform: scale(1.22); transform-origin: 92% 100%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-video .hero-film{ display: none; }
}

.hero-parallax{
  position: absolute; inset: -20% -10% auto -10%; height: 150%;
  background:
    radial-gradient(640px 460px at 14% 18%, rgba(var(--bright-rgb),.20), transparent 60%),
    radial-gradient(560px 480px at 88% 78%, rgba(var(--deep-rgb),.28), transparent 62%),
    radial-gradient(900px 700px at 50% 0%, rgba(var(--glow-rgb),.07), transparent 55%);
  will-change: transform;
  z-index: 0;
}
.hero::before{
  content:'';
  position:absolute; inset: -10% -10% auto -10%; height: 130%;
  background:
    radial-gradient(640px 460px at 14% 18%, rgba(var(--bright-rgb),.20), transparent 60%),
    radial-gradient(560px 480px at 88% 78%, rgba(var(--deep-rgb),.28), transparent 62%),
    radial-gradient(900px 700px at 50% 0%, rgba(var(--glow-rgb),.07), transparent 55%);
  z-index:0;
}
.hero::after{
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%234a9e3f' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 90 C 45 40, 135 140, 180 90'/%3E%3Cpath d='M0 50 C 45 0, 135 100, 180 50'/%3E%3Cpath d='M0 130 C 45 80, 135 180, 180 130'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 420px 420px;
  opacity:.55;
  mask-image: radial-gradient(800px 600px at 60% 35%, #000 30%, transparent 75%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items:center;
}
@media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero-eyebrow{ margin-bottom: 22px; }
.hero h1{ max-width: 13ch; }
.hero h1 em{ font-size: .88em; }
.hero h1 .line{ display:block; }
.hero h1 .line span{ display:inline-block; opacity: 0; transform: translateY(18px); animation: lineUp .9s var(--ease) forwards; }
.hero h1 .line:nth-child(1) span{ animation-delay: .15s; }
.hero h1 .line:nth-child(2) span{ animation-delay: .27s; }
.hero h1 .line:nth-child(3) span{ animation-delay: .39s; }
@keyframes lineUp{ to{ opacity: 1; transform: translateY(0); } }

.hero-lede{ margin-top: 26px; opacity:0; animation: fadeUp .8s var(--ease) .65s forwards; }
/* wejście przycisków: iPhone (WebKit) nie odmalowywał zielonego przycisku po animacji opacity rodzica (był widoczny dopiero po
   przewinięciu). Dlatego: każdy przycisk ma własną warstwę (will-change), start od opacity .001 zamiast 0 (warstwa jest malowana),
   a po końcu animacji JS zdejmuje ją klasą .po-wejsciu, co wymusza odmalowanie z opacity: 1 */
.hero-actions{ display:flex; flex-wrap:wrap; gap: 16px; margin-top: 38px; animation: wejscieHero .8s var(--ease) .8s both; }
.hero-actions .btn{ will-change: transform; }
.hero-actions.po-wejsciu{ animation: none; opacity: 1; transform: none; }
@keyframes wejscieHero{ from{ opacity: .001; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .hero-actions{ animation: none; } }
.hero-actions .btn-ghost{ border: 2px solid rgba(255,255,255,.6); color: #fff; background: transparent; }
.hero-actions .btn-ghost:hover{ border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.hero-stats{
  display:flex; gap: 24px; margin-top: 64px; flex-wrap:wrap;
  justify-content: space-between;
  opacity:0; animation: fadeUp .8s var(--ease) .95s forwards;
}
.hero-stats > div{
  border-left: 2px solid var(--green-bright);
  padding-left: 14px;
}
.hero-stats strong{ font-family: var(--sans); font-size: 28px; font-weight: 800; color: #ffffff; display:flex; align-items:flex-start; gap:2px; letter-spacing: -0.5px; }
.hero-stats strong span[data-count]{ color: #ffffff; }
.hero-stats sup{ font-size: 14px; color: var(--green-glow); margin-top: 4px; }
.hero-stats > div > span{ display:block; font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; max-width: 18ch; }

@keyframes fadeUp{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }

.hero-visual{
  position: relative; height: 560px; max-width: 100%;
  opacity:0; animation: fadeUp 1s var(--ease) .5s forwards;
}
.glass-card{
  position:absolute; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  overflow:hidden;
  animation: floatY 7s ease-in-out infinite;
}
.glass-1{ width: 88%; height: 74%; top: 0; left: 0; animation-delay: 0s; }
.glass-2{ width: 64%; height: 46%; bottom: 0; right: 0; animation-delay: -3s; }
@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }

.glass-1 .grain, .glass-2 .grain{ position:absolute; inset:0; opacity:.5; }
.glass-card > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  border-radius: inherit;
  transition: transform .9s var(--ease);
}
.card-carousel{
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.carousel-slide{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  border-radius: 0;
  opacity: 0;
  transition: opacity .8s ease-in-out !important;
}
.carousel-slide.active{ opacity: 1; }
.carousel-slide.slide-zoom{ transform: scale(1.22); transform-origin: center 43%; }
.carousel-slide.slide-zoom-lg{ transform: scale(1.1); transform-origin: center 42%; }
.glass-label{
  position:absolute; left:22px; bottom:20px; right:22px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.glass-label .tag{
  font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft);
  background: rgba(0,0,0,.35); border:1px solid var(--line); padding: 8px 14px; border-radius:999px; backdrop-filter: blur(8px);
}
.glass-dot{ position:absolute; top:24px; right:24px; width:10px; height:10px; border-radius:50%; background: var(--green-glow); box-shadow: 0 0 18px 4px rgba(var(--glow-rgb),.55); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.6; transform: scale(1); } 50%{ opacity:1; transform: scale(1.3); } }

.scroll-cue{
  position:absolute; left:50%; bottom: 36px; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap: 10px;
  font-size: 11px; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-faint);
  z-index:1;
}
.scroll-cue .stick{ width:1px; height: 46px; background: linear-gradient(var(--ink-faint), transparent); position:relative; overflow:hidden; }
.scroll-cue .stick::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: linear-gradient(var(--green-glow), transparent);
  animation: scrollDown 2.2s ease-in-out infinite;
}
@keyframes scrollDown{ 0%{ top:-100%; } 60%,100%{ top:100%; } }

/* ---------- Marquee ---------- */
.marquee{
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  overflow: hidden; padding: 22px 0;
}
.marquee-track{
  display:flex; gap: 56px; white-space:nowrap; width: max-content;
  animation: scrollX 38s linear infinite;
}
/* pauza tylko pod myszą — na ekranie dotykowym dotknięcie nie zatrzymuje paska */
@media (hover: hover) and (pointer: fine){ .marquee:hover .marquee-track{ animation-play-state: paused; } }
.marquee-track span{
  font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--ink-faint);
  display:flex; align-items:center; gap: 56px;
}
.marquee-track span::after{ content:'◆'; font-size:.5rem; color: var(--green-glow); margin-left: 56px; font-style:normal; }
@keyframes scrollX{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-stagger] > *{ opacity:0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal-stagger].in > *{ opacity:1; transform:none; }
[data-reveal-stagger].in > *:nth-child(1){ transition-delay: .05s; }
[data-reveal-stagger].in > *:nth-child(2){ transition-delay: .16s; }
[data-reveal-stagger].in > *:nth-child(3){ transition-delay: .27s; }
[data-reveal-stagger].in > *:nth-child(4){ transition-delay: .38s; }

/* ---------- Cards ---------- */
.card{
  position: relative;
  background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 30px;
  transition: transform .5s var(--ease), border-color .4s, background .4s, box-shadow .5s;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(var(--glow-rgb),.35);
  background: linear-gradient(165deg, rgba(var(--glow-rgb),.07), rgba(255,255,255,.015));
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.6);
}
.card-icon{
  width: 50px; height:50px; border-radius: 14px; margin-bottom: 22px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(150deg, rgba(var(--bright-rgb),.22), rgba(var(--deep-rgb),.12));
  border: 1px solid rgba(var(--glow-rgb),.22);
  color: var(--green-glow);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.card-icon svg{ width: 24px; height:24px; }
.card:hover .card-icon{ transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 28px -4px rgba(var(--glow-rgb),.45); }
.card h3{ margin-bottom: 10px; }
.card p{ color: var(--ink-soft); font-size: 14.5px; margin:0; }
.card .tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 18px; }

/* Product image cards */
.card-product{ padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-img{
  width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: #0c130b;
  border-bottom: 1px solid var(--line);
}
.card-img img{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
  transition: transform .7s var(--ease);
}
.card-product:hover .card-img img{ transform: scale(1.05); }
.card-product h3,
.card-product p,
.card-product .tag-row{ padding: 0 28px; }
.card-product h3{ padding-top: 24px; margin-bottom: 10px; }
.card-product p{ margin-bottom: 18px; }
.card-product .tag-row{ padding-bottom: 26px; margin-top: auto; }
.card .pill{
  font-size: 11.5px; letter-spacing:.04em; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius:999px; padding: 5px 12px;
}

/* ---------- Why-lime checklist ---------- */
.check-list{ list-style:none; padding:0; margin: 30px 0 0; display:grid; gap:16px; }
.check-list li{ display:flex; gap:14px; align-items:flex-start; color: var(--ink-soft); font-size: 15px; }
.check-list .ico{
  flex-shrink:0; width:30px; height:30px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: rgba(var(--glow-rgb),.12); border: 1px solid rgba(var(--glow-rgb),.28); color: var(--green-glow); margin-top: 1px;
}
.check-list .ico svg{ width:15px; height:15px; }

/* ---------- pH visual ---------- */
.ph-card{
  position:relative; height: 440px; border-radius: 22px; overflow:hidden;
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
}
.ph-card .grain{
  position:absolute; inset:0;
  background:
    radial-gradient(420px 320px at 30% 20%, rgba(var(--bright-rgb),.22), transparent 60%),
    radial-gradient(380px 340px at 80% 85%, rgba(var(--glow-rgb),.14), transparent 60%);
}
.ph-content{ position:absolute; left: 32px; right:32px; bottom: 32px; }
.ph-row{ display:flex; align-items:baseline; gap: 20px; margin-top: 16px; }
.ph-before{ font-family: var(--serif); font-size: 3rem; color: var(--ink-faint); }
.ph-after{ font-family: var(--serif); font-size: 3.8rem; color: var(--ink); font-weight: 480; }
.ph-row svg{ width:26px; height:26px; color: var(--green-glow); }
.ph-bar{ margin-top: 22px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow:hidden; }
.ph-bar > span{
  display:block; height:100%; width: 0%; border-radius:999px;
  background: linear-gradient(90deg, var(--green-deep), var(--green-glow));
  transition: width 1.4s var(--ease);
}
.ph-card.in .ph-bar > span{ width: 78%; }

/* ---------- Process / numbered rows ---------- */
.num-row{
  display:flex; gap: 26px; padding: 28px 0; border-top: 1px solid var(--line-soft);
}
.num-row:last-child{ border-bottom: 1px solid var(--line-soft); }
.num-row .n{
  font-family: var(--serif); font-size: 1.4rem; color: var(--green-glow); opacity:.8; flex-shrink:0; width: 50px;
}
.num-row h3{ margin-bottom: 6px; }
.num-row p{ color: var(--ink-soft); font-size: 14.5px; margin:0; max-width: 52ch; }

/* ---------- Kalkulator ---------- */
#kalkulator { padding: 100px 0; }
.calc-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 56px;
}
.calc-header { margin-bottom: 40px; }
.calc-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.calc-btn { width: auto; }
.calc-results {
  display: none;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.calc-results.show { display: block; animation: fadeUp .5s var(--ease); }
.calc-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.calc-result-grid.single {
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.calc-product-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  background: linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
}
.calc-product-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.calc-product-head strong { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.calc-product-spec {
  font-size: 11px; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.calc-product-tag {
  font-size: 11.5px; color: var(--green-bright);
  background: rgba(var(--bright-rgb),.1); border: 1px solid rgba(var(--bright-rgb),.25);
  border-radius: 999px; padding: 3px 10px; letter-spacing: .01em;
}
.calc-product-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.calc-product-stats .calc-result-card { flex: 1 1 100px; min-width: 100px; }
.calc-result-card {
  border-left: 3px solid var(--green-bright);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.calc-result-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.calc-result-card strong { font-family: var(--serif); font-size: 1.5rem; color: var(--green-bright); line-height: 1.2; }
.calc-note { font-size: 13px; color: var(--ink-faint); }
.calc-note a { color: var(--green-bright); text-decoration: underline; }
/* lista "Typ uprawy" (najdluzsza opcja ~347 px) nie moze rozpychac kolumny poza karte;
   ponizej ~1160 px pola przestaja sie miescic w 4 kolumnach, od 1200 px uklad zostaje bez zmian */
@media (max-width: 1199px) {
  .calc-fields > .field { min-width: 0; }
}
@media (max-width: 900px) {
  .calc-fields { grid-template-columns: repeat(2, 1fr); }
  .calc-wrap { padding: 36px 24px; }
}
@media (max-width: 560px) {
  .calc-fields { grid-template-columns: 1fr; }
  .calc-result-grid { grid-template-columns: 1fr; }
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap: 40px; flex-wrap:wrap;
  padding: 56px 56px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--green-deep), #1c3a18 60%, var(--surface));
  border: 1px solid rgba(var(--glow-rgb),.22);
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(420px 280px at 85% 20%, rgba(var(--glow-rgb),.28), transparent 65%);
  pointer-events:none;
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ max-width: 22ch; }
@media (max-width: 720px){ .cta-band{ padding: 38px 28px; } }

/* ---------- FAQ ---------- */
.faq-list{ max-width: 800px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 14px; }
.card.faq-item{ padding: 0; }
.card.faq-item:hover{ transform: none; }
.faq-list > .faq-item{ will-change: transform; }   /* osobne warstwy: przesuwanie pytań przy otwieraniu bez odmalowywania tła */
.faq-item .faq-h{ margin: 0; }
.faq-btn{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; background: none; border: 0; border-radius: inherit;
  font: inherit; letter-spacing: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.faq-btn:focus-visible{ outline: 2px solid var(--green-glow); outline-offset: 3px; }
/* ikonka jak .check-list .ico: plus, po otwarciu minus */
.faq-ico{
  position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(var(--glow-rgb),.12); border: 1px solid rgba(var(--glow-rgb),.28); color: var(--green-glow);
}
.faq-ico::before, .faq-ico::after{
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px;
  background: currentColor; border-radius: 1px; transition: transform .35s var(--ease);
}
.faq-ico::after{ transform: rotate(90deg); }
.faq-item.open .faq-ico::after{ transform: rotate(90deg) scaleX(0); }
/* płynne rozwijanie: wiersz siatki 0fr -> 1fr; zamknięta odpowiedź jest ukryta także dla klawiatury i czytników */
/* FAQ: wysokość odpowiedzi animuje JS (faqPrzelacz); tekst lekko wjeżdża i się rozjaśnia */
.faq-a{ height: 0; overflow: hidden; }
.faq-item.open .faq-a{ height: auto; }
.faq-a-in{ overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .3s ease, visibility 0s .38s; }
.faq-item.open .faq-a-in{ visibility: visible; opacity: 1; transform: none;
  transition: opacity .3s ease .08s, transform .38s cubic-bezier(.22, .61, .36, 1) .04s, visibility 0s; }
.faq-a p{ padding: 0 26px 24px; }
.faq-a a{ color: var(--green-glow); text-decoration: underline; }
@media (max-width: 768px){
  .faq-list{ margin-top: 36px; }
  .faq-btn{ padding: 18px 20px; gap: 16px; }
  .faq-a p{ padding: 0 20px 20px; }
}

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: .92fr 1.08fr; gap: 56px; }
@media (max-width: 940px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-info-row{ display:flex; gap:16px; align-items:flex-start; padding: 18px 0; border-top:1px solid var(--line-soft); }
.contact-info-row:last-child{ border-bottom: 1px solid var(--line-soft); }
.contact-info-row .ico{
  width:42px; height:42px; border-radius: 12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background: rgba(var(--glow-rgb),.1); border:1px solid rgba(var(--glow-rgb),.22); color: var(--green-glow);
}
.contact-info-row .ico svg{ width:19px; height:19px; }
.contact-info-row strong{ display:block; font-size:14px; color: var(--ink); margin-bottom:3px; }
.contact-info-row span, .contact-info-row a{ font-size: 14px; color: var(--ink-soft); }
.contact-info-row a:hover{ color: var(--green-glow); }

.form-card{
  background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 38px;
}
@media (max-width: 560px){ .form-card{ padding: 26px; } }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap: 8px; margin-top: 18px; }
.field label{ font-size: 12.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); }
.field input, .field textarea, .field select{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--sans); font-size: 14.5px;
  transition: border-color .3s, background .3s, box-shadow .3s;
  outline:none;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-faint); }
.field select option{ background: #1a1a1a; color: #fff; }
.field select option:hover, .field select option:checked{ background: #2a2a2a; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: rgba(var(--glow-rgb),.5);
  background: rgba(var(--glow-rgb),.04);
  box-shadow: 0 0 0 4px rgba(var(--glow-rgb),.1);
}
.field textarea{ resize: vertical; min-height: 110px; font-family: var(--sans); }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap: 18px; margin-top: 28px; flex-wrap:wrap; }
.form-note{ font-size: 12.5px; color: var(--ink-faint); max-width: 32ch; }
.form-success{
  display:none; margin-top: 22px; padding: 16px 20px; border-radius: 14px;
  background: rgba(var(--glow-rgb),.1); border: 1px solid rgba(var(--glow-rgb),.3); color: var(--green-glow);
  font-size: 14px; align-items:center; gap:10px;
}
.form-success.show{ display:flex; animation: fadeUp .5s var(--ease); }
.form-success svg{ width:18px; height:18px; flex-shrink:0; }
.form-error{
  display:none; margin-top: 22px; padding: 16px 20px; border-radius: 14px;
  background: rgba(220,60,60,.1); border: 1px solid rgba(220,60,60,.3); color: #f87171;
  font-size: 14px; align-items:center; gap:10px;
}
.form-error.show{ display:flex; animation: fadeUp .5s var(--ease); }
.form-error svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- O firmie ---------- */
#o-firmie { padding: 120px 0 80px; }
.green-em { color: var(--green-bright); font-style: italic; }
.ofirmie-intro { max-width: 52ch; font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); }
.ofirmie-checklist {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ofirmie-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.ofirmie-checklist li::before {
  content: '';
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--green-bright);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3.5 3.5L11 1' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

.ofirmie-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.ofirmie-hero-img {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
  box-shadow: 0 32px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}
.ofirmie-hero-img::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at center, rgba(var(--bright-rgb),0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.ofirmie-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  position: relative; z-index: 1;
}

.ofirmie-sub { margin-bottom: 36px; }

.ofirmie-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.gallery-hover {
  position: absolute; inset: 0;
  background: rgba(var(--deep-rgb),0);
  transition: background .4s ease;
  border-radius: inherit;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:hover .gallery-hover { background: rgba(var(--deep-rgb),.15); }
.gallery-caption {
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 16px;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.92);
  align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.lightbox-close {
  position: absolute; top: 20px; right: 28px;
  background: none; border: none;
  color: #fff; font-size: 2.4rem; line-height: 1;
  cursor: pointer; opacity: .7; transition: opacity .2s;
}
.lightbox-close:hover { opacity: 1; }

.ofirmie-quote {
  text-align: center;
  margin: 0;
  padding: 48px 0;
}
.ofirmie-quote p {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  color: var(--ink);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.4;
}
.ofirmie-quote p::before, .ofirmie-quote p::after { color: var(--green-bright); }

/* ---------- Testimonials ---------- */
.testimonials-wrap {
  overflow: hidden;
  position: relative;
  padding: 8px 0 32px;
}
.testimonials-track {
  display: flex;
  gap: 24px;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.testimonial-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 calc((100% - 24px) / 2);
  transition: border-color .35s, box-shadow .4s;
}
@media (max-width: 768px) {
  .testimonial-card { flex: 0 0 100%; }
}
.testimonial-card:hover {
  border-color: rgba(var(--bright-rgb),.4);
  box-shadow: 0 20px 48px -16px rgba(0,0,0,.5);
}
.testimonial-stars {
  color: var(--green-bright);
  font-size: 15px;
  letter-spacing: 2px;
}
.testimonial-card blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.65;
  flex: 1;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-deep), var(--green-bright));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  letter-spacing: .5px;
}
.testimonial-author strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.testimonial-author span {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
  display: block;
}
.testimonial-google,
.testimonial-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 8px;
  vertical-align: middle;
  opacity: .85;
}
.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.testimonials-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  padding: 0;
  transition: background .3s, transform .3s;
}
.testimonials-dots button.active {
  background: var(--green-bright);
  transform: scale(1.3);
}

@media (max-width: 900px) {
  .ofirmie-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ofirmie-gallery { grid-template-columns: 1fr 1fr; }
}

/* ---------- Video Break ---------- */
.video-break {
  position: relative;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-break__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.video-break__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,14,10,.7) 0%,
    rgba(10,14,10,.45) 50%,
    rgba(10,14,10,.7) 100%
  );
}
.video-break__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 720px;
}
.video-break__content p {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 20px;
}
.video-break__content h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

/* ---------- Mapa ---------- */
.map-wrap { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.map-wrap iframe { display: block; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--surface); border-top: 1px solid var(--line-soft); padding: 80px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 48px; }
@media (max-width: 880px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom: 18px; }
.footer-brand .brand-logo img{ height: 45px; }
.site-footer h4{ font-family: var(--sans); font-size: 13px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: 18px; font-weight:600; }
.footer-links{ display:flex; flex-direction:column; gap: 12px; }
.footer-links a{ font-size: 14.5px; color: var(--ink-soft); transition: color .25s, transform .25s; display:inline-block; }
.footer-links a:hover{ color: var(--green-glow); transform: translateX(3px); }
.footer-credit{ font-size: 11px; color: rgba(255,255,255,.18); letter-spacing: .04em; }
.footer-col-brand{ display: flex; flex-direction: column; gap: 0; }
.footer-desc{ color: rgba(243,245,241,.5); font-size: 14px; line-height: 1.7; max-width: 34ch; margin: 18px 0 20px; }
.footer-legal{ display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.footer-legal span{ font-size: 12px; color: rgba(243,245,241,.28); letter-spacing: .03em; }
.footer-social{ display: flex; gap: 12px; }
.footer-social a{ width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(243,245,241,.5); transition: border-color .25s, color .25s, background .25s; }
.footer-social a:hover{ border-color: var(--green-bright); color: var(--green-glow); background: rgba(var(--bright-rgb),.08); }
.footer-social svg{ width: 16px; height: 16px; }
.footer-links a{ display: flex; align-items: center; gap: 7px; }
.footer-bottom{
  margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 12px;
  font-size: 12.5px; color: var(--ink-faint);
}

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  width: 50px; height:50px; border-radius:50%;
  background: rgba(17,19,18,.7); border: 1px solid var(--line);
  color: var(--ink); display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(12px);
  cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(12px) scale(.9);
  transition: opacity .35s, visibility .35s, transform .35s var(--ease), border-color .3s, background .3s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ border-color: rgba(var(--glow-rgb),.4); background: rgba(var(--glow-rgb),.1); }
.back-to-top svg{ width:18px; height:18px; }

/* ---------- Misc ---------- */
/* ---------- Micro-interactions — lower sections ---------- */

/* 1. Button shimmer sweep */
.btn{ position: relative; overflow: hidden; }
.btn::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.13) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.btn:hover::after{ transform: translateX(120%); }

/* 2. Process rows */
.num-row{ transition: background .3s, padding-left .35s var(--ease); }
.num-row:hover{ background: rgba(var(--glow-rgb),.03); padding-left: 8px; }
.num-row .n{ transition: color .35s, opacity .35s; }
.num-row:hover .n{ color: var(--green-glow); opacity: 1; }

/* 3. Contact info row icon glow */
.contact-info-row .ico{ transition: box-shadow .4s var(--ease), transform .4s var(--ease), background .3s; }
.contact-info-row:hover .ico{
  transform: scale(1.08);
  box-shadow: 0 0 0 5px rgba(var(--glow-rgb),.12), 0 0 20px -4px rgba(var(--glow-rgb),.3);
  background: rgba(var(--glow-rgb),.18);
}

/* 6. Gallery — expand indicator on hover */
.gallery-item::after{
  content: '↗';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  color: #fff; font-size: 17px;
  line-height: 46px; text-align: center;
  opacity: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  z-index: 2;
  pointer-events: none;
}
.gallery-item:hover::after{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 7. Calculator product cards — stagger in */
.calc-product-card{
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.calc-results.show .calc-product-card{ opacity: 1; transform: none; }
.calc-results.show .calc-product-card:nth-child(1){ transition-delay: .04s; }
.calc-results.show .calc-product-card:nth-child(2){ transition-delay: .14s; }
.calc-results.show .calc-product-card:nth-child(3){ transition-delay: .24s; }

/* ============================================================
   MOBILE — 768px and below
   ============================================================ */
@media (max-width: 768px){

  /* Base */
  section{ padding: 64px 0; }
  .container{ padding: 0 20px; }

  /* Header */
  .nav-row{ width: calc(100% - 24px); padding: 10px 10px 10px 16px; }
  .brand-logo img{ height: 34px; }
  .eyebrow-prefix{ display: none; }

  /* Hero */
  .hero{ padding-top: 100px; min-height: auto !important; padding-bottom: 60px; }
  .hero-grid{ gap: 0 !important; }
  .hero-visual{ display: none !important; }
  .hero h1{ max-width: none; }
  .hero-lede{ font-size: 15px; margin-top: 20px; }
  .hero-actions{ gap: 12px; margin-top: 28px; }
  .hero-actions .btn{ flex: 1; justify-content: center; min-width: 0; }
  .hero-stats{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    margin-top: 36px;
    flex-wrap: nowrap;
    justify-content: initial;
  }
  .hero-stats > div{ padding: 0 0 0 12px !important; border-left: 2px solid var(--green-bright); }
  .hero-stats strong{ font-size: 20px !important; }
  .hero-stats sup{ font-size: 11px; }
  .hero-stats > div > span{ font-size: 11px !important; max-width: none; margin-top: 3px; }
  .scroll-cue{ display: none !important; }

  /* Marquee — tighter */
  .marquee{ padding: 16px 0; }
  .marquee-track span{ font-size: 1.1rem; }

  /* Section headings */
  h2{ font-size: clamp(1.6rem, 5.5vw, 2rem); }

  /* Grid gaps — override inline styles */
  .grid-2{ gap: 40px !important; }

  /* pH card */
  .ph-card{ height: 300px; }
  .ph-before{ font-size: 2.2rem; }
  .ph-after{ font-size: 2.8rem; }

  /* Cards */
  .card{ padding: 26px 22px; }

  /* O firmie */
  #o-firmie{ padding: 80px 0 60px; }
  .ofirmie-hero{ grid-template-columns: 1fr; gap: 36px; }
  .ofirmie-hero-img{ aspect-ratio: 16 / 9; }
  .ofirmie-gallery{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gallery-item{ aspect-ratio: 3/2; }
  .ofirmie-quote p{ font-size: clamp(1.2rem, 4.5vw, 1.6rem); }
  .testimonial-card{ padding: 24px; }

  /* Process */
  .num-row{ gap: 18px; padding: 22px 0; }
  .num-row .n{ font-size: 1.1rem; width: 36px; }
  /* Disable padding-left hover on touch */
  .num-row:hover{ padding-left: 0; }

  /* Calculator */
  .calc-wrap{ padding: 32px 20px; }
  .calc-btn{ width: 100%; justify-content: center; }
  .calc-result-grid{ grid-template-columns: 1fr !important; }
  .calc-product-card{ padding: 20px; }
  .calc-result-card{ padding: 14px 14px; }
  .calc-result-card strong{ font-size: 1.25rem; }

  /* Contact */
  .contact-grid{ margin-top: 40px !important; }
  .contact-info-row a,
  .contact-info-row span{ font-size: 13px; overflow-wrap: anywhere; }
  .form-card{ padding: 24px 20px; }
  .form-foot{
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .form-foot .btn{ width: 100%; justify-content: center; }
  .form-note{ max-width: none; }

  /* Map */
  #lokalizacja{ padding: 0 0 64px !important; }
  .map-wrap iframe{ height: 320px; }

  /* CTA band */
  .cta-band{ padding: 36px 24px; flex-direction: column; gap: 24px; }
  .cta-band h2{ font-size: clamp(1.4rem, 5vw, 1.9rem); }

  /* Footer */
  .site-footer{ padding: 60px 0 24px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   SMALL MOBILE — 480px and below
   ============================================================ */
@media (max-width: 480px){
  .hero-stats strong{ font-size: 18px; }
  .hero-stats > div > span{ font-size: 10px; }
  .ofirmie-gallery{ grid-template-columns: repeat(2, 1fr); }
  .calc-result-grid{ grid-template-columns: 1fr !important; }
  .form-row{ grid-template-columns: 1fr; }
}

/* ============================================================
   STREFY KOLORÓW I PRZEJŚCIA
   Strefa = grupa sekcji w jednym kolorze (biel albo ciemna zieleń z logo) + faktura
   (ziarno i cienkie poziome linie). Rytm: pasek haseł → biel (Asortyment) → ciemna (Dlaczego, Kalkulator)
   → biel (O firmie, Jak pracujemy) → ciemna (Galeria) → biel (Opinie, Pytania)
   → ciemna (Kontakt, mapa, stopka).
   Szew (.szew::before) wisi na pierwszej sekcji strefy i wypełnia CAŁĄ pustą
   przestrzeń między ostatnią treścią poprzedniej strefy a pierwszą treścią tej:
   --szew-nad px w górę (dolny odstęp poprzedniej) + --szew-pod px w dół (górny odstęp tej).
   Zaczyna się dokładnie kolorem poprzedniej strefy i kończy dokładnie kolorem tej.
   Krzywa: smoothstep (3t² − 2t³), 11 punktów, a gradient i punkty liczone w OKLCH:
   jasność i nasycenie zmieniają się razem, a odcień idzie od ciepłej bieli do zieleni,
   więc w połowie nie wychodzi szary, bury kolor (jak przy mieszaniu w sRGB/oklab).
   ============================================================ */
.strefa{ position: relative; background-color: var(--strefa-kolor); background-image: var(--strefa-faktura); }
.strefa-biel  { --strefa-kolor: var(--biel);          --strefa-faktura: var(--faktura-biel); }
.strefa-ciemna{ --strefa-kolor: var(--zielen-ciemna); --strefa-faktura: var(--faktura-ciemna); }

/* w strefach dawne zielenie motywu = zielenie z logo (hero i menu leżą poza strefami, więc się nie zmieniają) */
.strefa{
  --green-glow: var(--zielen-logo); --green-bright: var(--zielen-logo); --green-deep: var(--zielen-ciemna);
  --glow-rgb: var(--logo-rgb); --bright-rgb: var(--logo-rgb); --deep-rgb: var(--ciemna-rgb);
}

.szew::before{
  content:''; position:absolute; left:0; right:0; pointer-events:none;
  top: calc(-1 * var(--szew-nad));
  height: calc(var(--szew-nad) + var(--szew-pod));
  background-image: var(--faktura-szew), linear-gradient(to bottom in oklch,
    var(--szew-od) 0%,
    color-mix(in oklch, var(--szew-do)  2.8%, var(--szew-od)) 10%,
    color-mix(in oklch, var(--szew-do) 10.4%, var(--szew-od)) 20%,
    color-mix(in oklch, var(--szew-do) 21.6%, var(--szew-od)) 30%,
    color-mix(in oklch, var(--szew-do) 35.2%, var(--szew-od)) 40%,
    color-mix(in oklch, var(--szew-do) 50%,   var(--szew-od)) 50%,
    color-mix(in oklch, var(--szew-do) 64.8%, var(--szew-od)) 60%,
    color-mix(in oklch, var(--szew-do) 78.4%, var(--szew-od)) 70%,
    color-mix(in oklch, var(--szew-do) 89.6%, var(--szew-od)) 80%,
    color-mix(in oklch, var(--szew-do) 97.2%, var(--szew-od)) 90%,
    var(--szew-do) 100%);
}
/* nasycenie podbite w środku przejścia (jasność i odcień bez zmian), żeby połowa nie była bura;
   przeglądarki bez względnej składni kolorów zostają przy zwykłym gradiencie powyżej */
@supports (color: oklch(from red l c h)){
  .szew::before{
    background-image: var(--faktura-szew), linear-gradient(to bottom in oklch,
    var(--szew-od) 0%,
    oklch(from color-mix(in oklch, var(--szew-do) 2.8%, var(--szew-od)) l calc(c * 1.1) h) 10%,
    oklch(from color-mix(in oklch, var(--szew-do) 10.4%, var(--szew-od)) l calc(c * 1.3) h) 20%,
    oklch(from color-mix(in oklch, var(--szew-do) 21.6%, var(--szew-od)) l calc(c * 1.5) h) 30%,
    oklch(from color-mix(in oklch, var(--szew-do) 35.2%, var(--szew-od)) l calc(c * 1.6) h) 40%,
    oklch(from color-mix(in oklch, var(--szew-do) 50%, var(--szew-od)) l calc(c * 1.65) h) 50%,
    oklch(from color-mix(in oklch, var(--szew-do) 64.8%, var(--szew-od)) l calc(c * 1.6) h) 60%,
    oklch(from color-mix(in oklch, var(--szew-do) 78.4%, var(--szew-od)) l calc(c * 1.5) h) 70%,
    oklch(from color-mix(in oklch, var(--szew-do) 89.6%, var(--szew-od)) l calc(c * 1.3) h) 80%,
    oklch(from color-mix(in oklch, var(--szew-do) 97.2%, var(--szew-od)) l calc(c * 1.1) h) 90%,
    var(--szew-do) 100%);
  }
}
.szew{ --szew-nad: var(--odstep-trawa); --szew-pod: var(--odstep-trawa); }

/* ciemna → biel */
/* pasek haseł → Dlaczego: czerń paska przechodzi w poświatę tłem strefy (niżej: CIEMNE SEKCJE) */
#dlaczego       { padding-top: var(--odstep-trawa); }  /* szew biel (Asortyment) → ciemne */
#produkty       { padding-bottom: var(--odstep-trawa); } /* pod paskiem haseł czysta krawędź, na dole miejsce na szew */
/* biel → ciemna */
#proces         { padding-bottom: var(--odstep-trawa); }
.sekcja-galeria { --szew-od: var(--biel); --szew-do: var(--zielen-ciemna); padding: var(--odstep-trawa) 0; }
/* ciemna → biel */
.sekcja-opinie  { --szew-od: var(--zielen-ciemna); --szew-do: var(--biel); padding-top: var(--odstep-trawa); }
/* biel → stopka: OSTRA krawędź z cienką linią u góry, pełne ciemne tło jak przed redesignem (--surface #111312) */
#lokalizacja    { padding-bottom: var(--odstep-trawa) !important; }
.site-footer    { position: relative; --szew-nad: var(--odstep-trawa); --szew-pod: var(--odstep-trawa);
                  background: var(--surface); border-top: 1px solid rgba(255,255,255,.08); padding-top: var(--odstep-trawa); }
/* trawa przy stopce: rośnie z krawędzi stopki, w bieli sięga tylko do 40 px pod mapą, więc jej nie zasłania */
.site-footer.trawa::after{ top: calc(40px - var(--szew-nad)); height: calc(var(--szew-nad) + var(--szew-pod) - 40px);
                  width: calc((var(--szew-nad) + var(--szew-pod) - 40px) * var(--trawa-proporcja) * .7); }

/* Pasek haseł: osobny ciemny pas jak przed redesignem (--surface #111312), cienka linia u góry i u dołu */
.marquee{ background: var(--surface); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.marquee-track span{ color: var(--ink-soft); }
.marquee-track span::after{ color: var(--zielen-logo); }

/* ---------- Trawy: młode źdźbła mocno rozmyte jak pierwszy plan przed obiektywem ----------
   Przy lewej / prawej krawędzi ekranu, ucięte przez krawędź (widać ok. połowy kępy).
   Mieszczą się w pustej przestrzeni szwu, więc nigdy nie wchodzą na tekst ani przyciski;
   dół wygaszony, żeby nie było widać odciętej podstawy. */
.trawa::after{
  content:''; position:absolute; pointer-events:none;
  top: calc(-1 * var(--szew-nad)); height: calc(var(--szew-nad) + var(--szew-pod));
  width: calc((var(--szew-nad) + var(--szew-pod)) * var(--trawa-proporcja) * .7); /* widoczne 70% szerokości kępy */
  background-repeat: no-repeat; background-size: auto 100%;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%);
          mask-image: linear-gradient(to top, transparent 0%, #000 22%);
}
/* kępa wysunięta ok. 30% poza krawędź ekranu (obraz sam jest już ucięty przy tej krawędzi) */
.trawa-lewo::after { --trawa-proporcja: .896; left: 0;  background-image: url("../img/gen/trawy-lewo.webp");  background-position: 100% 100%; background-size: 143% 100%; }
.trawa-prawo::after{ --trawa-proporcja: .941; right: 0; background-image: url("../img/gen/trawy-prawo.webp"); background-position: 0% 100%;   background-size: 143% 100%; }
@media (max-width: 768px){ .trawa:not(.trawa-telefon)::after{ display: none; } } /* na telefonie max 2 miejsca */

/* ============================================================
   CIEMNA ZIELEŃ: tekst jasny, karty o ton jaśniejsze
   ============================================================ */
.strefa .btn-primary{ background: var(--zielen-logo); color: var(--zielen-ciemna); border-color: var(--zielen-logo);
  box-shadow: 0 8px 26px -10px rgba(var(--logo-rgb),.55); }
.strefa .btn-primary:hover{ background: color-mix(in oklch, var(--zielen-logo) 86%, #fff); box-shadow: 0 14px 36px -10px rgba(var(--logo-rgb),.7); }
.strefa-ciemna .eyebrow{ color: var(--zielen-logo-jasna); } /* tekst: #6FC700 ma tu na fakturze ok. 4,4:1, rozjaśniony odcień ma 6,9:1 */
.strefa-ciemna .eyebrow::before{ background: var(--zielen-logo); opacity: 1; }
.strefa-ciemna .lede{ color: var(--ink-soft); }

/* Dlaczego: kiełek przy nagłówku, zdjęcia gleby w karcie pH */
.dlaczego-kielek{ height: 170px; margin-bottom: 26px; border-radius: 18px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.dlaczego-kielek img{ width: 100%; height: 100%; object-fit: cover; object-position: 72% 62%; }
.ph-card{ height: auto; min-height: 440px; display: flex; align-items: flex-end;
  background: linear-gradient(155deg, color-mix(in oklch, var(--zielen-karta) 94%, #fff), var(--zielen-karta));
  border-color: rgba(var(--logo-rgb),.2); }
.ph-card .grain{ background:
  radial-gradient(420px 320px at 30% 20%, rgba(var(--logo-rgb),.09), transparent 60%),
  radial-gradient(380px 340px at 80% 85%, rgba(var(--logo-rgb),.05), transparent 60%); }
.ph-card .eyebrow, .calc-wrap .eyebrow{ color: var(--zielen-logo-jasna); }
.ph-card .eyebrow::before, .calc-wrap .eyebrow::before{ background: var(--zielen-logo-jasna); }
.ph-content{ position: relative; left: auto; right: auto; bottom: auto; padding: 32px; width: 100%; }
.ph-row{ align-items: flex-start; }
.ph-kol{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ph-kol img{ width: clamp(108px, 11vw, 158px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); }
.ph-row > svg{ margin-top: calc(clamp(108px, 11vw, 158px) / 2 - 13px); color: var(--zielen-logo); } /* strzałka na wysokości środka zdjęć */
.ph-before{ color: var(--ink-soft); }
.ph-after{ color: var(--zielen-logo-jasna); }
.ph-card .ph-content > p{ color: var(--ink-karta) !important; }
.ph-bar > span{ background: linear-gradient(90deg, var(--zielen-logo-ciemna), var(--zielen-logo)); }

/* Kalkulator: na bieli, karta w ciemnej zieleni */
.calc-wrap{ background: linear-gradient(165deg, color-mix(in oklch, var(--zielen-ciemna) 90%, var(--zielen-karta)), var(--zielen-ciemna));
  border-color: rgba(var(--ciemna-rgb),.4); box-shadow: 0 30px 70px -40px rgba(var(--ciemna-rgb),.75); }
/* karta leży w białej strefie: reguły dla ciemnego tła muszą przebić reguły .strefa-biel */
.strefa .calc-wrap h2, .strefa .calc-wrap h3{ color: var(--ink); }
.strefa .calc-wrap .lede, .calc-wrap .field label, .calc-result-label, .calc-product-spec, .calc-note{ color: var(--ink-karta); }
.strefa .calc-wrap .eyebrow{ color: var(--zielen-logo-jasna); }
.strefa .calc-wrap .eyebrow::before{ background: var(--zielen-logo-jasna); height: 1px; }
.calc-product-tag{ color: var(--zielen-logo-jasna); background: rgba(var(--logo-rgb),.08); border-color: rgba(var(--logo-rgb),.3); }
.calc-result-card{ border-left-color: var(--zielen-logo); }
.calc-result-card strong, .calc-note a{ color: var(--zielen-logo-jasna); }

/* Galeria */
.strefa-ciemna .gallery-caption{ color: var(--ink-soft); }

/* Stopka */
.site-footer h4, .footer-bottom, .footer-credit, .footer-realizacja{ color: var(--ink-soft); }
.footer-desc, .footer-links a{ color: var(--ink-soft); }
.footer-bottom{ border-top-color: rgba(255,255,255,.12); }
.footer-realizacja a{ color: var(--zielen-logo-jasna); text-decoration: underline; text-underline-offset: 3px; }
.footer-realizacja a:hover{ color: #fff; }

/* ============================================================
   BIEL: tekst ciemny, karty białe z delikatnym cieniem i obramowaniem
   ============================================================ */
.strefa-biel h2, .strefa-biel h3, .strefa-biel .ofirmie-wstep, .strefa-biel .contact-info-row strong{ color: var(--tekst-biel); }
.strefa-biel .eyebrow{ color: var(--zielen-logo-ciemna); } /* tekst w ciemnej zieleni liścia, kreska w zieleni logo */
.strefa-biel .eyebrow::before{ background: var(--zielen-logo); opacity: 1; height: 2px; }
.strefa-biel .lede, .strefa-biel .ofirmie-intro:not(.ofirmie-wstep), .strefa-biel .ofirmie-checklist li,
.strefa-biel .num-row p, .strefa-biel .contact-info-row span, .strefa-biel .contact-info-row a{ color: var(--akapit-biel); }
/* "od 2011 roku": jednolita zieleń w odcieniu logo (#6FC700 przyciemnione w OKLCH do L 0,52), bez obrysu i cienia;
   na tle sekcji min. 4,5:1 */
.strefa-biel .green-em{ color: #2E7E00; text-shadow: none; }
.strefa-biel .ofirmie-checklist li::before{ background-color: var(--zielen-logo); }
.strefa-biel .btn-ghost{ background: transparent; border-color: rgba(27,37,20,.32); color: var(--tekst-biel); backdrop-filter: none; }
.strefa-biel .btn-ghost:hover{ border-color: var(--zielen-logo); background: rgba(var(--logo-rgb),.1); }
.strefa-biel .contact-info-row{ border-top-color: var(--linia-biel); }
.strefa-biel .contact-info-row:last-child{ border-bottom-color: var(--linia-biel); }
.strefa-biel .contact-info-row .ico{ background: rgba(var(--logo-rgb),.12); border-color: rgba(var(--logo-rgb),.4); color: var(--zielen-logo-ciemna); }
.strefa-biel .contact-info-row a:hover{ color: var(--zielen-logo-ciemna); }
.strefa-biel .map-wrap{ border-color: var(--linia-biel); box-shadow: var(--cien-biel); }

/* Karty produktów: ciemnozielone, u góry pole i worek bez tła */
.card-product{ background-color: var(--zielen-ciemna); border-color: rgba(var(--logo-rgb),.18); box-shadow: 0 24px 50px -30px rgba(var(--ciemna-rgb),.7); }
.card-product h3{ color: var(--ink); }
.card-product p{ color: var(--ink-soft); }
.card-product .pill{ color: var(--ink-soft); border-color: rgba(255,255,255,.16); }
.card-img{ display: flex; align-items: flex-end; justify-content: center;
  background: url("../img/gen/pole-tlo.webp") center 55% / cover; border-bottom-color: rgba(var(--logo-rgb),.18); }
.card-img img{ width: auto; height: 90%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.35)); transform-origin: 50% 100%; }

/* Kroki "Jak pracujemy" */
.strefa-biel .num-row{ background: var(--karta-biel); border: 1px solid var(--linia-biel); border-radius: 16px;
  padding: 22px 24px; margin-bottom: 12px; box-shadow: var(--cien-biel); }
.strefa-biel .num-row:last-child{ border-bottom: 1px solid var(--linia-biel); margin-bottom: 0; }
.strefa-biel .num-row:hover{ background: var(--karta-biel); padding-left: 32px; }
.strefa-biel .num-row .n, .strefa-biel .num-row:hover .n{ color: var(--zielen-logo-ciemna); opacity: 1; }

/* Opinie */
.sekcja-opinie .section-head{ margin-bottom: 40px; }
.strefa-biel .testimonial-card{ background: var(--karta-biel); border-color: var(--linia-biel); box-shadow: var(--cien-biel); }
.strefa-biel .testimonial-card:hover{ border-color: rgba(var(--logo-rgb),.5); }
.strefa-biel .testimonial-card blockquote, .strefa-biel .testimonial-author strong{ color: var(--tekst-biel); }
.strefa-biel .testimonial-author span, .strefa-biel .testimonial-platform{ color: var(--akapit-biel); }
/* gwiazdki w żółtym ze słońca na małej plakietce w ciemnej zieleni (jak słońce nad liściem w logo): 10,5:1;
   sam żółty na białej karcie miałby 1,1:1 */
.strefa-biel .gwiazdki{ display: inline-block; color: var(--zolty-logo); background: var(--zielen-ciemna);
  padding: 3px 9px 4px; border-radius: 999px; line-height: 1; letter-spacing: .08em; margin-right: 6px; }
.strefa-biel .testimonial-avatar{ background: linear-gradient(135deg, var(--zielen-ciemna), var(--zielen-logo-ciemna)); } /* biały inicjał min. 4,5:1 */
.strefa-biel .testimonials-dots button{ background: rgba(27,37,20,.25); }
.strefa-biel .testimonials-dots button.active{ background: var(--zielen-logo); }

/* FAQ */
.strefa-biel .faq-item{ background: var(--karta-biel); border-color: var(--linia-biel); box-shadow: var(--cien-biel); }
.strefa-biel .faq-item:hover{ background: var(--karta-biel); border-color: rgba(var(--logo-rgb),.5); box-shadow: var(--cien-biel); }
.strefa-biel .faq-btn{ color: var(--tekst-biel); }
.strefa-biel .faq-btn:focus-visible{ outline-color: var(--zielen-logo-ciemna); }
.strefa-biel .faq-ico{ background: rgba(var(--logo-rgb),.12); border-color: rgba(var(--logo-rgb),.4); color: var(--zielen-logo-ciemna); }
.strefa-biel .faq-a p{ color: var(--akapit-biel); }
.strefa-biel .faq-a a{ color: var(--zielen-logo-ciemna); }

/* Formularz */
.strefa .form-card{ background: var(--karta-biel); border-color: var(--linia-biel); box-shadow: var(--cien-biel); }
.strefa .form-card .field label, .strefa .form-note{ color: var(--akapit-biel); }
.strefa .form-card .field input, .strefa .form-card .field textarea, .strefa .form-card .field select{
  background: var(--biel); border-color: rgba(27,37,20,.2); color: var(--tekst-biel); }
.strefa .form-card .field input::placeholder, .strefa .form-card .field textarea::placeholder{ color: #6A7064; }
.strefa .form-card .field select option{ background: #fff; color: var(--tekst-biel); }
.strefa .form-card .field input:focus, .strefa .form-card .field textarea:focus, .strefa .form-card .field select:focus{
  border-color: var(--zielen-logo); background: #fff; box-shadow: 0 0 0 4px rgba(var(--logo-rgb),.18); }
.strefa .form-success{ color: var(--zielen-logo-ciemna); background: rgba(var(--logo-rgb),.1); border-color: rgba(var(--logo-rgb),.35); }
.strefa .form-error{ color: #B42318; background: rgba(180,35,24,.07); border-color: rgba(180,35,24,.3); }

@media (max-width: 768px){
  .dlaczego-kielek{ height: 140px; margin-bottom: 20px; }
  .ph-card{ min-height: 300px; }
  .strefa-biel .num-row{ padding: 18px 18px; }
  .strefa-biel .num-row:hover{ padding-left: 18px; }
}

/* ============================================================
   CIEMNE SEKCJE: "zielona poświata w czerni"
   radial-gradient(ellipse 80% 70% at X% 40%, #3A6A18 0%, #22410F 45%, czerń 100%)
   Czerń = zmierzony kolor paska haseł i stopki: rgb(17,19,18) = #111312 (--surface), więc pasek,
   stopka i dno poświaty są jednym kolorem (pasek i stopka bez zmian).
   Brzegi strefy są wymuszone liniowymi nakładkami (pełny kolor przez --brzeg-*-pelny,
   potem zanik przez --brzeg-zanik):
   - przy BIAŁEJ sekcji brzeg = #1C340E (przejście biel ↔ ciemne w OKLCH nie przechodzi przez szarość),
   - przy czarnym pasku haseł / stopce brzeg = czerń, bez widocznej granicy.
   ============================================================ */
:root{
  --czern: var(--surface);      /* #111312 */
  --poswiata-1: #3A6A18;
  --poswiata-2: #22410F;
  --zielen-brzeg: #1C340E;      /* brzeg ciemnej sekcji przy bieli */
  --brzeg-zanik: 260px;
}
@media (max-width: 768px){ :root{ --brzeg-zanik: 150px; } }

.strefa-ciemna.poswiata{
  --brzeg-gora: var(--zielen-brzeg); --brzeg-dol: var(--zielen-brzeg);
  --brzeg-gora-pelny: 0px; --brzeg-dol-pelny: 0px; --brzeg-gora-zanik: var(--brzeg-zanik); --brzeg-dol-zanik: var(--brzeg-zanik);
  background-color: var(--czern);
  background-image:
    var(--faktura-ciemna),
    linear-gradient(to bottom, var(--brzeg-gora) 0, var(--brzeg-gora) var(--brzeg-gora-pelny),
      color-mix(in srgb, var(--brzeg-gora) 0%, transparent) calc(var(--brzeg-gora-pelny) + var(--brzeg-gora-zanik))),
    linear-gradient(to top, var(--brzeg-dol) 0, var(--brzeg-dol) var(--brzeg-dol-pelny),
      color-mix(in srgb, var(--brzeg-dol) 0%, transparent) calc(var(--brzeg-dol-pelny) + var(--brzeg-dol-zanik))),
    radial-gradient(ellipse 80% 70% at var(--poswiata-x) 40%, var(--poswiata-1) 0%, var(--poswiata-2) 45%, var(--czern) 100%);
}
/* Czytelność na poświacie: w jej środku (#3A6A18) biały ma tylko 6,5:1, więc półprzezroczyste akapity
   i jasnozielone napisy są tu jaśniejsze (min. 4,5:1 także w środku poświaty i na karcie kalkulatora) */
.poswiata{ --ink-soft: rgba(243,245,241,.92); --ink-karta: rgba(243,245,241,.94); --zielen-logo-jasna: #C4F7A0; }
.strefa-kalk{ --ink-karta: #F3F5F1; } /* etykiety pól na półprzezroczystej karcie nad środkiem poświaty */

/* Dlaczego: poświata z lewej; góra przy bieli Asortymentu (pełny #1C340E pod szwem), dół w czerń przy Kalkulatorze */
.strefa-dlaczego{ --poswiata-x: 30%; }
.strefa-dlaczego.poswiata{ --brzeg-gora-pelny: var(--odstep-trawa); --brzeg-dol: var(--czern); }
/* Kalkulator: cała sekcja ciemna, poświata z prawej; góra w czerni (styka się z ciemnym Dlaczego), dół przy bieli */
.strefa-kalk{ --poswiata-x: 70%; }
.strefa-kalk.poswiata{ --brzeg-gora: var(--czern); --brzeg-dol-pelny: 100px; }
/* Galeria: poświata z lewej */
.strefa-galeria{ --poswiata-x: 30%; }
.strefa-galeria.poswiata{ --brzeg-gora-pelny: var(--odstep-trawa); --brzeg-dol-pelny: var(--odstep-trawa); }
/* Galeria: wyraźny kontrast jasnej zieleni z czernią. Brzegi przy bieli nadal #1C340E (pełne pod szwami),
   ale zanik 140 px zamiast 260 px, bo widoczne tło ma tylko ok. 1000 px i dłuższy zanik zalewał czerń.
   Druga plama (półprzezroczysta) leży NAD pierwszą: pierwsza kończy się pełną czernią, więc pod nią byłaby niewidoczna. */
.strefa-galeria.poswiata{
  --brzeg-gora-zanik: 140px; --brzeg-dol-zanik: 140px;
  background-color: #0E120D;
  background-image:
    var(--faktura-ciemna),
    linear-gradient(to bottom, var(--brzeg-gora) 0, var(--brzeg-gora) var(--brzeg-gora-pelny),
      color-mix(in srgb, var(--brzeg-gora) 0%, transparent) calc(var(--brzeg-gora-pelny) + var(--brzeg-gora-zanik))),
    linear-gradient(to top, var(--brzeg-dol) 0, var(--brzeg-dol) var(--brzeg-dol-pelny),
      color-mix(in srgb, var(--brzeg-dol) 0%, transparent) calc(var(--brzeg-dol-pelny) + var(--brzeg-dol-zanik))),
    radial-gradient(ellipse 45% 50% at 85% 85%, rgba(63,122,28,.45) 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 20% 30%, #3F7A1C 0%, #1F3B0E 40%, #0E120D 75%);
}
/* Kontakt + Znajdź nas: jedna całość, poświata z prawej; góra przy bieli Pytań (pełny #1C340E pod szwem), dół w czerń stopki */
.strefa-kontakt{ --poswiata-x: 70%; }
.strefa-kontakt.poswiata{ --brzeg-gora-pelny: var(--odstep-trawa); --brzeg-dol: var(--czern); --brzeg-dol-zanik: 320px; }

/* przejścia biel ↔ ciemne: między bielą a #1C340E, na całej pustej przestrzeni (odstępy bez zmian) */
#dlaczego.szew  { --szew-od: var(--biel); --szew-do: var(--zielen-brzeg); }
#kontakt.szew   { --szew-od: var(--biel); --szew-do: var(--zielen-brzeg); padding-top: var(--odstep-trawa); }
#faq            { padding-bottom: var(--odstep-trawa); } /* miejsce na szew do Kontaktu */
#o-firmie.szew  { --szew-od: var(--zielen-brzeg); --szew-do: var(--biel); --szew-nad: 100px; --szew-pod: 120px; }
@media (max-width: 768px){ #o-firmie.szew{ --szew-pod: 80px; } }
.sekcja-galeria { --szew-do: var(--zielen-brzeg); }
.sekcja-opinie  { --szew-od: var(--zielen-brzeg); }

/* Kalkulator: karta półprzezroczysta na poświacie */
.calc-wrap{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 30px 70px -40px rgba(0,0,0,.55); }

/* Karty produktów: ta sama poświata w małej skali, u góry karty */
.card-product{ --tlo-karty-produktu: radial-gradient(ellipse 80% 70% at 50% 25%, var(--poswiata-1) 0%, var(--poswiata-2) 45%, var(--czern) 100%);
  background: var(--tlo-karty-produktu);
  border-color: rgba(255,255,255,.10); box-shadow: 0 24px 50px -30px rgba(0,0,0,.55); }
/* Najechanie: stara reguła .card:hover podmieniała tło na jasny, półprzezroczysty gradient (na bieli tekst znikał).
   Tło zostaje poświatą; efekt tylko: uniesienie o 4 px, mocniejszy cień, jaśniejsza ramka. Teksty bez zmian. */
.card-product:hover, .card-product:focus-within, .card-product:active{
  background: var(--tlo-karty-produktu); background-color: var(--czern);
  transform: translateY(-4px); border-color: rgba(126,217,87,.35); box-shadow: 0 36px 64px -30px rgba(0,0,0,.72); }
.card-product:hover .card-img img{ transform: none; }
/* ekrany dotykowe: po dotknięciu karta nie zostaje w stanie najechania */
@media (hover: none){ .card-product:hover, .card-product:active{ transform: none; border-color: rgba(255,255,255,.10); box-shadow: 0 24px 50px -30px rgba(0,0,0,.55); } }

/* Przycisk "do góry": po najechaniu zostaje ciemny (stare rgba(glow,.1) na bieli dawało jasne kółko i znikającą strzałkę) */
.back-to-top:hover{ background: rgba(17,19,18,.85); border-color: rgba(126,217,87,.45); }

/* Kontakt i mapa na ciemnym */
.strefa-kontakt{ --jasny: #F2F4EE; --jasny-akapit: rgba(242,244,238,.92); } /* .72 miało w środku poświaty tylko 3,7:1 */
.strefa-kontakt h2, .strefa-kontakt .contact-info-row strong{ color: var(--jasny); }
.strefa-kontakt .lede, .strefa-kontakt .contact-info-row span, .strefa-kontakt .contact-info-row a{ color: var(--jasny-akapit); }
.strefa-kontakt .contact-info-row a:hover{ color: #7ED957; }
.strefa-kontakt .contact-info-row{ border-top-color: rgba(255,255,255,.10); }
.strefa-kontakt .contact-info-row:last-child{ border-bottom-color: rgba(255,255,255,.10); }
.strefa-kontakt .contact-info-row .ico{ background: rgba(126,217,87,.12); border-color: rgba(126,217,87,.28); color: #7ED957; }
.strefa-kontakt .map-wrap{ border-color: rgba(255,255,255,.10); box-shadow: 0 28px 60px -30px rgba(0,0,0,.75); }

/* ---------- O firmie: nagłówek i wstęp | zdjęcie zakładu z boku, 3 kolumny, pasek z 3 punktami ---------- */
.ofirmie-wstep{ font-size: clamp(1.12rem, 1.5vw, 1.28rem); line-height: 1.65; color: var(--ink); }
.ofirmie-gora{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 64px; align-items: center; }
.ofirmie-gora h2{ margin-bottom: 0; }
.ofirmie-gora .ofirmie-wstep{ max-width: 46ch; margin: 28px 0 0; }
/* zdjęcie ma w pliku zaokrąglone narożniki (ok. 35 px na 1484 px), więc promień w procentach rośnie i maleje razem z nim */
.ofirmie-zdjecie{ margin: 0; position: relative; overflow: hidden; aspect-ratio: 1484 / 826; border-radius: 2.6% / 4.7%;
  background: var(--zielen-ciemna);
  box-shadow: 0 0 0 1px rgba(27,37,20,.08), 0 2px 4px rgba(27,37,20,.06), 0 48px 90px -48px rgba(27,37,20,.6); }
.ofirmie-zdjecie img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ofirmie-kolumny{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 56px; }
.ofirmie-kolumny .ofirmie-intro{ position: relative; max-width: none; margin: 0; padding-top: 22px; font-size: 1rem; line-height: 1.75;
  border-top: 1px solid var(--linia-biel); }
.ofirmie-kolumny .ofirmie-intro::before{ content: ''; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--zielen-logo); }
.ofirmie-uklad .ofirmie-checklist{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 48px;
  background: var(--karta-biel); border: 1px solid var(--linia-biel); border-radius: 16px; box-shadow: var(--cien-biel); }
.ofirmie-uklad .ofirmie-checklist li{ padding: 22px 26px; font-size: 14.5px; }
.ofirmie-uklad .ofirmie-checklist li + li{ border-left: 1px solid var(--linia-biel); }
.bez-lamania{ white-space: nowrap; } /* nazwa firmy nie łamie się na myślniku */
@media (max-width: 900px){
  .ofirmie-gora{ grid-template-columns: 1fr; }
  .ofirmie-gora .ofirmie-wstep{ max-width: 60ch; }
  .ofirmie-kolumny{ grid-template-columns: 1fr; gap: 28px; max-width: 68ch; }
  .ofirmie-uklad .ofirmie-checklist{ grid-template-columns: 1fr; }
  .ofirmie-uklad .ofirmie-checklist li + li{ border-left: 0; border-top: 1px solid var(--linia-biel); }
}
@media (max-width: 768px){
  .ofirmie-kolumny{ margin-top: 40px; }
  .ofirmie-uklad .ofirmie-checklist{ margin-top: 36px; }
  .ofirmie-uklad .ofirmie-checklist li{ padding: 18px 20px; }
}

/* ---------- Jak pracujemy: oś czasu (tło zostaje białe) ----------
   Numery w kółkach w ciemnej zieleni, połączone linią w zieleni logo; linia wychodzi z kółka,
   przechodzi przez przerwę między kartami i wchodzi w kółko następnej karty.
   Karty z mocniejszym cieniem i ramką, żeby nie zlewały się z białym tłem. */
.strefa-biel .kroki .num-row{ --kolko: 40px; --karta-pad: 24px; --karta-pad-g: 22px; --przerwa: 14px;
  position: relative; align-items: flex-start; padding: var(--karta-pad-g) var(--karta-pad); margin-bottom: var(--przerwa);
  border-color: rgba(27,37,20,.14);
  box-shadow: 0 1px 2px rgba(27,37,20,.06), 0 18px 40px -22px rgba(27,37,20,.40);
  transition: border-color .3s, box-shadow .35s var(--ease); }
.strefa-biel .kroki .num-row:last-child{ margin-bottom: 0; }
.strefa-biel .kroki .num-row:hover{ padding-left: var(--karta-pad); border-color: rgba(var(--logo-rgb),.55);
  box-shadow: 0 1px 2px rgba(27,37,20,.06), 0 22px 46px -22px rgba(27,37,20,.48); }
.strefa-biel .kroki .num-row .n, .strefa-biel .kroki .num-row:hover .n{
  position: relative; z-index: 2; width: var(--kolko); height: var(--kolko); border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--zielen-ciemna); color: var(--zielen-logo-jasna); /* 6,6:1 */
  font-size: 1.02rem; line-height: 1; box-shadow: 0 0 0 4px rgba(var(--logo-rgb),.14); }
.strefa-biel .kroki .num-row:not(:last-child)::after{ content: ""; position: absolute; z-index: 1;
  left: calc(var(--karta-pad) + var(--kolko) / 2 - 1px); width: 2px;
  top: calc(var(--karta-pad-g) + var(--kolko));
  bottom: calc(-1 * (var(--przerwa) + var(--karta-pad-g) + 1px));
  background: linear-gradient(to bottom, var(--zielen-logo), rgba(var(--logo-rgb),.45)); border-radius: 2px; pointer-events: none; }
@media (max-width: 768px){
  .strefa-biel .kroki .num-row{ --kolko: 34px; --karta-pad: 18px; --karta-pad-g: 18px; }
  .strefa-biel .kroki .num-row .n, .strefa-biel .kroki .num-row:hover .n{ font-size: .92rem; }
}

/* ============================================================
   ZIELONO-CZARNE TŁO POD HERO
   Wszystko pod hero (od paska haseł do stopki) leży w .tlo-strony:
   - baza: niemal czarna #080B07 (tło strony; hero zakrywa ją filmem, więc hero się nie zmienia),
   - poświaty: po jednej na sekcję, w miejscu dawnego szwu (section::before), naprzemiennie z lewej
     i z prawej, jasne centrum częściowo poza ekranem; leżą w warstwie z-index:-1 za całą treścią,
     więc zachodzą na sąsiednie sekcje i nigdzie się nie urywają,
   - strefy nie mają już własnego koloru, zostaje na nich tylko faktura (ziarno + wyciszone linie),
   - kolory tekstów i kart przełączone przez zmienne; układ, wymiary i zaokrąglenia bez zmian.
   ============================================================ */
body{ background: #080B07; }
.tlo-strony{
  /* kolor źródłowy poświat: jasna, żółtawa zieleń z napisu w logo */
  --swiatlo: 140,222,18;            /* #8CDE12 */
  --p-w: 1800px; --p-h: 1400px;     /* rozmiar poświaty */
  --p-x: -940px;                    /* centrum 40 px poza krawędzią ekranu: jasny brzeg widać, pod tekstem już tylko zanik */
}
@media (max-width: 768px){ .tlo-strony{ --p-w: 900px; --p-h: 1000px; --p-x: -520px; } } /* centrum 70 px poza ekranem */

/* strefy: bez własnego koloru i dawnych gradientów, zostaje faktura z wyciszonymi liniami */
.tlo-strony .strefa, .tlo-strony .strefa.poswiata{ background-color: transparent; background-image: var(--faktura-ciemna); }

/* poświata sekcji (zastępuje dawne przejścia do bieli w .szew::before) */
.tlo-strony section::before{
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 50%; bottom: auto; left: var(--p-x); right: auto;
  width: var(--p-w); height: var(--p-h); margin-top: calc(var(--p-h) / -2);
  background: radial-gradient(closest-side,
    rgba(170,238,60,.90) 0%,
    rgba(var(--swiatlo),.68) 6%,
    rgba(122,214,24,.46) 14%,
    rgba(96,198,28,.28) 26%,
    rgba(74,178,28,.155) 40%,
    rgba(54,150,26,.07) 58%,
    rgba(40,120,22,.022) 78%,
    rgba(40,120,22,0) 100%);
  -webkit-mask-image: none; mask-image: none;
}
/* naprzemiennie: lewa / prawa */
.tlo-strony #dlaczego::before, .tlo-strony #o-firmie::before, .tlo-strony .sekcja-galeria::before,
.tlo-strony #faq::before, .tlo-strony #lokalizacja::before{ left: auto; right: var(--p-x); }
.tlo-strony #faq::before{ top: var(--poswiata-top, 50%); }   /* JS: pozycja przy zamkniętych pytaniach, poświata nie jedzie przy otwieraniu */

/* kolory: nagłówki ciepła biel, opisy jasna szarość, akcenty jasna zieleń; karty ciemne */
.tlo-strony .strefa, .tlo-strony .strefa.poswiata{
  --ink: #F5F5ED; --ink-soft: #D0D5CA; --ink-karta: #D0D5CA; --ink-faint: #AEB6A6;
  --tekst-biel: #F5F5ED; --akapit-biel: #D0D5CA;
  --karta-biel: rgba(18,24,15,.86);           /* ciemna karta, lekko jaśniejsza od czerni */
  --linia-biel: rgba(245,245,237,.13);        /* cienkie jasne obramowanie */
  --cien-biel: none;                          /* bez ciężkich szarych cieni */
  --zielen-logo: #8CDE12; --logo-rgb: 140,222,18;
  --zielen-logo-jasna: #A3E844;               /* małe napisy i ikony */
  --zielen-logo-ciemna: #A3E844;              /* dawny kolor akcentu na bieli -> jasna zieleń */
  --zielen-ciemna: #15230B;                   /* tło kółek z numerami, plakietka gwiazdek */
  --jasny: #F5F5ED; --jasny-akapit: #D0D5CA;
}
.tlo-strony .site-footer{ background: transparent; }

/* „od 2011 roku”: jasna zieleń, bez obrysu i cienia, kursywa bez zmian */
.tlo-strony .green-em{ color: #A3E844; text-shadow: none; }

/* przyciski: główny jasna zieleń + bardzo ciemny tekst; obrysowy jasny tekst + delikatna ramka */
.tlo-strony .btn-primary{ background: #8CDE12; border-color: #8CDE12; color: #0A1205; box-shadow: 0 10px 30px -12px rgba(var(--swiatlo),.55); }
.tlo-strony .btn-primary:hover{ background: #A6EC45; border-color: #A6EC45; color: #0A1205; box-shadow: 0 14px 36px -12px rgba(var(--swiatlo),.7); }
.tlo-strony .btn-ghost{ background: transparent; border-color: rgba(245,245,237,.34); color: #F5F5ED; }
.tlo-strony .btn-ghost:hover{ background: rgba(var(--swiatlo),.10); border-color: #8CDE12; color: #F5F5ED; }

/* karty „Jak pracujemy”: ciemne, cienka jasna ramka, bez cieni */
.tlo-strony .kroki .num-row{ border-color: rgba(245,245,237,.13); box-shadow: none; }
.tlo-strony .kroki .num-row:hover{ border-color: rgba(var(--swiatlo),.5); box-shadow: none; }
.tlo-strony .kroki .num-row .n, .tlo-strony .kroki .num-row:hover .n{ background: #15230B; color: #A3E844; box-shadow: 0 0 0 4px rgba(var(--swiatlo),.16); }
/* opinie */
.tlo-strony .testimonial-avatar{ background: linear-gradient(135deg, #1F3D09, #356A0E); }
.tlo-strony .testimonials-dots button{ background: rgba(245,245,237,.28); }
.tlo-strony .testimonials-dots button.active{ background: #8CDE12; }
/* pasek zalet pod „O firmie”: ptaszek ciemny na jasnej zieleni */
.tlo-strony .ofirmie-checklist li::before{ background-color: #8CDE12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3.5 3.5L11 1' stroke='%230A1205' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tlo-strony .ofirmie-zdjecie{ box-shadow: 0 0 0 1px rgba(245,245,237,.10), 0 40px 80px -44px rgba(0,0,0,.8); }

/* karty produktów i karta z pH: ciemne, delikatna poświata w nowej zieleni */
.tlo-strony .card-product{
  --tlo-karty-produktu: radial-gradient(ellipse 80% 70% at 50% 22%, rgba(var(--swiatlo),.20) 0%, rgba(110,200,20,.07) 45%, rgba(0,0,0,0) 75%), linear-gradient(#10160D, #0B0F09);
  --czern: #0B0F09; border-color: rgba(245,245,237,.12); }
.tlo-strony .card-product .pill{ border-color: rgba(245,245,237,.18); }
.tlo-strony .ph-card{ background: linear-gradient(155deg, #141C10, #0C110A); border-color: rgba(245,245,237,.12); }

/* kalkulator: wyraźne granice pól i czytelne wartości */
.tlo-strony .calc-wrap .field input, .tlo-strony .calc-wrap .field select{
  background: rgba(0,0,0,.38); border: 1px solid rgba(245,245,237,.30); color: #F5F5ED; }
.tlo-strony .calc-wrap .field input::placeholder{ color: #A2AA9A; }
.tlo-strony .calc-wrap .field input:focus, .tlo-strony .calc-wrap .field select:focus{
  border-color: #8CDE12; background: rgba(0,0,0,.45); box-shadow: 0 0 0 4px rgba(var(--swiatlo),.16); }
.tlo-strony .calc-wrap .field select option{ background: #111510; color: #F5F5ED; }

/* kontakt: ikonki w jasnej zieleni */
.tlo-strony .strefa-kontakt .contact-info-row .ico{ background: rgba(var(--swiatlo),.12); border-color: rgba(var(--swiatlo),.30); color: #A3E844; }

/* formularz zostaje w jasnej karcie: w jej wnętrzu zmienne wracają do jasnych wartości */
.tlo-strony .form-card{
  --karta-biel: #FFFFFF; --tekst-biel: #1B2514; --akapit-biel: #51584D; --linia-biel: rgba(27,37,20,.11);
  --cien-biel: 0 30px 70px -36px rgba(0,0,0,.75); --zielen-logo-ciemna: #237700; --biel: #FAF9F4;
  --ink: #1B2514; --ink-soft: #51584D; --ink-faint: #6A7064; }

/* ---------- Komunikaty walidacji (kalkulator i formularz) ---------- */
.pole-blad{ display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 0; font-size: 13px; line-height: 1.45; font-weight: 500; }
.pole-blad[hidden]{ display: none; }
.pole-blad::before{ content: "!"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1; background: currentColor; }
/* kalkulator (ciemna karta): jasnoczerwony tekst, zmierzone 6,7–9,1:1 */
.calc-wrap .pole-blad{ color: #FFB4A6; }
.calc-wrap .pole-blad::before{ color: #FFB4A6; -webkit-text-fill-color: #1B1F19; }
.tlo-strony .calc-wrap .field input[aria-invalid="true"]{ border-color: #FF8F80; box-shadow: 0 0 0 3px rgba(255,143,128,.18); }
/* formularz (jasna karta): ciemnoczerwony tekst, zmierzone 6,6:1 */
.form-card .pole-blad{ color: #B42318; }
.form-card .pole-blad::before{ color: #B42318; -webkit-text-fill-color: #FFFFFF; }
.tlo-strony .form-card .field input[aria-invalid="true"]{ border-color: #B42318; box-shadow: 0 0 0 3px rgba(180,35,24,.14); }
/* fokus przenoszony do pola z błędem: pole i jego etykieta nie chowają się pod przyklejonym menu */
.form-card .field input, .form-card .field textarea, .calc-wrap .field input{ scroll-margin-top: 150px; scroll-margin-bottom: 90px; }

/* ---------- Misc ---------- */
::selection{ background: rgba(111,212,94,.32); color: #fff; }

/* ---------- Kontrola przed publikacją (25.09.2026) ---------- */
/* menu mobilne: przycisk „Zapytaj o wycenę” z czytelnym tekstem przycisku (był dziedziczony kolor linków menu, 2,98:1) */
.mobile-menu .btn,
.mobile-menu .btn:hover,
.mobile-menu .btn:focus-visible{ color: #f7fbf4; font-family: var(--sans); font-size: 20px; font-weight: 700; padding: 16px 32px; }   /* duży tekst: próg 3:1 */

/* FAQ: otwieranie pytania nie przesuwa strony (zakotwiczanie przewijania przeglądarki) */
#faq{ overflow-anchor: none; }

/* hero na telefonie: oba przyciski mieszczą tekst, a główny także strzałkę */
@media (max-width: 560px){
  /* szerokość wg treści (główny przycisk jest dłuższy); na bardzo wąskich ekranach przyciski przechodzą do 2 wierszy */
  .hero-actions .btn{ flex: 1 1 auto; min-width: max-content; padding-left: 16px; padding-right: 16px; }
  .hero-actions .btn svg{ flex-shrink: 0; }
}

/* kalkulator poniżej 1200 px: 2 kolumny, listy na całą szerokość — opcje list się nie ucinają */
@media (max-width: 1199px){
  .calc-fields{ grid-template-columns: repeat(2, 1fr); }
  .calc-fields > .field:nth-child(n+3){ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .calc-fields{ grid-template-columns: 1fr; }
}

/* telefon/tablet: nagłówek sekcji Produkty nie chowa się pod paskiem menu po kliknięciu linku */
@media (max-width: 980px){
  #produkty{ scroll-margin-top: 16px; }
}

/* widoczny fokus z klawiatury: miniatury galerii, zamykanie podglądu, mapa */
.gallery-item:focus-visible{ outline: 3px solid var(--green-glow); outline-offset: 3px; }
.lightbox-close:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; opacity: 1; }
.map-wrap.fokus, .map-wrap:focus-within{ outline: 3px solid var(--green-glow); outline-offset: 3px; }

/* ============================================================
   Poprawki po przeglądzie zrzutów (25.09.2026)
   ============================================================ */
/* telefon/tablet: karta produktu nie dostaje ogólnego paddingu .card (26px 22px), który sumował się
   z wcięciem tekstu 28px (razem 50px); zdjęcie znów na całą szerokość karty jak na desktopie */
@media (max-width: 768px){
  .card-product{ padding: 0; }
  .card-product h3, .card-product p, .card-product .tag-row{ padding-left: 22px; padding-right: 22px; }
  /* Kalkulator: górny i dolny odstęp mniejszy o ok. 28% (100 → 72px), żeby nie był największą przerwą */
  #kalkulator{ padding: 72px 0; }
  #o-firmie{ padding-top: 64px; }
  #o-firmie.szew{ --szew-nad: 72px; --szew-pod: 64px; }
  .strefa-kalk.poswiata{ --brzeg-dol-pelny: 72px; } /* pełny kolor brzegu = dolny odstęp kalkulatora */
}
/* telefon: stopka — Nawigacja i Produkty obok siebie, kontakt pod nimi */
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-grid > .footer-col-brand, .footer-grid > div:last-child{ grid-column: 1 / -1; }
}

/* „Zapytaj o wycenę” prowadzi do formularza; rezerwa na przyklejony nagłówek, gdy JS nie działa
   (z JS pozycja liczona z rzeczywistej wysokości nagłówka) */
#formularz-wyceny{ scroll-margin-top: 110px; }
@media (max-width: 980px){ #formularz-wyceny{ scroll-margin-top: 106px; } }
#formularz-wyceny:focus{ outline: none; }

/* telefon (do 767 px): bez sekcji „Jak pracujemy” i bez zdjęcia z Manitou w galerii */
@media (max-width: 767px){
  #proces{ display: none; }
  /* „O firmie” przejmuje dolny odstęp „Jak pracujemy”, na którym zaczyna się szew do galerii */
  #o-firmie{ padding-bottom: var(--odstep-trawa); }
  .gallery-item.ukryj-na-telefonie{ display: none; }
}
/* telefon/tablet: po zmniejszeniu odstępów (64 px) nagłówek zasłaniał nadtytuł po kliknięciu w menu —
   rezerwa, żeby „O firmie”, „Asortyment” i „Kontakt” lądowały ok. 18 px pod nagłówkiem */
@media (max-width: 768px){
  #o-firmie, #kontakt, #produkty{ scroll-margin-top: 24px; }
}

/* telefon (do 767 px): bez zielonego przycisku ze strzałką w nagłówku — wycena jest w menu i w hero */
@media (max-width: 767px){
  .nav-cta .btn-primary{ display: none; }
}

/* RODO: link do polityki prywatności w stopce i przy zgodzie w formularzu */
/* stopka: link tuż za „© 2026 …”, tym samym stylem co tekst paska, oddzielony kropką; „Realizacja” zostaje po prawej */
.footer-polityka{ color: var(--ink-soft); margin-right: auto; }
.footer-polityka::before{ content: "·"; display: inline-block; margin-right: 12px; color: var(--ink-faint); text-decoration: none; }
.footer-polityka:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px){ .footer-polityka::before{ display: none; } }
.form-note a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-note a:hover{ color: var(--zielen-logo-ciemna); }
.footer-polityka:focus-visible, .form-note a:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }

/* opinie na telefonie i ekranach dotykowych: zwykłe przewijanie w bok z przyciąganiem do karty — palec obsługuje przeglądarka
   (JS: tryb przewijania; ten sam warunek). Padding/margines: miejsce na cień kart, układ bez zmian. */
@media (hover: none) and (pointer: coarse), (max-width: 768px){
  .testimonials-track{ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; transform: none !important; transition: none; will-change: auto;
    padding: 8px 0 24px; margin: -8px 0 -24px; }
  .testimonials-track::-webkit-scrollbar{ display: none; }
  .testimonial-card{ scroll-snap-align: start; scroll-snap-stop: always; }
}

/* ============================================================
   PRODUKTY NA TELEFONIE: karty są jedna pod drugą, więc każda wjeżdża osobno, gdy dojdzie do niej przewijanie
   (JS dodaje .osobno do siatki i .in do karty). Kolejność: karta → worek „stawiany” na polu → nazwa, opis, parametry.
   ============================================================ */
[data-reveal-stagger].osobno > .in{ opacity: 1; transform: none; }   /* po obróceniu telefonu / poszerzeniu okna */
@media (max-width: 767px){
  #produkty .osobno > .card-product{ opacity: 0; transform: translateY(48px) scale(.97); transform-origin: 50% 0;
    transition: opacity .7s var(--ease), transform .9s var(--ease), border-color .4s, box-shadow .5s; transition-delay: 0s; }
  #produkty .osobno > .card-product.in{ opacity: 1; transform: none; }
  #produkty .osobno > .card-product .card-img img{ opacity: 0; transform: translateY(22%) scale(.94);
    transition: opacity .6s var(--ease) .18s, transform 1s var(--ease) .18s; }
  #produkty .osobno > .card-product.in .card-img img{ opacity: 1; transform: none; }
  #produkty .osobno > .card-product h3,
  #produkty .osobno > .card-product p,
  #produkty .osobno > .card-product .pill{ opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
  #produkty .osobno > .card-product.in h3,
  #produkty .osobno > .card-product.in p,
  #produkty .osobno > .card-product.in .pill{ opacity: 1; transform: none; }
  #produkty .osobno > .card-product.in h3{ transition-delay: .32s; }
  #produkty .osobno > .card-product.in p{ transition-delay: .4s; }
  #produkty .osobno > .card-product.in .pill:nth-child(1){ transition-delay: .5s; }
  #produkty .osobno > .card-product.in .pill:nth-child(2){ transition-delay: .56s; }
  #produkty .osobno > .card-product.in .pill:nth-child(3){ transition-delay: .62s; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce){
  #produkty .osobno > .card-product,
  #produkty .osobno > .card-product .card-img img,
  #produkty .osobno > .card-product h3,
  #produkty .osobno > .card-product p,
  #produkty .osobno > .card-product .pill{ opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   TELEFON: odsłanianie widoczne, ale nadążające za szybkim przewijaniem.
   JS uruchamia je, gdy element wchodzi na ekran (niezależnie od jego wysokości — wcześniej czekało na 16% elementu),
   tu: wyraźny, ale krótszy ruch. FAQ: .card nadpisywało przejście opacity, więc pytania wyskakiwały bez przenikania.
   ============================================================ */
@media (max-width: 767px){
  [data-reveal]{ transform: translateY(28px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
  [data-reveal-stagger] > *{ transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .7s var(--ease), border-color .4s, background .4s, box-shadow .5s; }
  [data-reveal-stagger].in > *:nth-child(1){ transition-delay: 0s; }
  [data-reveal-stagger].in > *:nth-child(2){ transition-delay: .07s; }
  [data-reveal-stagger].in > *:nth-child(3){ transition-delay: .14s; }
  [data-reveal-stagger].in > *:nth-child(4){ transition-delay: .21s; }
  [data-reveal-stagger].in > *:nth-child(5){ transition-delay: .28s; }
  [data-reveal-stagger].in > *:nth-child(6){ transition-delay: .35s; }
  /* przyciski w odsłanianych blokach na własnej warstwie — iPhone odmalowuje je razem z przenikaniem (jak w hero) */
  [data-reveal] .btn{ will-change: transform; }
  /* karty produktów: karta → worek → nazwa, opis, parametry */
  #produkty .osobno > .card-product{ transform: translateY(40px) scale(.97); transition: opacity .7s var(--ease), transform .85s var(--ease), border-color .4s, box-shadow .5s; }
  #produkty .osobno > .card-product .card-img img{ transition: opacity .6s var(--ease) .14s, transform .9s var(--ease) .14s; }
  #produkty .osobno > .card-product h3,
  #produkty .osobno > .card-product p,
  #produkty .osobno > .card-product .pill{ transform: translateY(14px); transition: opacity .55s var(--ease), transform .65s var(--ease); }
  #produkty .osobno > .card-product.in h3{ transition-delay: .26s; }
  #produkty .osobno > .card-product.in p{ transition-delay: .32s; }
  #produkty .osobno > .card-product.in .pill:nth-child(1){ transition-delay: .4s; }
  #produkty .osobno > .card-product.in .pill:nth-child(2){ transition-delay: .46s; }
  #produkty .osobno > .card-product.in .pill:nth-child(3){ transition-delay: .52s; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-stagger] > *,
  #produkty .osobno > .card-product,
  #produkty .osobno > .card-product .card-img img,
  #produkty .osobno > .card-product h3,
  #produkty .osobno > .card-product p,
  #produkty .osobno > .card-product .pill{ opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   GALERIA NA TELEFONIE
   - zdjęcia pojawiają się pojedynczo (samo przenikanie), gdy dojdą do ekranu i są już zdekodowane (JS: .osobno, .widoczne)
   - podgląd po kliknięciu: czarne tło na cały ekran, zdjęcie na pełną szerokość, krzyżyk w prawym górnym rogu;
     animacja otwierania i zamykania niżej (JS: .pokaz, .zamyka)
   ============================================================ */
@media (max-width: 767px){
  .ofirmie-gallery.osobno{ opacity: 1; transform: none; transition: none; }
  .ofirmie-gallery.osobno .gallery-item{ opacity: 0; transition: opacity .5s var(--ease); }
  .ofirmie-gallery.osobno .gallery-item:nth-child(odd).widoczne{ transition-delay: .06s; }
  .ofirmie-gallery.osobno .gallery-item.widoczne{ opacity: 1; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce){
  .ofirmie-gallery.osobno .gallery-item{ opacity: 1; transition: none; }
}
/* ekran dotykowy: po dotknięciu miniatura nie zostaje w stanie najechania (powiększenie, ikona ↗) */
@media (hover: none){
  .gallery-item:hover img{ transform: none; }
  .gallery-item:hover .gallery-hover{ background: rgba(var(--deep-rgb),0); }
  .gallery-item:hover::after{ opacity: 0; }
}
/* podgląd zdjęcia z galerii — telefon i komputer (jak na filmie od klientki): zdjęcie pojawia się na środku mniejsze
   i półprzezroczyste, łagodnie rośnie i nabiera krycia, a tło stopniowo ciemnieje do czerni (ok. 0,4 s).
   Zamykanie: krzyżyk znika od razu, zdjęcie szybko maleje i blednie, tło się rozjaśnia (ok. 0,3 s). Cienki krzyżyk.
   Telefon: zdjęcie na pełną szerokość; komputer: zdjęcie mieści się w oknie (wymiary jak dotąd). */
.lightbox{ background: rgba(0,0,0,0); opacity: 1; transition: background-color .3s ease; }
.lightbox.pokaz{ background: #000; transition: background-color .4s ease-out; }
.lightbox-img{ opacity: 0; transform: scale(.6); transition: transform .22s cubic-bezier(.4, 0, 1, 1), opacity .2s linear; }
.lightbox.pokaz .lightbox-img{ opacity: 1; transform: none;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .34s linear; }
.lightbox.zamyka .lightbox-img{ transform: scale(.4); }
.lightbox-close{ width: 48px; height: 48px; padding: 0; font-size: 0; opacity: 0; transition: opacity .08s linear; -webkit-tap-highlight-color: transparent; }
.lightbox.pokaz .lightbox-close{ opacity: .95; transition: opacity .3s ease .1s; }
.lightbox.pokaz .lightbox-close:hover{ opacity: 1; }
/* po dotknięciu krzyżyk zostawał w stanie :hover/:focus (opacity 1) i był widoczny w trakcie zamykania */
.lightbox:not(.pokaz) .lightbox-close, .lightbox:not(.pokaz) .lightbox-close:hover, .lightbox:not(.pokaz) .lightbox-close:focus-visible{ opacity: 0; }
.lightbox-close::before, .lightbox-close::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 1.6px;
  background: #fff; border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); }
.lightbox-close::after{ transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 767px){
  .lightbox{ padding: 0; }
  .lightbox-img{ width: 100%; max-width: 100%; height: auto; max-height: calc(100svh - 128px); object-fit: contain;
    border-radius: 0; box-shadow: none; }
  .lightbox-close{ top: 8px; right: 6px; }
  .lightbox-close::before, .lightbox-close::after{ width: 24px; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox.pokaz, .lightbox-img, .lightbox.pokaz .lightbox-img, .lightbox-close, .lightbox.pokaz .lightbox-close{ transition: none; }
}

/* stopka: „Designed by Frame Fusion” — cały napis jest linkiem; na szerszych ekranach miejsce na okrągły przycisk
   „do góry” (prawy dolny róg), żeby na końcu strony nie zasłaniał napisu */
a.footer-realizacja{ color: var(--ink-soft); text-decoration: none; }
a.footer-realizacja span{ color: var(--zielen-logo-jasna); text-decoration: underline; text-underline-offset: 3px; }
a.footer-realizacja:hover, a.footer-realizacja:hover span{ color: #fff; }
a.footer-realizacja:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
@media (min-width: 769px){ .footer-bottom{ padding-right: 72px; } }