/* ============================================================================
   Claude Theme — Modern 2025 Layer
   ----------------------------------------------------------------------------
   Dodawany OBOK claude-base.css i tailwind-compiled.css.
   Zawiera: design tokens (motion/spacing/shadow), modern utility classes,
   component classes (.card-modern, .btn-pill, .glass, .hero-mesh),
   typography (.heading-display), oraz quiz wizard styles.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* Spacing — sekcje 64/120 zamiast 60/80 */
  --section-py-mobile:  4rem;     /* 64px */
  --section-py-tablet:  5rem;     /* 80px */
  --section-py-desktop: 7.5rem;   /* 120px */

  /* Radius — większe niż Bootstrap-ery */
  --radius-modern:    1.25rem;    /* 20px */
  --radius-modern-lg: 1.5rem;     /* 24px */
  --radius-pill:      999px;

  /* Shadows — layered z fioletowym tintem (HSL primary) */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-lift:       0 10px 30px -10px rgba(44, 14, 111, 0.15), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-lift-hover: 0 25px 50px -12px rgba(44, 14, 111, 0.28), 0 10px 20px -5px rgba(0,0,0,0.08);
  --shadow-glow-accent: 0 12px 24px -8px rgba(255, 107, 53, 0.4);
  --shadow-glow-primary: 0 12px 24px -8px rgba(44, 14, 111, 0.4);

  /* Motion — duration scale + easing */
  --duration-fast:  150ms;
  --duration:       250ms;
  --duration-slow:  450ms;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);   /* expo.out / spring */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Akcent color — coral, dla CTA highlight i badge'y */
  --color-accent:        #ff6b35;
  --color-accent-dark:   #e85a25;
  --color-accent-light:  #ffb89e;
}

/* ----------------------------------------------------------------------------
   2. SECTION SPACING — modern breath
   ---------------------------------------------------------------------------- */
.section-modern {
  padding-top:    var(--section-py-mobile);
  padding-bottom: var(--section-py-mobile);
}
@media (min-width: 768px) {
  .section-modern { padding-top: var(--section-py-tablet); padding-bottom: var(--section-py-tablet); }
}
@media (min-width: 1024px) {
  .section-modern { padding-top: var(--section-py-desktop); padding-bottom: var(--section-py-desktop); }
}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY — display headings
   ---------------------------------------------------------------------------- */
.heading-display {
  font-size:      clamp(2.25rem, 5vw, 4.5rem);
  line-height:    1.05;
  letter-spacing: -0.025em;
  font-weight:    800;
}
.heading-display-xl {
  font-size:      clamp(2.75rem, 7vw, 6rem);
  line-height:    0.95;
  letter-spacing: -0.03em;
  font-weight:    900;
}
.heading-eyebrow {
  display:         inline-block;
  font-size:       0.75rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  color:           color-mix(in srgb, var(--color-primary) 60%, transparent);
  margin-bottom:   0.875rem;
}

/* ----------------------------------------------------------------------------
   4. CARD — modern hover lift
   ---------------------------------------------------------------------------- */
.card-modern {
  background:    white;
  border-radius: var(--radius-modern);
  box-shadow:    var(--shadow-card);
  border:        1px solid rgba(0,0,0,0.04);
  transition:    transform var(--duration) var(--ease-out),
                 box-shadow var(--duration) var(--ease-out),
                 border-color var(--duration) var(--ease-out);
}
.card-modern-hover:hover,
a.card-modern:hover,
.card-modern.is-hoverable:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--shadow-lift-hover);
  border-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* ----------------------------------------------------------------------------
   5. BUTTONS — pill shape, gradient, micro-animations
   ---------------------------------------------------------------------------- */
.btn-pill {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.875rem 1.75rem;
  border-radius:   var(--radius-pill);
  font-weight:     600;
  font-size:       0.9375rem;
  letter-spacing:  -0.01em;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  background:      var(--color-primary);
  color:           white;
  transition:      transform var(--duration) var(--ease-out),
                   box-shadow var(--duration) var(--ease-out),
                   background var(--duration) var(--ease-out);
  white-space:     nowrap;
}
.btn-pill:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-glow-primary);
  background: var(--color-primary-dark);
  color:      white;
}
.btn-pill:active { transform: translateY(0); }
.btn-pill .arrow,
.btn-pill svg { transition: transform var(--duration) var(--ease-out); }
.btn-pill:hover .arrow,
.btn-pill:hover svg { transform: translateX(4px); }

.btn-pill-accent { background: var(--color-accent); }
.btn-pill-accent:hover { background: var(--color-accent-dark); box-shadow: var(--shadow-glow-accent); }

.btn-pill-ghost {
  background: transparent;
  color:      var(--color-primary);
  border:     2px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.btn-pill-ghost:hover {
  background:   color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: var(--color-primary);
  color:        var(--color-primary);
  box-shadow:   none;
}

.btn-pill-lg {
  padding:   1.125rem 2.25rem;
  font-size: 1.0625rem;
}

/* ----------------------------------------------------------------------------
   6. GLASS — glassmorphism
   ---------------------------------------------------------------------------- */
.glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.glass-violet {
  background: color-mix(in srgb, var(--color-primary) 50%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.glass-dark {
  background: rgba(15, 15, 25, 0.55);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ----------------------------------------------------------------------------
   7. HERO MESH — gradient mesh background (replaces flat violet)
   ---------------------------------------------------------------------------- */
.hero-mesh {
  position: relative;
  background:
    radial-gradient(at 0% 0%,    color-mix(in srgb, var(--color-primary) 55%, transparent)      0%, transparent 50%),
    radial-gradient(at 100% 30%, color-mix(in srgb, var(--color-secondary) 45%, transparent)    0%, transparent 50%),
    radial-gradient(at 50% 100%, color-mix(in srgb, var(--color-primary-dark) 60%, transparent) 0%, transparent 55%),
    radial-gradient(at 80% 80%,  color-mix(in srgb, var(--color-accent) 18%, transparent)       0%, transparent 45%),
    var(--color-primary);
  color: white;
  overflow: hidden;
}
.hero-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.6;
}
.hero-mesh > * { position: relative; z-index: 1; }

/* ----------------------------------------------------------------------------
   8. BADGES — modern pill with glow
   ---------------------------------------------------------------------------- */
.badge-modern {
  display:         inline-flex;
  align-items:     center;
  gap:             0.375rem;
  padding:         0.375rem 0.875rem;
  border-radius:   var(--radius-pill);
  font-size:       0.75rem;
  font-weight:     700;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  line-height:     1;
}
.badge-accent {
  background:  linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color:       white;
  box-shadow:  0 4px 12px rgba(255, 107, 53, 0.35);
}
.badge-primary {
  background:  color-mix(in srgb, var(--color-primary) 12%, transparent);
  color:       var(--color-primary);
}
.badge-soft-white {
  background:  rgba(255,255,255,0.12);
  color:       white;
  border:      1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}

/* ----------------------------------------------------------------------------
   9. FADE-UP — scroll-trigger animation (works with scroll-animate.js
      .is-visible toggle, plus delays)
   ---------------------------------------------------------------------------- */
.fade-up {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}
.fade-up.is-visible {
  opacity:   1;
  transform: translateY(0);
}
.fade-up-delay-1.is-visible { transition-delay: 0.08s; }
.fade-up-delay-2.is-visible { transition-delay: 0.16s; }
.fade-up-delay-3.is-visible { transition-delay: 0.24s; }
.fade-up-delay-4.is-visible { transition-delay: 0.32s; }
.fade-up-delay-5.is-visible { transition-delay: 0.40s; }

/* slide-in left/right alternatywy */
.slide-in-l { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.slide-in-l.is-visible { opacity: 1; transform: translateX(0); }
.slide-in-r { opacity: 0; transform: translateX(32px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.slide-in-r.is-visible { opacity: 1; transform: translateX(0); }

/* ----------------------------------------------------------------------------
   10. QUIZ WIZARD — step-by-step UX, replaces sluggish one-page form
   ---------------------------------------------------------------------------- */

/* Quiz container z modern card style */
.quiz-wizard {
  position:      relative;
  background:    white;
  border-radius: var(--radius-modern-lg);
  box-shadow:    var(--shadow-lift);
  overflow:      hidden;
}

/* Sticky progress bar — top of viewport when filling quiz */
.quiz-progress-sticky {
  position:        sticky;
  top:             5rem;             /* under fixed navbar */
  z-index:         30;
  background:      rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:   1px solid rgba(0,0,0,0.05);
  padding:         0.75rem 1.5rem;
}
.quiz-progress-track {
  height:        6px;
  background:    color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: var(--radius-pill);
  overflow:      hidden;
}
.quiz-progress-fill {
  height:     100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-pill);
  transition: width 0.5s var(--ease-out);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 50%, transparent);
}

/* Quiz pytanie — modern card */
.quiz-question {
  padding: 1.5rem;
  border-radius: var(--radius-modern);
  background: white;
  border: 1px solid rgba(0,0,0,0.04);
  transition: border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}
.quiz-question.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.08);
}

.quiz-q-number {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  width:          2rem;
  height:         2rem;
  border-radius:  999px;
  background:     linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color:          white;
  font-weight:    700;
  font-size:      0.8125rem;
  flex-shrink:    0;
  box-shadow:     0 4px 8px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Likert buttons — bigger, modern */
.likert-option {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  text-align:     center;
  flex:           1;
  min-width:      72px;
  max-width:      130px;
  padding:        1rem 0.75rem;
  border:         2px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius:  var(--radius-modern);
  cursor:         pointer;
  background:     white;
  transition:     transform var(--duration) var(--ease-out),
                  border-color var(--duration) var(--ease-out),
                  background var(--duration) var(--ease-out),
                  box-shadow var(--duration) var(--ease-out),
                  color var(--duration) var(--ease-out);
}
.likert-option:hover {
  transform:    translateY(-2px) scale(1.04);
  border-color: var(--color-primary);
  background:   color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.likert-option:has(input:checked) {
  background:   linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-color: var(--color-primary-dark);
  color:        white;
  box-shadow:   var(--shadow-glow-primary);
  transform:    translateY(-2px) scale(1.05);
}
.likert-option .likert-value { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.likert-option .likert-label { font-size: 0.6875rem; opacity: 0.75; margin-top: 0.375rem; line-height: 1.2; }

/* Choice option (single/multiple) — modern */
.choice-option {
  position:        relative;
  display:         flex;
  align-items:     center;
  gap:             0.875rem;
  padding:         1rem 1.125rem;
  border:          2px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius:   var(--radius-modern);
  background:      white;
  cursor:          pointer;
  transition:      transform var(--duration) var(--ease-out),
                   border-color var(--duration) var(--ease-out),
                   background var(--duration) var(--ease-out),
                   box-shadow var(--duration) var(--ease-out);
  margin-bottom:   0.5rem;
}
.choice-option:hover {
  transform:    translateX(4px);
  border-color: var(--color-primary);
  background:   color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.choice-option:has(input:checked) {
  border-color: var(--color-primary);
  background:   color-mix(in srgb, var(--color-primary) 8%, transparent);
  box-shadow:   0 4px 12px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.choice-radio,
.choice-checkbox {
  width:         1.25rem;
  height:        1.25rem;
  border:        2px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  flex-shrink:   0;
  transition:    background var(--duration) var(--ease-out),
                 border-color var(--duration) var(--ease-out);
}
.choice-radio { border-radius: 999px; }
.choice-checkbox { border-radius: 0.375rem; }
.choice-option:has(input:checked) .choice-radio,
.choice-option:has(input:checked) .choice-checkbox {
  background:   var(--color-primary);
  border-color: var(--color-primary);
}
.choice-option:has(input:checked) .choice-radio::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background: white;
  border-radius: 999px;
  margin: 0.25rem auto;
}
.choice-option:has(input:checked) .choice-checkbox::after {
  content: "✓";
  display: block;
  color: white;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  margin-top: -1px;
}

/* Quiz screen transitions — slide between intro/questions/result */
.quiz-screen-enter {
  animation: quizScreenIn 0.5s var(--ease-out) both;
}
@keyframes quizScreenIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Quiz page (between paginated steps) */
.quiz-page-enter {
  animation: quizPageIn 0.4s var(--ease-out) both;
}
@keyframes quizPageIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Quiz intro — meta cards (czas, liczba pytań, anonimowy) */
.quiz-meta-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   0.75rem;
  margin-top:            2rem;
  margin-bottom:         2rem;
}
.quiz-meta-card {
  text-align:    center;
  padding:       1rem 0.75rem;
  border-radius: var(--radius-modern);
  background:    color-mix(in srgb, var(--color-primary) 5%, transparent);
  border:        1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.quiz-meta-card .icon {
  font-size: 1.5rem;
  color:     var(--color-primary);
  margin-bottom: 0.5rem;
}
.quiz-meta-card .value {
  font-size:   1.125rem;
  font-weight: 800;
  color:       var(--color-primary);
  line-height: 1.1;
}
.quiz-meta-card .label {
  font-size:    0.75rem;
  color:        #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top:   0.25rem;
}

/* Quiz result — celebrate state */
.quiz-result-hero {
  text-align: center;
  padding:    2.5rem 1.5rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 8%, white),
    color-mix(in srgb, var(--color-accent) 6%, white));
  border-radius: var(--radius-modern);
  position: relative;
  overflow: hidden;
}
.quiz-result-hero::before,
.quiz-result-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.5;
}
.quiz-result-hero::before {
  width: 200px; height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 25%, transparent), transparent 70%);
  top: -50px; left: -50px;
}
.quiz-result-hero::after {
  width: 220px; height: 220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 25%, transparent), transparent 70%);
  bottom: -60px; right: -60px;
}
.quiz-result-hero > * { position: relative; z-index: 1; }

/* ============================================================================
   11. GLOBAL OVERRIDES — modernize existing templates without editing twigs
   ----------------------------------------------------------------------------
   Targetuje istniejące klasy Tailwind w już-używanych szablonach, żeby
   modernizacja działała natywnie bez modyfikacji twigów.
   Wszystko ograniczone do <main>/<section>/<footer>/<header> — żeby nie
   ruszać admin panelu (renderuje się w innym kontekście).
   ============================================================================ */

/* --- 11.1 Body typography baseline + biały bg (pure white, bez tintów) --- */
body {
  background: #ffffff !important;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Smooth scroll dla anchor links — wyłączane jeśli prefers-reduced-motion */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- 11.2 HEROES — gradient mesh zamiast solid violet --- */
/* Targetuje sekcje z gradient violetowym (najczęstszy hero pattern). */
section.bg-gradient-to-r.from-\[var\(--color-primary\)\],
section.bg-gradient-to-br.from-\[var\(--color-primary\)\],
section.bg-gradient-to-l.from-\[var\(--color-primary\)\],
section.bg-\[var\(--color-primary\)\] {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(at 0% 0%,    color-mix(in srgb, var(--color-primary) 55%, transparent) 0%, transparent 50%),
    radial-gradient(at 100% 30%, color-mix(in srgb, var(--color-secondary) 45%, transparent) 0%, transparent 50%),
    radial-gradient(at 50% 100%, color-mix(in srgb, var(--color-primary-dark) 60%, transparent) 0%, transparent 55%),
    radial-gradient(at 80% 80%,  color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 45%),
    var(--color-primary) !important;
}
/* Subtelny dot pattern overlay */
section.bg-gradient-to-r.from-\[var\(--color-primary\)\]::before,
section.bg-gradient-to-br.from-\[var\(--color-primary\)\]::before,
section.bg-gradient-to-l.from-\[var\(--color-primary\)\]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}

/* Light gradient (bg-bg → secondary-light) — ulepszone kolory */
section.bg-gradient-to-br.from-\[var\(--color-bg\)\] {
  background:
    radial-gradient(at 100% 0%, color-mix(in srgb, var(--color-secondary) 25%, transparent) 0%, transparent 50%),
    radial-gradient(at 0% 100%, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, transparent 50%),
    var(--color-bg) !important;
}

/* --- 11.3 TYPOGRAPHY — większe heroes, tighter tracking --- */
/* H1 z hero (text-3xl sm:text-4xl lg:text-5xl) — display upgrade */
section h1.text-3xl,
section h1[class*="text-3xl"],
header h1 {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}

/* H2 sekcji */
section h2.text-3xl,
section h2.text-2xl,
section h2[class*="text-2xl"],
section h2[class*="text-3xl"],
section h2[class*="text-4xl"] {
  font-size: clamp(1.875rem, 3.5vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}

/* Eyebrow text — uppercase + tracking */
section p.text-sm.font-semibold.uppercase.tracking-wider,
section .text-sm.uppercase.tracking-wider {
  letter-spacing: 0.14em !important;
  font-weight: 700;
  font-size: 0.9375rem;       /* 15px (vs 12.5px) */
  line-height: 1.4;
  margin-bottom: 0.875rem;
}

/* Lead paragraph w hero */
section p.text-lg.text-white\/70 {
  font-size: 1.125rem;
  line-height: 1.65;
  text-wrap: pretty;
  max-width: 38em;
}

/* --- 11.4 SECTION SPACING — modern breath --- */
section.py-12.lg\:py-20,
section.py-14.lg\:py-20 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
section.py-16.lg\:py-24,
section.py-20.lg\:py-24,
section.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
  section.py-12.lg\:py-20,
  section.py-14.lg\:py-20 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  section.py-16.lg\:py-24,
  section.py-20.lg\:py-24 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }
}

/* --- 11.5 CARDS — modern bez postarzającego border'a, layered shadow + większe radius --- */
/* Targetuje karty content w sekcjach (poza navbar / dropdown / modal). */
main .bg-white.rounded-2xl,
section .bg-white.rounded-2xl,
main .bg-white.rounded-xl,
section .bg-white.rounded-xl,
main .bg-white.rounded-3xl,
section .bg-white.rounded-3xl {
  border: none !important;                 /* DEL: thin border który postarza */
  border-radius: 1.75rem !important;       /* większe rounded = more modern */
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(20, 14, 50, 0.04),
    0 4px 12px -2px color-mix(in srgb, var(--color-primary) 6%, transparent),
    0 16px 40px -12px color-mix(in srgb, var(--color-primary) 8%, transparent);
  transition: transform 380ms var(--ease-out),
              box-shadow 380ms var(--ease-out);
}
main .bg-white.rounded-3xl,
section .bg-white.rounded-3xl {
  border-radius: 2rem !important;
}

/* Hover — większy lift (-8px), mocniejszy shadow z primary glow */
main a.bg-white.rounded-2xl:hover,
section a.bg-white.rounded-2xl:hover,
main a.bg-white.rounded-xl:hover,
section a.bg-white.rounded-xl:hover,
main .bg-white.rounded-2xl.shadow-lg:hover,
section .bg-white.rounded-2xl.shadow-lg:hover,
main .bg-white.rounded-2xl.shadow-md:hover,
section .bg-white.rounded-2xl.shadow-md:hover,
section .grid > .bg-white.rounded-2xl:hover,
section .grid > .bg-white.rounded-xl:hover,
section .grid > a.bg-white:hover {
  transform: translateY(-8px);
  box-shadow:
    0 1px 2px rgba(20, 14, 50, 0.04),
    0 8px 24px -4px color-mix(in srgb, var(--color-primary) 12%, transparent),
    0 32px 64px -16px color-mix(in srgb, var(--color-primary) 28%, transparent) !important;
}

/* === KART INNER PADDING — większe oddychanie === */
/* Override Tailwind p-6 (24px) → 2rem (32px) na mobile, 2.5rem (40px) na desktop */
main .bg-white.rounded-2xl > .p-6,
section .bg-white.rounded-2xl > .p-6,
main .bg-white.rounded-xl > .p-6,
section .bg-white.rounded-xl > .p-6,
main .bg-white.rounded-2xl > .p-5,
section .bg-white.rounded-2xl > .p-5 {
  padding: 1.75rem !important;
}
@media (min-width: 1024px) {
  main .bg-white.rounded-2xl > .p-6,
  section .bg-white.rounded-2xl > .p-6,
  main .bg-white.rounded-2xl > .p-5,
  section .bg-white.rounded-2xl > .p-5 {
    padding: 2.25rem !important;
  }
  /* Karty z lg:p-8 (32px) → 2.75rem (44px) */
  main .bg-white.rounded-2xl > .lg\:p-8,
  section .bg-white.rounded-2xl > .lg\:p-8,
  main .bg-white.rounded-2xl > .p-6.lg\:p-8,
  section .bg-white.rounded-2xl > .p-6.lg\:p-8 {
    padding: 2.75rem !important;
  }
}

/* === IMAGE w karcie — subtle zoom on hover (parallax-feel) === */
main .bg-white.rounded-2xl img,
section .bg-white.rounded-2xl img,
main .bg-white.rounded-xl img,
section .bg-white.rounded-xl img {
  transition: transform 700ms var(--ease-out);
}
section .bg-white.rounded-2xl:hover img,
section .bg-white.rounded-xl:hover img,
section .grid > .bg-white:hover img,
section a.bg-white:hover img {
  transform: scale(1.04);
}

/* === IMAGE container — lekko więcej rounded żeby pasował do parent --- */
main .bg-white.rounded-2xl .aspect-square,
section .bg-white.rounded-2xl .aspect-square,
main .bg-white.rounded-2xl .aspect-video,
section .bg-white.rounded-2xl .aspect-video {
  overflow: hidden;
}

/* === HEADING & TEXT inside cards — większe, modern hierarchy === */
/* Heading karty: zwykle font-bold text-base lub text-lg → upgrade */
section .bg-white.rounded-2xl h3,
section .bg-white.rounded-xl h3,
main .bg-white.rounded-2xl h3,
main .bg-white.rounded-xl h3 {
  font-size: 1.1875rem;        /* 19px (vs 16-18px) */
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #1a1a2e;
}
@media (min-width: 1024px) {
  section .bg-white.rounded-2xl h3,
  main .bg-white.rounded-2xl h3 {
    font-size: 1.3125rem;      /* 21px na desktop */
  }
}
/* Description w karcie — bigger + nicer leading */
section .bg-white.rounded-2xl p.text-sm,
section .bg-white.rounded-xl p.text-sm,
main .bg-white.rounded-2xl p.text-sm,
main .bg-white.rounded-xl p.text-sm {
  font-size: 0.9375rem;        /* 15px (vs 14px) */
  line-height: 1.65;
  color: #525252;
}

/* Spacing między heading a paragraph w karcie */
section .bg-white.rounded-2xl h3 + p,
section .bg-white.rounded-xl h3 + p,
main .bg-white.rounded-2xl h3 + p,
main .bg-white.rounded-xl h3 + p {
  margin-top: 0.625rem;
}

/* === ICONS w karcie — większe, layered shadow primary === */
section .bg-white.rounded-2xl > * > .w-12.h-12.rounded-full,
section .bg-white.rounded-2xl > * > .w-14.h-14.rounded-full,
section .bg-white.rounded-2xl > * > .w-16.h-16.rounded-full,
main .bg-white.rounded-2xl > * > .w-12.h-12.rounded-full,
main .bg-white.rounded-2xl > * > .w-14.h-14.rounded-full,
main .bg-white.rounded-2xl > * > .w-16.h-16.rounded-full {
  box-shadow:
    0 8px 16px -4px color-mix(in srgb, var(--color-primary) 30%, transparent),
    0 1px 2px rgba(0,0,0,0.05);
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
section .bg-white.rounded-2xl:hover > * > .w-12.h-12.rounded-full,
section .bg-white.rounded-2xl:hover > * > .w-14.h-14.rounded-full,
section .bg-white.rounded-2xl:hover > * > .w-16.h-16.rounded-full,
main .bg-white.rounded-2xl:hover > * > .w-14.h-14.rounded-full {
  transform: scale(1.08);
  box-shadow:
    0 12px 24px -6px color-mix(in srgb, var(--color-primary) 40%, transparent),
    0 1px 2px rgba(0,0,0,0.05);
}

/* --- 11.6 BUTTONS — primary/violet → modern pill z hover lift + glow --- */
/* Primary CTA — solid violet button */
main a.bg-\[var\(--color-primary\)\],
section a.bg-\[var\(--color-primary\)\],
footer a.bg-\[var\(--color-primary\)\],
main button.bg-\[var\(--color-primary\)\],
section button.bg-\[var\(--color-primary\)\],
footer button.bg-\[var\(--color-primary\)\] {
  border-radius: 999px !important;
  transition: transform 250ms var(--ease-out),
              box-shadow 250ms var(--ease-out),
              background-color 250ms var(--ease-out) !important;
  letter-spacing: -0.01em;
  font-weight: 600;
}
main a.bg-\[var\(--color-primary\)\]:hover,
section a.bg-\[var\(--color-primary\)\]:hover,
footer a.bg-\[var\(--color-primary\)\]:hover,
main button.bg-\[var\(--color-primary\)\]:hover,
section button.bg-\[var\(--color-primary\)\]:hover,
footer button.bg-\[var\(--color-primary\)\]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-primary);
}
main a.bg-\[var\(--color-primary\)\]:active,
section a.bg-\[var\(--color-primary\)\]:active {
  transform: translateY(0);
}

/* Secondary CTA — white button on violet hero */
section a.bg-white.text-\[var\(--color-primary\)\],
section button.bg-white.text-\[var\(--color-primary\)\] {
  border-radius: 999px !important;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out) !important;
  font-weight: 600;
}
section a.bg-white.text-\[var\(--color-primary\)\]:hover,
section button.bg-white.text-\[var\(--color-primary\)\]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.25);
}

/* Ghost button — border-2 border-white */
section a.border-2.border-white\/30,
section a[class*="border-white"] {
  border-radius: 999px !important;
  transition: transform 250ms var(--ease-out), background-color 250ms var(--ease-out), border-color 250ms var(--ease-out) !important;
}
section a.border-2.border-white\/30:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.6) !important;
}

/* Arrow icon micro-anim — strzałka po hover translateX */
main a.bg-\[var\(--color-primary\)\] svg,
section a.bg-\[var\(--color-primary\)\] svg,
section a.bg-white.text-\[var\(--color-primary\)\] svg {
  transition: transform 250ms var(--ease-out);
}
main a.bg-\[var\(--color-primary\)\]:hover svg,
section a.bg-\[var\(--color-primary\)\]:hover svg,
section a.bg-white.text-\[var\(--color-primary\)\]:hover svg {
  transform: translateX(4px);
}

/* --- 11.7 FORM INPUTS — modern focus z accent --- */
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="number"],
main input[type="password"],
main input[type="search"],
main input[type="url"],
main textarea,
main select,
section input[type="text"],
section input[type="email"],
section input[type="tel"],
section input[type="number"],
section textarea,
section select,
footer input[type="email"],
footer input[type="text"] {
  border-radius: 0.875rem;
  transition: border-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}

main input:focus,
main textarea:focus,
main select:focus,
section input:focus,
section textarea:focus,
section select:focus,
footer input:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
}

/* --- 11.8 ICONS w ikon-circle — głębsza shadow --- */
main .w-12.h-12.rounded-full,
main .w-14.h-14.rounded-full,
main .w-16.h-16.rounded-full,
section .w-12.h-12.rounded-full,
section .w-14.h-14.rounded-full,
section .w-16.h-16.rounded-full {
  box-shadow: 0 8px 16px -4px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* --- 11.9 PROSE — lepszy line-height + spacing --- */
.prose, .prose-lg {
  line-height: 1.75;
}
.prose p, .prose li, .prose-lg p, .prose-lg li {
  text-wrap: pretty;
}
.prose h2, .prose-lg h2 {
  margin-top: 2em;
  margin-bottom: 0.75em;
  letter-spacing: -0.02em;
}
.prose h3, .prose-lg h3 {
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  letter-spacing: -0.015em;
}
.prose strong, .prose-lg strong {
  color: var(--color-primary);
  font-weight: 700;
}
.prose a, .prose-lg a {
  text-decoration: none;
  background-image: linear-gradient(to right, var(--color-primary), var(--color-primary));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 200ms var(--ease-out);
}
.prose a:hover, .prose-lg a:hover {
  background-size: 100% 2px;
}

/* --- 11.10 BLOCKQUOTE — accent left border --- */
.prose blockquote, .prose-lg blockquote {
  border-left-width: 4px;
  border-left-color: var(--color-primary);
  padding-left: 1.5rem;
  font-style: italic;
  color: #4b5563;
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

/* --- 11.11 TABELE w prose — modern --- */
.prose table, .prose-lg table {
  border-radius: 0.75rem;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.prose table th, .prose-lg table th {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
  padding: 0.75rem 1rem;
}
.prose table td, .prose-lg table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.prose table tr:hover td, .prose-lg table tr:hover td {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* --- 11.12 SCROLL ANIMATE — drobne tweaki istniejącego scroll-animate.js --- */
.scroll-animate {
  /* przyspieszamy istniejącą animację z 0.9s na 0.7s */
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
  transition-delay: 0s;
}

/* ============================================================================
   12. UTILITIES — extra
   ============================================================================ */

/* Text balance dla h1/h2 (lepszy line wrap) */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* Gradient text utility */
.text-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .slide-in-l, .slide-in-r,
  .quiz-screen-enter, .quiz-page-enter,
  .card-modern, .btn-pill, .likert-option, .choice-option {
    animation: none !important;
    transition: none !important;
  }
  .fade-up, .slide-in-l, .slide-in-r {
    opacity: 1 !important;
    transform: none !important;
  }
}