/* ═══════════════════════════════════════════════════════════════════════════
   DEPTH LAYER  — ładowany zaraz po styles.css (przed medium/small).
   Cel: zdjąć "płaskość" — warstwy cieni, światło, szkło, ziarno, ruch.
   Nie zmienia layoutu, tylko powierzchnie. Interakcje sterowane z fx.js
   (zmienne --mx/--my dla spotlightu, --rx/--ry dla tiltu).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --shadow-1: 0 1px 1px rgba(15,30,20,.04), 0 2px 4px -1px rgba(15,30,20,.05), 0 8px 18px -8px rgba(15,30,20,.10);
  --shadow-2: 0 1px 2px rgba(15,30,20,.05), 0 6px 14px -4px rgba(15,30,20,.08), 0 22px 44px -18px rgba(15,30,20,.20);
  --shadow-3: 0 2px 4px rgba(15,30,20,.06), 0 14px 30px -10px rgba(15,30,20,.16), 0 40px 80px -30px rgba(15,30,20,.32);
  --shadow-green: 0 10px 30px -10px rgba(126,217,87,.55), 0 2px 6px -2px rgba(31,107,31,.25);
  --hi-line: inset 0 1px 0 rgba(255,255,255,.7);
  --hi-line-dark: inset 0 1px 0 rgba(255,255,255,.06);
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Tło strony: miękki gradient + ziarno zamiast czystej bieli ─── */
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(126,217,87,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(126,217,87,.06), transparent 60%),
    linear-gradient(180deg, #fbfdfb 0%, #f6faf6 100%);
  background-attachment: fixed;
}
body::after{
  content:""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: var(--grain);
  opacity: .045;
  mix-blend-mode: multiply;
}
::selection{background: var(--green); color: var(--green-ink);}

/* ─── REVEAL — mocniejsze wejście (blur + skala) ───
   Wyższa specyficzność tylko w trakcie animacji; po niej fx.js dodaje .is-done
   i karty odzyskują własne transform/transition (hover, tilt). */
[data-reveal]:not(.is-done){
  transform: translateY(28px) scale(.98);
  filter: blur(6px);
  transition:
    opacity .8s var(--ease-out) var(--reveal-delay, 0ms),
    transform .9s var(--ease-out) var(--reveal-delay, 0ms),
    filter .8s var(--ease-out) var(--reveal-delay, 0ms);
}
[data-reveal].is-visible:not(.is-done){transform: none; filter: none;}

/* ─── Pasek postępu scrolla ─── */
.scroll-progress{
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--green-dark), var(--green) 60%, #c8f5ad);
  box-shadow: 0 0 12px rgba(126,217,87,.6);
  pointer-events: none;
}

/* ─── Nawigacja: szkło, które "twardnieje" po scrollu ─── */
.nav{
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nav.is-scrolled{
  background: rgba(255,255,255,.86);
  border-bottom-color: rgba(212,220,214,.7);
  box-shadow: 0 10px 30px -18px rgba(15,30,20,.25);
}
.logo-mark{
  background: linear-gradient(145deg, #a6ec84, var(--green) 45%, var(--green-2));
  box-shadow: var(--hi-line), 0 4px 12px -4px rgba(95,190,57,.7);
  transition: transform .4s var(--ease-out);
}
.logo:hover .logo-mark{transform: rotate(-12deg) scale(1.08);}
/* Linki menu: uppercase + podkreślenie wjeżdżające od lewej */
.nav .main-nav > ul > li > a{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
}
.nav .main-nav > ul > li > a:not(.nav-contact-btn)::after{
  content:""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--green);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.nav .main-nav > ul > li > a:not(.nav-contact-btn):hover::after,
.nav .main-nav > ul > li > a.active::after{transform: scaleX(1); transform-origin: left;}
/* Kontakt — wyróżniony jako przycisk */
.nav .main-nav > ul > li > a.nav-contact-btn{
  padding: 11px 18px 11px 20px; border-radius: 999px;
  background: linear-gradient(180deg, #1c2620, var(--bg-dark));
  color: #fff;
  box-shadow: var(--hi-line-dark), 0 8px 20px -10px rgba(14,20,17,.7);
  overflow: hidden; isolation: isolate;
  transition: transform .25s var(--ease-out), box-shadow .3s ease, color .3s ease;
}
.nav .main-nav > ul > li > a.nav-contact-btn::before{ /* zielone wypełnienie na hover */
  content:""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, #96e670, var(--green) 55%, #6fcd47);
  transform: translateY(101%);
  transition: transform .35s var(--ease-out);
}
.nav .main-nav > ul > li > a.nav-contact-btn:hover,
.nav .main-nav > ul > li > a.nav-contact-btn.active{
  color: var(--green-ink);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), var(--shadow-green);
}
.nav .main-nav > ul > li > a.nav-contact-btn:hover::before,
.nav .main-nav > ul > li > a.nav-contact-btn.active::before{transform: translateY(0);}
.nav .main-nav > ul > li > a.nav-contact-btn::after{display: none;}
.nav-contact-btn svg{transition: transform .25s var(--ease-out);}
.nav-contact-btn:hover svg{transform: translateX(3px);}
.nav .main-nav > ul{gap: 34px;}
.nav .main-nav > ul > li.nav-contact{margin-left: 6px;}
/* Dropdown zostaje w normalnym zapisie — czytelniej przy dłuższych nazwach */
.nav .dropdown li a{font-family: var(--font-body); text-transform: none; letter-spacing: 0;}
@media (max-width: 1024px){
  .nav .main-nav > ul > li > a{display: flex; font-size: 15px !important; letter-spacing: .08em;}
  .nav .main-nav > ul > li > a.dd-trigger{justify-content: space-between;}
  .nav .main-nav > ul > li > a:not(.nav-contact-btn)::after{display: none;}
  .nav .main-nav > ul > li.nav-contact{margin: 18px 0 0;}
  .nav .main-nav > ul > li > a.nav-contact-btn{
    justify-content: center; gap: 10px; padding: 16px 20px; border-bottom: 0;
  }
}

.nav .dropdown{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-3);
}

/* ─── Przyciski: wolumen, połysk, glow ─── */
.btn{position: relative; overflow: hidden; isolation: isolate; will-change: transform;}
.btn-primary{
  background: linear-gradient(180deg, #96e670 0%, var(--green) 55%, #6fcd47 100%);
  box-shadow: var(--hi-line), inset 0 -2px 0 rgba(31,107,31,.18), var(--shadow-green);
}
.btn-primary:hover{
  background: linear-gradient(180deg, #a3ee7e 0%, #86e05f 55%, var(--green-2) 100%);
  box-shadow: var(--hi-line), inset 0 -2px 0 rgba(31,107,31,.2), 0 16px 36px -10px rgba(126,217,87,.7), 0 2px 6px -2px rgba(31,107,31,.3);
}
.btn-primary::after,
.btn-dark::after{
  content:""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn-dark::after{background: linear-gradient(105deg, transparent 35%, rgba(126,217,87,.25) 50%, transparent 65%);}
.btn-primary:hover::after,
.btn-dark:hover::after{transform: translateX(120%);}
.btn-dark{
  background: linear-gradient(180deg, #1c2620, var(--bg-dark));
  box-shadow: var(--hi-line-dark), 0 10px 24px -12px rgba(14,20,17,.7);
}
.btn-ghost{backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.btn .arr{transition: transform .25s var(--ease-out);}
.btn:hover .arr{transform: translateX(3px);}
.btn:active{transform: translateY(1px) scale(.98);}

/* ─── Eyebrow → mała pigułka z pulsującą kropką ─── */
.eyebrow{
  width: fit-content;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(126,217,87,.12);
  border: 1px solid rgba(31,107,31,.12);
}
.eyebrow::before{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-2);
  box-shadow: 0 0 0 3px rgba(126,217,87,.25);
  animation: eyebrowPulse 2.4s ease-in-out infinite;
}
.reliable .eyebrow, .cta-band .eyebrow, .stations .eyebrow{
  background: rgba(126,217,87,.1); border-color: rgba(126,217,87,.22);
}
.reliable .eyebrow::before, .cta-band .eyebrow::before{background: var(--green);}
@keyframes eyebrowPulse{
  0%,100%{box-shadow: 0 0 0 3px rgba(126,217,87,.25);}
  50%{box-shadow: 0 0 0 6px rgba(126,217,87,.05);}
}

/* ─── Nagłówki: akcent gradientowy w <em> ─── */
.hero h1 em, .hero--compact h1 em{
  background: linear-gradient(100deg, #c9f7ae 0%, var(--green) 40%, #5fbe39 70%, #c9f7ae 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 7s ease-in-out infinite;
  filter: drop-shadow(0 4px 24px rgba(126,217,87,.25));
}
@keyframes shimmerText{0%,100%{background-position: 0% 50%;} 50%{background-position: 100% 50%;}}

/* ═══ HERO ═══ */
/* Full-bleed: karta wychodzi z .wrap na całą szerokość okna,
   treść zostaje w osi kontenera (1180px − padding .wrap). */
body{overflow-x: clip;}
main > .hero, main > .hero.hero--compact{padding-top: 0 !important;} /* wygrywa z !important w styles-small.css */
.hero .hero-card{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  min-height: min(720px, calc(100svh - 72px));
  box-shadow: 0 30px 50px -40px rgba(10,20,14,.55);
}
.hero.hero--compact .hero-card{min-height: 440px;}
.hero .hero-content{
  padding-left: max(28px, calc((100vw - 1180px) / 2 + 28px));
  padding-right: max(28px, calc((100vw - 1180px) / 2 + 28px));
}
main > .hero:not(.hero--compact){padding-bottom: 30px;}
.hero:not(.hero--compact) .hero-card{display: flex; flex-direction: column;}
.hero:not(.hero--compact) .hero-content{flex: 1; align-content: center; padding-bottom: 48px;}
.hero .hero-art svg{width: min(70%, 1000px);}

.hero-card{
  box-shadow: 0 2px 4px rgba(10,20,14,.1), 0 30px 60px -20px rgba(10,20,14,.45), 0 60px 120px -50px rgba(31,107,31,.45);
}
.hero-card::after{ /* cienka świetlna krawędź */
  content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05);
}
/* aurora — dwie animowane plamy światła */
.hero-bg::before{
  content:""; position: absolute; inset: -20%;
  background:
    radial-gradient(35% 45% at 25% 30%, rgba(126,217,87,.22), transparent 70%),
    radial-gradient(30% 40% at 80% 75%, rgba(95,190,57,.18), transparent 70%),
    radial-gradient(25% 30% at 60% 20%, rgba(200,245,173,.10), transparent 70%);
  filter: blur(20px);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform: translate3d(0,0,0) rotate(0deg) scale(1);}
  50%{transform: translate3d(4%,-3%,0) rotate(8deg) scale(1.08);}
  100%{transform: translate3d(-3%,4%,0) rotate(-6deg) scale(1.02);}
}
/* siatka perspektywiczna na dole hero */
.hero-card > .hero-grid{
  position: absolute; left: -10%; right: -10%; bottom: -2px; height: 55%;
  z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(126,217,87,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,217,87,.16) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(600px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: gridMove 6s linear infinite;
}
@keyframes gridMove{to{background-position: 0 56px, 0 0;}}
/* reflektor za kursorem w hero */
.hero-card .hero-spot{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), rgba(126,217,87,.16), transparent 60%);
  transition: opacity .4s ease;
}
.hero-art{transition: transform .6s var(--ease-out); will-change: transform;}
.hero-side.is-done{transition: transform .6s var(--ease-out);}
.hero-art svg path:nth-of-type(2){animation: cableFlow 3s linear infinite;}
@keyframes cableFlow{to{stroke-dashoffset: -36;}}
.hero-art svg g circle:last-of-type{animation: ledBlink 2.2s ease-in-out infinite; filter: drop-shadow(0 0 6px #7ED957);}
@keyframes ledBlink{0%,100%{opacity: 1;} 50%{opacity: .35;}}

/* promo card — unosząca się, z połyskiem */
.promo-card{
  background: linear-gradient(150deg, #b1f08f 0%, var(--green) 45%, #63c43c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -10px 30px -10px rgba(31,107,31,.3), 0 24px 50px -16px rgba(126,217,87,.6), 0 6px 14px -6px rgba(0,0,0,.4);
  animation: floatY 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
.promo-card::after{
  content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.35), transparent 40%);
}
.promo-bolt{
  background: radial-gradient(circle at 35% 30%, #2a3a2e, #0e1411 70%);
  box-shadow: 0 0 0 4px rgba(14,20,17,.25), 0 10px 24px -6px rgba(0,0,0,.55), 0 0 30px -4px rgba(126,217,87,.5);
}
.promo-bolt svg{filter: drop-shadow(0 0 6px rgba(126,217,87,.8));}
@keyframes floatY{0%,100%{transform: translateY(0);} 50%{transform: translateY(-8px);}}

/* ─── Strip: ciemne szkło wewnątrz karty hero (index.html: .strip jest dzieckiem .hero-card) ─── */
.hero .strip{
  position: relative; z-index: 2;
  margin: 0 max(28px, calc((100vw - 1180px) / 2 + 28px)) 64px;
  gap: 0; padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 48px -24px rgba(0,0,0,.6);
}
.hero .strip .feat{
  position: relative;
  align-items: center; gap: 14px;
  padding: 18px 18px 20px;
  border-radius: 15px;
  transition: background .3s ease;
}
/* pionowe separatory między segmentami */
.hero .strip .feat + .feat::after{
  content:""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.14), transparent);
}
/* zielona kreska wjeżdżająca od dołu na hover */
.hero .strip .feat .t::after{
  content:""; position: absolute; left: 18px; right: 18px; bottom: 7px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.hero .strip .feat:hover{background: rgba(126,217,87,.08);}
.hero .strip .feat:hover .t::after{transform: scaleX(1);}
.hero .strip .feat:hover + .feat::after, .hero .strip .feat:hover::after{opacity: 0;}
.hero .strip .feat .t{
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3;
  color: rgba(255,255,255,.88);
}
.hero .strip .feat .ic{
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(126,217,87,.12); color: var(--green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(126,217,87,.18);
}
.hero .strip .feat .ic svg{width: 25px; height: 25px;}
.hero .strip .feat .ic svg [opacity]{opacity: .38;} /* Phosphor duotone — mocniejszy drugi ton na ciemnym tle */
@media (max-width: 1024px){
  .hero .strip{grid-template-columns: 1fr 1fr; margin-bottom: 56px;}
  .hero .strip .feat + .feat::after{display: none;}
}
@media (max-width: 640px){
  .hero .strip{grid-template-columns: 1fr !important; margin: 0 22px 52px; padding: 4px;}
  .hero .strip .feat{padding: 13px 14px 15px;}
  .hero .strip .feat + .feat{border-top: 1px solid rgba(255,255,255,.07); border-radius: 0;}
  .hero .strip .feat .t{font-size: 14px;}
  .hero .strip .feat .t::after{left: 14px; right: 14px; bottom: 5px;}
}

/* ─── Strip poza hero (o-nas.html) — jasny szklany pasek ─── */
section:not(.hero) .strip{
  gap: 0; padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 22px;
  box-shadow: var(--hi-line), 0 2px 4px rgba(15,30,20,.05), 0 24px 50px -24px rgba(15,30,20,.25);
}
section:not(.hero) .strip .feat{position: relative; align-items: center; gap: 14px; padding: 18px 18px 20px; border-radius: 15px; transition: background .3s ease;}
section:not(.hero) .strip .feat + .feat::after{
  content:""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
}
section:not(.hero) .strip .feat:hover{background: var(--bg-tint);}
section:not(.hero) .strip .feat .t{font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3;}
section:not(.hero) .strip .feat .ic{width: 44px; height: 44px; border-radius: 13px;}
section:not(.hero) .strip .feat .ic svg{width: 24px; height: 24px;}
@media (max-width: 1024px){ section:not(.hero) .strip .feat + .feat::after{display: none;} }
@media (max-width: 640px){
  section:not(.hero) .strip{padding: 4px;}
  section:not(.hero) .strip .feat + .feat{border-top: 1px solid var(--line); border-radius: 0;}
}

/* Ikony w chipach — wypukłe kafelki */
.feat .ic, .step .ic, .scope-card .ic, .value-card .ic, .svc-card .ic, .info-list .ic, .nav .dd-ic{
  background: linear-gradient(145deg, #f3fdec, #dcf5cd);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(31,107,31,.08), 0 4px 10px -4px rgba(31,107,31,.3);
  transition: transform .35s var(--ease-out), background .3s ease, color .3s ease;
}
.strip .feat:hover .ic, .step:hover .ic, .scope-card:hover .ic, .value-card:hover .ic, .svc-card:hover .ic{
  transform: translateY(-2px) rotate(-6deg) scale(1.06);
  background: linear-gradient(145deg, #a6ec84, var(--green));
  color: var(--green-ink);
}

/* ─── Marquee: zielona skośna wstęga przecinająca dół hero + ciemna wstęga za nią ("X") ─── */
.marquee{
  position: relative; z-index: 3; isolation: isolate;
  margin: -70px 0 0;
  padding: 34px 0;
}
/* tylna, ciemna wstęga — pochylona w drugą stronę, z drobnym napisem mono */
.marquee::before{
  content: "SEO · GOOGLE ADS · PROGRAMOWANIE · WIDEO · DORADZTWO · SEO · GOOGLE ADS · PROGRAMOWANIE · WIDEO · DORADZTWO · SEO · GOOGLE ADS · PROGRAMOWANIE · WIDEO · DORADZTWO · SEO · GOOGLE ADS · PROGRAMOWANIE · WIDEO · DORADZTWO";
  position: absolute; left: -4vw; right: -4vw; top: 50%; height: 50px; margin-top: -25px; z-index: -1;
  transform: rotate(2deg);
  background: linear-gradient(180deg, #0b110d, #070b09);
  border-top: 1px solid rgba(126,217,87,.4); border-bottom: 1px solid rgba(126,217,87,.4);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,.55);
  overflow: hidden; white-space: nowrap; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .3em;
  line-height: 50px; color: rgba(126,217,87,.38);
}
/* przednia, zielona wstęga z przesuwającym się tekstem */
.marquee-band{
  position: relative; overflow: hidden;
  margin: 0 -4vw;
  padding: 18px 0;
  transform: rotate(-1.6deg);
  background:
    radial-gradient(50% 160% at 50% 50%, rgba(126,217,87,.16), transparent 70%),
    linear-gradient(180deg, #1f4a27 0%, #17391e 55%, #122e18 100%);
  border-top: 1px solid rgba(126,217,87,.45); border-bottom: 1px solid rgba(126,217,87,.25);
  box-shadow: 0 20px 40px -20px rgba(10,20,14,.55);
}
.marquee-band::after{ /* połysk */
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 50%);
}
.marquee-track{
  display: flex; width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state: paused;}
.marquee-item{
  display: inline-flex; align-items: center; gap: 40px; padding-right: 40px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(20px, 2.3vw, 30px); letter-spacing: -.02em; line-height: 1;
  color: #eef7e9; white-space: nowrap;
  transition: color .25s ease;
}
.marquee-item.is-muted{color: rgba(232,243,226,.42); font-weight: 600;}
.marquee-item:hover{color: var(--green);}
.marquee-item::after{
  content:""; width: 18px; height: 18px; flex-shrink: 0;
  background: var(--green); opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes marquee{to{transform: translateX(-50%);}}

/* ═══ OBRAZY / MEDIA — ramka, zoom, połysk ═══ */
.acc-media, .faq-img, .team-card .photo{box-shadow: var(--shadow-3); isolation: isolate;}
.acc-media img, .faq-img img{
  transition: transform 1.2s var(--ease-out);
  transform: scale(1.04);
}
.acc-media:hover img, .faq-img:hover img{transform: scale(1.1);}
.leading-media::after, .acc-media::after, .faq-img::after{
  content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.18) 0%, transparent 35%, transparent 60%, rgba(14,20,17,.35) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.ph .label{
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}
.leading-stat{
  z-index: 2;
  background: linear-gradient(150deg, #b1f08f, var(--green) 50%, #63c43c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 20px 40px -14px rgba(31,107,31,.6);
  animation: floatY 7s ease-in-out infinite;
}
/* "O nas" — zdjęcie z kropkowaną dekoracją wystającą zza kadru */
.leading-media{overflow: visible !important; background: none;}
.leading-media > img{position: relative; z-index: 1; border-radius: var(--radius); box-shadow: var(--shadow-3);}
.leading-media::after{z-index: 1;}
.leading-media::before{
  content:""; position: absolute; z-index: 0;
  left: -22px; top: -22px; width: 55%; height: 55%;
  border-radius: var(--radius);
  background-image: radial-gradient(rgba(31,107,31,.35) 1.4px, transparent 1.6px);
  background-size: 14px 14px;
}

/* ═══ SPOTLIGHT (karty śledzą kursor) ═══ */
.fx-spot{position: relative; isolation: isolate;}
.fx-spot::before{
  content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(126,217,87,.16), transparent 55%);
  opacity: 0; transition: opacity .35s ease;
}
.fx-spot:hover::before{opacity: 1;}

/* ═══ TILT 3D — aktywny tylko w trakcie hovera (klasa z fx.js) ═══ */
.fx-tilt.is-tilting{
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) !important;
  transition: transform .15s linear, box-shadow .4s ease, border-color .3s ease !important;
}

/* ═══ KARTY — wspólny system głębi ═══ */
.svc-card, .scope-card, .value-card, .trust-card, .pack-card, .team-card,
.case-block, .case-card, .info-box, .map-box, .why-card, .policy-toc{
  box-shadow: var(--hi-line), var(--shadow-1);
  border-color: rgba(212,220,214,.75);
}
.svc-card:hover, .scope-card:hover, .value-card:hover, .trust-card:hover,
.pack-card:hover, .team-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--hi-line), var(--shadow-3);
  border-color: rgba(126,217,87,.45);
}
/* gradientowa ramka na hover */
.svc-card::after, .scope-card::after, .value-card::after, .pack-card:not(.is-featured)::after, .trust-card::after{
  content:""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgba(126,217,87,.9), rgba(126,217,87,0) 40%, rgba(126,217,87,0) 60%, rgba(31,107,31,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
}
.svc-card:hover::after, .scope-card:hover::after, .value-card:hover::after, .pack-card:hover::after, .trust-card:hover::after{opacity: 1;}
.scope-card, .value-card, .pack-card{position: relative;}

/* ciemne karty — wewnętrzne światło + siatka */
.svc-card.is-featured, .trust-card.is-dark, .pack-card.is-featured, .case-block .visual, .case-card .visual{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -24px rgba(10,20,14,.55);
}
.svc-card.is-featured, .case-block .visual, .case-card .visual, .stat-card, .cta-band, .contact-form{
  background-image:
    radial-gradient(120% 80% at 0% 0%, rgba(126,217,87,.14), transparent 50%),
    linear-gradient(rgba(126,217,87,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,217,87,.05) 1px, transparent 1px),
    linear-gradient(135deg, #14241a 0%, #0e1a13 60%, #0a130e 100%);
  background-size: auto, 32px 32px, 32px 32px, auto;
}
.pack-card.is-featured{
  transform: translateY(-10px);
  box-shadow: 0 0 0 1px rgba(126,217,87,.25), 0 40px 80px -30px rgba(31,107,31,.7);
}
.pack-card.is-featured:hover{transform: translateY(-16px);}
.pack-card.is-featured::before{box-shadow: 0 8px 20px -6px rgba(126,217,87,.7);}
.stat-card{box-shadow: 0 30px 60px -24px rgba(10,20,14,.55), inset 0 1px 0 rgba(255,255,255,.06);}
.stat-card .v, .case-block .visual .stats .v, .case-card .visual .big-stat, .svc-card.is-featured .stat-row .v{
  text-shadow: 0 0 24px rgba(126,217,87,.45);
}

/* ═══ AKORDEON USŁUG ═══ */
.solutions{
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(126,217,87,.22), transparent 70%),
    linear-gradient(180deg, #f2f9ef, #e8f4e3);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-2);
}
.solutions::before{
  content:""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(31,107,31,.14) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 85% 10%, #000, transparent 70%);
  mask-image: radial-gradient(70% 60% at 85% 10%, #000, transparent 70%);
}
.acc-item{
  box-shadow: var(--hi-line), var(--shadow-1);
  transition: box-shadow .35s ease, transform .35s var(--ease-out), border-color .3s ease, background .3s ease, color .3s ease;
}
.acc-item:not(.open):hover{transform: translateX(6px); box-shadow: var(--hi-line), var(--shadow-2); border-color: rgba(126,217,87,.5);}
.acc-item.open{
  box-shadow: inset 3px 0 0 var(--green), 0 30px 60px -28px rgba(10,20,15,.7), 0 0 0 1px rgba(126,217,87,.12);
}
.acc-item.open::before{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(126,217,87,.22), transparent 55%),
    linear-gradient(rgba(126,217,87,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,217,87,.045) 1px, transparent 1px),
    linear-gradient(135deg, #14241a 0%, #0e1a13 55%, #0a130e 100%) !important;
  background-size: auto, 28px 28px, 28px 28px, auto !important;
}
.acc-head .toggle{transition: transform .35s var(--ease-out), background .3s ease;}
.acc-item:not(.open) .acc-head:hover .toggle{background: var(--green); color: var(--green-ink);}
.acc-item.open .acc-head .toggle{box-shadow: 0 0 18px rgba(126,217,87,.6);}

/* ═══ USŁUGI — lista + scena (index.html #svcStage, logika w inline <script>) ═══ */
.svc-stage{
  --ss-time: 6s; /* czas jednej usługi przy auto-przełączaniu */
  display: grid; grid-template-columns: minmax(280px, .8fr) 1.5fr; gap: 22px; align-items: stretch;
}
.ss-list{display: flex; flex-direction: column; gap: 10px;}
.ss-tab{
  position: relative; overflow: hidden; flex: 1;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  width: 100%; padding: 16px 20px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(212,220,214,.75); border-radius: 16px;
  box-shadow: var(--hi-line), var(--shadow-1);
  transition: background .35s ease, color .35s ease, border-color .3s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.ss-tab:not(.is-active):hover{transform: translateX(5px); border-color: rgba(126,217,87,.5); box-shadow: var(--hi-line), var(--shadow-2);}
.ss-tab:focus-visible{outline: 2px solid var(--green); outline-offset: 3px;}
.ss-idx{
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  color: var(--green-dark);
  background: linear-gradient(145deg, #f3fdec, #dcf5cd);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px rgba(31,107,31,.3);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.ss-name{font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;}
.ss-name small{
  display: block; margin-top: 3px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--muted);
  transition: color .35s ease;
}
.ss-arr{width: 18px; height: 18px; opacity: .3; transform: translateX(-4px); transition: opacity .3s ease, transform .35s var(--ease-out), color .3s ease;}
.ss-tab:hover .ss-arr{opacity: .7; transform: none;}
/* aktywna zakładka — ciemna, jak scena */
.ss-tab.is-active{
  color: #fff; border-color: #1d2c22;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(126,217,87,.2), transparent 60%),
    linear-gradient(135deg, #14241a 0%, #0e1a13 60%, #0a130e 100%);
  box-shadow: inset 3px 0 0 var(--green), 0 20px 40px -22px rgba(10,20,15,.7);
}
.ss-tab.is-active .ss-idx{
  background: linear-gradient(145deg, #a6ec84, var(--green)); color: var(--green-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 18px -4px rgba(126,217,87,.7);
}
.ss-tab.is-active .ss-name small{color: rgba(232,243,226,.6);}
.ss-tab.is-active .ss-arr{opacity: 1; transform: none; color: var(--green);}
/* pasek postępu auto-przełączania (animationend → następna usługa) */
.ss-progress{
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
  box-shadow: 0 0 10px rgba(126,217,87,.7);
  transform: scaleX(0); transform-origin: left; opacity: 0;
}
.ss-tab.is-active .ss-progress{opacity: 1; animation: ssProgress var(--ss-time) linear forwards; animation-play-state: paused;}
.svc-stage.is-playing:not(:hover):not(:focus-within) .ss-tab.is-active .ss-progress{animation-play-state: running;}
@keyframes ssProgress{to{transform: scaleX(1);}}

/* scena */
.ss-stage{
  position: relative; min-height: 470px; isolation: isolate;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-dark);
  box-shadow: 0 2px 4px rgba(10,20,14,.1), 0 40px 80px -34px rgba(10,20,14,.65);
}
.ss-stage::after{ /* cienka świetlna krawędź */
  content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.06);
}
.ss-panel{position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s;}
.ss-panel.is-active{opacity: 1; visibility: visible;}
.ss-media{position: absolute; inset: 0;}
.ss-media img{transform: scale(1.1); transition: transform 7s cubic-bezier(.2,.6,.3,1);}
.ss-panel.is-active .ss-media img{transform: scale(1);} /* powolny "Ken Burns" */
/* grafiki SVG zamiast zdjęć — ten sam efekt, lżejszy gradient (grafika jest już ciemna) */
.ss-art{display: block; width: 100%; height: 100%; transform: scale(1.06); transform-origin: 50% 0; transition: transform 7s cubic-bezier(.2,.6,.3,1);}
.ss-panel.is-active .ss-art{transform: scale(1);}
.ss-media--art::after{background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(10,19,14,.75) 52%, rgba(10,19,14,.97) 100%);}
.ss-media::after{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(31,107,31,.35), transparent 70%),
    linear-gradient(180deg, rgba(10,19,14,.05) 0%, rgba(10,19,14,.5) 40%, rgba(10,19,14,.95) 100%);
}
.ss-body{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 34px 36px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  color: #fff;
}
.ss-body > *{opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s var(--ease-out);}
.ss-panel.is-active .ss-body > *{opacity: 1; transform: none;}
.ss-panel.is-active .ss-body > :nth-child(2){transition-delay: .06s;}
.ss-panel.is-active .ss-body > :nth-child(3){transition-delay: .12s;}
.ss-panel.is-active .ss-body > :nth-child(4){transition-delay: .18s;}
.ss-panel.is-active .ss-body > :nth-child(5){transition-delay: .24s;}
.ss-kicker{font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--green);}
.ss-body h3{font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; color: #fff; max-width: 520px;}
.ss-body p{font-size: 15px; line-height: 1.6; color: rgba(232,243,226,.82); max-width: 520px;}
.ss-body .tags{display: flex; flex-wrap: wrap; gap: 8px;}
.ss-body .tag{
  padding: 6px 12px; border-radius: 999px; font-size: 12px; color: #e8f3e2;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ss-body .btn{margin-top: 6px;}

/* ≤1024: bez listy — panele jako karty */
@media (max-width: 1024px){
  .svc-stage{display: block;}
  .ss-list{display: none;}
  .ss-stage{
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    min-height: 0; overflow: visible; background: none; box-shadow: none; border-radius: 0;
  }
  .ss-stage::after{display: none;}
  /* karta: zdjęcie na górze, tekst pod nim na ciemnym tle (tekst nie wchodzi na jasne zdjęcie) */
  .ss-panel{
    position: relative; inset: auto; opacity: 1; visibility: visible;
    display: flex; flex-direction: column;
    border-radius: 20px; overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, #0e1a13, var(--bg-dark));
    box-shadow: 0 24px 50px -28px rgba(10,20,14,.6);
  }
  .ss-media{position: relative; inset: auto; height: 190px; flex-shrink: 0;}
  .ss-media::after{background: linear-gradient(180deg, transparent 40%, #0e1a13 100%);}
  .ss-media img{transform: none !important;}
  .ss-art{transform: none !important;}
  .ss-media--art{height: auto !important;}
  .ss-art{aspect-ratio: 1290 / 380; height: auto;} /* tylko pasek z treścią, bez pustego tła pod spodem */
  .ss-media--art::after{background: linear-gradient(180deg, transparent 70%, #0e1a13 100%);}
  .ss-body{position: relative; flex: 1; padding: 4px 22px 24px;}
  .ss-body > *{opacity: 1 !important; transform: none !important;}
  .ss-body .btn{margin-top: auto;}
  .ss-panel:last-child:nth-child(odd){grid-column: 1 / -1;} /* 5. karta na tablecie — pełna szerokość */
  .ss-panel:last-child:nth-child(odd) .ss-media{height: 240px;}
}
@media (max-width: 640px){
  .ss-stage{grid-template-columns: 1fr;}
  .ss-panel:last-child:nth-child(odd) .ss-media{height: 170px;}
  .ss-media{height: 170px;}
  .ss-body h3{font-size: 22px;}
  .ss-body p{font-size: 14px;}
}

/* ═══ DLACZEGO MY ═══ */
.why{position: relative;}
.why-card{
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.why-card:hover{transform: translateY(-4px); box-shadow: var(--hi-line), var(--shadow-2);}
.why-card .h{align-items: flex-start; gap: 14px;}
.why-card .h .num{
  flex-shrink: 0; /* bez tego dłuższy tytuł (04) ściskał kółko */
  width: 38px; height: 38px;
  border-radius: 11px; /* zaokrąglony kwadrat — jak kafelki ikon (.ic) */
  margin-top: -6px; /* optycznie w osi pierwszej linii tytułu */
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  background: linear-gradient(145deg, #a6ec84, var(--green));
  color: var(--green-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 14px -5px rgba(95,190,57,.7);
}
/* ─── Układ "hub": karty w równych rzędach, tekst do lewej, panel w środku ─── */
.why-grid--hub{gap: 56px; align-items: stretch;}
.why-grid--hub .why-col{display: grid; grid-auto-rows: 1fr; gap: 22px;}
.why-grid--hub .why-card{justify-content: center; text-align: left;}
.why-grid--hub .why-card .d{max-width: none;}
/* linie łączące karty z panelem + płynące światło */
.why-grid--hub .why-card::after{
  content:""; position: absolute; top: 50%; width: 56px; height: 2px; margin-top: -1px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(200,245,173,.95) 50%, transparent 100%) 0 0 / 40% 100% no-repeat,
    linear-gradient(90deg, rgba(126,217,87,.25), rgba(126,217,87,.6));
  animation: hubFlow 2.6s linear infinite;
}
.why-col--left .why-card::after{right: -57px;}
.why-col--right .why-card::after{left: -57px; animation-direction: reverse;}
.why-col--left .why-card:nth-child(2)::after, .why-col--right .why-card:nth-child(2)::after{animation-delay: -1.3s;}
@keyframes hubFlow{from{background-position: -60% 0, 0 0;} to{background-position: 160% 0, 0 0;}}

/* ─── Panel klienta (zastępuje zdjęcie) ─── */
.why-hub{
  width: 320px; aspect-ratio: auto; align-self: stretch;
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 22px 20px;
  border-radius: var(--radius-lg);
  color: #e8f3e2;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(126,217,87,.18), transparent 60%),
    linear-gradient(rgba(126,217,87,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,217,87,.05) 1px, transparent 1px),
    linear-gradient(160deg, #15241a 0%, #0c140f 100%);
  background-size: auto, 26px 26px, 26px 26px, auto;
  border: 1px solid rgba(126,217,87,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 80px -30px rgba(10,20,14,.6), 0 0 0 8px rgba(126,217,87,.06);
  position: relative;
}
/* punkty, w które wpinają się linie — na wysokości środków kart:
   2 rzędy 1fr z gap 22px → środki w (H−22)/4 i H−(H−22)/4 */
.why-hub::before, .why-hub::after{
  content:""; position: absolute; width: 12px; pointer-events: none;
  top: calc(25% - 5.5px - 6px); bottom: calc(25% - 5.5px - 6px);
  background:
    radial-gradient(circle 6px at 50% 6px, var(--green) 5px, transparent 6px),
    radial-gradient(circle 6px at 50% calc(100% - 6px), var(--green) 5px, transparent 6px);
  filter: drop-shadow(0 0 6px rgba(126,217,87,.8));
}
.why-hub::before{left: -7px;}
.why-hub::after{right: -7px;}
.hub-head{
  display: flex; align-items: center; gap: 9px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: #fff;
}
.hub-live{
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(126,217,87,.6); animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse{to{box-shadow: 0 0 0 9px rgba(126,217,87,0);}}
.hub-tag{
  margin-left: auto; padding: 4px 9px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); background: rgba(126,217,87,.1); border: 1px solid rgba(126,217,87,.22);
}
.hub-kpis{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.hub-kpi{
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.kpi-l{font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,243,226,.55);}
.kpi-v{
  margin-top: 6px;
  font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  color: var(--green); text-shadow: 0 0 22px rgba(126,217,87,.45);
}
.kpi-v small{font-size: .5em; font-weight: 500; color: rgba(232,243,226,.6); margin-left: 2px;}
.hub-chart{width: 100%; height: 120px; flex: 1; min-height: 100px; overflow: visible;}
.hub-grid{stroke: rgba(255,255,255,.07); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke;}
.hub-line{
  fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(126,217,87,.7));
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.hub-area{opacity: 0; transition: opacity 1s ease .9s;}
.hub-dot{fill: #c8f5ad; opacity: 0; transition: opacity .3s ease 1.9s; filter: drop-shadow(0 0 6px #7ED957);}
.why-hub.is-visible .hub-line{animation: hubDraw 1.8s cubic-bezier(.6,.1,.3,1) .3s forwards;}
.why-hub.is-visible .hub-area, .why-hub.is-visible .hub-dot{opacity: 1;}
@keyframes hubDraw{to{stroke-dashoffset: 0;}}
.hub-months{
  display: flex; justify-content: space-between; margin-top: -8px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; color: rgba(232,243,226,.4);
}
.hub-sources{list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.07); display: grid; gap: 8px;}
.hub-sources li{display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(232,243,226,.85);}
.hub-sources em{
  margin-left: auto; font-style: normal;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(126,217,87,.75);
}
.src-ic{
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-size: 10px; font-weight: 700; color: var(--green-ink); background: var(--green);
}
@media (max-width: 1024px){
  .why-grid--hub .why-card::after, .why-hub::before, .why-hub::after{display: none;}
  .why-hub{width: min(420px, 100%);}
}
@media (max-width: 640px){
  .why-hub{display: flex !important; width: 100%; margin: 8px 0 0 !important;} /* styles-small.css ukrywa .why-center */
}
@media (prefers-reduced-motion: reduce){
  .hub-line{stroke-dashoffset: 0;}
  .hub-area, .hub-dot{opacity: 1;}
}

/* ═══ JAK PRACUJEMY (ciemna sekcja) — szklane karty ═══ */
.reliable::after{
  background:
    linear-gradient(rgba(126,217,87,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,217,87,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 80%);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 80%);
}
.step{
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 40px -20px rgba(0,0,0,.6);
  transition: transform .45s var(--ease-out), border-color .3s ease, box-shadow .4s ease;
}
.step:hover{
  transform: translateY(-8px);
  border-color: rgba(126,217,87,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -20px rgba(0,0,0,.7), 0 0 40px -10px rgba(126,217,87,.35);
}
.step .d{color: rgba(232,243,226,.65);}
.step .n{
  color: rgba(126,217,87,.18); font-family: 'Space Grotesk', sans-serif;
  font-size: 54px; font-weight: 700; line-height: 1; top: 10px; letter-spacing: -.04em;
  transition: color .3s ease;
}
.step:hover .n{color: rgba(126,217,87,.45);}
.step .ic{
  background: rgba(126,217,87,.14); color: var(--green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px -6px rgba(126,217,87,.5);
}
.step:hover .ic{background: var(--green); color: var(--green-ink);}
/* linia łącząca kroki */
.steps{position: relative;}
.steps::before{
  content:""; position: absolute; left: 4%; right: 4%; top: 36px; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(126,217,87,.5), transparent);
}
.steps .step{z-index: 1;}

/* ═══ FAQ ═══ */
.faq-item{
  background: rgba(255,255,255,.65);
  box-shadow: var(--hi-line);
  transition: background .3s ease, box-shadow .35s ease, border-color .3s ease, transform .35s var(--ease-out);
}
.faq-item:not(.open):hover{transform: translateX(4px); border-color: rgba(126,217,87,.5);}
.faq-item.open{
  background: #fff;
  box-shadow: inset 3px 0 0 var(--green), var(--shadow-2);
  border-color: rgba(126,217,87,.35);
}
.faq-img{overflow: hidden;}
/* zielony filtr w kolorach marki — stock wygląda jak część strony */
.faq-img img{filter: grayscale(1) contrast(1.05) brightness(1.02);}
.faq-img::before{
  content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, #cdeebd 0%, var(--green) 40%, var(--green-dark) 100%);
  mix-blend-mode: multiply; opacity: .55;
}

/* ═══ MAPA POLSKI ═══ */
.stations{box-shadow: 0 40px 80px -36px rgba(10,20,14,.65);}
.stations::after{
  background:
    linear-gradient(rgba(126,217,87,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,217,87,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(60% 80% at 75% 50%, #000, transparent 75%);
  mask-image: radial-gradient(60% 80% at 75% 50%, #000, transparent 75%);
}
.poland-map{transform-style: preserve-3d;}
.poland-outline{
  background: linear-gradient(160deg, #b8f396 0%, var(--green) 45%, #3f9a22 100%);
  filter: drop-shadow(0 0 30px rgba(126,217,87,.35)) drop-shadow(0 24px 30px rgba(0,0,0,.45));
}
.poland-map::before{ /* połysk na mapie */
  content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(130deg, rgba(255,255,255,.35), transparent 45%);
  -webkit-mask-image: url('../assets/poland-mask.png'); mask-image: url('../assets/poland-mask.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  mix-blend-mode: overlay;
}
.city-marker .label{
  background: rgba(10,19,14,.75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(126,217,87,.25);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.6);
}
/* Desktop: maska PNG ma ~13% pustego marginesu góra/dół — przycinamy go ujemnym marginesem, żeby karta nie była za wysoka */
@media (min-width: 1025px){
  .stations{padding: 64px 56px;}
  .stations .poland-map{margin: -56px auto;}
}

/* ═══ HERO COMPACT (podstrony) ═══ */
.breadcrumb{
  width: fit-content;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ═══ PROCES (podstrony usług) ═══ */
.process-section, .values, .svc-section{
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(126,217,87,.2), transparent 70%),
    linear-gradient(180deg, #f2f9ef, #e8f4e3);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-2);
}
.process-grid::before{
  height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green) var(--line-fill, 0%), var(--line-2) var(--line-fill, 0%));
}
.proc-step .dot{
  background: radial-gradient(circle at 35% 30%, #c8f5ad, var(--green) 60%);
  box-shadow: 0 0 0 6px #edf7e9, 0 0 0 7px var(--green), 0 0 18px 2px rgba(126,217,87,.55);
}
.timeline .dot{box-shadow: 0 0 0 2px var(--green), 0 0 16px 2px rgba(126,217,87,.5);}

/* ═══ CTA BAND ═══ */
.cta-band{box-shadow: 0 40px 80px -36px rgba(10,20,14,.65), inset 0 1px 0 rgba(255,255,255,.06);}
.cta-band::before{animation: ctaGlow 8s ease-in-out infinite alternate;}
@keyframes ctaGlow{
  from{transform: translateY(-50%) scale(1); opacity: .8;}
  to{transform: translateY(-60%) translateX(-60px) scale(1.25); opacity: 1;}
}

/* ═══ KONTAKT ═══ */
.map-overlay{
  background: rgba(14,20,17,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(126,217,87,.2);
}
.map-overlay .dot{box-shadow: 0 0 0 6px rgba(126,217,87,.18), 0 0 24px rgba(126,217,87,.6);}
.info-list .ic{transition: transform .35s var(--ease-out);}
.info-list li:hover .ic{transform: rotate(-8deg) scale(1.08);}

/* ═══ STOPKA ═══ */
footer{
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(126,217,87,.12), transparent 70%),
    var(--bg-dark);
}
footer::before{
  content:""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: .6;
}
footer::after{
  content:"SUCHHELDEN"; position: absolute; left: 50%; bottom: -0.22em; transform: translateX(-50%);
  z-index: -1; pointer-events: none; white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(80px, 17vw, 240px); letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(126,217,87,.09);
}
.foot-contact .item{
  transition: transform .35s var(--ease-out), border-color .3s ease, background .3s ease;
}
.foot-contact .item:hover{transform: translateY(-3px); border-color: rgba(126,217,87,.3); background: rgba(126,217,87,.05);}

/* ═══ Kursor "glow" (tylko desktop) ═══ */
.cursor-glow{
  position: fixed; left: 0; top: 0; width: 420px; height: 420px; z-index: 0; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,217,87,.10), transparent 65%);
  transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0) translate(-50%, -50%);
  transition: opacity .4s ease;
}
main{position: relative; z-index: 1;}

/* ═══ KONTAKT (kontakt.html) ═══ */
/* Hero — karta statusu */
.status-card{
  display: flex; flex-direction: column; gap: 6px; min-width: 300px;
  padding: 20px 22px;
  background: linear-gradient(160deg, rgba(20,36,26,.92), rgba(10,19,14,.88));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 48px -24px rgba(0,0,0,.6);
}
.status-card .live-status{margin-bottom: 8px;}
.sc-phone{font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.1; transition: color .2s ease;}
.sc-phone:hover{color: var(--green);}
.sc-mail{font-size: 14px; color: rgba(232,243,226,.7); transition: color .2s ease;}
.sc-mail:hover{color: var(--green);}

/* Status "na żywo" (hero + karta godzin) */
.live-status{
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  background: rgba(126,217,87,.12); border: 1px solid rgba(126,217,87,.28); color: #dff5d2;
}
.ls-dot{width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex-shrink: 0;}
.live-status.is-open .ls-dot{background: var(--green); animation: livePulse 1.8s ease-out infinite;}
.live-status.is-closed{background: rgba(245,179,66,.1); border-color: rgba(245,179,66,.3); color: #f7dfb0;}
.live-status.is-closed .ls-dot{background: var(--warn);}
/* wersja na jasnym tle (karta godzin) */
.hours-box .live-status{color: var(--green-ink); background: var(--chip); border-color: rgba(31,107,31,.18);}
.hours-box .live-status.is-closed{color: #6b4a0e; background: #fdf3e0; border-color: rgba(245,179,66,.45);}

/* Kanały kontaktu — 3 karty */
.channels{display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; margin-bottom: 24px;}
.channel{
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 26px 26px 24px; border-radius: var(--radius);
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(212,220,214,.75);
  box-shadow: var(--hi-line), var(--shadow-1);
  transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
}
.channel:hover{transform: translateY(-5px); box-shadow: var(--hi-line), var(--shadow-3); border-color: rgba(126,217,87,.5);}
.ch-ic{
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 10px;
  color: var(--green-dark);
  background: linear-gradient(145deg, #f3fdec, #dcf5cd);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px rgba(31,107,31,.3);
}
.ch-ic svg{width: 24px; height: 24px;}
.ch-label{font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);}
.ch-value{
  font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
  color: var(--ink); word-break: break-word; transition: color .2s ease;
}
.ch-value:hover{color: var(--green-dark);}
.ch-value[href^="mailto"]{font-size: 16.5px; letter-spacing: -.015em;} /* długi adres — w jednej linii */
.ch-hint{font-size: 13px; color: var(--muted);}
.ch-actions{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px;}
.ch-actions .btn svg:not(.arr){width: 16px; height: 16px;}
.ch-copy{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line-2); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ch-copy svg{width: 16px; height: 16px;}
.ch-copy:hover{background: var(--bg-tint); border-color: rgba(126,217,87,.5);}
.ch-copy.is-done{background: var(--chip); color: var(--green-dark); border-color: rgba(31,107,31,.25);}
/* Telefon — wyróżniona, ciemna */
.channel.is-primary{
  color: #fff; border-color: #1d2c22;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(126,217,87,.22), transparent 60%),
    linear-gradient(rgba(126,217,87,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,217,87,.05) 1px, transparent 1px),
    linear-gradient(135deg, #14241a 0%, #0b1510 100%);
  background-size: auto, 28px 28px, 28px 28px, auto;
  box-shadow: 0 30px 60px -28px rgba(10,20,14,.7);
}
.channel.is-primary .ch-ic{background: rgba(126,217,87,.14); color: var(--green); box-shadow: inset 0 0 0 1px rgba(126,217,87,.25), 0 0 20px -6px rgba(126,217,87,.6);}
.channel.is-primary .ch-label{color: var(--green);}
.channel.is-primary .ch-value{color: #fff; font-size: 30px;}
.channel.is-primary .ch-value:hover{color: var(--green);}
.channel.is-primary .ch-hint{color: rgba(232,243,226,.6);}
.channel.is-primary .ch-copy{color: #e8f3e2; border-color: rgba(255,255,255,.18);}
.channel.is-primary .ch-copy:hover{background: rgba(255,255,255,.06);}
.channel.is-primary .ch-copy.is-done{background: rgba(126,217,87,.15); color: var(--green); border-color: rgba(126,217,87,.35);}

/* Godziny + mapa */
.contact-grid--map{grid-template-columns: 1fr 1.35fr;}
.hours{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;}
.hours li{
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 12px; margin: 0 -12px; border-radius: 10px;
  font-size: 14.5px; color: var(--ink-2);
}
.hours li + li{border-top: 1px solid var(--line);}
.hours li span:last-child{font-family: 'Space Grotesk', sans-serif; font-weight: 500; color: var(--ink);}
.hours li.is-closed span:last-child{color: var(--muted); font-weight: 400;}
.hours li.is-today{background: var(--bg-tint); border-color: transparent; font-weight: 600; color: var(--ink);}
.hours li.is-today + li{border-color: transparent;}
.hours li.is-today span:first-child::after{
  content: "dziś"; margin-left: 8px; padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-ink); background: var(--green);
}
.map-box{border-radius: var(--radius-lg); box-shadow: var(--shadow-3);}
.map-overlay .dot svg{width: 22px; height: 22px;}
.map-go{
  margin-left: auto; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--green-ink); background: linear-gradient(145deg, #a6ec84, var(--green));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), var(--shadow-green);
  transition: transform .25s var(--ease-out);
}
.map-go:hover{transform: translate(2px, -2px);}
.map-go svg{width: 20px; height: 20px;}

/* Co dalej */
.contact-page{padding-bottom: 80px;}
.next-steps{padding: 10px 0 110px;}
.ns-head{text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 40px;}
.ns-grid{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative;}
.ns-grid::before{ /* linia łącząca kroki */
  content:""; position: absolute; left: 12%; right: 12%; top: 50px; height: 2px; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(126,217,87,.6), transparent);
}
.ns-step{
  position: relative; z-index: 1;
  padding: 26px 26px 28px; border-radius: var(--radius);
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(212,220,214,.75);
  box-shadow: var(--hi-line), var(--shadow-1);
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.ns-step:hover{transform: translateY(-4px); box-shadow: var(--hi-line), var(--shadow-2);}
.ns-ic{
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  color: var(--green-ink); background: linear-gradient(145deg, #a6ec84, var(--green));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-green);
}
.ns-ic svg{width: 24px; height: 24px;}
.ns-n{
  position: absolute; top: 20px; right: 24px;
  font-family: 'Space Grotesk', sans-serif; font-size: 46px; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: rgba(31,107,31,.08);
}
.ns-step .h{font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; margin-bottom: 8px;}
.ns-step .d{font-size: 14px; color: var(--muted); line-height: 1.6;}

@media (max-width: 1024px){
  .status-card{min-width: 0; width: 100%;}
  .channels{grid-template-columns: 1fr 1fr;}
  .channel.is-primary{grid-column: 1 / -1;}
  .contact-grid--map{grid-template-columns: 1fr;}
  .ns-grid{grid-template-columns: 1fr;}
  .ns-grid::before{display: none;}
  .next-steps{padding-bottom: 70px;}
}
@media (max-width: 640px){
  .hero--compact .hero-side .status-card{display: none;} /* telefon ma dock na dole — hero zostaje zwarte */
  .channels{grid-template-columns: 1fr;}
  .channel{padding: 22px 20px;}
  .channel.is-primary .ch-value{font-size: 26px;}
  .map-overlay{left: 12px; right: 12px; top: 12px; min-width: 0; max-width: none;}
  .next-steps{padding-bottom: 50px;}
}

/* ═══ O NAS (o-nas.html) ═══ */
/* Hero — karta "w skrócie" po prawej */
.about-facts{
  list-style: none; margin: 0; padding: 6px 20px;
  min-width: 300px;
  background: linear-gradient(160deg, rgba(20,36,26,.92), rgba(10,19,14,.88));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 48px -24px rgba(0,0,0,.6);
}
.about-facts li{display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0;}
.about-facts li + li{border-top: 1px solid rgba(255,255,255,.08);}
.af-k{font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--green);}
.af-v{font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; font-weight: 500; color: #fff; text-align: right;}

/* Historia — linia wypełniana przy scrollu + etapy jako karty */
.timeline--cards{gap: 16px;}
.timeline--cards::before{
  top: 25px; height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green) var(--line-fill, 0%), var(--line-2) var(--line-fill, 0%));
}
.timeline--cards .step-t{padding: 0;}
.timeline--cards .dot{
  width: 18px; height: 18px; margin: 16px 0 22px 22px;
  background: radial-gradient(circle at 35% 30%, #c8f5ad, var(--green) 60%);
  border: 0; box-shadow: 0 0 0 6px #f4f9f3, 0 0 0 7px rgba(126,217,87,.6), 0 0 16px 2px rgba(126,217,87,.45);
}
.tl-card{
  position: relative; height: calc(100% - 56px);
  padding: 22px 22px 24px; border-radius: var(--radius);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(212,220,214,.75);
  box-shadow: var(--hi-line), var(--shadow-1);
  transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
}
.tl-card::before{ /* "dzióbek" w stronę kropki */
  content:""; position: absolute; left: 26px; top: -7px; width: 12px; height: 12px; transform: rotate(45deg);
  background: inherit; border-left: 1px solid rgba(212,220,214,.75); border-top: 1px solid rgba(212,220,214,.75);
}
.tl-card:hover{transform: translateY(-4px); box-shadow: var(--hi-line), var(--shadow-2); border-color: rgba(126,217,87,.5);}
.timeline--cards .td{max-width: none;}
.step-t.is-now .tl-card{
  color: #fff; border-color: #1d2c22;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(126,217,87,.2), transparent 60%),
    linear-gradient(135deg, #14241a, #0b1510);
  box-shadow: 0 30px 60px -28px rgba(10,20,14,.7);
}
.step-t.is-now .tl-card::before{background: #14241a; border-color: #1d2c22;}
.step-t.is-now .year{color: var(--green);}
.step-t.is-now .td{color: rgba(232,243,226,.7);}
.step-t.is-now .dot{animation: nowPulse 2s ease-out infinite;}
@keyframes nowPulse{
  0%{box-shadow: 0 0 0 6px #f4f9f3, 0 0 0 7px rgba(126,217,87,.6), 0 0 0 7px rgba(126,217,87,.4);}
  100%{box-shadow: 0 0 0 6px #f4f9f3, 0 0 0 7px rgba(126,217,87,.6), 0 0 0 20px rgba(126,217,87,0);}
}

/* Wartości — duży, delikatny numer w rogu każdej karty */
.values-grid{counter-reset: val;}
.value-card{counter-increment: val;}
.value-card .h::after{
  content: counter(val, decimal-leading-zero);
  position: absolute; top: 16px; right: 22px;
  font-family: 'Space Grotesk', sans-serif; font-size: 46px; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: rgba(31,107,31,.08);
  transition: color .35s ease, transform .4s var(--ease-out);
}
.value-card:hover .h::after{color: rgba(126,217,87,.35); transform: translateY(-3px);}

/* Zespół — inicjały zamiast pustych zaślepek (do czasu prawdziwych zdjęć) */
.photo--initials{
  position: relative; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(126,217,87,.28), transparent 70%),
    linear-gradient(rgba(126,217,87,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,217,87,.06) 1px, transparent 1px),
    linear-gradient(160deg, #17291d 0%, #0b1510 100%);
  background-size: auto, 22px 22px, 22px 22px, auto;
}
.photo--initials .initials{
  font-family: 'Space Grotesk', sans-serif; font-size: 84px; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(126,217,87,.7);
  text-shadow: 0 0 40px rgba(126,217,87,.25);
  transition: color .4s ease, transform .6s var(--ease-out);
}
.team-card:hover .photo--initials .initials{color: rgba(126,217,87,.9); transform: scale(1.06);}
.photo-tag{
  position: absolute; left: 14px; bottom: 14px;
  padding: 5px 10px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); background: rgba(14,20,17,.6); border: 1px solid rgba(126,217,87,.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.team-card .role{color: var(--green-dark); font-weight: 500;}

/* Koniec strony — mniej pustki przed pasem CTA */
.trust{padding-bottom: 20px;}

@media (max-width: 1024px){
  .about-facts{min-width: 0; width: 100%;}
  .timeline--cards{gap: 18px;}
  .tl-card{height: auto;}
}
@media (max-width: 640px){
  .hero--compact .hero-side .about-facts{display: none;} /* na telefonie hero zostaje zwarte */
  .photo--initials .initials{font-size: 64px;}
}

/* ═══ STICKY KONTAKT (site-chrome.js → .contact-dock w <body>) ═══
   Desktop/tablet: pionowo przy prawej krawędzi, podpis wysuwa się w lewo na hover.
   Phone (≤640): belka na dole ekranu, ikona + podpis. */
.contact-dock{
  position: fixed; right: 0; top: 50%; z-index: 150;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  transform: translateY(-50%);
  animation: dockIn .7s var(--ease-out) .8s both;
}
@keyframes dockIn{from{opacity: 0; transform: translate(24px, -50%);} to{opacity: 1; transform: translate(0, -50%);}}
.cd-btn{
  display: flex; align-items: center; flex-direction: row-reverse;
  height: 52px; padding: 0 15px;
  border-radius: 16px 0 0 16px;
  background: rgba(14,20,17,.86);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--green);
  border: 1px solid rgba(126,217,87,.22); border-right: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px -12px rgba(0,0,0,.55);
  transition: background .25s ease, color .25s ease, box-shadow .3s ease, padding .35s var(--ease-out);
}
.cd-btn svg{flex-shrink: 0;}
.cd-label{
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff;
  transition: max-width .4s var(--ease-out), opacity .25s ease, margin .4s var(--ease-out);
}
.cd-btn:hover, .cd-btn:focus-visible{padding-left: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px -12px rgba(0,0,0,.6), 0 0 24px -6px rgba(126,217,87,.45);}
.cd-btn:hover .cd-label, .cd-btn:focus-visible .cd-label{max-width: 120px; opacity: 1; margin-right: 12px;}
.cd-btn.is-primary{
  background: linear-gradient(180deg, #96e670, var(--green) 55%, #6fcd47);
  color: var(--green-ink); border-color: rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-green);
}
.cd-btn.is-primary .cd-label{color: var(--green-ink);}
.cd-btn.is-primary svg{animation: ring 4s ease-in-out 2s infinite;}
@keyframes ring{
  0%, 88%, 100%{transform: rotate(0);}
  90%{transform: rotate(-14deg);} 92%{transform: rotate(12deg);}
  94%{transform: rotate(-10deg);} 96%{transform: rotate(6deg);}
}
/* 641–1320px: wąski margines obok treści — dock w prawy dolny róg, żeby nie zasłaniał kart przy krawędzi */
@media (min-width: 641px) and (max-width: 1320px){
  .contact-dock{top: auto; bottom: 24px; transform: none; animation-name: dockInLow;}
  @keyframes dockInLow{from{opacity: 0; transform: translateX(24px);} to{opacity: 1; transform: none;}}
}
@media (max-width: 640px){
  .contact-dock{
    top: auto; bottom: 0; left: 0; right: 0;
    flex-direction: row; align-items: stretch; gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    transform: none;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px -16px rgba(15,30,20,.3);
    animation: dockUp .6s var(--ease-out) .5s both;
  }
  @keyframes dockUp{from{transform: translateY(100%);} to{transform: none;}}
  .cd-btn{
    flex: 1; flex-direction: column; justify-content: center; gap: 3px;
    height: 54px; padding: 0 !important;
    border-radius: 14px; border: 1px solid var(--line);
    background: var(--bg-tint); color: var(--green-dark);
    box-shadow: none !important;
  }
  .cd-label{max-width: none !important; opacity: 1 !important; margin: 0 !important; font-size: 10.5px; color: var(--ink-2);}
  .cd-btn.is-primary{border-color: transparent;}
  body.has-contact-dock{padding-bottom: calc(70px + env(safe-area-inset-bottom));}
}
body.nav-locked .contact-dock{opacity: 0; pointer-events: none;}

/* ═══ Dotyk / tablet: wyłącz ciężkie efekty ═══ */
@media (hover: none), (pointer: coarse), (max-width: 1024px){
  .cursor-glow, .hero-card .hero-spot{display: none;}
  .fx-tilt{transform: none !important;}
  body{background-attachment: scroll;}
  .acc-item:not(.open):hover, .faq-item:not(.open):hover{transform: none;}
  .leading-media::before{left: -10px; top: -10px;}
  .steps::before{display: none;}
}
@media (max-width: 640px){
  .hero .hero-card, .hero.hero--compact .hero-card{min-height: 0;}
  .marquee{margin-top: -46px; padding: 26px 0;}
  .marquee-band{padding: 14px 0;}
  .marquee-item{gap: 24px; padding-right: 24px;}
  .marquee-item::after{width: 14px; height: 14px;}
  .why-card{padding: 18px 18px;}
  .step .n{font-size: 40px;}
  .hero-card > .hero-grid{background-size: 40px 40px;}
  .pack-card.is-featured{transform: none;}
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation: none !important;}
  [data-reveal]{filter: none !important; transform: none !important;}
  .fx-tilt{transform: none !important;}
  .cursor-glow{display: none;}
}

/* ═══ KLASY POMOCNICZE (zamiast style="..." w HTML) ═══
   !important — działają tak samo jak dawne style inline */
.mt-6{margin-top: 6px !important;}
.mt-8{margin-top: 8px !important;}
.mt-14{margin-top: 14px !important;}
.mt-18{margin-top: 18px !important;}
.mt-20{margin-top: 20px !important;}
.mt-30{margin-top: 30px !important;}
.c-green{color: var(--green) !important;}
.c-white{color: #fff !important;}
.accent{color: var(--green) !important; font-style: normal !important;}
.lead-muted{color: var(--muted) !important; font-size: 15px !important; max-width: 460px !important;}
.btn-row{display: flex !important; gap: 12px !important; flex-wrap: wrap !important;}
.jc-end{justify-content: flex-end !important;}
.split-head{display: flex !important; justify-content: space-between !important; align-items: end !important; gap: 60px !important; margin-bottom: 32px !important;}
.btn-on-dark{background: rgba(255,255,255,.06) !important; color: #fff !important; border-color: rgba(255,255,255,.16) !important;}
/* pinezki na mapie Polski */
.pin-gdansk{left: 47% !important; top: 20% !important;}
.pin-poznan{left: 33.4% !important; top: 44.1% !important;}
.pin-warszawa{left: 65.7% !important; top: 46.3% !important;}
.pin-wroclaw{left: 33% !important; top: 66% !important;}
.pin-krakow{left: 57.3% !important; top: 73.2% !important;}