/* ==========================================================================
   Next Level (udoskonalaj.pl) – home.css
   Strona główna (index.html), wersja 1:1. Wartości z docs/original/webflow.css
   (klasy z HTML oryginału) i z osadzonego stylu .custom-styles strony głównej.
   Komentarz „← .klasa” wskazuje źródłową klasę Webflow.
   Kolejność: baza → min 1280 → min 1440 → max 991 → max 767 → max 479.
   Kontenery hero z fundamentu: .l-pad-2 (← .padding-global-2),
   .l-container-small (← .container-small); tytuł: .hero-title (base.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero – sekcja bez tła: pod nią widać płótno WebGL „splash” (splash.js)
   -------------------------------------------------------------------------- */
/* ← .header-100svh */
.home-hero__header {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100svh - 6rem);
  max-height: 60rem;
  padding-bottom: 0;
}

/* ← .hero-wrapper (reveal: IX2 e-604, slideInBottom 250 / 15) */
.home-hero__content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 20vh;
  margin-bottom: 5vh;
  padding-bottom: 0;
}

/* ← .text-block-15 */
.home-hero__lead {
  margin: 0;
  padding-left: 100px;
  padding-right: 100px;
  font-weight: 400;
  text-align: center;
}

/* --------------------------------------------------------------------------
   2. Nagłówki sekcji „Co robimy?” i „Z nami udoskonalisz”
      (reveal: IX2 e-129, slideInBottom 250 / 15)
   -------------------------------------------------------------------------- */
/* ← .header */
.home-header {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  max-width: 63ch;
  text-align: center;
}

/* ← .heading-8.text-weight-medium */
.home-header__title {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   3. Co robimy? – karty kroków
   -------------------------------------------------------------------------- */
/* ← .section-3 */
.home-steps { background-color: var(--color-bg); }

/* ← .padding-global-3 */
.home-steps__pad {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* ← .w-layout-blockcontainer.container-3.w-container – max-width z .container-3
   wygrywa w webflow.css; clearfix .w-container (:before display:table) nie
   pozwala marginesowi .steps-wrapper „wypaść” nad sekcję → flow-root */
.home-steps__container {
  display: flow-root;
  width: 100%;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}

/* ← .steps-wrapper */
.home-steps__wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 6rem;
  margin-top: 11rem;
}

/* ← .steps-stack-component (reveal: IX2 e-750, fadeIn 150 / offset 0) */
.home-steps__stack {
  display: flex;
  flex-flow: column;
  gap: 1.125rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ← .steps-item – przyklejane karty; skalę 0.9 → 1 przy przewijaniu
   (IX2 e-21 „Steps Scale”, tylko ≥ 992 px) ustawia assets/js/home.js */
.home-steps__item {
  position: sticky;
  top: 8vh;
  display: block;
}

/* ← .steps-card-3 */
.home-step {
  display: flex;
  width: 100%;
  height: auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background-color: var(--color-surface);
}

/* ← .left-content */
.home-step__body {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  padding: 6rem 5rem;
}

/* ← .steps-content-3 */
.home-step__content {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1rem;
  color: #fbfbfb;
}

/* ← .steps-tag-3 („Krok | 01”) */
.home-step__tag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .5rem .75rem;
  border: 1px solid var(--color-primary);
  border-radius: 2.3125rem;
}
/* ← .text-size-small-4.text-weight-bold */
.home-step__tag-label {
  font-size: .875rem;
  font-weight: 700;
}
/* ← .vertical-line-tag */
.home-step__tag-line {
  width: 1px;
  height: 1rem;
  background-color: #fff;
  opacity: .5;
}
/* ← .read-more-button > .opacity-87 > .text-size-small-4.text-weight-medium */
.home-step__tag-num {
  font-size: .875rem;
  font-weight: 500;
  opacity: .7;
}

/* ← .max-width-30ch-2 (kroki 01 i 03) */
.home-step__head { max-width: 30ch; }
/* ← .max-width-40ch (krok 02) */
.home-step__head.home-step__head--wide { max-width: 60ch; }

/* ← .heading-13.text-weight-medium */
.home-step__title {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.15;
}

/* ← .steps-description-2 */
.home-step__text {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  max-width: 40ch;
  opacity: .7;
}
.home-step__text p { margin: 0; }

/* ← .right-content */
.home-step__media {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
/* ← .steps-image */
.home-step__image {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* ← .image-9 (globalny styl img: 100% × 100%, object-fit: cover) */

/* --------------------------------------------------------------------------
   4. Z nami udoskonalisz – 8 kart obszarów
   -------------------------------------------------------------------------- */
/* ← .hero (wewnątrz .section-3: tło #11161f; osadzony styl .custom-styles
   zastępuje tło radialnym gradientem). Oryginał: width 100vw – tu 100%,
   żeby przy klasycznym pasku przewijania nie było przewijania w poziomie. */
.home-areas {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 6rem;
  width: 100%;
  min-height: auto;
  padding-top: 6rem;
  padding-bottom: 2rem;
  background-color: var(--color-bg);
  background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, .1), rgba(255, 255, 255, 0));
}

/* ← #cards.investor-grid.contained */
.home-areas__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-columns: 1fr;
  gap: .85rem;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1rem;
  list-style: none;
}

/* ← .card (reveal: IX2 e-576…e-573, slideInBottom, offset 20) */
.home-card {
  position: relative;
  isolation: isolate;   /* jak w oryginale po IX2 (inline transform) – poświaty w obrębie karty */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 16rem;
  overflow: hidden;
  border-radius: .63rem;
  background-color: var(--color-surface);
  background-image: linear-gradient(#fff0, #ffffff0d);
  cursor: pointer;
}

/* ← .custom-styles: poświaty za kursorem (--mouse-x / --mouse-y z home.js) */
.home-card::before,
.home-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 500ms;
  pointer-events: none;
}
.home-card::before {
  z-index: 3;
  background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, .06), transparent 40%);
}
.home-card::after {
  z-index: 1;
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(161, 213, 243, .4), transparent 40%);
}
.home-areas__grid:hover > .home-card::after { opacity: 1; }   /* ← #cards:hover > .card::after */
.home-card:hover::before { opacity: 1; }

/* ← .card-content-2 */
.home-card__inner {
  position: relative;
  opacity: .85;
}

/* ← .content-wrapper */
.home-card__content {
  position: relative;
  z-index: 2;
  max-width: 420px;
  padding: 2rem;
  color: #c2cadd;
  line-height: 1.3;
  text-align: center;
}

/* ← .card-heading-2 */
.home-card__title {
  margin: 0 0 16px;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* ← .blok-kontent */
.home-card__text {
  display: flex;
  flex-flow: column;
  gap: 16px;
}

/* ← .text-block-16 */
.home-card__scope {
  margin: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* ← .text-block-17 */
.home-card__desc { margin: 0; }

/* --------------------------------------------------------------------------
   5. Breakpointy
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .home-hero__content { margin-top: 30vh; margin-bottom: 5vh; }        /* ← .hero-wrapper */
  .home-header { width: 50%; max-width: none; }                         /* ← .header */
  .home-steps__item { display: flex; }                                  /* ← .steps-item */
  .home-step__body { flex-flow: row; min-height: auto; overflow: visible; }  /* ← .left-content */
  .home-card { gap: 0; height: auto; }                                  /* ← .card */
}

@media (min-width: 1440px) {
  .home-hero__content { margin-top: 30vh; margin-bottom: 30vh; }       /* ← .hero-wrapper */
  .home-hero__lead { color: var(--color-text-muted); font-size: 24px; } /* ← .text-block-15 */
  .home-steps__item { flex-flow: wrap; height: auto; min-height: auto; }
  .home-step__body {                                                    /* ← .left-content */
    justify-content: flex-start;
    align-items: center;
    height: auto;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .home-step__content { height: auto; min-height: 100%; }              /* ← .steps-content-3 */
  .home-step__head { max-width: 40ch; }                                 /* ← .max-width-30ch-2 */
  .home-step__title { font-size: 2.5rem; font-weight: 700; }           /* ← .heading-13.text-weight-medium */
  .home-step__media { max-width: 100%; height: auto; }                 /* ← .right-content */
  .home-step__image { height: auto; }                                   /* ← .steps-image */
  .home-step__image img { height: 100%; min-height: 100%; }            /* ← .image-9 */
  .home-card { color: var(--color-white); }                             /* ← .card */
  .home-card__content {                                                 /* ← .content-wrapper */
    display: flex;
    flex-flow: column;
    gap: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .home-card__scope { font-size: 1rem; text-align: center; }           /* ← .text-block-16 */
  .home-card__desc { font-size: .9rem; }                                /* ← .text-block-17 */
}

@media (max-width: 991px) {
  .home-hero__header { min-height: 100svh; }                            /* ← .header-100svh */
  .home-hero__content { margin-top: 15vh; }                             /* ← .hero-wrapper */
  .home-header { max-width: 70vw; }                                     /* ← .header */
  .home-header__title { font-size: 2.75rem; }                           /* ← .heading-8 */
  .home-steps__wrapper { margin-top: 8rem; }                            /* ← .steps-wrapper */
  .home-steps__item { position: relative; top: auto; }                  /* ← .steps-item */
  .home-step { flex-flow: column; }                                     /* ← .steps-card-3 */
  .home-step__body { justify-content: space-between; padding: 4rem 4rem 4rem 2rem; }  /* ← .left-content */
  .home-step__content { width: 100%; }                                  /* ← .steps-content-3 */
  .home-step__title { font-size: 2.75rem; }                             /* ← .heading-13 */
  .home-step__text { max-width: none; }                                 /* ← .steps-description-2 */
  .home-step__media { height: 50vh; }                                   /* ← .right-content */
  .home-areas__grid { grid-template-columns: 1fr 1fr; }                 /* ← .investor-grid.contained */
  .home-card { height: auto; }                                          /* ← .card */
}

@media (max-width: 767px) {
  .home-header { max-width: none; }
  .home-header__title { font-size: 2.5rem; }
  .home-steps__pad { padding-left: 1.25rem; padding-right: 1.25rem; }   /* ← .padding-global-3 */
  .home-steps__wrapper { gap: 4rem; margin-top: 6rem; }
  .home-step__body { padding: 3rem 2rem 2rem 3rem; }
  .home-step__title { font-size: 2.5rem; }
  .home-areas__grid { display: flex; flex-flow: column; }
}

@media (max-width: 479px) {
  .home-hero__header { min-height: 60svh; }
  .home-hero__content { margin-bottom: 3vh; }
  .home-header { width: 100%; }
  .home-header__title { font-size: 2.25rem; }
  .home-steps__pad { padding-left: 1rem; padding-right: 1rem; }
  .home-steps__stack { gap: 2rem; }
  .home-step__body { align-items: center; padding-left: 1rem; padding-right: 1rem; }
  .home-step__content { justify-content: flex-start; align-items: center; text-align: center; }
  .home-step__tag { gap: .75rem; width: auto; padding-top: .75rem; padding-bottom: .75rem; border-radius: 3rem; }
  .home-step__title { font-size: 2.25rem; }
  .home-step__media { flex-flow: column; align-items: center; padding-right: 1.75rem; }
  .home-step__image img { object-position: 30% 50%; }                  /* ← .image-9 */
}

/* --------------------------------------------------------------------------
   6. Ograniczenie ruchu (main.js odsłania wtedy treść od razu; home.js nie
      skaluje kart kroków)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-card::before,
  .home-card::after { transition: none; }
}