/* ============================================================
   AUTOMATYZACJA.CSS — Styles for /automatyzacja page
   aventium.ai static rebuild

   Sekcje:
     1. AutoHero
     2. ProblemSection
     3. AreasSection
     4. ShowcaseSection  (TODO — Paczka B)

     5. ProcessSection   (TODO — Paczka B)
     6. AutoIndustries   (TODO — Paczka B)
     7. TechSection      (TODO — Paczka C)
     8. FaqSection       (TODO — Paczka C)
     9. AutoFinalCTA     (TODO — Paczka C)

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


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

.auto-hero {
  position: relative;
  min-height: 70vh;                 /* backup: min-h-[70vh] */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 120px;               /* backup: pt-[120px] */
  padding-bottom: 100px;            /* backup: pb-[100px] */
}


/* ----------------------------------------------------------
   AutoHero — tło: hex SVG (ten sam token co homepage hero)
   ---------------------------------------------------------- */

.auto-hero__hex-bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/backgrounds/hexagon-pattern.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}


/* ----------------------------------------------------------
   AutoHero — gradient mesh (identyczny układ jak homepage)
   ---------------------------------------------------------- */

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

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


/* ----------------------------------------------------------
   AutoHero — wrapper treści
   ---------------------------------------------------------- */

.auto-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;
}


/* ----------------------------------------------------------
   AutoHero — breadcrumb
   ---------------------------------------------------------- */

.auto-hero__breadcrumb {
  margin-bottom: var(--space-8);    /* 32px — backup: mb-8 */
}

.auto-hero__breadcrumb-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);              /* 8px */
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.auto-hero__breadcrumb-link {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.auto-hero__breadcrumb-link:hover {
  color: var(--foreground);
}

.auto-hero__breadcrumb-sep {
  color: var(--muted-foreground);
  user-select: none;
}

.auto-hero__breadcrumb-current {
  color: var(--foreground);
}


/* ----------------------------------------------------------
   AutoHero — H1
   ---------------------------------------------------------- */

.auto-hero__heading {
  font-size: var(--text-subhero);   /* clamp(3rem, 7vw, 4.5rem) = 48–72px */
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);    /* 24px */
}

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


/* ----------------------------------------------------------
   AutoHero — lead paragraph
   ---------------------------------------------------------- */

.auto-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-10);   /* 40px — backup: mb-10 */
  color: var(--muted-foreground);
}


/* ----------------------------------------------------------
   AutoHero — rząd przycisków CTA
   ---------------------------------------------------------- */

.auto-hero__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);              /* 16px — backup: gap-4 */
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-4);    /* 16px — backup: mb-4 */
}

@media (min-width: 640px) {
  .auto-hero__buttons {
    flex-direction: row;
  }
}

/* Ikony wewnątrz przycisków — bez skalowania przy hover (już w .btn) */
.auto-hero__btn-icon {
  flex-shrink: 0;
}


/* ----------------------------------------------------------
   AutoHero — nota pod przyciskami
   ---------------------------------------------------------- */

.auto-hero__note {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--muted-foreground);
  max-width: none;                  /* reset: reset.css ustawia max-width: 75ch na p */
  text-align: center;
}


/* ============================================================
   2. PROBLEM SECTION
   ============================================================ */

.auto-problem {
  background-color: var(--section-alt);   /* #15123A — NIE --surface-alt */
}


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

.auto-problem__heading {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-6);          /* 24px — backup: mb-6 */
}

.auto-problem__lead {
  text-align: center;
  max-width: var(--text-max-sm);          /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);         /* 80px — backup: mb-20 */
  font-size: var(--text-lg);              /* 18px mobile */
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .auto-problem__lead {
    font-size: var(--text-xl);            /* 22px desktop — backup: md:text-[22px] */
  }
}


/* ----------------------------------------------------------
   ProblemSection — grid 2x2 desktop, 1 kol. mobile
   backup: md:grid-cols-2 gap-6 max-w-4xl mx-auto
   ---------------------------------------------------------- */

.auto-problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;                            /* 24px — backup: gap-6 */
  max-width: 896px;                       /* max-w-4xl */
  margin-inline: auto;
}

@media (min-width: 768px) {
  .auto-problem__grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ----------------------------------------------------------
   ProblemSection — karta problemu
   backup: bg-card border border-border rounded-2xl p-10
   ---------------------------------------------------------- */

.auto-problem__card {
  background-color: var(--card);          /* #1C1A45 */
  border: 1px solid var(--border);        /* #282550 */
  border-radius: var(--radius);           /* 16px = rounded-2xl */
  padding: var(--space-10);               /* 40px — backup: p-10 */
  transition:
    transform var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

.auto-problem__card:hover {
  transform: translateY(-4px);
  border-color: var(--border-primary-strong);
  box-shadow: var(--shadow-glow-cyan);
}

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

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

/* Cytat / tytuł karty (h3) */
.auto-problem__card-quote {
  font-size: 1.25rem;                     /* 20px — backup: text-xl (Tailwind) */
  font-weight: var(--font-semibold);
  line-height: 1.3;                       /* backup: leading-[1.3] */
  margin-bottom: var(--space-3);          /* 12px — backup: mb-3 */
  color: var(--foreground);
  max-width: none;
}

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


/* ============================================================
   3. AREAS SECTION
   ============================================================ */

.auto-areas {
  background-color: var(--background);  /* #0F0D2E — domyślne tło */
}


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

.auto-areas__heading {
  font-size: var(--text-h2);            /* clamp(2rem, 5vw, 4rem) = 32–64px */
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: var(--text-max);           /* 800px */
  margin-inline: auto;
  margin-bottom: var(--space-6);        /* 24px — backup: mb-6 */
}

.auto-areas__lead {
  text-align: center;
  max-width: var(--text-max-sm);        /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);       /* 80px — backup: mb-20 */
  font-size: var(--text-lg);            /* 18px mobile */
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .auto-areas__lead {
    font-size: var(--text-xl);          /* 22px desktop — backup: md:text-[22px] */
  }
}


/* ----------------------------------------------------------
   AreasSection — grid 1→2→3 kolumn
   backup: md:grid-cols-2 lg:grid-cols-3 gap-6
   ---------------------------------------------------------- */

.auto-areas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;                          /* 24px — backup: gap-6 */
}

@media (min-width: 768px) {
  .auto-areas__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .auto-areas__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


/* ----------------------------------------------------------
   AreasSection — karta obszaru
   backup: bg-card border border-border rounded-2xl p-10
           hover:translate-y-[-4px] hover:shadow-glow-cyan
   ---------------------------------------------------------- */

.auto-areas__card {
  background-color: var(--card);        /* #1C1A45 */
  border: 1px solid var(--border);      /* #282550 */
  border-radius: var(--radius);         /* 16px */
  padding: var(--space-10);             /* 40px — backup: p-10 */
  transition:
    transform var(--duration-base) var(--ease-default),
    border-color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}

.auto-areas__card:hover {
  transform: translateY(-4px);
  border-color: var(--border-primary-strong);
  box-shadow: var(--shadow-glow-cyan);
}

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

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

/* Tytuł karty (h3) */
.auto-areas__card-title {
  font-size: 1.25rem;                   /* 20px — backup: text-xl (Tailwind) */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  margin-bottom: var(--space-4);        /* 16px — backup: mb-4 */
}

/* Lista bulletów */
.auto-areas__card-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                  /* 8px — backup: space-y-2 */
}

/* Pojedynczy bullet */
.auto-areas__card-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);                  /* 8px — backup: gap-2 */
  font-size: var(--text-sm);            /* 14px — backup: text-sm */
  color: var(--muted-foreground);
}

/* Ikona Check (16px) */
.auto-areas__bullet-icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.125rem;                 /* ~2px — backup: mt-0.5 */
}


/* ============================================================
   4. SHOWCASE SECTION
   ============================================================ */

.auto-showcase {
  background-color: var(--section-alt);   /* #15123A */
}


/* ----------------------------------------------------------
   ShowcaseSection — nagłówek + lead (ten sam wzorzec)
   ---------------------------------------------------------- */

.auto-showcase__heading {
  font-size: var(--text-h2);            /* clamp(2rem, 5vw, 4rem) = 32–64px */
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: var(--text-max);           /* 800px */
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.auto-showcase__lead {
  text-align: center;
  max-width: var(--text-max-sm);        /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);       /* 80px */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .auto-showcase__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   ShowcaseSection — lista showcaseów
   backup: space-y-[120px] max-w-5xl mx-auto + mt-[120px] CTA
   ---------------------------------------------------------- */

.auto-showcase__list {
  display: flex;
  flex-direction: column;
  gap: 7.5rem;                          /* 120px — backup: space-y-[120px] */
  max-width: 1024px;                    /* max-w-5xl */
  margin-inline: auto;
}


/* ----------------------------------------------------------
   ShowcaseSection — pojedynczy item: text | metric
   backup: flex-col lg:flex-row gap-10 lg:gap-16 items-center
   ---------------------------------------------------------- */

.auto-showcase__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;                          /* 40px — backup: gap-10 */
}

@media (min-width: 1024px) {
  .auto-showcase__item {
    flex-direction: row;
    gap: 4rem;                          /* 64px — backup: lg:gap-16 */
  }
  .auto-showcase__item--reversed {
    flex-direction: row-reverse;
  }
}


/* ----------------------------------------------------------
   ShowcaseSection — strona tekstowa (lewa/prawa, ~40%)
   ---------------------------------------------------------- */

.auto-showcase__text {
  flex: 1;
  width: 100%;
}

@media (min-width: 1024px) {
  .auto-showcase__text  { flex: 2; }   /* ~40% z gap */
  .auto-showcase__metric { flex: 3; } /* ~60% z gap */
}

/* Badge "Nasza aplikacja" */
.auto-showcase__label {
  display: inline-block;
  font-size: var(--text-xs);            /* 12px */
  font-weight: var(--font-semibold);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background-color: var(--primary-10);
  color: var(--primary);
  margin-bottom: var(--space-4);
}

/* Tytuł aplikacji (h3, 32px) */
.auto-showcase__title {
  font-size: 2rem;                      /* 32px — backup: text-[32px] */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

/* Podtytuł (primary, font-medium) */
.auto-showcase__subtitle {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--primary);
  margin-bottom: var(--space-6);
}

/* Akapity Problem / Rozwiązanie / Efekt */
.auto-showcase__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
  margin-bottom: var(--space-3);
}

.auto-showcase__body-label {
  font-weight: var(--font-semibold);
  color: var(--foreground);
}

.auto-showcase__body--effect .auto-showcase__body-value {
  color: var(--primary);
}

/* Technologiczne badges */
.auto-showcase__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);                  /* 12px */
  margin-bottom: var(--space-6);
}

.auto-showcase__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;                        /* 6px — backup: gap-1.5 */
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 0.375rem 0.75rem;            /* py-1.5 px-3 */
  border-radius: var(--radius-sm);      /* ~12px — backup: rounded-lg */
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}

.auto-showcase__badge-icon {
  width: 14px;
  height: 14px;
  color: var(--primary);
  flex-shrink: 0;
}

/* Link "Chcę podobne rozwiązanie" */
.auto-showcase__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.auto-showcase__link:hover {
  text-decoration: underline;
}

.auto-showcase__link-arrow {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-base) var(--ease-default);
  flex-shrink: 0;
}

.auto-showcase__link:hover .auto-showcase__link-arrow {
  transform: translateX(4px);
}


/* ----------------------------------------------------------
   ShowcaseSection — HeroMetricCard (static)
   backup: aspect-ratio 16/9, gradient bg, inline SVG hex pattern
   ---------------------------------------------------------- */

.auto-showcase__metric {
  width: 100%;
  position: relative;
  border-radius: var(--radius);         /* rounded-2xl */
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--gradient-metric-card); /* linear-gradient(135deg,#1E1B4B,#14122F) */
}

.auto-showcase__metric--cyan {
  border: 1px solid rgba(6, 182, 212, 0.30);
  box-shadow: 0 20px 60px -20px rgba(6, 182, 212, 0.20);
}

.auto-showcase__metric--gold {
  border: 1px solid rgba(217, 119, 6, 0.30);
  box-shadow: 0 20px 60px -20px rgba(217, 119, 6, 0.20);
}

/* SVG hex background */
.auto-showcase__metric-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* "Efekt" label — lewy górny róg */
.auto-showcase__metric-efekt {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider); /* 0.25em */
  text-transform: uppercase;
}

.auto-showcase__metric-efekt--cyan { color: var(--primary); }
.auto-showcase__metric-efekt--gold { color: var(--warm-gold); }

@media (min-width: 640px) {
  .auto-showcase__metric-efekt { top: 2rem; left: 2rem; }
}

/* Treść wycentrowana */
.auto-showcase__metric-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 1.5rem;
  gap: 0;
}

/* Duża liczba */
.auto-showcase__metric-number {
  font-size: clamp(2.5rem, 7vw, 5rem);  /* text-5xl–8xl responsive */
  font-weight: var(--font-bold);
  color: var(--foreground);
  line-height: 1;
  margin-bottom: var(--space-3);
}

/* Sub metryka */
.auto-showcase__metric-sub {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
}

.auto-showcase__metric-sub--cyan { color: var(--primary); }
.auto-showcase__metric-sub--gold { color: var(--warm-gold); }

/* Porównanie */
.auto-showcase__metric-comparison {
  font-size: var(--text-sm);
  color: rgba(245, 248, 252, 0.50);     /* text-white/50 */
}


/* ----------------------------------------------------------
   ShowcaseSection — Bottom CTA
   ---------------------------------------------------------- */

.auto-showcase__cta {
  text-align: center;
  margin-top: 7.5rem;                   /* 120px — backup: mt-[120px] */
}

.auto-showcase__cta-heading {
  font-size: 2rem;                      /* 32px */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.auto-showcase__cta-lead {
  max-width: var(--text-max-sm);
  margin-inline: auto;
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ============================================================
   5. PROCESS SECTION
   ============================================================ */

.auto-process {
  background-color: var(--background);
}


/* ----------------------------------------------------------
   ProcessSection — nagłówek + lead
   backup: max-w-[900px] (szersza niż inne sekcje)
   ---------------------------------------------------------- */

.auto-process__heading {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: 900px;                     /* backup: max-w-[900px] */
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.auto-process__lead {
  text-align: center;
  max-width: var(--text-max-sm);
  margin-inline: auto;
  margin-bottom: var(--space-20);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .auto-process__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   ProcessSection — timeline wrapper
   Jedna implementacja HTML, @media przełącza layout
   Mobile: pionowa oś, Desktop: pozioma oś
   ---------------------------------------------------------- */

.auto-process__timeline {
  max-width: 1024px;                    /* max-w-5xl */
  margin-inline: auto;
  margin-bottom: var(--space-16);       /* 64px */
  position: relative;
}

/* Kontener kroków — position: relative dla osi */
.auto-process__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;

  /* MOBILE: kolumna pionowa */
  display: flex;
  flex-direction: column;
  gap: 3rem;                            /* 48px — backup: space-y-12 */
}

/* Oś łącząca: MOBILE pionowa */
.auto-process__track {
  position: absolute;
  background-color: rgba(6, 182, 212, 0.4); /* bg-primary/40 */
  pointer-events: none;

  /* Mobile: pionowa linia */
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;                         /* center 16px dot = 8px = 0.5rem */
  width: 2px;
  height: auto;
  right: auto;
}

/* Pojedynczy krok — MOBILE: flex row (dot | treść) */
.auto-process__step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;                         /* 20px */
  position: relative;
}

/* Kropka */
.auto-process__dot {
  width: 1rem;                          /* 16px */
  height: 1rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.40);
  flex-shrink: 0;
  margin-top: 0.25rem;                  /* wyrównanie z pierwszą linią tekstu */
  position: relative;
  z-index: 1;
}

/* Treść kroku */
.auto-process__step-body { flex: 1; }

/* Numer kroku */
.auto-process__num {
  font-size: 2rem;                      /* 32px mobile — backup: text-4xl */
  font-weight: var(--font-bold);
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* Czas */
.auto-process__time {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--primary);
  margin-bottom: var(--space-2);
}

/* Tytuł kroku */
.auto-process__step-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--foreground);
  margin-bottom: var(--space-2);
}

/* Opis kroku */
.auto-process__step-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ----------------------------------------------------------
   ProcessSection — DESKTOP (≥ 1024px): pozioma timeline
   ---------------------------------------------------------- */

@media (min-width: 1024px) {

  /* Oś pozioma */
  .auto-process__track {
    top: 2rem;                          /* 32px — backup: top-[32px] */
    left: 10%;
    right: 10%;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  /* Grid 5 kolumn */
  .auto-process__steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    flex-direction: unset;
  }

  /* Krok: block, wyśrodkowany */
  .auto-process__step {
    display: block;
    text-align: center;
  }

  /* Kropka: block, wyśrodkowana */
  .auto-process__dot {
    display: block;
    margin: 0 auto var(--space-4);
    margin-top: 0;
    flex-shrink: unset;
    z-index: 2;
  }

  .auto-process__step-body { flex: unset; }

  /* Numer: 64px desktop */
  .auto-process__num {
    font-size: 4rem;                    /* 64px — backup: text-[64px] */
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
  }

  .auto-process__time {
    margin-bottom: var(--space-3);
  }

  /* Opis: max-width dla czytelności */
  .auto-process__step-desc {
    max-width: 200px;
    margin-inline: auto;
  }

}


/* ----------------------------------------------------------
   ProcessSection — nota końcowa
   ---------------------------------------------------------- */

.auto-process__note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  max-width: var(--text-max-sm);
  margin-inline: auto;
}


/* ============================================================
   6. AUTO INDUSTRIES
   Reużywa .industries__tile / .industries__grid z home.css
   Własne: wrapper + heading + lead + overrides
   ============================================================ */

.auto-industries {
  background-color: var(--section-alt);   /* #15123A — backup: style={{ background: "#15123A" }} */
}

.auto-industries__heading {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: var(--text-max);             /* 800px */
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.auto-industries__lead {
  text-align: center;
  max-width: var(--text-max-sm);          /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .auto-industries__lead { font-size: var(--text-xl); }
}

/* Override: tile radius → rounded-lg (8px) jak w backupie AutoIndustries */
.auto-industries .industries__tile {
  border-radius: 0.5rem;
}

/* Override: grid bez margin-bottom (sekcja nie ma footera jak homepage) */
.auto-industries .industries__grid {
  margin-bottom: 0;
}


/* ============================================================
   7. TECH SECTION
   ============================================================ */

/* TechSection używa mniejszego padding-y niż section-py (160px)
   backup: py-[80px] md:py-[100px] lg:py-[120px]             */
.auto-tech {
  background-color: var(--background);
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  .auto-tech {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

@media (min-width: 1024px) {
  .auto-tech {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}


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

.auto-tech__heading {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: var(--text-max);           /* 800px */
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.auto-tech__lead {
  text-align: center;
  max-width: var(--text-max-sm);        /* 700px */
  margin-inline: auto;
  margin-bottom: var(--space-20);       /* 80px */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .auto-tech__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   TechSection — grid 1→2→3 kolumn
   backup: md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-4xl
   ---------------------------------------------------------- */

.auto-tech__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;                            /* 16px — backup: gap-4 */
  max-width: 896px;                     /* max-w-4xl */
  margin-inline: auto;
}

@media (min-width: 768px) {
  .auto-tech__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .auto-tech__grid { grid-template-columns: 1fr 1fr 1fr; }
}


/* ----------------------------------------------------------
   TechSection — karta technologii
   backup: bg-card border border-border rounded-xl p-6
           hover:border-primary/40 (TYLKO border, bez transform/shadow)
   ---------------------------------------------------------- */

.auto-tech__card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);      /* ~12px — backup: rounded-xl */
  padding: var(--space-6);              /* 24px — backup: p-6 */
  transition: border-color var(--duration-base) var(--ease-default);
}

.auto-tech__card:hover {
  border-color: var(--border-primary-strong); /* rgba(6,182,212,0.4) = primary/40 */
}

/* Nazwa technologii (h3) */
.auto-tech__card-name {
  font-size: var(--text-lg);            /* 18px — backup: text-lg */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  margin-bottom: var(--space-1);        /* 4px — backup: mb-1 */
}

/* Opis technologii */
.auto-tech__card-desc {
  font-size: var(--text-sm);            /* 14px — backup: text-sm */
  color: var(--muted-foreground);
}


/* ============================================================
   8. FAQ SECTION
   Implementacja natywna: <details> / <summary>
   ============================================================ */

.auto-faq {
  background-color: var(--section-alt);   /* #15123A */
}


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

.auto-faq__heading {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: var(--text-max);
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.auto-faq__lead {
  text-align: center;
  max-width: var(--text-max-sm);
  margin-inline: auto;
  margin-bottom: var(--space-20);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .auto-faq__lead { font-size: var(--text-xl); }
}


/* ----------------------------------------------------------
   FaqSection — lista akordeonowa (max-w-[800px])
   ---------------------------------------------------------- */

.auto-faq__list {
  max-width: 800px;
  margin-inline: auto;
}


/* ----------------------------------------------------------
   FaqSection — pojedynczy item <details>
   backup: border-b border-white/[0.08] hover:bg-white/[0.02]
   ---------------------------------------------------------- */

.auto-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* border-white/[0.08] */
  transition: background-color var(--duration-base) var(--ease-default);
}

.auto-faq__item:hover {
  background-color: rgba(255, 255, 255, 0.02);        /* hover:bg-white/[0.02] */
}


/* ----------------------------------------------------------
   FaqSection — pytanie <summary>
   backup: py-6 px-6 font-semibold text-lg md:text-xl text-left
   ---------------------------------------------------------- */

.auto-faq__item summary {
  cursor: pointer;
  list-style: none;                     /* usuwa domyślny marker przeglądarki */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);              /* py-6 px-6 */
  font-size: var(--text-lg);            /* 18px */
  font-weight: var(--font-semibold);
  color: var(--foreground);
  text-align: left;
  user-select: none;
}

@media (min-width: 768px) {
  .auto-faq__item summary { font-size: var(--text-xl); } /* 22px */
}

/* Usuwa Webkit domyślną strzałkę <summary> */
.auto-faq__item summary::-webkit-details-marker { display: none; }
.auto-faq__item summary::marker { display: none; }


/* ----------------------------------------------------------
   FaqSection — ikona chevron w <summary>
   ---------------------------------------------------------- */

.auto-faq__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--primary);
  transition: transform var(--duration-base) var(--ease-default);
}

/* Obrót przy otwartym <details> */
.auto-faq__item[open] .auto-faq__chevron {
  transform: rotate(180deg);
}


/* ----------------------------------------------------------
   FaqSection — odpowiedź <div> wewnątrz <details>
   backup: px-6 pb-6 text-base leading-relaxed color muted
   ---------------------------------------------------------- */

.auto-faq__answer {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}


/* ============================================================
   9. AUTO FINAL CTA
   Reużywa .cta__* z components.css
   Własny override: lead margin (backup: mb-10, nie mb-20)
   ============================================================ */

/* Override: lead ma mb-10 (40px) zamiast mb-20 (80px) przed przyciskami */
.auto-cta-final .cta__lead {
  margin-bottom: var(--space-10);       /* 40px — backup: mb-10 */
}

/* ================================================================
   ETAP 1.12b HOTFIX3 — auto-custom section center + padding
   Data: 2026-05-25
   Powód: hotfixy 1.12b/hotfix2 trafiły do home.css, a strona
   /automatyzacja ładuje automatyzacja.css. Dodajemy te same fixy
   tutaj. .auto-showcase__cta ma już text-align: center w
   automatyzacja.css:749, ale prawdopodobnie też display: flex
   (lub podobne), które blokuje alignment H2. Wymuszamy block-level.
   Cleanup martwych bloków w home.css → osobny etap CSS polish.
   ================================================================ */

.auto-custom {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.auto-custom .auto-showcase__cta {
  display: block !important;
  text-align: center !important;
}

.auto-custom .auto-showcase__cta-heading {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* ================================================================
   ETAP 1.12c HOTFIX — styling for links in FAQ answers
   Data: 2026-05-26
   Powód: w etapie 1.12c dodano cross-link FAQ z linkiem do
   /widocznosc w treści odpowiedzi. Per-page CSS architecture
   (Lekcja 9 w masterze) — klasy .auto-faq__answer są lokalne dla
   automatyzacja.css, brak im stylów dla anchor tags. Wizualnie link
   nie wygląda jak link. Dodajemy reguły analogiczne do
   .faq__subtitle a z home.css.
   ================================================================ */

.auto-faq__answer a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auto-faq__answer a:hover {
  color: var(--primary-hover);
}