/* ═══════════════════════════════════════════════════════════
   HOGS - DESIGN SYSTEM
   Wspólny arkusz stylów dla wszystkich stron (index, funkcje, jak-to-dziala)
   Zgodne z brandbookiem HOGS
   ═══════════════════════════════════════════════════════════ */

/* ─────────── DESIGN TOKENS ─────────── */
:root{
  /* Tła jasne (z brandbooka) */
  --bg-light:#FBFBFB;
  --bg-light-2:#F7F7F7;
  --bg-light-3:#F1F1F1;
  --bg-light-4:#E9E9E9;

  /* Tła ciemne (z brandbooka) */
  --bg-dark:#212121;
  --bg-dark-2:#1A1A1A;
  --bg-dark-3:#161616;

  /* Tekst (atrament) */
  --ink:#090909;
  --ink-soft:#535353;
  --ink-faint:#A2A2A2;
  --ink-very-faint:#C6C6C6;

  /* Linie */
  --line:#E9E9E9;
  --line-dark:rgba(255,255,255,.08);

  /* Akcent główny - niebieski */
  --blue:#0C6DFF;
  --blue-light:#639FF8;
  --blue-soft:rgba(12,109,255,.08);

  /* Akcent dodatkowy - fiolet */
  --purple:#854CDB;
  --purple-light:#B695E9;
  --purple-soft:rgba(133,76,219,.1);

  /* Akcent kontrastowy - limonka */
  --lime:#BFF678;

  /* [ZMIANA] jedyny kolor spoza palety marki: komunikaty bledow w formularzu */
  --error:#D92D20;
  --error-soft:rgba(217,45,32,.10);
  --lime-soft:rgba(191,246,120,.25);

  --white:#FFFFFF;

  /* Biały z przezroczystością (dla ciemnych sekcji) */
  --white-faint:rgba(255,255,255,.06);
  --white-soft:rgba(255,255,255,.08);
  --white-muted-1:rgba(255,255,255,.4);
  --white-muted-2:rgba(255,255,255,.55);
  --white-muted-3:rgba(255,255,255,.7);
  --white-strong:rgba(255,255,255,.85);

  /* Layout */
  --max:1440px;
  --pad:clamp(20px,4vw,80px);

  /* Promienie (z brandbooka) */
  --rs:8px;
  --rm:16px;
  --rl:24px;
  --rxl:32px;
  --rp:100px;

  /* Spacing scale (8px base) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-14:56px;
  --space-16:64px;
  --space-20:80px;

  /* Section padding (block) */
  /* [ZMIANA] 140/80 dawalo 280 px odstepu na styku dwoch sekcji. Zeszlismy do
     100/64, czyli 200 px na styku - strona oddycha tak samo, ale nie ma juz
     pustych ekranow miedzy sekcjami. */
  --section-y:100px;
  --section-y-mobile:64px;

  /* Cienie */
  --shadow-sm:0 8px 28px rgba(9,9,9,.06);
  --shadow-md:0 12px 28px rgba(9,9,9,.12);
  --shadow-lg:0 24px 48px rgba(9,9,9,.08);
  --shadow-xl:0 20px 48px rgba(9,9,9,.08);
  --shadow-2xl:0 32px 80px rgba(9,9,9,.18);
  --shadow-3xl:0 32px 64px rgba(9,9,9,.2);

  /* Font weights */
  --fw-light:300;
  --fw-regular:400;
  --fw-semibold:600;
  --fw-bold:700;

  /* Easing */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ─────────── RESET ─────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
body{
  background:var(--bg-light);
  color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.5;
}
::selection{background:var(--blue);color:var(--white)}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
ul{list-style:none}

/* ─────────── TYPOGRAFIA ─────────── */
h1,h2,h3,h4{
  font-family:'Poppins',sans-serif;
  letter-spacing:-.025em;
  color:var(--ink);
  line-height:1.05;
  font-weight:var(--fw-bold);
}

/* ─────────── LOGO HOGS ─────────── */
.hogs-logo-symbols{position:absolute;width:0;height:0;overflow:hidden}
.hogs-svg{display:inline-block}
.hogs-svg .letters{fill:currentColor}
.hogs-svg .dot{fill:var(--blue)}
.on-dark .hogs-svg .letters,
.press-section .hogs-svg .letters,
.dark-card .hogs-svg .letters,
.hg-footer .hogs-svg .letters{fill:var(--white)}
.hogs-lockup{display:inline-flex;align-items:center;gap:.22em;line-height:1}
.hogs-lockup .hogs-svg{height:.92em;width:auto;flex-shrink:0}
.hogs-lockup .aitms{font-family:'Poppins',sans-serif;font-weight:var(--fw-light);letter-spacing:-.025em;line-height:.92}

/* ─────────── PROGRESS BAR ─────────── */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9998;background:transparent}
.progress-fill{height:100%;background:var(--blue);width:0%;transition:width .1s linear}

/* ─────────── NAVIGATION - TOPBAR (full-width, desktop) ─────────── */
nav.topbar{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  display:flex;align-items:center;
  padding:12px clamp(20px,4vw,48px);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:var(--fw-semibold);
}
nav.topbar .topbar-logo{display:inline-flex;align-items:center;padding:4px 8px 4px 0;color:var(--ink);flex-shrink:0}
nav.topbar .topbar-logo .hogs-svg{height:36px;width:auto;flex-shrink:0;overflow:visible}
nav.topbar .topbar-logo:hover{background:transparent}
nav.topbar .topbar-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:4px;
}
nav.topbar a{
  color:var(--ink-soft);padding:8px 14px;border-radius:var(--rp);
  transition:all .3s var(--ease);letter-spacing:-.005em;white-space:nowrap;
}
nav.topbar a:hover{color:var(--ink);background:var(--bg-light-3)}
nav.topbar a.cta{background:var(--blue);color:var(--white);font-weight:var(--fw-semibold);padding:8px 18px}
nav.topbar a.cta:hover{background:var(--ink)}
nav.topbar a.login{font-weight:var(--fw-semibold);color:var(--ink)}
/* [ZMIANA] Biezaca strona w nawigacji. Markup mial juz class="active", ale nie bylo
   dla niej stylu. Kolor tekstu idzie w --ink, a pod etykieta stoi krotka linia 2 px
   w niebieskim - ten sam zabieg co w zakladkach produktow na podstronach. Waga
   fontu zostaje, zeby wysrodkowane menu nie przesuwalo sie miedzy stronami. */
nav.topbar .topbar-center > a{position:relative}
nav.topbar .topbar-center > a.active{color:var(--ink)}
nav.topbar .topbar-center > a.active::after,
.topbar-drop-btn.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  border-radius:1px;background:var(--blue);
}
.topbar-drop-btn{position:relative}

/* Ekosystem dropdown (HOGS pay / HOGS ferry) */
.topbar-drop{position:relative;display:inline-flex}
.topbar-drop-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:none;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:inherit;
  color:var(--ink-soft);letter-spacing:-.005em;white-space:nowrap;
  padding:8px 14px;border-radius:var(--rp);
  transition:all .3s var(--ease);
}
.topbar-drop-btn:hover,
.topbar-drop:hover .topbar-drop-btn,
.topbar-drop:focus-within .topbar-drop-btn{color:var(--ink);background:var(--bg-light-3)}
.topbar-drop-btn.active{color:var(--ink);font-weight:var(--fw-semibold)}
.topbar-drop-btn .chev{width:10px;height:10px;transition:transform .3s}
.topbar-drop:hover .topbar-drop-btn .chev,
.topbar-drop:focus-within .topbar-drop-btn .chev{transform:rotate(180deg)}
/* [POPRAWKA] Rozwijane menu w pasku nie gasnie juz przy przejezdzie kursora z przycisku
   na liste. Wczesniej miedzy nimi byla szczelina 6 px, ktora nie nalezy do kontenera -
   kursor w szczelinie oznaczal "zjechal z menu" i lista znikala (display:none od razu).
   Teraz: (1) mostek - niewidoczny pasek pod przyciskiem wypelnia szczeline, gdy menu
   jest otwarte, (2) chowanie z opoznieniem 250 ms, wiec krotkie zboczenie kursora
   w bok nie zamyka listy. */
.topbar-drop:hover::after,
.topbar-drop:focus-within::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.topbar-drop-menu{
  position:absolute;top:calc(100% + 6px);left:0;
  display:flex;flex-direction:column;gap:2px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--rm);
  padding:6px;min-width:180px;
  box-shadow:var(--shadow-sm);
  z-index:100;
  visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .15s var(--ease),transform .15s var(--ease),visibility 0s linear .25s;
}
.topbar-drop:hover .topbar-drop-menu,
.topbar-drop:focus-within .topbar-drop-menu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.topbar-drop-menu a{
  padding:8px 12px;border-radius:var(--rs);
  font-size:13px;font-weight:var(--fw-semibold);color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.topbar-drop-menu a:hover{background:var(--bg-light-2);color:var(--ink)}
.topbar-drop-menu a.active{color:var(--blue)}

/* Mobile - grupa Ekosystem (płaska, z nagłówkiem) */
.mobile-nav-group-label{
  padding:14px 18px 6px;font-size:11px;font-weight:var(--fw-bold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.mobile-nav-drop a.mobile-nav-sublink{padding-left:32px}

/* Language switcher */
.topbar-lang{position:relative;margin-left:auto}
.topbar-lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--rp);
  background:transparent;border:none;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:var(--fw-semibold);
  color:var(--ink-soft);letter-spacing:-.005em;
  transition:all .3s var(--ease);
}
.topbar-lang-btn:hover{color:var(--ink);background:var(--bg-light-3)}
.topbar-lang-btn svg{width:14px;height:14px;flex-shrink:0}
.topbar-lang-btn .chev{width:10px;height:10px;transition:transform .3s}
.topbar-lang:hover .topbar-lang-btn .chev,
.topbar-lang:focus-within .topbar-lang-btn .chev{transform:rotate(180deg)}
/* [POPRAWKA] Ten sam mostek i opoznione chowanie co w menu Uslugi (opis wyzej). */
.topbar-lang:hover::after,
.topbar-lang:focus-within::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.topbar-lang-drop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:100;
  display:flex;flex-direction:column;gap:2px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--rm);
  padding:6px;min-width:140px;
  box-shadow:var(--shadow-sm);
  /* nigdy wyzsza niz ekran - pasek jest przyklejony, wiec strony nie da sie przewinac */
  max-height:calc(100vh - 90px);overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .15s var(--ease),transform .15s var(--ease),visibility 0s linear .25s;
}
.topbar-lang:hover .topbar-lang-drop,
.topbar-lang:focus-within .topbar-lang-drop{visibility:visible;opacity:1;transform:none;transition-delay:0s}
/* [POPRAWKA] Na WordPressie lista ma 21 jezykow - w jednej kolumnie to 800 px i dolne
   pozycje wypadaly poza ekran laptopa. Przy dluzszej liscie dwie kolumny (ok. 400 px).
   Krotka lista (podglad statyczny: Polski / English) zostaje w jednej kolumnie. */
.topbar-lang-drop:has(> a:nth-child(7)){
  display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px 4px;
}
.topbar-lang-drop a{
  padding:8px 12px;border-radius:var(--rs);
  font-size:13px;font-weight:var(--fw-semibold);color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.topbar-lang-drop a:hover{background:var(--bg-light-2);color:var(--ink)}
.topbar-lang-drop a.current{color:var(--ink)}
.topbar-lang-drop a.current::after{content:"✓";margin-left:auto;color:var(--blue);font-weight:var(--fw-bold)}

@media (max-width:1200px){nav.topbar{display:none}}
/* [ZMIANA] Doszla pozycja "Agenci AI" - na 1201-1360 px srodek menu wchodzil na logo i przelacznik
   jezyka. Na tym przedziale ciasniejsze odstepy miedzy pozycjami. */
@media (min-width:1201px) and (max-width:1360px){
  nav.topbar .topbar-center{gap:0}
  nav.topbar a,nav.topbar .topbar-drop-btn{padding-left:10px;padding-right:10px}
  nav.topbar a.cta{padding-left:14px;padding-right:14px}
}

/* ─────────── NAVIGATION - MOBILE ─────────── */
.mobile-nav-toggle{
  position:fixed;top:18px;right:18px;z-index:9100;
  width:46px;height:46px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--rm);
  display:none;align-items:center;justify-content:center;
  color:var(--ink);box-shadow:var(--shadow-sm);
}
.mobile-nav-drop{
  display:none;position:fixed;top:74px;right:18px;left:18px;z-index:9050;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--rl);padding:14px;box-shadow:var(--shadow-xl);
}
.mobile-nav-drop.open{display:flex;flex-direction:column;gap:2px}
/* [ZMIANA] menu nie moze byc wyzsze niz ekran - z 22 jezykami w srodku musi sie przewijac */
.mobile-nav-drop{max-height:calc(100vh - 92px);overflow-y:auto;-webkit-overflow-scrolling:touch}
/* [ZMIANA] jezyki w menu mobilnym - pastylki, biezacy jezyk czarny */
.mobile-nav-lang{display:flex;flex-wrap:wrap;gap:6px;padding:2px 12px 10px}
.mobile-nav-drop .mobile-nav-lang a{display:inline-flex;align-items:center;min-height:40px;padding:8px 13px;border:1px solid var(--line);border-radius:var(--rp);font-size:13px;color:var(--ink-soft)}
.mobile-nav-drop .mobile-nav-lang a.current{background:var(--ink);color:var(--white);border-color:var(--ink)}
.mobile-nav-drop a{padding:14px 16px;border-radius:var(--rm);font-size:14px;font-weight:var(--fw-semibold);color:var(--ink-soft)}
.mobile-nav-drop a:hover{background:var(--bg-light-2);color:var(--ink)}
/* [ZMIANA] biezaca strona w menu mobilnym: ciemny tekst i niebieska kreska z lewej */
.mobile-nav-drop a.active{color:var(--ink);box-shadow:inset 3px 0 0 var(--blue)}
.mobile-nav-drop a.cta{background:var(--blue);color:var(--white);font-weight:var(--fw-semibold);margin-top:8px}
@media (max-width:1200px){.mobile-nav-toggle{display:inline-flex}}

/* ─────────── FLOATING DEMO WIDGET ─────────── */
.nx-demo-widget{position:fixed;right:22px;bottom:22px;z-index:9500;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.nx-demo-widget.is-hidden{opacity:0;transform:translateY(20px);pointer-events:none}
/* [ZMIANA] Widget w kolorze CTA (wariant A). Czarna karta ginela nad ciemnymi
   sekcjami; niebieski to jedyny kolor zarezerwowany na stronie dla "kliknij". */
.nx-demo-widget a{
  display:flex;align-items:center;
  background:var(--blue);color:var(--white);
  padding:14px 20px;border-radius:var(--rl);
  box-shadow:0 18px 40px rgba(12,109,255,.32);
  max-width:280px;transition:transform .3s,background .3s,box-shadow .3s;
}
.nx-demo-widget a:hover{background:var(--ink);box-shadow:0 18px 40px rgba(9,9,9,.22);transform:translateY(-3px)}
.nx-demo-text{display:flex;flex-direction:column}
.nx-demo-widget .main{font-weight:var(--fw-bold);font-size:14px;letter-spacing:-.01em}
.nx-demo-widget .sub{font-weight:var(--fw-regular);font-size:12px;opacity:.78;margin-top:4px}
@media (max-width:768px){
  .nx-demo-widget{
    position:fixed;right:0;left:0;bottom:0;
    z-index:9999;
    transform:translateZ(0);
    will-change:transform;
  }
  .nx-demo-widget a{
    max-width:none;width:100%;border-radius:0;
    padding:14px 20px calc(14px + env(safe-area-inset-bottom)) 20px;
    flex-direction:row;align-items:center;justify-content:center;gap:14px;
    text-align:left;box-shadow:0 -8px 24px rgba(9,9,9,.18);
    border-top:3px solid var(--white-muted-1);
  }
  .nx-demo-widget a:hover{transform:none}
  .nx-demo-widget .main{font-size:15px}
  .nx-demo-widget .sub{font-size:12px;margin-top:2px;opacity:.7}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .hg-footer{padding-bottom:36px}
}
@media (max-width:480px){
  .nx-demo-widget a{
    padding:12px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
    gap:12px;
  }
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* ─────────── SECTION BASE ─────────── */
section{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative}
section.block{padding-top:var(--section-y);padding-bottom:var(--section-y)}
@media (max-width:768px){section.block{padding-top:var(--section-y-mobile);padding-bottom:var(--section-y-mobile)}}

/* ─────────── SECTION TAG (eyebrow) ─────────── */
/* Reguła kolorystyczna: fioletowy = jasne sekcje, limonkowy = ciemne sekcje */
.section-tag{
  font-family:'Poppins',sans-serif;
  font-weight:var(--fw-bold);font-size:13px;
  color:var(--purple);
  margin-bottom:24px;letter-spacing:-.005em;
  display:flex;align-items:center;gap:12px;
}
.section-tag .num{
  font-family:'Poppins',sans-serif;
  font-weight:var(--fw-semibold);font-size:11px;
  color:var(--ink-faint);letter-spacing:.06em;
}
.section-tag::before{content:"";display:block;width:8px;height:8px;background:var(--purple);border-radius:50%}

/* ─────────── SECTION HEAD ─────────── */
.section-head{
  display:flex;flex-direction:column;
  gap:28px;
  margin-bottom:var(--space-16);
}
.section-head h2{font-size:clamp(28px,3vw,44px);font-weight:var(--fw-bold);letter-spacing:-.025em;line-height:1.1}
.section-head h2 .blue{color:var(--blue)}
.section-head h2 .purple{color:var(--purple)}
.section-head h2 .lime{color:var(--lime)}
.section-head h2 em{font-style:normal;font-weight:var(--fw-light);color:var(--ink-faint)}
.section-head .head-lead{
  font-size:clamp(16px,1.3vw,19px);
  color:var(--ink-soft);font-weight:var(--fw-regular);
  line-height:1.55;max-width:760px;
}
.section-head .head-lead strong{color:var(--ink);font-weight:var(--fw-semibold)}
@media (max-width:900px){.section-head{gap:20px;margin-bottom:40px}}

/* ─────────── BRAND PATHS (dekoracja) ─────────── */
.brand-path{position:absolute;pointer-events:none;z-index:0}
.brand-path path{fill:none;stroke:var(--purple-light);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.brand-node{fill:var(--blue)}
.brand-node-purple{fill:var(--purple)}
.brand-node-lime{fill:var(--lime)}

/* ─────────── BUTTONS (.btn-pill) ─────────── */
.btn-pill{
  padding:16px 28px;border-radius:var(--rp);
  font-family:'Poppins',sans-serif;
  font-weight:var(--fw-semibold);font-size:14px;
  letter-spacing:-.005em;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  transition:all .3s var(--ease);
  border:none;white-space:nowrap;
}
.btn-pill.primary{background:var(--blue);color:var(--white)}
.btn-pill.primary:hover{background:var(--ink);transform:translateY(-2px)}
.btn-pill.secondary{background:var(--ink);color:var(--white)}
.btn-pill.secondary:hover{background:var(--blue)}
.btn-pill.outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-pill.outline:hover{background:var(--ink);color:var(--white)}
.btn-pill.outline-light{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.4)}
.btn-pill.outline-light:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

/* ─────────── REVEAL ANIMATIONS ─────────── */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger>*{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal-stagger.in>*{opacity:1;transform:translateY(0)}
.reveal-stagger.in>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.12s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.2s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.28s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.36s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.44s}
.reveal-stagger.in>*:nth-child(7){transition-delay:.52s}

/* ─────────── CTA BANNER (do wstawiania między sekcjami) ─────────── */
.cta-banner{max-width:none;padding:var(--space-12) 0;position:relative;overflow:hidden}
.cta-banner.dark{background:var(--bg-dark);color:var(--white)}
.cta-banner.light{background:var(--bg-light-2);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-banner-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr auto;gap:var(--space-12);align-items:center;
}
.cta-banner-h{font-size:clamp(24px,2.4vw,36px);font-weight:var(--fw-bold);letter-spacing:-.02em;line-height:1.15}
.cta-banner-h em{font-style:normal;font-weight:var(--fw-light)}
.cta-banner.dark .cta-banner-h{color:var(--white)}
.cta-banner.dark .cta-banner-h em{color:var(--lime)}
.cta-banner.light .cta-banner-h{color:var(--ink)}
.cta-banner.light .cta-banner-h em{color:var(--blue);font-weight:var(--fw-bold)}
.cta-banner-sub{font-size:14px;line-height:1.55;margin-top:10px;max-width:560px}
.cta-banner.dark .cta-banner-sub{color:var(--white-muted-3)}
.cta-banner.light .cta-banner-sub{color:var(--ink-soft)}
.cta-banner-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:var(--rp);
  background:var(--blue);color:var(--white);
  font-family:'Poppins',sans-serif;font-weight:var(--fw-semibold);font-size:15px;
  letter-spacing:-.005em;transition:all .3s var(--ease);
  white-space:nowrap;border:none;cursor:pointer;
}
.cta-banner.dark .cta-banner-btn:hover{background:var(--white);color:var(--ink);transform:translateY(-2px)}
.cta-banner.light .cta-banner-btn:hover{background:var(--ink);transform:translateY(-2px)}
@media (max-width:768px){
  .cta-banner-inner{grid-template-columns:1fr;text-align:center;gap:24px}
  .cta-banner-sub{margin-left:auto;margin-right:auto}
  .cta-banner-btn{justify-self:center}
}

/* ─────────── FOOTER ─────────── */
.hg-footer{
  background:var(--bg-dark);color:var(--white);
  padding:96px 0 36px;
  border-top:1px solid var(--line-dark);
}
.hg-footer-inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* Final CTA banner (last chance signup) */
.hg-final-cta{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-12);align-items:center;
  padding:var(--space-14) 0;
  border-bottom:1px solid var(--line-dark);
}
.hg-final-cta-h{
  font-size:clamp(26px,2.6vw,38px);font-weight:var(--fw-bold);
  letter-spacing:-.02em;line-height:1.1;color:var(--white);
}
.hg-final-cta-h em{font-style:normal;color:var(--lime);font-weight:var(--fw-light)}
.hg-final-cta-sub{
  font-size:14px;color:var(--white-muted-3);margin-top:10px;max-width:520px;line-height:1.55;
}
.hg-final-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 32px;border-radius:var(--rp);
  background:var(--blue);color:var(--white);
  font-family:'Poppins',sans-serif;font-weight:var(--fw-semibold);font-size:15px;
  letter-spacing:-.005em;transition:all .3s var(--ease);
  white-space:nowrap;border:none;cursor:pointer;
}
.hg-final-cta-btn:hover{background:var(--white);color:var(--ink);transform:translateY(-2px)}
@media (max-width:768px){
  .hg-final-cta{grid-template-columns:1fr;text-align:center;gap:24px;padding:48px 0}
  .hg-final-cta-sub{margin-left:auto;margin-right:auto}
  .hg-final-cta-btn{justify-self:center}
}
.hg-lead{
  display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space-16);
  padding-bottom:var(--space-16);
  border-bottom:1px solid var(--line-dark);
  align-items:end;
}
.hg-lead-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--lime);font-weight:var(--fw-bold);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;
}
.hg-lead-eyebrow::before{content:"";width:8px;height:8px;background:var(--lime);border-radius:50%}
.hg-lead-h{font-size:clamp(28px,3vw,44px);font-weight:var(--fw-bold);letter-spacing:-.025em;line-height:1.1;color:var(--white)}
.hg-lead-h em{font-style:normal;color:var(--blue-light);font-weight:var(--fw-light)}
.hg-lead-actions{display:flex;flex-direction:column;gap:16px;font-size:16px}
.hg-lead-actions a{color:var(--white-strong);font-weight:500}
.hg-lead-actions a:hover{color:var(--white)}
.hg-lead-socials{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap}
.hg-lead-socials-label{font-size:13px;color:var(--white-muted-2);font-weight:var(--fw-semibold)}
.hg-lead-social{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.12);
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);transition:all .3s;
}
.hg-lead-social:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.hg-lead-social svg{width:18px;height:18px}
/* [ZMIANA] Blok kontaktu w stopce: mail i telefon jako przyciski outline, ikony obok,
   wszystko w jednym wierszu. Reguly przeniesione tu z index.html, bo stopka jest wspolna.
   Dwie kolumny TYLKO na desktopie - ponizej 1000 px stopka zwija sie do jednej kolumny
   (regula nizej), a wczesniejsza wersja tego nadpisywala i kontakt wyjezdzal za ekran. */
@media (min-width:1001px){.hg-lead{grid-template-columns:1fr 1.05fr}}
.hg-lead-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;line-height:1.35}
.hg-lead-cta{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--rp);border:1.5px solid rgba(255,255,255,.28);color:var(--white-strong);font-weight:var(--fw-semibold);font-size:14px;letter-spacing:-.005em;white-space:nowrap;transition:all .3s var(--ease)}
.hg-lead-cta svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.hg-lead-cta:hover{background:var(--white);color:var(--ink);border-color:var(--white);transform:translateY(-2px)}
.hg-lead-cta:hover svg{opacity:1}
.hg-lead-cta:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.hg-lead-socials{margin-top:0;gap:8px;flex-wrap:nowrap}
/* 40 px zamiast 34 - minimalny wygodny cel dotyku, ikona zostaje 16 px */
.hg-lead-social{width:40px;height:40px}
.hg-lead-social svg{width:16px;height:16px}
@media (max-width:1000px){.hg-lead-actions{gap:12px}}
.hg-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-12);
  padding:var(--space-14) 0;border-bottom:1px solid var(--line-dark);
}
.hg-col-h{font-size:13px;color:var(--lime);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.hg-company{font-size:18px;font-weight:var(--fw-semibold);color:var(--white);margin-bottom:18px}
.hg-legal-row{display:flex;gap:12px;font-size:14px;color:var(--white-muted-3);padding:4px 0}
.hg-legal-row dt{min-width:60px;color:rgba(255,255,255,.5);font-weight:var(--fw-semibold)}
.hg-addr{font-style:normal;font-size:14px;line-height:1.65;color:rgba(255,255,255,.78)}
.hg-addr-muted{color:rgba(255,255,255,.5);display:inline-block;margin-top:6px}
.hg-row{display:flex;align-items:center;gap:14px;font-size:14px;padding:4px 0;color:rgba(255,255,255,.78)}
.hg-row-k{color:var(--white-muted-2);min-width:62px}
.hg-hours{padding:32px 0;border-bottom:1px solid var(--line-dark)}
.hg-hours-label{font-size:14px;color:var(--white);font-weight:var(--fw-semibold);margin-bottom:8px}
/* [ZMIANA] Kolumna nawigacyjna w stopce (m.in. wejscie na blog) */
.hg-foot-nav{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.hg-foot-nav a{
  display:inline-block;font-size:14px;line-height:1.5;padding:5px 0;
  color:rgba(255,255,255,.78);transition:color .2s var(--ease);
}
.hg-foot-nav a:hover{color:var(--white)}
.hg-status{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:8px 14px;border-radius:var(--rp);
  background:rgba(191,246,120,.1);color:var(--lime);
  font-size:12px;font-weight:var(--fw-semibold);
}
.hg-status-dot{
  width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px rgba(191,246,120,.2);
  animation:pulse 1.6s ease-in-out infinite;
}
.hg-mark-band{display:flex;align-items:center;gap:24px;padding:48px 0;border-bottom:1px solid var(--line-dark)}
.hg-wordmark{display:inline-flex;align-items:center;color:var(--white)}
.hg-wordmark .hogs-svg{height:48px}
.hg-wordmark img{height:64px;width:auto;display:block}
.hg-mark-meta{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--white-muted-2)}
.hg-mark-meta strong{display:block;color:var(--white);font-size:16px;font-weight:var(--fw-semibold)}
.hg-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:32px;flex-wrap:wrap}
.hg-bottom-copy{font-size:13px;color:rgba(255,255,255,.5)}
.hg-bottom-links{display:flex;flex-wrap:wrap;gap:18px}
.hg-bottom-links a{font-size:13px;color:var(--white-muted-2);display:inline-block;padding:8px 0;margin:-8px 0} /* [ZMIANA] cel dotyku 34 px bez zmiany ukladu */
.hg-bottom-links a:hover{color:var(--white)}
@media (max-width:1200px){
  .hg-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-10)}
}
@media (max-width:1000px){
  .hg-lead,.hg-grid{grid-template-columns:1fr;gap:36px}
  .hg-mark-band{flex-direction:column;align-items:flex-start}
  .hg-bottom{flex-direction:column;align-items:flex-start}
}

/* ─────────── KEYFRAMES ─────────── */
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes scrollLogos{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* [ZMIANA] Wiedza (baza wiedzy) istnieje na razie tylko po polsku - poza PL chowamy pozycję menu. */
html:not([lang^="pl"]) .nav-wiedza{display:none!important}

/* [ZMIANA] Telefony: w tlumaczeniach (DE, FI, NL, RU...) zdarzaja sie slowa dluzsze niz szerokosc
   ekranu. Zamiast wychodzic poza karte, takie slowo zawija sie do nastepnej linii. Krotkie slowa
   lamia sie jak dotad, wiec polska wersja wyglada bez zmian. */
@media (max-width:600px){
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,td,th{overflow-wrap:anywhere}
  .hg-lead{grid-template-columns:minmax(0,1fr)}
}