/* =====================================================
   Moc Danych - style własne (wspólne dla wszystkich stron)
   Ten plik można edytować bez rekompilacji Tailwinda.
   ===================================================== */

html { scroll-behavior: smooth; }
p { line-height: 1.7; }

/* Nagłówki display */
.h1-display {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: clamp(2.6rem, 6.5vw, 5rem) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
}
.h2-display {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.02em !important;
}

/* Tło hero */
.hero-bg {
  background: #ffffff;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(4,120,87,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 25%, rgba(4,120,87,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 95%, rgba(4,120,87,0.08) 0%, transparent 45%);
}

/* Navbar po przewinięciu */
#navbar.scrolled {
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(4,120,87,0.15);
  box-shadow: 0 1px 24px rgba(0,0,0,0.06);
}

/* Górna kreska karty (domyślnie zieleń marki; .ct-amber = bursztyn) */
.card-top { position: relative; }
.card-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ct, #047857) 35%, var(--ct, #047857) 65%, transparent);
}
.ct-amber { --ct: #f59e0b; }

/* Karty kursów i cennika */
.course-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.course-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(4,120,87,0.12); border-color: rgba(16,185,129,0.55); }
.price-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.price-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(4,120,87,0.14); }
.guarantee-ring { border: 3px solid #047857; }

/* Animacja pojawiania */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.20s; }
.reveal-d3 { transition-delay: 0.30s; }
.reveal-d4 { transition-delay: 0.40s; }

/* Akordeon FAQ */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.38s ease; }
.faq-answer.open { max-height: 600px; }
.faq-icon { transition: transform 0.3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-item { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq-item:hover { border-color: rgba(52,211,153,0.45); box-shadow: 0 4px 20px rgba(4,120,87,0.08); }
.faq-btn { transition: background-color 0.2s ease; border-radius: inherit; }
.faq-btn:hover { background-color: rgba(209,250,229,0.45); }
.faq-item.open .faq-btn:hover { background-color: transparent; }

/* Formularz lead magnetu: wyśrodkowany na mobile, do lewej od md */
.lead-form { margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .lead-form { margin-left: 0; } }

/* Menu mobilne i pływające CTA */
#mobile-menu { transition: opacity 0.25s ease, transform 0.25s ease; }
#mobile-menu.entering { opacity: 0; transform: translateY(-8px); }
#sticky-cta { transition: transform 0.3s ease; }