/* ══════════════════════════════════════════════════════════════════════
   MADD — hero z gradientem mesh
   Dokładany PO madd-x.css, nadpisuje sekcję .hero. Nic poza hero nie
   dotyka, żeby dało się go wycofać jednym <link>.
   ══════════════════════════════════════════════════════════════════════ */

.hero{
  /* position/isolation/overflow dokłada .mesh-host z madd-mesh.css */
  padding:clamp(88px,13vh,150px) 0 clamp(76px,10vh,124px);
}

/* Tło (mesh + fallback + wygaszenie) wyprowadzone do madd-mesh.css,
   bo korzystają z niego też podstrony. Tu zostaje tylko to, co dotyczy
   układu i wejścia hero na stronie głównej. */

/* ── treść ─────────────────────────────────────────────────────────── */

.hero-badge{
  background:color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.hero h1{
  font-size:clamp(2.7rem,6.8vw,5.4rem);
  max-width:16ch;
}

/* SplitText tnie nagłówek na wiersze i słowa; .line dostaje overflow,
   żeby słowa wjeżdżały zza krawędzi wiersza, a nie zza całego bloku. */
.hero h1 .split-line{ overflow:hidden; display:block; padding-bottom:.06em }
.hero h1 .split-word{ display:inline-block; will-change:transform }

/* Dopóki GSAP nie przejmie, nagłówek jest niewidoczny — inaczej mignąłby
   w pozycji docelowej przed animacją. KLUCZOWE: klasę .js-motion dokłada
   sam skrypt, dopiero gdy GSAP naprawdę się załadował. Bez JS-a, przy
   błędzie 404 na bibliotece albo przy wyjątku — reguła nie istnieje
   i strona jest normalnie widoczna. Nigdy odwrotnie. */

.hero .lead{
  max-width:52ch;
  color:var(--fg-2);
}

.hero-cta{ margin-top:38px }

/* Główny CTA dostaje delikatną poświatę akcentu — jedyny mocny punkt
   na całym ekranie, ma wygrywać z ruchomym tłem. */
.hero-cta .btn-primary{
  box-shadow:0 1px 2px rgba(10,10,10,.08), 0 12px 34px -14px rgba(152,56,192,.55);
}
[data-wh-theme="dark"] .hero-cta .btn-primary{
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 40px -12px rgba(152,56,192,.7);
}

.hero-meta{ margin-top:32px }

/* ── wejście treści ────────────────────────────────────────────────── */

/* ── ruch wyłączony systemowo ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  .hero-mesh-canvas{ transition:none }
}

@media (max-width:640px){
  .hero{ padding:64px 0 56px }
  .hero h1{ max-width:none }
}