/* ============================================================
   HOME.CSS — Homepage-specific styles
   aventium.ai static rebuild

   Sekcje:
     1. Hero
     2. Pillars
     3. WhyAventium
     4. Industries
     5. FinalCTA

   Depends on: tokens.css, base.css, components.css
   ============================================================ */


/* ============================================================
   1. HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;   /* 100svh uwzględnia mobilne UI chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 120px;   /* Header 72px + 48px wolnego miejsca */
  padding-bottom: 120px;
}


/* ----------------------------------------------------------
   Hero — tło: kafle SVG hexagonów (zastępuje 2.62 MB PNG)
   ---------------------------------------------------------- */

.hero__hex-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hex-pattern-url);
  background-size: 60px 52px;
  background-repeat: repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}


/* ----------------------------------------------------------
   Hero — gradient mesh (dekoracyjne plamy kolorów)
   ---------------------------------------------------------- */

.hero__mesh {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.hero__mesh--cyan {
  top: -200px;
  right: -200px;
  width: 1600px;
  height: 1600px;
  background: var(--gradient-mesh-cyan);
  z-index: 1;
}

.hero__mesh--indigo {
  bottom: -200px;
  left: -200px;
  width: 1200px;
  height: 1200px;
  background: var(--gradient-mesh-indigo);
  z-index: 1;
}


/* ----------------------------------------------------------
   Hero — wewnętrzny wrapper treści
   ---------------------------------------------------------- */

.hero__inner {
  max-width: var(--content-max);   /* 1024px */
  margin-inline: auto;
  padding-inline: var(--space-6);  /* 24px */
  text-align: center;
  position: relative;
  z-index: 10;
}


/* ----------------------------------------------------------
   Hero — heading (H1)
   ---------------------------------------------------------- */

.hero__heading {
  font-size: var(--text-hero);        /* clamp(3rem, 8vw, 6rem) = 48–96px */
  font-weight: var(--font-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

.hero__heading-accent {
  color: var(--primary);
  text-shadow: 0 0 40px rgba(6, 182, 212, 0.4);
}


/* ----------------------------------------------------------
   Hero — lead paragraph
   ---------------------------------------------------------- */

.hero__lead {
  font-size: var(--text-xl);          /* 22px */
  line-height: var(--leading-normal);
  max-width: var(--text-max-sm);      /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);     /* 80px */
  color: var(--muted-foreground);
}


/* ----------------------------------------------------------
   Hero — karty CTA
   ---------------------------------------------------------- */

.hero__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                /* 24px */
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-12);     /* 48px */
}

@media (min-width: 640px) {
  .hero__cards {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-8);              /* 32px */
  }
}

/* Karta — link wrapper */
.hero__card {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  max-width: 420px;
  padding: var(--space-10);           /* 40px */
  background: var(--gradient-hero-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);    /* 20px */
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

.hero__card:hover {
  transform: translateY(-4px);
  border-color: var(--border-primary-strong);   /* rgba(6,182,212,0.4) */
  box-shadow: var(--shadow-glow-cyan);
}

/* Ikona w karcie */
.hero__card-icon {
  width: 64px;
  height: 64px;
  color: var(--primary);
  margin-bottom: var(--space-4);      /* 16px */
  flex-shrink: 0;
  transition:
    transform var(--duration-base) var(--ease-default),
    filter var(--duration-base) var(--ease-default);
}

.hero__card:hover .hero__card-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
}

/* Tytuł karty — nadpisuje domyślny h2 z base.css */
.hero__card-title {
  font-size: 1.75rem;                 /* 28px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  color: var(--foreground);
  max-width: none;                    /* reset: base.css ustawia max-width na h2 */
}

/* Opis karty */
.hero__card-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
  margin-bottom: var(--space-6);
  flex-grow: 1;                       /* pcha CTA do dołu */
}

/* Link "Dowiedz się więcej →" */
.hero__card-cta {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.hero__card-cta svg {
  transition: transform var(--duration-fast) var(--ease-default);
}

.hero__card:hover .hero__card-cta svg {
  transform: translateX(4px);
}


/* ----------------------------------------------------------
   Hero — tagline na dole (kursywa)
   ---------------------------------------------------------- */

.hero__tagline {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--muted-foreground);
}


/* ----------------------------------------------------------
   Hero — wskaźnik przewijania (bounce arrow)
   ---------------------------------------------------------- */

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  animation: hero-bounce 2s ease-in-out infinite;
}

@keyframes hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);  }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* ============================================================
   2. PILLARS (Dwa filary)
   ============================================================ */

.pillars {
  background-color: var(--surface-alt);
}


/* ----------------------------------------------------------
   Pillars — nagłówek sekcji
   ---------------------------------------------------------- */

.pillars__heading {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px — oryginał: mb-20 */
  /* font-size (--text-h2), font-weight, max-width: 800px z base.css h2 */
}

.pillars__heading-accent {
  color: var(--primary);
}


/* ----------------------------------------------------------
   Pillars — 2-kolumnowy grid (1 kol. mobile → 2 kol. ≥768px)
   ---------------------------------------------------------- */

.pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;   /* 48px — oryginał: gap-12 */
}

@media (min-width: 768px) {
  .pillars__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;   /* 64px — oryginał: md:gap-16 */
  }
}


/* ----------------------------------------------------------
   Pillars — pojedynczy filar
   ---------------------------------------------------------- */

/* Tytuł filara: ikona + tekst w jednym wierszu */
.pillars__item-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);              /* 12px */
  font-size: var(--text-2xl);       /* 24px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);    /* 16px */
  color: var(--foreground);
  max-width: none;                  /* reset: base.css narzuca max-width na h3 globalnie */
}

/* Ikona przy tytule (32px) */
.pillars__item-icon {
  width: 32px;
  height: 32px;
  color: var(--primary);
  flex-shrink: 0;
  transition: filter var(--duration-base) var(--ease-default);
}

.pillars__item:hover .pillars__item-icon {
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
}

/* Lead paragraph */
.pillars__item-lead {
  color: var(--muted-foreground);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);    /* 24px */
}

/* Lista bullet-ów */
.pillars__item-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);       /* 32px pod listą */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);              /* 16px między pozycjami */
}

/* Pojedynczy bullet */
.pillars__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);              /* 12px */
}

/* Ikona ✓ (check) przy bullet */
.pillars__bullet-icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.15rem;              /* wizualne wyrównanie z pierwszą linią tekstu */
}

/* Tekst bullet */
.pillars__bullet-text {
  color: var(--muted-foreground);
  line-height: var(--leading-relaxed);
}

/* Przycisk CTA — rozszerza .btn .btn--primary */
.pillars__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);              /* 8px między tekstem a strzałką */
}

.pillars__cta svg {
  transition: transform var(--duration-fast) var(--ease-default);
}

.pillars__cta:hover svg {
  transform: translateX(4px);
}


/* ============================================================
   3. WHY AVENTIUM
   ============================================================ */

/* Tło: var(--background) (domyślne) — brak override */

/* ----------------------------------------------------------
   WhyAventium — nagłówek + lead
   ---------------------------------------------------------- */

.why__heading {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-6);    /* 24px — oryginał: mb-6 */
  /* font-size (--text-h2), font-weight, max-width: 800px z base.css h2 */
}

.why__lead {
  text-align: center;
  max-width: var(--text-max-sm);    /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);   /* 80px — oryginał: mb-20 */
  font-size: var(--text-xl);        /* 22px */
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ----------------------------------------------------------
   WhyAventium — 3-kolumnowy grid kart
   ---------------------------------------------------------- */

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);              /* 32px — oryginał: gap-8 */
}

@media (min-width: 768px) {
  .why__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ----------------------------------------------------------
   WhyAventium — karta USP
   ---------------------------------------------------------- */

.why__card {
  background-color: var(--card);    /* #1C1A45 */
  border: 1px solid var(--border);  /* #282550 */
  border-radius: var(--radius);     /* 16px */
  padding: var(--space-8);          /* 32px — oryginał: p-8 */
  transition:
    transform var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

@media (min-width: 768px) {
  .why__card {
    padding: var(--space-10);       /* 40px — oryginał: md:p-10 */
  }
}

.why__card:hover {
  transform: translateY(-4px);
  border-color: var(--border-primary-strong);  /* rgba(6,182,212,0.4) */
  box-shadow: var(--shadow-glow-cyan);          /* 0 8px 40px rgba(6,182,212,0.15) */
}

/* Ikona karty (48px) */
.why__card-icon {
  width: 48px;
  height: 48px;
  color: var(--primary);
  margin-bottom: var(--space-5);    /* 20px — oryginał: mb-5 */
  display: block;
  transition:
    transform var(--duration-base) var(--ease-default),
    filter var(--duration-base) var(--ease-default);
}

.why__card:hover .why__card-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
}

/* Tytuł karty (h3) */
.why__card-title {
  font-size: var(--text-2xl);       /* 24px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);    /* 4px — oryginał: mb-1 */
  color: var(--foreground);
  max-width: none;                  /* reset globalnego h3 max-width jeśli istnieje */
}

/* Podtytuł karty (cyan, mały) */
.why__card-subtitle {
  font-size: var(--text-sm);        /* 14px */
  font-weight: var(--font-medium);
  color: var(--primary);
  margin-bottom: var(--space-4);    /* 16px — oryginał: mb-4 */
}

/* Treść karty */
.why__card-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ============================================================
   4. INDUSTRIES
   .industries__* moved to components.css (grid/tile/heading/lead/footer/contact)
   Tu zostaje tylko .industries { background-color } — homepage-specific:
   var(--surface-alt) #181540 ≠ var(--section-alt) #15123A używane na /automatyzacja
   ============================================================ */

.industries {
  background-color: var(--surface-alt);
}


/* ============================================================
   5. FINAL CTA
   Przeniesione do components.css — style .cta* dostępne globalnie
   ============================================================ */