/* Landing /webinar/ (szablon WEB, layout blank). Roboto/Inter ze starej strony zastąpione Poppins (nagłówki) i fontem
   systemowym (tekst), ARCHITEKTURA sekcje 4 i 9. Własne kolory webinaru (odczytane ze starej strony) tylko jako --web-*. */
:root {
  --web-ink: #000000;           /* tekst kart, tytuł i treść ostatniej sekcji */
  --web-container: 1120px;
  --web-gutter: 10px;
}

.web-container {
  width: 100%;
  max-width: calc(var(--web-container) + 2 * var(--web-gutter));
  margin-inline: auto;
  padding-inline: var(--web-gutter);
}
.web-section { padding: 70px 0; }
.web-band { padding: 70px 0; background: var(--g-brand-text); color: var(--c-on-brand); }
.web-band h2, .web-band h3 { color: var(--c-on-brand); }
.web-h2 { margin: 0 0 var(--s-5); font-size: 2.5rem; font-weight: var(--fw-heading-strong); line-height: 1; text-align: center; }
.web-intro { margin: 0 0 60px; color: var(--c-heading); font-size: 1.25rem; line-height: 1.4; text-align: center; }

/* Przyciski do ClickMeeting: gradient marki od #007AB3 (biały tekst, sekcja 4 ARCHITEKTURA). */
.web-cta { margin: var(--s-6) 0 0; text-align: center; }
.web-cta--start { text-align: left; }
.web-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 50px;
  background: var(--g-brand-text);
  color: var(--c-on-brand);
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  transition: background 0.3s;
}
.web-btn:hover, .web-btn:focus-visible { background: var(--g-brand-45-rev); color: var(--c-on-brand); }
.web-btn--lg { font-size: 1.125rem; }
.web-btn--sm { font-size: 0.9375rem; }
/* Na pasmach z gradientem przycisk ma obwódkę, żeby nie zlewał się z tłem. */
.web-band .web-btn { box-shadow: 0 0 0 1px var(--c-line-on-brand); }

/* Hero */
.web-hero { padding: 40px 0 50px; background: var(--g-brand-text); color: var(--c-on-brand); }
.web-hero__grid { display: grid; gap: var(--s-6); align-items: center; }
.web-hero__logo img { width: 164px; margin-bottom: 70px; }
.web-hero__kicker { margin: 0 0 var(--s-3); font-size: 1.25rem; }
.web-hero__title { margin: 0 0 var(--s-3); color: var(--c-on-brand); font-size: 1.5625rem; font-weight: var(--fw-heading); line-height: 1.1; }
.web-hero__lead { margin: 0; font-size: 1rem; }
.web-hero__date { margin: var(--s-6) 0 0; font-size: 1.375rem; line-height: 1.2; }
.web-hero__date strong { font-weight: 700; }
.web-hero .web-cta { margin-top: var(--s-5); }

/* Dla kogo */
.web-audience__lead { margin: 0 0 var(--s-6); color: var(--c-heading); font-size: 1.5625rem; line-height: 1.15; text-align: center; }
.web-audience__list { display: grid; gap: var(--s-6); margin: 0; padding: 0 var(--s-2); list-style: none; text-align: center; }
.web-audience__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; }
.web-audience__name { margin: 20px 0; color: var(--web-ink); font-size: 1.5625rem; font-weight: var(--fw-heading-strong); line-height: 1; }
.web-audience__item p { margin: 0; color: var(--web-ink); line-height: 1.25; }

/* Prowadzący */
.web-hosts__title { margin: 0 0 var(--s-7); font-size: 2.25rem; font-weight: var(--fw-heading-strong); line-height: 1.1; text-align: center; }
.web-hosts__list { display: grid; gap: var(--s-7); margin: 0; padding: 0; list-style: none; }
.web-hosts__item { display: grid; justify-items: center; gap: var(--s-6); text-align: center; }
.web-hosts__img {
  width: 148px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid transparent;
  background: var(--g-brand) border-box;
}
.web-hosts__name { margin: 0 0 var(--s-3); font-size: 1.5625rem; font-weight: var(--fw-heading-strong); line-height: 1.1; }
.web-hosts__item p { margin: 0 auto; max-width: 340px; font-size: 1.125rem; line-height: 1.55; }

/* Dlaczego warto */
.web-why__intro { max-width: 660px; margin-inline: auto; }
.web-why__list { display: grid; gap: var(--s-7); margin: 0; padding: 0 37px; list-style: none; }
.web-why__list li { color: var(--c-text-strong); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 300; line-height: 1.2; }
.web-why__icon {
  display: grid;
  place-items: center;
  width: 77px; height: 77px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--g-brand-text);
  color: var(--c-on-brand);
}
.web-why__icon svg { width: 44px; height: 44px; }

/* Agenda: numer w kółku (licznik CSS listy ol), tytuł, opis. */
.web-agenda__when { margin: 0 0 var(--s-7); font-size: 1.5625rem; line-height: 1.12; text-align: center; }
.web-agenda__list { margin: 0; padding: 0; list-style: none; counter-reset: agenda; }
.web-agenda__item { margin-bottom: var(--s-7); counter-increment: agenda; }
.web-agenda__item::before {
  content: counter(agenda);
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: var(--s-5);
  border: 2px solid var(--c-on-brand);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--fw-heading-strong);
}
.web-agenda__name { margin: 0 0 var(--s-5); font-family: var(--font-body); font-size: 1.5625rem; font-weight: 400; line-height: 1.12; }
.web-agenda__item p { margin: 0; font-size: 1.125rem; line-height: 1.55; }

/* Ostatnia sekcja: telefon tekst, potem ilustracja; od 768 px ilustracja po lewej. */
.web-final__grid { display: grid; gap: var(--s-6); align-items: center; }
.web-final__img { width: 100%; max-width: 420px; justify-self: center; }
.web-final__grid > picture:first-child { order: 1; }
.web-final__logo img { width: 164px; margin-bottom: var(--s-6); }
.web-final__title { margin: 0 0 var(--s-7); color: var(--c-link); font-size: 2.3125rem; font-weight: var(--fw-heading-strong); line-height: 1.08; }
.web-final__title span { color: var(--web-ink); }
.web-final__lead { margin: 0 0 var(--s-5); color: var(--web-ink); font-size: 1.5625rem; line-height: 1.12; }
.web-final__ask { margin: 0; color: var(--c-link); font-size: 1.5625rem; line-height: 1.4; }
.web-final__ask a { color: var(--web-ink); }
.web-final__ask a:hover, .web-final__ask a:focus-visible { color: var(--c-link); }

/* Mała stopka ustawień zgody, poza landingiem. Handler main.js ujawnia przycisk. */
.web-footer {
  padding: var(--s-5) var(--s-4);
  border-top: 1px solid var(--c-line-strong);
  background: var(--c-bg-soft);
  color: var(--c-text-strong);
  text-align: center;
}
.web-footer:has([data-cookies="open"][hidden]) { display: none; }
.web-footer__cookies {
  min-width: 44px;
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 0;
  background: none;
  text-decoration: underline;
  scroll-margin-block: var(--s-2);
}

@media (min-width: 768px) {
  .web-section { padding: 110px 0; }
  .web-band { padding: 110px 0; }
  .web-container { --web-gutter: 25px; }

  .web-hero { display: grid; align-items: center; min-height: 900px; padding: 60px 0; }
  .web-hero__grid { grid-template-columns: 1fr 0.8fr; gap: var(--s-5); }
  .web-hero__logo img { width: 133px; margin-bottom: 70px; }
  .web-hero__kicker { font-size: 1.5625rem; line-height: 1.12; }
  .web-hero__title { margin-bottom: 40px; font-size: clamp(2.25rem, 1rem + 2.6vw, 3.125rem); line-height: 1; }
  .web-hero__lead { font-size: 1.5625rem; line-height: 1.12; }
  .web-hero__date { margin-top: 56px; font-size: 1.5625rem; }
  .web-hero .web-cta { margin-top: 36px; }

  .web-intro { margin-bottom: 100px; }
  .web-audience__list { grid-template-columns: repeat(3, 1fr); gap: 70px; padding: 0; }
  .web-audience__item p { padding-inline: var(--s-1); }
  .web-audience__name { font-size: clamp(1.25rem, 0.5rem + 1.1vw, 1.5625rem); }

  .web-hosts { padding: 150px 0; }
  .web-hosts__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-6); }
  .web-hosts__title { margin: 0; font-size: clamp(2.25rem, 1rem + 2vw, 2.8125rem); line-height: 1.11; text-align: left; }
  .web-hosts__item { grid-template-columns: 150px 1fr; align-items: center; }
  .web-hosts__img { width: 150px; }

  .web-why__list { grid-template-columns: repeat(3, 1fr); gap: 72px 50px; padding: 0; }

  .web-agenda__item { display: grid; grid-template-columns: 70px 1fr; gap: var(--s-4) var(--s-5); margin-bottom: 70px; }
  .web-agenda__item::before { margin: 0; }
  .web-agenda__name, .web-agenda__item p { margin: 0; }
  .web-agenda__item p { grid-column: 2; }

  .web-final { padding: 150px 0 250px; }
  .web-final__grid { grid-template-columns: 1fr 1.4fr; gap: 66px; }
  .web-final__grid > picture:first-child { order: 0; }
  .web-final__logo img { width: 190px; }
}
@media (min-width: 1025px) {
  .web-section { padding: 130px 0; }
  .web-agenda { padding: 130px 0; }
  .web-agenda__item { grid-template-columns: 92px 290px 1fr; gap: 0 54px; margin-bottom: 90px; }
  .web-agenda__item::before { margin-left: 22px; }
  .web-agenda__item p { grid-column: auto; }
  .web-final__grid { grid-template-columns: 420px 1fr; }
}

/* Animacje wejścia (jak Elementor: fadeIn, fadeInDown, bounceIn, pulse, slideInUp). Ukrywa je dopiero webinar.js,
   więc bez JS i przy prefers-reduced-motion treść jest widoczna od razu. */
.anim [data-anim]:not(.is-in) { opacity: 0; }
.anim [data-anim].is-in { animation: 1.25s both var(--anim-name, web-fade-in); }
[data-anim="fade-in"] { --anim-name: web-fade-in; }
.anim [data-anim="fade-in"].is-in { animation-duration: 2s; }
[data-anim="bounce-in"] { --anim-name: web-bounce-in; }
[data-anim="pulse"] { --anim-name: web-pulse; }
[data-anim="slide-in-up"] { --anim-name: web-slide-in-up; }
@keyframes web-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes web-slide-in-up { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: none; } }
@keyframes web-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes web-bounce-in {
  0% { opacity: 0; transform: scale(0.3); }
  20% { transform: scale(1.1); }
  40% { transform: scale(0.9); }
  60% { opacity: 1; transform: scale(1.03); }
  80% { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .anim [data-anim]:not(.is-in) { opacity: 1; }
  .anim [data-anim].is-in { animation: none; }
}