/* =========================================================
   DOWIEM — arkusz stylów makiety
   Jeden plik dla wszystkich podstron.
   Sekcje: 1 zmienne · 2 podstawy · 3 układ · 4 nawigacja
           5 przyciski · 6 sekcje · 7 komponenty · 8 formularze
           9 stopka · 10 podstrony · 11 RWD · 12 druk
   ========================================================= */

/* ---------- 1. ZMIENNE ---------- */
/*  Kolory marki (--brand, --pink, --teal) służą jako plamy barwne:
    tła ikon, obramowania, znaczniki. Do tekstu i przycisków używamy
    wariantów -ink / -btn, które spełniają kontrast WCAG AA 4.5:1.   */
:root{
  /* Wartości oznaczone [dowiem.pl] pochodzą wprost ze zmiennych CSS
     obecnego serwisu. Odcienie -ink są z nich wyprowadzone: ten sam ton,
     obniżona jasność, żeby tekst spełniał kontrast WCAG AA 4,5:1.        */

  /* powierzchnie */
  --bg:#FFFFFF;                 /* [dowiem.pl] --white           */
  --bg-soft:#F2F3FB;            /* [dowiem.pl] --grey-bg         */
  --card:#FFFFFF;
  --surface-dark:#2A2950;
  --line:#E2E4F1;

  /* tekst — granat, spójny z paletą Redesign 2026 */
  --head:#2A2950;
  --ink:#2A2950;
  --muted:#545474;
  --logo:#2A2950;

  /* fiolet — kolor podstawowy */
  --brand:#8B8BFE;              /* [dowiem.pl] --violet-light    */
  --brand-ink:#4A48A8;
  --brand-btn:#5757D6;          /* [dowiem.pl] --footer          */
  --brand-btn-hover:#4A4AC4;
  --brand-soft:#EDEDFF;
  --on-brand:#FFFFFF;
  --on-brand-dim:#E8E8FF;

  /* róż — teatr i akcenty */
  --pink:#F56BAF;               /* [dowiem.pl] --pink            */
  --pink-ink:#A82C68;
  --pink-btn:#F56BAF;           /* [dowiem.pl] --pink            */
  --pink-btn-hover:#EF4E9E;
  --pink-soft:#FDEFF6;
  --on-pink:#212225;            /* ciemny tekst — róż marki zostaje pełny */
  --on-pink-dim:#42212F;

  /* turkus — etapy kursów */
  --teal:#00D3C2;               /* [dowiem.pl] --green           */
  --teal-ink:#0C7C74;
  --teal-soft:#E4FBF9;

  /* żółty — braki do uzupełnienia */
  --todo-bg:#FFF993;            /* [dowiem.pl] --yellow-light    */
  --todo-line:#FFF000;          /* [dowiem.pl] --yellow          */
  --todo-ink:#212225;           /* [dowiem.pl] --black           */

  --font-ui:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:'Bricolage Grotesque',var(--font-ui);
  --font-serif:'Playfair Display',Georgia,serif;

  --radius:18px;
  --wrap:1140px;
  /* panel AMAkids w rozwidleniu — własne tokeny, bo tło jest gradientem,
     a gradient nie dziedziczy motywu tak jak zwykły background-color.
     MUSZĄ stać w tym :root, przed blokiem trybu ciemnego — inaczej
     późniejsza deklaracja o tej samej wadze nadpisuje wersję ciemną. */
  --widelec-1:#FFFFFF; --widelec-2:#D9D9FF; --widelec-ramka:#B9B9F6;

  --shadow-sm:0 4px 14px rgba(91,89,163,.14);
  --shadow-md:0 10px 30px rgba(91,89,163,.16);
  --shadow-lg:0 18px 40px rgba(91,89,163,.30);
}

/* ---------- 1b. SKALA TYPOGRAFICZNA I ODSTĘPY ----------
   Skala modularna, iloraz 1,2 (tercja mała), 1rem = 18px.
   Szczeble to dokładnie 1,2^n rem — iloraz widać w wartościach.
   Kroki płynne interpolują między 360 px a 1140 px szerokości okna.
   Odstępy celowo w px, nie rem: układ nie ma się rozjeżdżać, gdy
   czytelnik powiększy czcionkę w przeglądarce — rosnąć ma tekst.     */
:root{
  --step-n2:.694rem;   /* 12,5 */
  --step-n1:.833rem;   /* 15   */
  --step-0:1rem;       /* 18   ← baza */
  --step-1:1.2rem;     /* 21,6 */
  --step-2:1.44rem;    /* 25,9 */
  --step-3:1.728rem;   /* 31,1 */
  --step-4:2.074rem;   /* 37,3 */
  --step-5:2.488rem;   /* 44,8 */
  --step-6:2.986rem;   /* 53,7 */

  --fs-h1:clamp(1.728rem,1.148rem + 2.90vw,2.986rem);    /* 31 → 54 */
  --fs-h1-sub:clamp(1.728rem,1.376rem + 1.76vw,2.488rem);/* 31 → 45 */
  --fs-h2:clamp(1.440rem,1.147rem + 1.46vw,2.074rem);    /* 26 → 37 */
  --fs-h2-sub:clamp(1.440rem,1.305rem + .67vw,1.728rem); /* 26 → 31 */
  --fs-h3-lg:clamp(1.200rem,1.090rem + .55vw,1.440rem);  /* 22 → 26 */
  --fs-h3:var(--step-1);
  --fs-h4:var(--step-0);
  --fs-lead:clamp(1.083rem,.981rem + .51vw,1.306rem);    /* 19,5 → 23,5 */
  --fs-prose:clamp(1rem,.948rem + .26vw,1.111rem);       /* 18 → 20 */
  --fs-body:var(--step-0);
  --fs-small:var(--step-n1);
  --fs-label:var(--step-n1);
  --fs-micro:var(--step-n2);
  --fs-btn:var(--step-0);
  --fs-btn-lg:1.083rem;                                  /* 19,5 */

  --lh-tight:1.12;
  --lh-head:1.28;
  --lh-body:1.65;

  --space-section:clamp(60px,39.7px + 5.64vw,104px);
  --space-block:clamp(40px,31.7px + 2.31vw,58px);
  --space-gap:clamp(20px,14.5px + 1.54vw,32px);
  --space-card:clamp(24px,20.3px + 1.03vw,32px);
  --space-wide:clamp(32px,20.9px + 3.08vw,56px);
}

/* ---------- 2. PODSTAWY ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:112.5%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  font-size:var(--fs-body);color:var(--ink);background:var(--bg);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
img,svg{max-width:100%}
/* globalne domyślne rozmiary nagłówków — dotąd ich NIE BYŁO, więc
   h1 i h3 bez reguły komponentu spadały do rozmiaru przeglądarki */
h1{font-size:var(--fs-h1-sub);line-height:var(--lh-tight);letter-spacing:-.02em}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
:where(h1,h2,h3,h4){font-family:var(--font-head);font-weight:800;color:var(--head);text-wrap:balance;line-height:var(--lh-head);letter-spacing:-.02em}
p{text-wrap:pretty}

/* widoczny fokus na całej stronie — obowiązkowe dla klawiatury */
:focus-visible{outline:3px solid var(--brand-ink);outline-offset:2px;border-radius:4px}

/* kotwice nie chowają się pod przyklejonym nagłówkiem */
[id]{scroll-margin-top:120px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--brand-btn);color:var(--on-brand);
  padding:12px 20px;border-radius:0 0 10px 10px;font-weight:600;text-decoration:none;
  transition:top .15s;
}
.skip:focus{top:0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ---------- 3. UKŁAD ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:var(--space-section) 0}
section.soft{background:var(--bg-soft)}
.sec-head{text-align:center;max-width:640px;margin:0 auto var(--space-block)}
.sec-head.left{text-align:left;margin-left:0}
.eyebrow{font-size:var(--fs-label);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:14px}
h2{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:-.02em}
.sec-head p{font-size:var(--fs-prose);color:var(--muted);margin-top:16px}

/* ---------- 4. NAWIGACJA ---------- */
.topbar{background:var(--surface-dark);color:#fff;font-size:var(--fs-small)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.topbar a{color:#E3E3F5;text-decoration:none;padding:11px 0}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar-links{display:flex;gap:20px}

header{
  position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);
  transition:background .5s ease,border-color .5s ease;
}
header .wrap{display:flex;align-items:center;gap:20px;min-height:74px}

/* teatralna wersja nagłówka — dokładana przez JS, gdy widz wjeżdża w #teatr */
header.header-teatr{
  background:linear-gradient(120deg,#2A1024 0%,#8E2255 100%);
  border-bottom-color:rgba(245,107,175,.4);
  box-shadow:0 4px 24px -8px rgba(142,34,85,.5);
}
header.header-teatr .logo-znak{filter:brightness(0) invert(1)}
header.header-teatr .logo-nazwa{color:#FFF0F7}
header.header-teatr .logo-podpis{color:#F2D6E4}
header.header-teatr #nav a,header.header-teatr .sub-toggle{color:#FFD9EB}
header.header-teatr #nav a:hover,header.header-teatr .sub-toggle:hover{background:rgba(245,107,175,.16);color:#fff}
header.header-teatr #nav a.active{color:#FFA8D0}
header.header-teatr #nav a.active::after{background:#FFA8D0}
header.header-teatr .submenu{background:#2A1024;border-color:rgba(245,107,175,.3)}
header.header-teatr .submenu a{color:#FFD9EB}
header.header-teatr .submenu a:hover{background:rgba(245,107,175,.16);color:#fff}
header.header-teatr #nav a.nav-cta{background:#F56BAF;color:#2A1024}
header.header-teatr #nav a.nav-cta:hover{background:#FF8FC4;color:#2A1024}
header.header-teatr .nav-toggle{border-color:rgba(245,107,175,.4);color:#FFD9EB}
@media (prefers-reduced-motion:reduce){header{transition:none}}
/* Logo: prawdziwy znak z dowiem.pl (img/logo-dowiem.png, 500×500, czarny
   na przezroczystym) plus sygnet słowny złożony tak jak w oryginale:
   Montserrat 700, tracking .08em, kolor --logo #7676CF.
   Na ciemnych tłach znak odwracamy filtrem — tusz jest czysto czarny,
   więc brightness(0) invert(1) daje czystą biel bez drugiego pliku.     */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.logo-znak{width:auto;height:46px;flex-shrink:0}
.logo-tekst{display:flex;flex-direction:column;line-height:1.05}
.logo-nazwa{
  font-family:var(--font-head);
  font-size:var(--fs-h3);font-weight:800;letter-spacing:-.03em;color:var(--logo);
}
.logo-podpis{
  font-size:var(--fs-micro);font-weight:500;color:var(--muted);
  letter-spacing:.02em;margin-top:3px;
}

#nav{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:var(--fs-small)}
#nav a,.sub-toggle{
  display:inline-block;text-decoration:none;color:#3F3E6B;font-weight:600;
  padding:8px 12px;border-radius:8px;border:none;background:none;
  font-family:inherit;font-size:inherit;cursor:pointer;white-space:nowrap;
}
#nav a:hover,.sub-toggle:hover{background:var(--brand-soft);color:var(--brand-ink)}
#nav a.active{color:var(--brand-ink);font-weight:600}
#nav a.active::after{content:"";display:block;height:2px;background:var(--brand-ink);border-radius:2px;margin-top:4px}

/* rozwijane menu kursów */
.has-sub{position:relative}
.sub-toggle::after{content:"";display:inline-block;margin-left:7px;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.sub-toggle[aria-expanded="true"]{background:var(--brand-soft);color:var(--brand-ink)}
@media(min-width:861px){
  /* mostek nad przerwą 8px między przyciskiem a listą — bez niego mysz
     jadąca po skosie do submenu przecina puste pole i najedzie „wypada”. */
  .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
}
.submenu{
  display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:250px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:8px;box-shadow:var(--shadow-md);flex-direction:column;gap:2px;z-index:70;
}
.submenu.open{display:flex}
.submenu a{display:block;padding:10px 12px;border-radius:8px}
.submenu a.active::after{display:none}
#nav a.nav-cta{
  background:var(--surface-dark);color:#fff;padding:10px 18px;
  border-radius:999px;font-weight:700;margin-left:8px;
}
#nav a.nav-cta:hover{background:#3F3E6B;color:#fff}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:9px;
  font-size:var(--step-1);line-height:1;width:48px;height:48px;margin-left:auto;cursor:pointer;color:var(--ink);
}
/* ---------- 5. PRZYCISKI ---------- */
.btn{
  display:inline-block;padding:15px 28px;border-radius:999px;font-size:var(--fs-btn);font-weight:700;
  text-decoration:none;border:none;cursor:pointer;font-family:inherit;text-align:center;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.btn-primary{background:var(--brand-btn);color:var(--on-brand);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brand-btn-hover);color:var(--on-brand)}
.btn-ghost{background:var(--card);color:var(--head);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
.btn-amber{background:var(--pink-btn);color:var(--on-pink);font-weight:800}
.btn-amber:hover{background:var(--pink-btn-hover);color:var(--on-pink)}
.btn-white{background:#fff;color:var(--brand-btn)}
.btn-white:hover{background:#EDEDFF;color:var(--brand-btn)}
.btn-lg{padding:18px 42px;font-size:var(--fs-btn-lg)}
.btn-sm{padding:11px 20px;font-size:var(--fs-small)}
.btn:active{transform:translateY(1px)}

/* ---------- 6. SEKCJE STRONY GŁÓWNEJ ---------- */
.hero{background:linear-gradient(180deg,var(--brand-soft) 0%,var(--bg) 100%);padding:var(--space-section) 0 calc(var(--space-section) * .85);text-align:center}
.badge-line{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:8px 20px;font-size:var(--fs-small);color:var(--muted);margin-bottom:22px}
.badge-line b{color:var(--head)}
.hero h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.025em;max-width:860px;margin:0 auto 18px}
.hero p.lead{font-size:var(--fs-lead);color:var(--muted);max-width:640px;margin:0 auto 30px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-note{font-size:var(--fs-small);color:var(--muted);margin-top:16px}

/* pasek zaufania */
.trust{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.trust-mark{display:flex;align-items:center;gap:14px;font-size:var(--fs-small);color:var(--muted);max-width:320px}
.trust-mark b{display:block;color:var(--head);font-size:var(--fs-body)}
.trust-logo{
  flex-shrink:0;width:54px;height:54px;border-radius:12px;background:var(--brand-soft);
  color:var(--brand-ink);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:var(--fs-small);line-height:1.15;letter-spacing:-.02em;border:1px solid var(--line);
}
.trust-nums{display:flex;gap:34px;flex-wrap:wrap}
.trust-num{min-width:150px}
.trust-num b{display:block;font-size:var(--fs-h2-sub);color:var(--head);letter-spacing:-.02em;line-height:1.2}
.trust-num span{font-size:var(--fs-small);color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-gap);margin-top:var(--space-block)}
.stat{border-radius:calc(var(--radius) + 8px);padding:var(--space-card);text-align:left;background:var(--brand-soft)}
.stat .num{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.03em;color:var(--brand-ink);line-height:1;font-family:var(--font-head)}
.stat .lbl{font-size:var(--fs-small);color:var(--brand-ink);margin-top:8px;line-height:1.5}
.stat-rozowy{background:var(--pink-soft)}
.stat-rozowy .num,.stat-rozowy .lbl{color:var(--pink-ink)}
.stat-turkus{background:var(--teal-soft)}
.stat-turkus .num,.stat-turkus .lbl{color:var(--teal-ink)}
.stat-note{font-size:var(--fs-small);color:var(--muted);margin-top:16px;text-align:center}

/* nagrania „Sukcesy naszych dzieci" — osadzenia YouTube w proporcji 16:9 */
.filmy{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-gap)}
.film{margin:0}
.film-ramka{
  position:relative;aspect-ratio:16/9;border-radius:calc(var(--radius) + 4px);
  overflow:hidden;background:var(--surface-dark);box-shadow:var(--shadow-md);
}
.film-ramka iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* zastępnik odtwarzacza — dopóki nikt nie kliknie, nie ma połączenia z YouTube */
.film-start{
  position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(150deg,#2A1024 0%,#8E2255 100%);color:#FFF0F7;
  font-family:inherit;padding:20px;text-align:center;
}
.film-miniatura{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.film-start::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,rgba(42,16,36,.70) 0%,rgba(142,34,85,.58) 100%)}
.film-play,.film-info{position:relative;z-index:2}
.film-play{
  width:64px;height:64px;border-radius:50%;background:var(--pink-btn);flex-shrink:0;
  display:block;position:relative;box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.film-play::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #2A1024;
}
.film-info{font-size:var(--fs-small);line-height:1.5;max-width:34ch;color:#F5D6E7}
.film-start:hover .film-play{background:var(--pink-btn-hover)}
.film figcaption{margin-top:12px;font-size:var(--fs-small);color:var(--muted);line-height:1.5}
@media(max-width:680px){.filmy{grid-template-columns:1fr}}

.credo{background:var(--surface-dark);color:#fff;text-align:center;padding:var(--space-section) 0}
.credo h2{color:#fff;font-size:var(--fs-h2);max-width:760px;margin:0 auto 24px;line-height:1.35}
.credo p{font-size:var(--fs-prose);color:#C9C8EA;max-width:640px;margin:0 auto 16px}
.credo .btn{margin-top:16px}

/* kafelki kursów */
.kursy{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-gap)}
.kurs{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-card);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .18s,transform .18s,box-shadow .18s}
a.kurs:hover{border-color:var(--brand-ink);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.kurs.feature{border:2px solid var(--pink);background:var(--pink-soft)}
.kurs .ico{width:44px;height:44px;border-radius:11px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--brand-ink)}
.kurs .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kurs.feature .ico{background:var(--card);color:var(--pink-ink)}
.tag{display:inline-block;background:var(--pink-btn);color:var(--on-pink);font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:100px;margin-bottom:14px}
.kurs h3{font-size:var(--fs-h3-lg);margin-bottom:6px;letter-spacing:-.01em}
.kurs .meta{font-size:var(--fs-small);color:var(--muted);margin-bottom:14px}
.kurs .slogan{font-size:var(--fs-body);font-weight:600;color:var(--brand-ink);margin-bottom:10px}
.kurs.feature .slogan{color:var(--pink-ink)}
.kurs .desc{font-size:var(--fs-body);color:var(--muted);flex:1;margin-bottom:18px}
.kurs .more{font-size:var(--fs-body);font-weight:600;color:var(--brand-ink)}
.kurs.feature .more{color:var(--pink-ink)}
.kurs.pusty{background:var(--bg-soft);border-style:dashed;justify-content:center;text-align:center;align-items:center}
a.kurs.aktywny{border:2px solid var(--brand-btn);box-shadow:0 20px 44px -30px rgba(27,20,64,.5)}
/* dokładane przez JS: chowa nieaktywne panele kursów, klik podmienia treść bez przeładowania */
.js-kursy .kurs-panel{display:none}
.js-kursy .kurs-panel.aktywny{display:block}

/* kroki */
.kroki{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-gap);row-gap:calc(var(--space-gap) + 20px);counter-reset:k}
.krok{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-card);position:relative}
.krok::before{counter-increment:k;content:counter(k);position:absolute;top:-18px;left:var(--space-card);width:42px;height:42px;border-radius:50%;background:var(--brand-btn);color:var(--on-brand);font-weight:700;font-size:var(--fs-body);display:flex;align-items:center;justify-content:center}
.krok h3{margin:12px 0 8px}
.krok p{font-size:var(--fs-body);color:var(--muted)}

/* powody */
.powody{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-gap)}
.powod{padding:var(--space-card);border-left:4px solid var(--brand);background:var(--card);border-radius:0 var(--radius) var(--radius) 0}
.powod h3{margin-bottom:7px}
.powod p{font-size:var(--fs-body);color:var(--muted)}

/* wyróżnik — czym różnimy się od korepetytora */
.kontra{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-gap);max-width:940px;margin:var(--space-block) auto 0}
.kontra>div{border:1px solid var(--line);border-radius:calc(var(--radius) + 8px);padding:var(--space-card);background:var(--bg-soft)}
.kontra .my{border:none;background:var(--surface-dark);color:#fff}
.kontra h3{margin-bottom:12px}
.kontra .oni h3{color:var(--muted)}
.kontra .my h3{color:var(--pink)}
.kontra ul{list-style:none;font-size:var(--fs-body)}
.kontra .oni ul{color:var(--muted)}
.kontra .my ul{color:#DEDDF5}
.kontra li{padding-left:0;margin-bottom:12px}

/* system motywacyjny */
.system{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-wide);align-items:center}
.system p{font-size:var(--fs-prose);color:var(--muted);margin-bottom:16px}
.karta-vis{background:linear-gradient(140deg,#4A48A8 0%,#5757D6 55%,#5F5FD9 100%);border-radius:24px;padding:28px;color:#fff;aspect-ratio:1.6;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 60px -30px rgba(58,52,160,.7);transform:rotate(-3deg);max-width:400px;margin:0 auto}
.karta-vis .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:.85;font-size:var(--fs-micro)}
.karta-vis .chip{flex-shrink:0;width:38px;height:28px;border-radius:6px;background:linear-gradient(140deg,#FFD879,#C98F16)}
.karta-vis .imie{font-size:var(--fs-h3);font-weight:800;letter-spacing:.02em;color:#fff;font-family:var(--font-head)}
.karta-vis .saldo{font-size:var(--fs-small);color:#fff;opacity:.9;margin-top:6px}
.kroki3{display:flex;gap:10px;margin-top:24px}
.kroki3 div{background:var(--brand-soft);border:none;border-radius:999px;padding:9px 16px;text-align:center;font-size:var(--fs-small);font-weight:700;color:var(--brand-ink)}

/* blok teatru na stronie głównej */
.teatr-blok{
  background:var(--pink-soft);border:2px solid var(--pink);border-radius:var(--radius);
  padding:44px;display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-wide);align-items:center;
}
.teatr-blok h2{margin-bottom:16px}
.teatr-blok p{font-size:var(--fs-prose);color:var(--muted);margin-bottom:14px}
.teatr-lista{list-style:none;margin:0 0 24px}
.teatr-lista li{padding-left:26px;position:relative;font-size:var(--fs-body);color:var(--muted);margin-bottom:8px}
.teatr-lista li::before{content:"✓";position:absolute;left:0;color:var(--pink-ink);font-weight:700}
.scena{
  aspect-ratio:1.25;border-radius:var(--radius);background:var(--card);
  border:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
}
.scena svg{width:76px;height:76px;stroke:var(--pink-ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.scena span{font-size:var(--fs-small);color:var(--muted)}

/* zapowiedź cennika */
.cennik-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-gap);margin-bottom:var(--space-gap)}
.cennik-kafel{background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:var(--space-card);text-align:left}
.cennik-kafel.wyroz{border:none;background:var(--surface-dark);color:#fff;box-shadow:0 24px 50px -30px rgba(27,20,64,.7)}
.cennik-kafel.wyroz h3{color:#fff}
.cennik-kafel.wyroz .co{color:#C9C8EA}
.cennik-kafel.wyroz .cena{color:var(--pink)}
.cennik-kafel.teatralny{border:none;color:#FFF0F7;background:linear-gradient(150deg,#2A1024,#8E2255)}
.cennik-kafel.teatralny h3{font-family:var(--font-serif);color:#FFF0F7}
.cennik-kafel.teatralny .co{color:#F2D6E4}
.cennik-kafel.teatralny .cena{color:#F56BAF}
.cennik-kafel h3{margin-bottom:6px}
.cennik-kafel .co{font-size:var(--fs-body);color:var(--muted);margin-bottom:16px}
.cennik-kafel .cena{font-size:var(--fs-small);font-weight:700;color:var(--muted)}

/* mapa */
.mapa-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
/* prawdziwa mapa OpenStreetMap — placówka i szkoły partnerskie */
.mapa-osm{
  height:clamp(320px,52vh,520px);width:100%;
  background:var(--brand-soft);border-bottom:1px solid var(--line);
  z-index:0;   /* Leaflet ma własny stacking; bez tego panele wchodzą na nagłówek */
}
.mapa-podpis{font-size:var(--fs-small);color:var(--muted);padding:16px var(--space-card) 0;line-height:1.55}
.pin-mapy{
  display:block;width:16px;height:16px;border-radius:50%;
  background:var(--brand-btn);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.pin-mapy-glowny{width:22px;height:22px;background:var(--pink-btn)}
.leaflet-container{font:inherit}
.leaflet-popup-content{font-size:var(--fs-small);line-height:1.5}

.mapa-vis{height:300px;background:var(--brand-soft);position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.mapa-vis .pin{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--brand-btn);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.mapa-vis .pin.main{width:23px;height:23px;background:var(--pink-btn)}
.mapa-note{font-size:var(--fs-small);color:var(--muted);background:var(--card);padding:8px 16px;border-radius:8px;z-index:2;text-align:center;max-width:90%}
.mapa-search{display:flex;gap:10px;padding:22px;flex-wrap:wrap;align-items:flex-end;border-bottom:1px solid var(--line)}
.legenda{display:flex;gap:22px;padding:0 22px 20px;font-size:var(--fs-small);color:var(--muted);flex-wrap:wrap}
.legenda span{display:flex;align-items:center;gap:7px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex-shrink:0}

/* opinie */
.opinie{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-gap)}
.opinia{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-card)}
.gwiazdki{color:var(--pink-ink);font-size:var(--fs-body);margin-bottom:12px;letter-spacing:2px}
.opinia p{font-size:var(--fs-body);color:var(--muted);font-style:italic;margin-bottom:16px}
.opinia .kto{font-size:var(--fs-small);font-weight:600;color:var(--head);font-style:normal}

/* pasek CTA */
.cta-pasek{background:var(--brand-btn);text-align:center;padding:var(--space-section) 0}
.cta-pasek h2{color:var(--on-brand);margin-bottom:14px}
.cta-pasek p{font-size:var(--fs-lead);color:var(--on-brand-dim);margin-bottom:26px}
.cta-pasek.rozowy{background:var(--pink-btn)}
.cta-pasek.rozowy h2{color:var(--on-pink)}
.cta-pasek.rozowy p{color:var(--on-pink-dim)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
details{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:var(--card);overflow:hidden}
details[open]{border-color:var(--brand-ink)}
summary{padding:22px 26px;font-size:var(--fs-h3);font-weight:600;color:var(--head);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:var(--fs-h2-sub);line-height:1;color:var(--brand-ink);font-weight:400;flex-shrink:0}
details[open] summary::after{content:"−"}
details p{padding:0 26px 24px;font-size:var(--fs-body);color:var(--muted)}
details p+p{padding-top:0}

/* ---------- 7. KOMPONENTY WSPÓLNE ---------- */
.todo{
  background:var(--todo-bg);border:1px dashed var(--todo-line);color:var(--todo-ink);
  padding:3px 9px;border-radius:6px;font-size:var(--fs-small);font-weight:600;display:inline-block;
}
.uwaga{font-size:var(--fs-prose);
  background:var(--brand-soft);border-left:4px solid var(--brand-ink);border-radius:0 12px 12px 0;
  padding:22px 26px;font-size:var(--fs-prose);color:var(--muted);max-width:760px;margin:0 auto;
}
.uwaga b{color:var(--head)}

/* ---------- 8. FORMULARZE ---------- */
label{display:block;font-size:var(--fs-small);font-weight:600;color:var(--head);margin-bottom:6px}
input,select,textarea{
  font-family:inherit;font-size:var(--fs-body);padding:13px 15px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--card);width:100%;color:var(--ink);
}
input::placeholder{color:var(--muted);opacity:.8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-ink);box-shadow:0 0 0 3px rgba(87,87,214,.22)}
input:focus-visible,select:focus-visible{outline:none}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.field{min-width:0}
.zgoda{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-small);font-weight:400;color:var(--muted);margin-bottom:20px;line-height:1.5}
.zgoda input{width:auto;flex-shrink:0;margin-top:3px}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-wide);max-width:760px;margin:0 auto}
.szkola-box{padding:28px 22px;background:var(--bg-soft)}
.szkola-box h3{margin-bottom:6px}
.szkola-box>p{font-size:var(--fs-body);color:var(--muted);margin-bottom:18px}
.form-msg{font-size:var(--fs-body);
  display:none;background:var(--teal-soft);border:1px solid var(--teal);color:var(--head);
  border-radius:12px;padding:20px 24px;font-size:var(--fs-body);
}
.form-msg.on{display:block}
.form-msg b{display:block;margin-bottom:4px}
.form-msg span{color:var(--muted);font-size:var(--fs-small)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 9. STOPKA ---------- */
footer{background:var(--surface-dark);color:#E3E3F5;padding:56px 0 26px;font-size:var(--fs-body)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
footer h4{color:#fff;margin-bottom:14px}
footer a{color:#E3E3F5;text-decoration:none;display:block;margin-bottom:9px}
footer a:hover{color:#fff;text-decoration:underline}
footer .logo-znak{filter:brightness(0) invert(1)}   /* stopka jest ciemna w obu motywach */
footer .logo-nazwa{color:#fff}
footer .logo-podpis{color:#E3E3F5}   /* 4,87:1 na fiolecie stopki */
footer p{margin-bottom:14px}
footer .tel{display:inline-block;font-size:var(--fs-h3);font-weight:600;color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--fs-small)}

/* ---------- 10. PODSTRONY ---------- */
.page-hero{background:linear-gradient(180deg,var(--brand-soft),var(--bg));padding:calc(var(--space-section) * .7) 0 calc(var(--space-section) * .65)}
.page-hero h1{font-size:var(--fs-h1-sub);letter-spacing:-.02em;max-width:800px;margin-bottom:16px;line-height:1.15}
.page-hero .meta{font-size:var(--fs-small);color:var(--muted);margin-bottom:20px}
.page-hero .lead{font-size:var(--fs-lead);color:var(--muted);max-width:660px;margin-bottom:26px}
.page-hero.rozowy{background:linear-gradient(180deg,var(--pink-soft),var(--bg))}
.krusz{display:block;font-size:var(--fs-small);color:var(--muted);margin-bottom:20px}
.krusz a{color:var(--brand-ink)}
.krusz ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.krusz li+li::before{content:"›";margin-right:8px;color:var(--muted)}

.proza{max-width:min(68ch,100%)}
.proza p{font-size:var(--fs-prose);color:var(--muted);margin-bottom:18px}
.proza h2{margin-bottom:20px}
.proza h3{font-size:var(--fs-h3-lg);margin:40px 0 12px}
.proza ul,.proza ol{margin:0 0 18px 22px;font-size:var(--fs-prose);color:var(--muted)}
.proza li{margin-bottom:8px}

.korzysci{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-gap)}
.korzysc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-card)}
.korzysc h3{margin-bottom:8px}
.korzysc p{font-size:var(--fs-body);color:var(--muted)}

.etapy{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-gap)}
.etap{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:0 0 var(--radius) var(--radius);padding:var(--space-card)}
.etap .kiedy{font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:10px}
.etap p{font-size:var(--fs-body);color:var(--muted)}
.etap.rozowy{border-top-color:var(--pink)}
.etap.rozowy .kiedy{color:var(--pink-ink)}

.cennik-lista{max-width:820px;margin:0 auto}
.cennik-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;flex-wrap:wrap}
.cennik-row b{font-size:var(--fs-h3);color:var(--head)}
.cennik-row .opis{font-size:var(--fs-small);color:var(--muted)}

/* tabela cennika */
.tabela-box{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-body)}
caption{text-align:left;padding:18px 22px 0;font-weight:700;color:var(--head);font-size:var(--fs-h3)}
th,td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--bg-soft);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td b{color:var(--head)}
td .opis{font-size:var(--fs-small);color:var(--muted);display:block;margin-top:3px}

/* trenerzy */
.trenerzy{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-gap)}
.trener{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-card);text-align:center}
.trener .foto{
  width:96px;height:96px;border-radius:50%;margin:0 auto 16px;background:var(--brand-soft);
  border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--brand-ink);font-size:var(--fs-micro);font-weight:600;text-align:center;padding:8px;line-height:1.3;
}
.trener h3{margin-bottom:4px}
.trener .rola{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:10px}
.trener p{font-size:var(--fs-body);color:var(--muted)}


/* podstrony prawne */
.legal{max-width:min(68ch,100%);margin:0 auto}
.legal h2{font-size:var(--fs-h2-sub);margin:36px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:var(--fs-prose);color:var(--muted);margin-bottom:14px}
.legal ul,.legal ol{margin-left:22px}
.legal .spis{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-bottom:36px}
.legal .spis h2{font-size:var(--fs-h4);margin:0 0 12px}
.legal .spis li{margin-bottom:6px;font-size:var(--fs-body)}

/* 404 */
.nie-ma{text-align:center;padding:calc(var(--space-section) * 1.3) 0}
.nie-ma .kod{font-size:clamp(3.556rem,14vw,7.333rem);font-weight:800;line-height:1;color:var(--brand-ink);letter-spacing:-.04em}
.nie-ma h1{margin:16px 0 14px}
.nie-ma p{font-size:var(--fs-lead);color:var(--muted);max-width:560px;margin:0 auto 28px}

/* ---------- 11. RWD ---------- */
@media(max-width:1040px){
  #nav{gap:2px}
  #nav a,.sub-toggle{padding:8px 9px}
}
@media(max-width:960px){
  /* siatki sześcioelementowe zostają na 2 kolumnach, trójelementowe schodzą do 1 —
     trzeci kafelek nie ma się gubić w osobnym rzędzie */
  .kroki,.etapy,.cennik-teaser,.opinie,.trenerzy{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats .stat:last-child{grid-column:1 / -1}
  .system,.teatr-blok{grid-template-columns:1fr;gap:var(--space-wide)}
  .teatr-blok{padding:var(--space-wide)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .trust .wrap{justify-content:flex-start}

  /* Cennik: przy 18px tabela ma naturalnie ~960 px i przewijałaby się w bok
     na każdym tablecie. Poniżej 961 px rozkłada się na karty.                */
  .tabela-box{overflow-x:visible;border:none;background:none;border-radius:0}
  table{min-width:0;display:block}
  caption{padding:0 0 14px}
  thead{display:none}
  tbody,tr,td{display:block}
  tr{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 18px 8px;margin-bottom:12px}
  td{padding:11px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-align:right}
  td:first-child{display:block;text-align:left;font-size:var(--step-1);padding-top:14px}
  td:last-child{border-bottom:none}
  td::before{content:attr(data-etykieta);font-weight:600;color:var(--muted);font-size:var(--fs-label);text-align:left;flex-shrink:0}
  td:first-child::before{content:none}
  td .opis{text-align:left}
}
@media(max-width:860px){
  #nav{display:none}
  .nav-toggle{display:block}
  #nav.open{
    display:flex;position:absolute;top:100%;left:0;right:0;background:var(--card);
    flex-direction:column;align-items:stretch;padding:16px 24px 22px;gap:2px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    max-height:calc(100dvh - 80px);overflow-y:auto;
  }
  #nav.open a,#nav.open .sub-toggle{padding:14px 8px;border-radius:8px;text-align:left;width:100%}
  #nav.open a.active::after{display:none}
  .has-sub{position:static}
  .submenu{position:static;box-shadow:none;border:none;padding:0 0 0 14px;background:none;min-width:0}
  .nav-cta{margin:10px 0 0;text-align:center}
  .topbar-links{gap:14px}
}
@media(max-width:680px){
  .kursy,.kroki,.powody,.opinie,.korzysci,.etapy,.trenerzy,.stats,
  .form-grid,.foot-grid,.cennik-teaser,.kontra{grid-template-columns:1fr}
  .stats .stat:last-child{grid-column:auto}
  .btn{width:100%}
  .hero-cta{flex-direction:column}
  .form-card{padding:var(--space-card)}
  .trust-nums{gap:20px}
  .trust-num{min-width:calc(50% - 10px)}
  .kroki3{flex-direction:column}
  .foot-bottom{flex-direction:column;gap:8px}
}
@media(max-width:560px){
  /* slogan w górnej belce zabiera całą szerokość i łamie ją na dwie linie */
  .topbar .wrap>span:first-child{display:none}

}
@media(max-width:420px){
  .logo{font-size:var(--step-0)}
  .btn-lg{font-size:var(--fs-btn);padding:16px 20px}
  .wrap{padding:0 18px}
}

/* ---------- 12. DRUK ---------- */
@media print{
  html{font-size:87.5%}   /* neutralizuje 112,5% i jednostki vw w clamp() */
  :root{--space-section:14pt;--space-block:10pt;--space-gap:8pt;--space-card:8pt;--space-wide:10pt}
  .topbar,header,.nav-toggle,.cta-pasek,.skip,form,.mapa-vis{display:none !important}
  body{color:#000;background:#fff;font-size:12pt}
  section{padding:14pt 0;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  details{border:none}
  details p{display:block !important}
  footer{background:#fff;color:#000;border-top:1px solid #999}
  footer a{color:#000}
}

/* ---------- 13. KLASY POMOCNICZE ---------- */
.btn-block{width:100%}
/* znacznik na karcie motywacyjnej: karta ma stały gradient w obu motywach,
   więc kolory tego znacznika też są stałe, nie tokenowe */
.todo.jasny{background:#fff;border-color:#fff;color:#5757D6}
.mapa-vis.kontakt{border-radius:var(--radius);border:1px solid var(--line);height:340px}
.stack>*+*{margin-top:16px}
.srodek{text-align:center}
.max760{max-width:760px;margin-left:auto;margin-right:auto}
.mt32{margin-top:32px}
.tel-duzy{color:var(--brand-ink);text-decoration:none;font-size:var(--fs-h3);font-weight:600}
.tel-duzy:hover{text-decoration:underline}
.foto-plac{
  aspect-ratio:4/3;border-radius:10px;background:var(--brand-soft);border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;
}
.dot-fiolet{background:var(--brand-btn)}
.dot-rozowy{background:var(--pink-btn)}


/* ---------- 14b. PALETA MARKI AMAkids (franczyzodawca) ----------
   Tak samo jak .teatr-tokeny — przedefiniowuje zmienne, nie komponenty.
   Kolory 1:1 z amakids.pl: różowy #F50882, fiolet #7345C9, błękit #03A0E3.
   -ink to przyciemnione warianty, bo oryginalny róż na białym daje 4,01:1
   (poniżej AA dla drobnego tekstu) — sam kolor zostaje tylko na dużych,
   pogrubionych elementach, gdzie próg WCAG to 3:1.                      */
.amakids-tokeny{
  --brand:#7345C9; --brand-ink:#7345C9; --brand-btn:#7345C9; --brand-btn-hover:#5F38A8;
  --brand-soft:#F0EAFB; --on-brand:#FFFFFF; --on-brand-dim:#E4D9F7;

  --pink:#F50882; --pink-ink:#C60070; --pink-btn:#F50882; --pink-btn-hover:#D9067A;
  --pink-soft:#FDE6F1; --on-pink:#FFFFFF; --on-pink-dim:#FBC7E2;

  --teal:#03A0E3; --teal-ink:#02749A; --teal-soft:#E1F3FC;
}

/* ---------- 15. ŚWIAT TEATRU ----------
   .teatr-tokeny NIE definiuje komponentów — przedefiniowuje ZMIENNE.
   Gotowe komponenty (.korzysc, .krok, .etap, .cennik-row, details,
   .sec-head, .cta-pasek, .form-card, .uwaga) czytają te same tokeny,
   więc przemalowują się same. Zero zdublowanych reguł komponentów.

   Ponieważ .teatr-tokeny jest POTOMKIEM :root, wygrywa też w trybie
   ciemnym — paleta teatru jest identyczna w obu motywach bez ani
   jednej dodatkowej media query.                                    */
.teatr-tokeny{
  --bg:#150F1E; --bg-soft:#180F1D; --card:rgba(255,240,247,.05);
  --surface-dark:#0E0A16; --line:rgba(245,107,175,.22);

  --head:#FFF0F7; --ink:#DCC8D6; --muted:#CBB6C6; --logo:#F56BAF;
  --font-head:var(--font-serif);

  /* róż marki zastępuje tu złoto — teatr i AMAkids dzielą teraz jeden akcent */
  --brand:#F56BAF; --brand-ink:#F56BAF;
  --brand-btn:#F56BAF; --brand-btn-hover:#FF8FC4;
  --brand-soft:rgba(245,107,175,.14); --on-brand:#2A1024; --on-brand-dim:rgba(245,107,175,.7);

  --pink:#F56BAF; --pink-ink:#F56BAF;
  --pink-btn:#F56BAF; --pink-btn-hover:#FF8FC4;
  --pink-soft:rgba(245,107,175,.12); --on-pink:#2A1024; --on-pink-dim:#4A0E2E;

  --teal:#F56BAF; --teal-ink:#F56BAF; --teal-soft:rgba(245,107,175,.12);

  --shadow-sm:0 4px 14px rgba(0,0,0,.5);
  --shadow-md:0 12px 34px rgba(0,0,0,.58);
  --shadow-lg:0 20px 50px rgba(0,0,0,.66);
}
.teatr-swiat{
  background:var(--bg);color:var(--ink);
  position:relative;isolation:isolate;
  border-top:2px solid rgba(245,107,175,.35);border-bottom:2px solid rgba(245,107,175,.35);
}

/* ---------- 16. ROZWIDLENIE W HERO ---------- */
.hero-rozwidlenie{
  display:flex;align-items:center;text-align:left;
  padding:clamp(20px,3.5vh,44px) 0 clamp(24px,4vh,52px);
  min-height:calc(100vh - 112px);
  min-height:calc(100svh - 112px);          /* svh: pasek adresu na telefonie */
}
.hero-rozwidlenie .wrap{width:100%}
/* .hero p.lead ma margin:0 auto — bez tej samej wagi selektora
   podtytuł zostałby wyśrodkowany obok wyrównanego do lewej H1 */
.hero-rozwidlenie .badge-line,
.hero-rozwidlenie h1,
.hero-rozwidlenie p.lead{margin-left:0;margin-right:0}
.hero-rozwidlenie h1{font-size:var(--fs-h1-sub);margin-bottom:12px;max-width:20ch}
.hero-rozwidlenie p.lead{margin-bottom:clamp(18px,3vh,32px);max-width:58ch}

.rozwidlenie{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-gap)}
.widelec{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  min-height:clamp(280px,42svh,420px);
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 12px);
  text-decoration:none;color:inherit;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  box-shadow:0 18px 40px -28px rgba(27,20,64,.35);
}
.widelec-ico{margin-bottom:auto}
.widelec-ico svg{width:40px;height:40px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--brand-ink)}
.widelec-nad{font-size:var(--fs-label);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand-ink)}
.widelec-tytul{font-family:var(--font-head);font-size:var(--fs-h3-lg);font-weight:800;letter-spacing:-.02em;
  line-height:1.15;color:var(--head)}
.widelec-teatr .widelec-tytul{font-family:var(--font-serif);font-weight:700;letter-spacing:-.01em}
.widelec-opis{font-size:var(--fs-body);color:var(--muted)}
.widelec-meta{font-size:var(--fs-small);color:var(--muted)}
.widelec-akcja{margin-top:10px;font-size:var(--fs-body);font-weight:700;color:var(--brand-ink)}
/* prostokątna obwódka globalnego :focus-visible obcięłaby zaokrąglony panel */
.widelec:focus-visible{outline-offset:3px;border-radius:calc(var(--radius) + 6px)}
@media (hover:hover){
  .widelec:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
}
.widelec-ama{background:var(--bg);border-color:var(--line)}
.widelec-ama:hover{border-color:var(--brand-btn)}
.widelec-teatr{
  color:#FFF0F7;
  background:linear-gradient(150deg,#2A1024 0%,#8E2255 100%);
  border-color:transparent;
  box-shadow:0 18px 40px -24px rgba(107,15,38,.55);
}
.widelec-teatr .widelec-nad,.widelec-teatr .widelec-akcja{color:#FFA8D0}
.widelec-teatr .widelec-opis{color:#F5D6E7}
.widelec-teatr .widelec-meta{color:#D9B7CA}
.widelec-teatr:hover{border-color:transparent}
/* prążek tkaniny kurtyny — stała dekoracja, bez zależności od hover */
.widelec-kurtynka{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.05) 0 6px, rgba(0,0,0,.14) 6px 18px);
}

/* ---------- 17. BLOKI KURSÓW ---------- */
.amakids-swiat #kursy .kursy{grid-template-columns:repeat(2,1fr);max-width:940px;margin:0 auto}
.amakids-swiat #kursy .kurs.pusty{
  grid-column:1 / -1;flex-direction:row;gap:20px;text-align:left;
  justify-content:space-between;align-items:center;flex-wrap:wrap;
}
.kurs-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:var(--space-block)}
.wroc-do-wyboru{display:inline-block;margin-top:18px;padding:10px 4px;font-size:var(--fs-small);
  color:var(--brand-ink);text-decoration:none}
.wroc-do-wyboru:hover{text-decoration:underline}
@media(max-width:680px){
  .amakids-swiat #kursy .kursy{grid-template-columns:1fr}
  .amakids-swiat #kursy .kurs.pusty{flex-direction:column;text-align:center}
  .kurs-cta{flex-direction:column}
  .rozwidlenie{grid-template-columns:1fr}
}
@media(max-width:860px){
  /* na telefonie panele NIE są pełnoekranowe — inaczej widać tylko AMAkids
     i nikt się nie dowie, że teatr istnieje */
  .hero-rozwidlenie{min-height:0;padding:32px 0 40px}
  .rozwidlenie{grid-template-columns:1fr;gap:14px}
  .widelec{min-height:0;padding:20px 22px;gap:6px}
  .widelec-ico{margin-bottom:6px}
  .widelec-ico svg{width:32px;height:32px}
  .widelec-opis{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* MUSI stać po bloku 860 px powyżej — przy równej wadze decyduje kolejność */
@media(max-width:560px){
  /* Na telefonie OBIE połówki rozwidlenia muszą być widoczne w pierwszym
     ekranie — inaczej odwiedzający zobaczy tylko AMAkids i nie dowie się,
     że teatr w ogóle istnieje. Skracamy więc wszystko powyżej paneli
     i zdejmujemy z nich opis: nazwa, wiek i wezwanie wystarczą do wyboru. */
  .hero-rozwidlenie{padding:18px 0 24px}
  .hero-rozwidlenie h1{font-size:var(--step-2)}
  .hero-rozwidlenie p.lead{
    font-size:var(--fs-body);margin-bottom:16px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .badge-line{padding:6px 14px;margin-bottom:14px}
  .widelec{padding:16px 18px;gap:4px}
  .widelec-opis{display:none}
  .widelec-ico svg{width:26px;height:26px}
  .hero-note{margin-top:12px}
}


/* ---------- 18. SCENA I KURTYNA ---------- */
.teatr-hero{
  position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(460px,78svh,760px);
  background:radial-gradient(90% 70% at 50% 105%, #3A1B36 0%, #180F1D 55%, #0E0A16 100%);
}
.teatr-hero-tresc{position:relative;z-index:3;max-width:900px;margin:0 auto;padding:0 24px;text-align:center}
.teatr-hero-tresc h2{font-size:clamp(2.2rem,1.6rem + 3vw,3.6rem);line-height:1.06;letter-spacing:-.01em;margin-top:18px}
.teatr-tagline{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);
  line-height:1.35;color:#FFD9EB;margin-top:16px}
.teatr-hero-tresc .lead{font-size:var(--fs-lead);line-height:1.65;color:var(--ink);
  max-width:58ch;margin:22px auto 0}
.teatr-hero-tresc .meta{font-size:var(--fs-small);letter-spacing:.04em;color:#A3899A;margin-top:16px}
.teatr-hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn-kurtyna-replay{
  padding:15px 26px;border-radius:999px;background:transparent;
  border:1px solid rgba(245,107,175,.5);color:var(--pink);font-weight:700;font-size:var(--fs-btn);
  font-family:inherit;cursor:pointer;white-space:nowrap;transition:border-color .18s;
}
.btn-kurtyna-replay:hover{border-color:var(--pink)}

/* reflektory dryfujące w tle sceny — czysta dekoracja, nie blokują kliknięć */
.lampa{position:absolute;top:-8%;width:42%;height:120%;filter:blur(28px);
  transform-origin:top center;pointer-events:none;z-index:1}
.lampa-l{left:8%;background:linear-gradient(180deg,rgba(255,235,245,.20) 0%,rgba(255,235,245,0) 78%);
  animation:spotDrift 13s ease-in-out infinite}
.lampa-r{right:6%;width:38%;background:linear-gradient(180deg,rgba(139,139,254,.16) 0%,rgba(139,139,254,0) 74%);
  animation:spotDrift 17s ease-in-out infinite reverse}
@keyframes spotDrift{
  0%{transform:translateX(-3%) rotate(-2deg);opacity:.55}
  50%{transform:translateX(3%) rotate(2deg);opacity:.8}
  100%{transform:translateX(-3%) rotate(-2deg);opacity:.55}
}
@media (prefers-reduced-motion:reduce){.lampa{animation:none}}

/* KURTYNA — domyślnie NIE ISTNIEJE.
   CSS trzyma „nie ma kurtyny", JS dokłada „zamknięta".
   Dzięki tej inwersji brak JS daje otwartą scenę, a nie pusty ekran.
   Treść jest ZAWSZE wymalowana; kurtyna leży NA NIEJ i ma
   pointer-events:none, więc nie blokuje ani kliknięć, ani czytnika. */
.kurtyna{
  position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden;
}
.teatr-swiat.kurtyna-gotowa .kurtyna{opacity:1;visibility:visible}
.kurtyna .panel{
  position:absolute;top:0;bottom:0;width:53%;      /* 6% zakładki na środku */
  transition:transform 2.1s cubic-bezier(.66,.02,.24,1);
}
.kurtyna .panel-l{
  left:0;
  background:repeating-linear-gradient(90deg,#7A1E4E 0 14px,#A82C68 26px,#4A0E2E 44px,#8E2255 62px,#65163E 80px);
  box-shadow:inset -60px 0 90px -40px rgba(0,0,0,.85), 30px 0 70px -20px rgba(0,0,0,.6);
}
.kurtyna .panel-l::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5) 100%);
}
.kurtyna .panel-r{
  right:0;
  background:repeating-linear-gradient(90deg,#65163E 0 18px,#8E2255 36px,#4A0E2E 54px,#A82C68 72px,#7A1E4E 88px);
  box-shadow:inset 60px 0 90px -40px rgba(0,0,0,.85), -30px 0 70px -20px rgba(0,0,0,.6);
}
.kurtyna .panel-r::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5) 100%);
}
/* stan OTWARTY jest docelowy; zamknięcie to dodatkowa klasa */
.teatr-swiat.kurtyna-gotowa .panel-l{transform:translateX(-101%)}
.teatr-swiat.kurtyna-gotowa .panel-r{transform:translateX(101%)}
.teatr-swiat.kurtyna-gotowa.kurtyna-zamknieta .panel-l,
.teatr-swiat.kurtyna-gotowa.kurtyna-zamknieta .panel-r{transform:translateX(0);will-change:transform}

.kurtyna .lambrekin{
  position:absolute;top:0;left:0;right:0;z-index:6;height:clamp(54px,8.5vw,118px);
  background:repeating-linear-gradient(90deg,#8E2255 0 16px,#A82C68 30px,#65163E 50px);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.75);
}
.kurtyna .fredzle{
  position:absolute;top:clamp(50px,7.9vw,112px);left:0;right:0;height:26px;z-index:6;
  background:radial-gradient(circle 13px at 13px 0, #F56BAF 0 12px, transparent 13px) 0 0/26px 26px repeat-x;
}
.kurtyna .scena-cien{
  position:absolute;bottom:0;left:0;right:0;height:70px;z-index:3;
  background:linear-gradient(180deg,rgba(18,10,18,0) 0%,#0E0A16 70%);
}

/* bieżnia słów pod sceną */
.marquee{overflow:hidden;padding:36px 0;border-top:1px solid rgba(245,107,175,.2);border-bottom:1px solid rgba(245,107,175,.2)}
.marquee-tor{display:flex;width:max-content;animation:marquee 26s linear infinite}
.marquee-grupa{display:flex;gap:44px;padding-right:44px;font-family:var(--font-serif);font-style:italic;
  font-size:clamp(20px,2.4vw,30px);color:rgba(245,107,175,.75);white-space:nowrap}
.marquee-grupa i{color:rgba(245,107,175,.35);font-style:normal}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-tor{animation:none}}

/* ---------- 19. OKNO ZAPISU ---------- */
.modal-zapis{
  margin:auto;                     /* globalny reset *{margin:0} kasuje centrowanie <dialog> */
  padding:0;                       /* całość paddingu na .modal-tresc — patrz klik w tło */
  border:1px solid var(--line);border-radius:18px;
  background:var(--card);color:var(--ink);
  width:min(680px,calc(100vw - 32px));
  max-height:min(88svh,820px);overflow:auto;box-shadow:var(--shadow-lg);
}
.modal-zapis::backdrop{background:rgba(20,10,14,.62);backdrop-filter:blur(2px)}
.modal-tresc{padding:clamp(22px,3.4vw,36px)}
.modal-zapis h2{font-size:var(--fs-h3-lg);margin-bottom:8px;padding-right:44px}
.modal-lead{font-size:var(--fs-small);color:var(--muted);margin-bottom:22px}
.modal-zamknij{position:sticky;top:0;height:0;z-index:2}
.modal-x{
  position:absolute;right:12px;top:12px;width:44px;height:44px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  font-size:var(--step-1);line-height:1;color:var(--muted);cursor:pointer;
}
.modal-x:hover{color:var(--head);border-color:var(--brand-ink)}
.modal-zapis form .btn-block[type="submit"]{position:sticky;bottom:0;z-index:3;box-shadow:0 -10px 16px 10px var(--card)}
.modal-stopka{margin-top:14px;text-align:center;font-size:var(--fs-small);color:var(--muted)}
.modal-stopka a{color:var(--brand-ink);font-weight:600}
.field-err{color:var(--pink-ink);font-size:var(--fs-small);margin-top:6px}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--pink-ink)}
.form-err{
  display:none;background:var(--pink-soft);border:1px solid var(--pink-ink);
  color:var(--head);border-radius:12px;padding:16px 20px;
  font-size:var(--fs-body);margin-bottom:16px;
}
.form-err.on{display:block}
button[disabled]{opacity:.6;cursor:progress}
@media(min-width:681px){
  .modal-zapis .form-grid{grid-template-columns:1fr 1fr}
  .modal-zapis .form-grid-3{grid-template-columns:1.4fr 1fr 1.2fr}
}
@media(max-width:680px){
  /* arkusz od dołu — kciuk zostaje przy przyciskach */
  .modal-zapis{
    margin:auto auto 0;width:100%;max-width:none;
    border-radius:18px 18px 0 0;border-bottom:none;max-height:90svh;
  }
  .modal-tresc{padding:22px 20px max(24px,env(safe-area-inset-bottom))}
}