/* ============================================================
   FEST PROBABY — Design System & Style Guide
   Extrahováno z v0.app prototypu + split heading typografie
   ============================================================
   
   PŘEHLED STYLU:
   - Tmavý, luxusní, emocionální landing page
   - Paleta: hluboké purpurové/vínové + teal akcent
   - Typografie: DM Sans (UI/body) + Fraunces Display Italic 700 (display, lokální řez)
   - SPECIÁLKA: Dělené nadpisy — řádek 1 DM Sans, řádek 2 Fraunces
   - Glassmorphism, radial gradient glow, jemné dot patterny
   - Sekce střídají tmavé (gradient) a světlé (#f0ede8 warm beige)
   
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   0. FONT IMPORTS
   ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Vlastní řez Fraunces Display Italic 700 — řeší problémy s vykreslováním
   variabilního Fraunces italic z Google Fonts */
@font-face {
  font-family: 'Fraunces Display';
  src: url('_public/fraunces-display-italic-700.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* ────────────────────────────────────────────────────────────
   1. BARVY / COLOR TOKENS
   ──────────────────────────────────────────────────────────── */

:root {
  /* === Primární paleta === */
  --color-bg-darkest:       #1c1030;
  --color-bg-dark-purple:   #2d1b4e;
  --color-bg-wine:          #491237;
  --color-bg-magenta:       #8b2d6b;
  --color-bg-dark-teal:     #1a3a4a;
  
  /* === Akcent — Teal === */
  --color-accent:           #5cc8c8;
  --color-accent-light:     #7dd9d9;
  --color-accent-lightest:  #aadde1;

  /* === Akcent — Teplá zlatá (bonusy, zvýraznění hodnoty) === */
  --color-accent-warm:      #ffb84d;
  
  /* === Světlé sekce === */
  --color-bg-warm:          #f0ede8;
  --color-border-warm:      #cec8be;
  
  /* === Text — tmavé pozadí === */
  --color-text-white:       #ffffff;
  --color-text-white-70:    rgba(255, 255, 255, 0.70);
  --color-text-white-60:    rgba(255, 255, 255, 0.60);
  --color-text-white-55:    rgba(255, 255, 255, 0.55);
  --color-text-white-50:    rgba(255, 255, 255, 0.50);
  --color-text-white-40:    rgba(255, 255, 255, 0.40);
  --color-text-white-30:    rgba(255, 255, 255, 0.30);
  --color-text-white-25:    rgba(255, 255, 255, 0.25);
  --color-text-white-20:    rgba(255, 255, 255, 0.20);
  
  /* === Text — světlé pozadí === */
  --color-text-dark:        #1c1030;
  --color-text-wine:        #491237;
  --color-text-muted:       #5a5060;
  
  /* === Bordery a overlay === */
  --color-border-white-8:   rgba(255, 255, 255, 0.08);
  --color-border-white-10:  rgba(255, 255, 255, 0.10);
  --color-border-white-15:  rgba(255, 255, 255, 0.15);
  --color-border-white-20:  rgba(255, 255, 255, 0.20);
  --color-bg-white-5:       rgba(255, 255, 255, 0.05);
  --color-bg-white-8:       rgba(255, 255, 255, 0.08);
  --color-bg-white-10:      rgba(255, 255, 255, 0.10);
  --color-bg-white-15:      rgba(255, 255, 255, 0.15);
  --color-bg-black-20:      rgba(0, 0, 0, 0.20);
  
  /* === Akcent varianty === */
  --color-accent-10:        rgba(92, 200, 200, 0.10);
  --color-accent-30:        rgba(92, 200, 200, 0.30);
  --color-accent-60:        rgba(92, 200, 200, 0.60);
  --color-accent-hover-border: rgba(92, 200, 200, 0.40);
  --color-wine-5:           rgba(73, 18, 55, 0.05);
  --color-wine-20:          rgba(73, 18, 55, 0.20);
}


/* ────────────────────────────────────────────────────────────
   2. TYPOGRAFIE / TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */

:root {
  /* === Font families === */
  --font-sans:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display:  'Fraunces Display', Georgia, 'Times New Roman', serif;
  
  /* === Font sizes === */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;
  --text-8xl:   6rem;
  
  /* === Font weights === */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-black:     900;
  
  /* === Line heights === */
  --leading-none:    0.9;
  --leading-tight:   0.95;
  --leading-snug:    1.1;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  
  /* === Letter spacing === */
  --tracking-tight:   -0.025em;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.2em;
}


/* ────────────────────────────────────────────────────────────
   2b. SPLIT HEADING SYSTEM — DM Sans + Fraunces Bold Italic
   ────────────────────────────────────────────────────────────
   
   KONCEPT:
   Každý hlavní nadpis (h1, h2) je rozdělen na dva řádky:
   - Řádek 1: DM Sans, font-weight 900 (Black), geometrický, čistý
   - Řádek 2: Fraunces, font-weight 700 (Bold), italic, serifový, expresivní
   
   Druhý řádek může mít navíc teal gradient nebo wine barvu.
   
   PŘÍKLADY Z WEBU:
   
   Hero:         "Festival"          → DM Sans Black
                 "pro rodiče"        → Fraunces Bold Italic + teal gradient
   
   O festivalu:  "Festival, který vás"  → DM Sans Black
                 "opravdu připraví"     → Fraunces Bold Italic + wine color
   
   Program:      "Program se"        → DM Sans Black
                 "sestavuje"          → Fraunces Bold Italic + wine color
   
   Místo:        "Místo, které"      → DM Sans Black
                 "dýchá historií"     → Fraunces Bold Italic + teal gradient
   
   FAQ:          "Máte otázky?"      → DM Sans Black
                 "Máme odpovědi."    → Fraunces Bold Italic + wine color
   
   Datum:        "3. dubna"          → DM Sans Black
                 "2027"              → Fraunces Bold Italic
   
   PRAVIDLO: Na tmavém pozadí → Fraunces řádek má teal gradient
             Na světlém pozadí → Fraunces řádek má wine barvu (#491237)
   
   ──────────────────────────────────────────────────────────── */

/* --- Kontejner nadpisu --- */
.heading-split {
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* --- Řádek 1: DM Sans Black --- */
.heading-split .line-sans {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--font-black);
  font-style: normal;
}

/* --- Řádek 2: Fraunces Bold Italic --- */
.heading-split .line-serif {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  font-style: italic;
  line-height: 1.2;       /* Fraunces má hluboké descendersy (j,p,y) — nutný prostor */
  padding-bottom: 0.08em; /* ochrana před oříznutím u -webkit-background-clip: text */
}

/* --- Barevné varianty pro serif řádek --- */

/* Teal gradient — pro tmavé pozadí */
.heading-split .line-serif.accent-gradient {
  background-image: linear-gradient(90deg, #5cc8c8 0%, #7dd9d9 50%, #aadde1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Wine barva — pro světlé pozadí */
.heading-split .line-serif.accent-wine {
  color: var(--color-text-wine);
}

/* Bílá — pro tmavé pozadí kde nechceme gradient */
.heading-split .line-serif.accent-white {
  color: var(--color-text-white);
}


/* --- Velikostní varianty --- */

/* HERO — největší nadpis */
.heading-split.size-hero {
  font-size: var(--text-5xl);
}
.heading-split.size-hero .line-serif {
  font-size: 1.15em;
}
@media (min-width: 640px) {
  .heading-split.size-hero { font-size: var(--text-6xl); }
}
@media (min-width: 1024px) {
  .heading-split.size-hero { font-size: var(--text-7xl); }
}
@media (min-width: 1280px) {
  .heading-split.size-hero { font-size: var(--text-8xl); }
}

/* SECTION — standardní sekční nadpis */
.heading-split.size-section {
  font-size: var(--text-4xl);
}
.heading-split.size-section .line-serif {
  font-size: 1.05em;
}
@media (min-width: 640px) {
  .heading-split.size-section { font-size: var(--text-5xl); }
}
@media (min-width: 1024px) {
  .heading-split.size-section { font-size: var(--text-6xl); }
}

/* DATE — speciální velké datum (vstupenky sekce) */
.heading-split.size-date {
  font-size: var(--text-6xl);
  line-height: 1.1;
}
@media (min-width: 640px) {
  .heading-split.size-date { font-size: var(--text-7xl); }
}
@media (min-width: 1024px) {
  .heading-split.size-date { font-size: var(--text-8xl); }
}

/* SMALL — menší nadpisy (h3, karty) */
.heading-split.size-small {
  font-size: var(--text-2xl);
}


/* ────────────────────────────────────────────────────────────
   3. GRADIENTY / GRADIENTS
   ──────────────────────────────────────────────────────────── */

:root {
  --gradient-hero: linear-gradient(
    160deg, #1c1030 0%, #2d1b4e 30%, #491237 60%, #8b2d6b 80%, #1a3a4a 100%
  );
  --gradient-content-dark: linear-gradient(
    160deg, #1c1030 0%, #2d1b4e 40%, #491237 70%, #1a3a4a 100%
  );
  --gradient-tickets: linear-gradient(
    160deg, #491237 0%, #8b2d6b 35%, #2d1b4e 65%, #1a3a4a 100%
  );
  --gradient-newsletter: linear-gradient(
    135deg, #1c1030 0%, #2d1b4e 60%, #491237 100%
  );
  --gradient-cta: linear-gradient(90deg, #5cc8c8 0%, #7dd9d9 100%);
  --gradient-text-hero: linear-gradient(90deg, #5cc8c8 0%, #7dd9d9 50%, #aadde1 100%);
  --gradient-text-history: linear-gradient(90deg, #5cc8c8, #7dd9d9);
  --gradient-image-glow: linear-gradient(to top, #5cc8c8, #8b2d6b);
  --gradient-fade-dark: linear-gradient(to top, #1c1030 0%, transparent 50%);
  --glow-teal:    radial-gradient(circle, #5cc8c8 0%, transparent 70%);
  --glow-magenta: radial-gradient(circle, #8b2d6b 0%, transparent 70%);
  --glow-teal-ellipse: radial-gradient(ellipse, #5cc8c8 0%, transparent 70%);
}


/* ────────────────────────────────────────────────────────────
   4. SPACING & LAYOUT
   ──────────────────────────────────────────────────────────── */

:root {
  --max-width:       87.5rem;
  --max-width-sm:    64rem;
  --max-width-xs:    48rem;
  --px-mobile:       1rem;
  --px-tablet:       1.5rem;
  --px-desktop:      2rem;
  --section-py:      6rem;
  --section-py-lg:   8rem;
  --section-py-cta:  7rem;
  --section-py-cta-lg: 10rem;
  --nav-height:      4rem;
  --nav-height-md:   5rem;
  --radius-sm:       0.375rem;
  --radius-md:       0.5rem;
  --radius-lg:       0.75rem;
  --radius-xl:       1rem;
  --radius-full:     9999px;
  --radius-image:    2.5rem;
}


/* ────────────────────────────────────────────────────────────
   5. BASE STYLES
   ──────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-dark);
  background: var(--color-bg-darkest);
}


/* ────────────────────────────────────────────────────────────
   6. COMPONENT PATTERNS
   ──────────────────────────────────────────────────────────── */

/* --- Section label (uppercase teal) --- */
.section-label {
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

/* --- CTA Primary --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-full);
  background: var(--gradient-cta);
  color: var(--color-bg-darkest);
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-primary:hover {
  box-shadow: 0 20px 25px -5px rgba(92, 200, 200, 0.2);
  transform: scale(1.02);
}
.btn-primary-lg {
  padding: 1.25rem 2.5rem;
  font-weight: var(--font-black);
  font-size: var(--text-lg);
}
.btn-primary-lg:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px -12px rgba(92, 200, 200, 0.3);
}

/* --- Ghost button --- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-white-8);
  border: 1px solid var(--color-border-white-15);
  color: white;
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: var(--color-bg-white-15);
}

/* --- Outline button --- */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-white-20);
  background: transparent;
  color: var(--color-text-white-70);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-outline:hover {
  color: var(--color-accent);
  border-color: var(--color-accent-hover-border);
}

/* --- Hero badge --- */
.badge-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-accent-30);
  background: var(--color-accent-10);
  backdrop-filter: blur(8px);
}
.badge-hero .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 2s infinite;
}
.badge-hero .badge-text {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- Tags --- */
.tag-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-white-8);
  border: 1px solid var(--color-border-white-15);
  color: var(--color-text-white-70);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}
.tag-dark .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.tag-light {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  border-radius: var(--radius-full);
  background: var(--color-wine-5);
  border: 1px solid var(--color-wine-20);
  color: var(--color-text-wine);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

/* --- Stats bar --- */
.stats-bar {
  border-top: 1px solid var(--color-border-white-10);
  background: var(--color-bg-black-20);
  backdrop-filter: blur(8px);
}
.stat-number {
  font-family: var(--font-sans);
  font-weight: var(--font-black);
  color: var(--color-accent);
  font-size: var(--text-3xl);
}
.stat-label {
  color: var(--color-text-white-40);
  font-size: var(--text-sm);
  margin-top: 0.25rem;
}
@media (min-width: 640px) {
  .stat-number { font-size: var(--text-4xl); }
}

/* --- Feature cards (tmavé) --- */
.card-dark {
  position: relative;
  background: var(--color-bg-white-5);
  padding: 2rem;
  transition: all 0.3s;
  overflow: hidden;
}
.card-dark:hover { background: var(--color-bg-white-10); }
.card-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.card-dark:hover::before { transform: scaleX(1); }
.card-dark .card-label {
  color: var(--color-accent-60);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.card-dark .card-title {
  font-weight: var(--font-black);
  color: white;
  font-size: var(--text-2xl);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.card-dark .card-desc {
  color: var(--color-text-white-50);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* --- Feature cards (světlé) --- */
.card-light {
  background: var(--color-bg-warm);
  padding: 2rem 2.5rem;
  transition: all 0.3s;
}
.card-light:hover { background: white; }
.card-light .card-number {
  font-weight: var(--font-black);
  color: var(--color-border-warm);
  font-size: var(--text-5xl);
  line-height: 1;
  margin-bottom: 1.5rem;
  transition: color 0.3s;
}
.card-light:hover .card-number { color: var(--color-accent); }
.card-light .card-title {
  font-weight: var(--font-bold);
  color: var(--color-text-dark);
  font-size: var(--text-xl);
  margin-bottom: 0.75rem;
}
.card-light .card-desc {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* --- Newsletter box --- */
.newsletter-box {
  border-radius: var(--radius-xl);
  padding: 2rem 2.5rem;
  background: var(--gradient-newsletter);
  border: 1px solid var(--color-border-white-10);
}
.newsletter-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg-white-10);
  border: 1px solid var(--color-border-white-15);
  color: white;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.3s;
}
.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.newsletter-input:focus { border-color: rgba(92, 200, 200, 0.6); }

/* --- FAQ accordion --- */
.faq-item { border-bottom: 1px solid var(--color-border-warm); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  color: var(--color-text-dark);
  transition: color 0.3s;
}
.faq-question:hover { color: var(--color-text-wine); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.3s;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.faq-item.open .faq-answer {
  max-height: 500px;
  opacity: 1;
  padding-bottom: 1.5rem;
}

/* --- Navbar --- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: all 0.5s;
  background: transparent;
}
.navbar.scrolled {
  background: rgba(28, 16, 48, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-white-10);
}
.nav-link {
  color: var(--color-text-white-70);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.3s;
}
.nav-link:hover { color: var(--color-accent); }

/* --- Footer --- */
.footer {
  background: var(--color-bg-darkest);
  border-top: 1px solid var(--color-border-white-8);
}
.footer-section-title {
  color: var(--color-text-white-30);
  font-weight: var(--font-bold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
}
.footer-link {
  color: var(--color-text-white-50);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-link:hover { color: var(--color-accent); }
.social-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border-white-15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white-40);
  transition: all 0.3s;
}
.social-icon:hover {
  border-color: rgba(92, 200, 200, 0.5);
  color: var(--color-accent);
}


/* ────────────────────────────────────────────────────────────
   7. DECORATIVE OVERLAYS
   ──────────────────────────────────────────────────────────── */

.dot-pattern-teal { position: relative; }
.dot-pattern-teal::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #5cc8c8 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.04;
  pointer-events: none;
}

.dot-pattern-white { position: relative; }
.dot-pattern-white::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.04;
  pointer-events: none;
}

.glow-blob-teal {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: var(--glow-teal);
  opacity: 0.15;
  pointer-events: none;
}

.glow-blob-magenta {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: var(--glow-magenta);
  opacity: 0.25;
  pointer-events: none;
}


/* ────────────────────────────────────────────────────────────
   8. SECTION BACKGROUNDS
   ──────────────────────────────────────────────────────────── */

@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.bg-hero    { background: var(--gradient-hero);         background-size: 250% 250%; animation: gradient-flow 16s ease infinite; }
.bg-dark    { background: var(--gradient-content-dark); background-size: 250% 250%; animation: gradient-flow 18s ease infinite; }
.bg-tickets { background: var(--gradient-tickets);      background-size: 250% 250%; animation: gradient-flow 16s ease infinite; }
.bg-darkest    { background: var(--color-bg-darkest); }
.bg-warm       { background: var(--color-bg-warm); }


/* ────────────────────────────────────────────────────────────
   9. HTML MARKUP REFERENCE — SPLIT HEADINGS
   ────────────────────────────────────────────────────────────
   
   <!-- Hero — tmavé pozadí, teal gradient -->
   <h1 class="heading-split size-hero">
     <span class="line-sans">Festival</span>
     <span class="line-serif accent-gradient">pro rodiče</span>
   </h1>
   
   <!-- Sekce — světlé pozadí, wine barva -->
   <h2 class="heading-split size-section">
     <span class="line-sans">Festival, který vás</span>
     <span class="line-serif accent-wine">opravdu připraví</span>
   </h2>
   
   <!-- Sekce — tmavé pozadí, teal gradient -->
   <h2 class="heading-split size-section">
     <span class="line-sans">Místo, které</span>
     <span class="line-serif accent-gradient">dýchá historií</span>
   </h2>
   
   <!-- Datum — velký, tmavé pozadí -->
   <h2 class="heading-split size-date">
     <span class="line-sans">3. dubna</span>
     <span class="line-serif accent-white">2027</span>
   </h2>
   
   <!-- FAQ — světlé pozadí -->
   <h2 class="heading-split size-section">
     <span class="line-sans">Máte otázky?</span>
     <span class="line-serif accent-wine">Máme odpovědi.</span>
   </h2>
   
   <!-- Malý split v kartě -->
   <h3 class="heading-split size-small">
     <span class="line-sans">Gynekologie</span>
     <span class="line-serif accent-white">a porodnictví</span>
   </h3>
   
   ──────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────
   10. ANIMACE
   ──────────────────────────────────────────────────────────── */

/* ── Shimmer na btn-primary ──────────────────────────────── */
@keyframes shimmer {
  0%  { transform: translateX(-120%) skewX(-15deg); }
  100%{ transform: translateX(280%)  skewX(-15deg); }
}
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  animation: shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* ── Ripple efekt ────────────────────────────────────────── */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.38);
  transform: scale(0);
  animation: ripple-anim 0.65s linear forwards;
  pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* ── Pulzující puntíky ───────────────────────────────────── */
@keyframes dot-breathe {
  0%,100%{ transform: scale(1);   opacity: 1; }
  50%    { transform: scale(1.6); opacity: 0.5; }
}
.tag-dot  { animation: dot-breathe 2s ease-in-out infinite; }
.logo-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); margin-left: 3px; vertical-align: middle;
  animation: dot-breathe 2s ease-in-out infinite;
}

/* ── Animovaný border button ─────────────────────────────── */
@keyframes border-march {
  0%  { background-position: 0%   50%; }
  100%{ background-position: 400% 50%; }
}
.btn-outline-anim {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: var(--radius-full);
  border: 1px solid rgba(92,200,200,0.3);
  background: linear-gradient(90deg, rgba(92,200,200,0.12), rgba(139,45,107,0.12), rgba(92,200,200,0.12));
  background-size: 300% 100%;
  color: var(--color-text-white-70);
  font-family: var(--font-sans); font-weight: var(--font-semibold);
  font-size: var(--text-sm); cursor: pointer;
  animation: border-march 4s linear infinite;
  transition: color 0.3s;
}
.btn-outline-anim:hover { color: var(--color-accent); }

/* ── SVG blob foto karty ─────────────────────────────────── */
.blob-cards-grid {
  display: grid; grid-template-columns: 1fr; gap: 3rem;
  max-width: 700px; margin: 0 auto;
}
@media (min-width: 560px) { .blob-cards-grid { grid-template-columns: 1fr 1fr; } }

.blob-card { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.blob-svg-wrap { width: 100%; max-width: 290px; }
.blob-svg-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }

@keyframes blob-outer-glow {
  0%,100%{ filter: drop-shadow(0 4px 16px rgba(92,200,200,0.22)) drop-shadow(0 0 40px rgba(92,200,200,0.07)); }
  50%    { filter: drop-shadow(0 4px 32px rgba(92,200,200,0.52)) drop-shadow(0 0 80px rgba(92,200,200,0.2)); }
}
.blob-svg-wrap svg { animation: blob-outer-glow 4s ease-in-out infinite; }
.blob-card:nth-child(2) .blob-svg-wrap svg { animation-delay: -2s; }

/* Báze pro SVG trace čáry — stroke-dasharray doplní JS */
.blob-trace, .blob-trace-rev { fill: none; stroke-linecap: round; }

.blob-card-name {
  color: white; font-family: var(--font-sans); font-weight: var(--font-bold);
  font-size: var(--text-xl); text-align: center; margin-bottom: 0.25rem;
}
.blob-card-role {
  color: var(--color-accent); font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: 0.15em; text-align: center;
}


/* ────────────────────────────────────────────────────────────
   11. CLAUDE CODE — AGENTS.md BLOK
   ────────────────────────────────────────────────────────────
   
   Vlož do AGENTS.md v kořeni projektu:
   
   # Fest ProBaby — Design System
   
   ## Fonty
   - DM Sans (Google Fonts, variable, 100–1000)
   - Fraunces Display Italic 700 (lokální řez, _public/fraunces-display-italic-700.ttf)
   
   ## Split Heading Pattern (KLÍČOVÝ PRVEK)
   Každý hlavní nadpis (h1, h2) používá dva fonty na dvou řádcích:
   - Řádek 1: DM Sans, weight 900 (Black) — čistý geometrický sans
   - Řádek 2: Fraunces, weight 700 (Bold), italic — expresivní serif
   
   ### Barevné pravidlo
   - Tmavé pozadí → serif řádek = teal gradient (#5cc8c8 → #7dd9d9 → #aadde1)
   - Světlé pozadí → serif řádek = wine barva (#491237)
   
   ### HTML struktura
   ```html
   <h1 class="heading-split size-hero">
     <span class="line-sans">Řádek sans</span>
     <span class="line-serif accent-gradient">Řádek serif</span>
   </h1>
   ```
   
   ### Varianty serif řádku
   - `.accent-gradient` — teal gradient text (tmavé bg)
   - `.accent-wine` — #491237 (světlé bg)
   - `.accent-white` — bílá (tmavé bg, bez gradientu)
   
   ### Velikosti
   - `.size-hero` — 48→96px responsive
   - `.size-section` — 36→60px responsive
   - `.size-date` — 60→96px responsive
   - `.size-small` — 24px
   
   ## Paleta barev
   - Darkest: #1c1030
   - Purple: #2d1b4e
   - Wine: #491237
   - Magenta: #8b2d6b
   - Teal accent: #5cc8c8 / #7dd9d9 / #aadde1
   - Warm bg: #f0ede8
   - Warm border: #cec8be
   
   ## Gradient hero (160deg)
   #1c1030 → #2d1b4e → #491237 → #8b2d6b → #1a3a4a
   
   ## Sekce střídají: tmavý gradient ↔ warm beige (#f0ede8)
   
   ## Design soubor: festprobaby-design-system.css
   Obsahuje všechny tokeny, komponenty a utility třídy.
   Importuj na začátku projektu.
   
   ──────────────────────────────────────────────────────────── */