/* Nazwa Twojej Firmy - Koszalin | ekspres demo */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text-body);background:var(--color-bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary600)}
h1,h2,h3{font-family:var(--font-heading);line-height:var(--lh-heading);letter-spacing:var(--tracking-heading);color:var(--text-strong);margin:0 0 var(--space-4)}
p{margin:0 0 var(--space-4)}
:root{
  --grad:linear-gradient(98deg,#EF4B7E 0%,#F7941D 52%,#FFC93C 100%);
  --grad-soft:linear-gradient(98deg,rgba(239,75,126,.14),rgba(247,148,29,.14),rgba(255,201,60,.16));
  --maxw:1140px;
}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-5)}
.section{padding-block:var(--space-8)}
.section--tint{background:var(--color-surface)}
.overline{font-family:'Caveat',cursive;font-size:clamp(26px,3.4vw,38px);line-height:1.5;letter-spacing:.03em;color:var(--color-primary);margin:0 0 var(--space-4)}
.h2{font-size:clamp(28px,4.4vw,var(--fs-3xl))}
.h2 .kicker{display:block;font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-2)}
.lead{font-size:var(--fs-lg);color:var(--text-muted)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}
.site-header .container{display:flex;align-items:center;gap:var(--space-4);padding-block:10px}
.logo-link{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-link img{width:auto;height:64px}
.main-nav{display:none}
.btn-tel{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--color-primary);color:#fff;text-decoration:none;font-weight:700;padding:10px 18px;border-radius:var(--radius-pill);font-size:var(--fs-sm);white-space:nowrap;transition:background var(--motion-dur) var(--motion-ease)}
.btn-tel:hover{background:var(--color-primary600)}
.menu-toggle{border:1px solid var(--color-border);background:#fff;border-radius:10px;padding:9px 11px;cursor:pointer;line-height:0}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--text-strong);margin:4px 0;border-radius:2px}
.mobile-nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-md);display:none}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:14px var(--space-5);text-decoration:none;color:var(--text-strong);font-weight:600;border-top:1px solid var(--color-border)}
@media (min-width:920px){
  .menu-toggle,.mobile-nav{display:none!important}
  .main-nav{display:flex;gap:var(--space-5);margin-left:auto}
  .main-nav a{text-decoration:none;color:var(--text-strong);font-weight:600;font-size:var(--fs-sm);position:relative;padding-block:6px}
  .main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;border-radius:2px;background:var(--grad);transition:right .25s var(--motion-ease)}
  .main-nav a:hover::after{right:0}
  .btn-tel{margin-left:0}
}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFF8F1 0%,#FFFFFF 78%)}
.hero::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;background:var(--grad-soft);filter:blur(60px);pointer-events:none}
.hero .container{position:relative;display:grid;gap:var(--space-6);padding-block:var(--space-7);align-items:center}
.hero h1{font-size:clamp(44px,8.6vw,92px);font-weight:800;text-transform:uppercase;line-height:.98;margin-bottom:var(--space-4)}
.hero h1 .grad{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%}
.hero h1 .city{display:block;font-size:.44em;letter-spacing:.30em;color:var(--text-strong);font-weight:700;margin-top:6px}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .grad{animation:gradsweep 6s var(--motion-ease) infinite alternate}
  @keyframes gradsweep{from{background-position:0% 0}to{background-position:100% 0}}
}
.hero .lead{max-width:46ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:var(--radius-pill);transition:all var(--motion-dur) var(--motion-ease)}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-primary600)}
.btn--ghost{border:2px solid var(--text-strong);color:var(--text-strong)}
.btn--ghost:hover{background:var(--text-strong);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chips li{font-size:var(--fs-sm);font-weight:600;color:var(--text-strong);border:1px solid transparent;border-radius:var(--radius-pill);padding:7px 14px;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
.hero-photo{position:relative}
.hero-photo img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;object-fit:cover;aspect-ratio:4/5;max-height:560px}
.hero-photo::after{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:var(--radius-lg);background:var(--grad);opacity:.25;z-index:-1}
@media (min-width:880px){
  .hero .container{grid-template-columns:1.15fr .85fr;padding-block:var(--space-9)}
}

/* info strip */
.strip{background:var(--text-strong);color:#fff}
.strip .container{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);justify-content:center;padding-block:var(--space-4);font-size:var(--fs-sm)}
.strip b{color:#FFC93C}
.strip span{display:inline-flex;align-items:center;gap:8px}

/* o nas / alternating split */
.split{display:grid;gap:var(--space-6);align-items:center}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
@media (min-width:880px){
  .split{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .split--rev > .split-media{order:2}
}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6);padding:0;list-style:none}
.stats li{text-align:center;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-2);background:#fff}
.stats .num{display:block;font-family:var(--font-heading);font-weight:800;font-size:var(--fs-2xl);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .lbl{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}

/* kursy */
.cards{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform var(--motion-dur) var(--motion-ease),box-shadow var(--motion-dur) var(--motion-ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card-body{padding:var(--space-4) var(--space-5) var(--space-5)}
.card h3{font-size:var(--fs-lg);margin-bottom:var(--space-2)}
.card p{font-size:var(--fs-sm);color:var(--text-muted);margin:0}
.card .tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:6px}

/* grafik */
.grafik{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.day{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.day h3{font-size:var(--fs-base);text-transform:uppercase;letter-spacing:.12em;padding-bottom:var(--space-2);margin-bottom:var(--space-3);border-bottom:3px solid;border-image:var(--grad) 1}
.day ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.day li{font-size:var(--fs-sm)}
.day .t{font-weight:800;font-family:var(--font-heading);color:var(--text-strong)}
.day .who{color:var(--text-muted)}
.day .start{display:block;color:var(--color-primary600);font-weight:600;font-size:var(--fs-xs)}
.lvl{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px;background:var(--color-primary100);color:var(--color-primary600);vertical-align:1px}
.legend{margin-top:var(--space-5);font-size:var(--fs-sm);color:var(--text-muted)}
.legend b{color:var(--text-strong)}

/* opinie */
.reviews{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.review{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.review .stars{color:var(--color-accent);letter-spacing:3px;margin-bottom:var(--space-3);font-size:var(--fs-base)}
.review blockquote{margin:0 0 var(--space-4);font-size:var(--fs-sm);color:var(--text-body)}
.review figcaption{margin-top:auto;font-weight:700;font-size:var(--fs-sm)}
.review figcaption span{display:block;font-weight:400;color:var(--text-muted);font-size:var(--fs-xs)}

/* cennik */
.price-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.price{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);text-align:center;box-shadow:var(--shadow-sm)}
.price h3{font-size:var(--fs-lg)}
.price p{font-size:var(--fs-sm);color:var(--text-muted)}
.price .ask{display:inline-block;margin-top:var(--space-2);font-weight:700;color:var(--color-primary600);text-decoration:none;border-bottom:2px solid;border-image:var(--grad) 1}
.note{font-size:var(--fs-sm);color:var(--text-muted);background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);margin-top:var(--space-5)}

/* kontakt */
.contact{background:var(--text-strong);color:#EDE6E6}
.contact .h2,.contact h3{color:#fff}
.contact .kicker{color:#FFC93C}
.contact-grid{display:grid;gap:var(--space-6)}
.contact a{color:#fff}
.contact ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.contact .big-tel{display:inline-block;font-family:var(--font-heading);font-weight:800;font-size:clamp(28px,5vw,40px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none;margin-bottom:var(--space-2)}
.socials{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.socials a{border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-pill);padding:9px 18px;text-decoration:none;font-size:var(--fs-sm);font-weight:600;transition:all var(--motion-dur) var(--motion-ease)}
.socials a:hover{background:#fff;color:var(--text-strong)}
.hours{font-size:var(--fs-sm)}
.hours b{color:#fff}
@media (min-width:880px){.contact-grid{grid-template-columns:1.2fr .8fr}}

/* footer */
.site-footer{background:#0A0808;color:#B9AFAF;font-size:var(--fs-sm)}
.site-footer .container{padding-block:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);justify-content:space-between;align-items:center}
.site-footer a{color:#E6DEDE}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--motion-ease),transform .6s var(--motion-ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}


/* =========================================================================
   Hero na fotografii
   ========================================================================= */
/* Kadr z parkietu idzie przez cale hero. Zdjecie jest ciemne i zadymione,
   wiec pismo schodzi na jasne, a welon tylko wyrownuje najjasniejsze
   miejsca - reflektor w gornym rogu potrafi przebic biel. */
.hero--foto{background:#100C0C}
.hero--foto::before{content:none}
.hero__tlo{position:absolute;inset:0;z-index:0;background-image:url('images/hero-tlo.jpg?v=1');background-size:cover;background-position:center 42%}
.hero__tlo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,8,8,.86) 0%,rgba(12,8,8,.72) 46%,rgba(12,8,8,.42) 100%)}
.hero--foto .container{position:relative;z-index:1}
.hero--foto .overline{color:#FFC93C}
.hero--foto h1 .city{color:#fff}
.hero--foto .btn--ghost{border-color:#fff;color:#fff}
.hero--foto .btn--ghost:hover{background:#fff;color:var(--text-strong)}
.hero--foto .hero-photo::after{opacity:.42}

/* Telefon w hero: znak plus numer, bez slowa. */
.btn--tel-duzy{font-size:var(--fs-lg);letter-spacing:.02em}
.btn--tel-duzy .znak{flex:none}
.btn-tel .znak{flex:none}
.strip .znak{flex:none;color:#FFC93C}


/* =========================================================================
   RUNDA 2 — kadry kursow, szklo, kontakt w kartach
   ========================================================================= */

/* --- Sekcja w ukladzie "tekst z lewej, kadr do krawedzi" ----------------- */
.section--list{padding:0}
.list-uklad{display:grid;align-items:center}
@media(min-width:900px){.list-uklad{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.list-uklad__tresc{padding:clamp(48px,6vw,96px) clamp(20px,4vw,64px);max-width:640px;margin-left:auto;width:100%}
.list-uklad__kadr{height:100%}
.list-uklad__kadr img{width:100%;height:100%;min-height:clamp(280px,40vw,560px);object-fit:cover;border-radius:0;box-shadow:none}
.list-uklad__tresc .btn{margin-top:var(--space-4)}

/* --- Kafelki kursow: nazwa na kadrze pod gradientem marki ---------------- */
.card-kadr{position:relative;overflow:hidden}
.card-kadr img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
/* Gradient marki lezy na zdjeciu w trybie mnozenia, wiec kadr nie zostaje
   zamalowany na plasko - kolor wchodzi w cienie, a swiatla zostaja. Pod nim
   przyciemnienie od dolu, zeby napis mial stale podloze. */
.card-kadr::before{content:"";position:absolute;inset:0;background:var(--grad);mix-blend-mode:multiply;opacity:.55}
.card-kadr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,6,0) 42%,rgba(20,10,6,.68) 100%)}
.card-tytul{
  position:absolute;left:18px;right:18px;bottom:14px;z-index:1;
  font-family:var(--font-heading);font-weight:800;font-size:var(--fs-lg);
  color:#fff;text-transform:uppercase;letter-spacing:.06em;line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,.45)
}
.card-body{padding:var(--space-4) var(--space-5) var(--space-5)}

/* --- Tla fotograficzne sekcji ------------------------------------------- */
.sekcja--foto{position:relative;overflow:hidden}
.sekcja--foto::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--foto);background-size:cover;background-position:center}
.sekcja--foto>*{position:relative;z-index:1}
.sekcja--foto-jasna::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 44%,rgba(255,255,255,.28) 100%)}
.sekcja--foto-ciemna::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(120deg,rgba(16,10,8,.82) 0%,rgba(16,10,8,.66) 100%)}
@media(max-width:899px){.sekcja--foto-jasna::after{background:rgba(255,255,255,.9)}}
.pt-tresc{max-width:58ch}

/* Opinie na ciemnym kadrze */
#opinie .h2,#opinie .h2 .kicker{color:#fff}
#opinie .h2 .kicker{color:#FFC93C}
#opinie a{color:#FFC93C}

/* --- Liquid glass -------------------------------------------------------- */
.szklo{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
          backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 18px 40px rgba(30,12,8,.16),inset 0 1px 0 rgba(255,255,255,.8)
}

/* --- Grafik: trzy kafelki u gory, dwa u dolu ----------------------------- */
/* Siatka auto-fit ukladala 4 + 1 i piatek zostawal sierota. Szesc kolumn
   pozwala rozdzielic 3 x 2 i 2 x 3. */
@media(min-width:900px){
  .grafik--3-2{grid-template-columns:repeat(6,1fr)}
  .grafik--3-2 .day:nth-child(-n+3){grid-column:span 2}
  .grafik--3-2 .day:nth-child(n+4){grid-column:span 3}
}

/* --- Karuzela z opiniami ------------------------------------------------- */
.karuzela{position:relative}
/* Tor idzie na flexie, nie na siatce: przy siatce zostawaly jawne kolumny
   z .reviews i szerokosc karty nie slyszala ustawien karuzeli. */
.karuzela .reviews{
  display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:4px;scrollbar-width:none
}
/* Karta opinii to figure, ktora dostaje od przegladarki 40 px marginesu
   z boku - na flexie rozpychalo to tor i ucinalo druga opinie. */
.karuzela .reviews>*{flex:0 0 min(88vw,320px);margin:0}
@media(min-width:900px){.karuzela .reviews>*{flex:0 0 calc((100% - 2*var(--space-5))/3)}}
.karuzela .reviews::-webkit-scrollbar{display:none}
.karuzela .reviews>*{scroll-snap-align:start}
.karuzela__strzalki{display:flex;gap:12px;justify-content:center;margin-top:var(--space-5)}
.karuzela__btn{
  display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-pill);
  cursor:pointer;color:var(--text-strong);background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.8);transition:background var(--motion-dur) var(--motion-ease)
}
.karuzela__btn:hover{background:var(--grad);color:#fff;border-color:transparent}

/* --- Cennik: kafel "Zapytaj o cene" -------------------------------------- */
.zapytaj{
  margin-top:var(--space-5);padding:var(--space-6);border-radius:var(--radius-md);
  background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6)
}
.zapytaj h3{margin-bottom:6px}
.zapytaj p{margin:0;color:var(--text-muted);font-size:var(--fs-sm);max-width:52ch}

/* --- Kontakt w kartach --------------------------------------------------- */
.zapisy-grid{display:grid;gap:var(--space-5)}
@media(min-width:900px){.zapisy-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.zapisy-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.kontakt-tel,.kontakt-mail{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-strong);
  font-weight:700;padding:12px 0;border-bottom:1px solid var(--color-border);word-break:break-word
}
.kontakt-tel{font-family:var(--font-heading);font-size:clamp(24px,3.4vw,32px)}
.kontakt-tel--drugi{font-size:var(--fs-lg)}
.kontakt-mail{font-size:var(--fs-base);font-weight:600}
.kontakt-tel .znak,.kontakt-mail .znak{flex:none;color:var(--color-primary)}
.kontakt-tel:hover,.kontakt-mail:hover{color:var(--color-primary)}
.godziny-lista{margin-top:var(--space-5);display:grid;gap:8px}
.godzina{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-sm)}
.godzina__dzien{flex:none}
/* Kropki laczace dzien z godzina rysuje sam element rozciagliwy - dzieki
   temu dziala przy kazdej dlugosci nazwy dnia. */
.godzina__kropki{flex:1;border-bottom:2px dotted var(--color-border);transform:translateY(-4px)}
.godzina__czas{flex:none;font-weight:700;color:var(--text-strong)}
.adres-w-karcie .adres-duzy{display:flex;gap:12px;align-items:flex-start;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-lg);color:var(--text-strong);margin:0 0 var(--space-4)}
.adres-w-karcie .znak{flex:none;color:var(--color-primary);margin-top:4px}
.map-frame{width:100%;height:clamp(220px,30vw,300px);border:0;border-radius:var(--radius-sm);display:block}
.zapisy-card .drobne{margin-top:var(--space-4);font-size:var(--fs-sm);color:var(--text-muted)}
.zapisy-card .socials{margin-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-4)}

/* Sekcja kontaktu ma ciemne tlo i ustawia jasny kolor dla calej zawartosci.
   Karty sa biale, wiec dziedziczona biel czynila numer, mail i nazwy dni
   niewidocznymi. Wnetrze karty wraca na ciemne pismo. */
.contact .zapisy-card,
.contact .zapisy-card a,
.contact .zapisy-card p{color:var(--text-body)}
.contact .zapisy-card .kontakt-tel,
.contact .zapisy-card .kontakt-mail,
.contact .zapisy-card .adres-duzy,
.contact .zapisy-card .godzina__czas{color:var(--text-strong)}
.contact .zapisy-card .godzina__dzien{color:var(--text-muted)}
.contact .zapisy-card .kontakt-tel:hover,
.contact .zapisy-card .kontakt-mail:hover,
.contact .zapisy-card .socials a:hover{color:var(--color-primary)}
.contact .zapisy-card .socials a{color:var(--color-primary);font-weight:700;text-decoration:none}
.contact .zapisy-card .drobne{color:var(--text-muted)}


/* =========================================================================
   RUNDA 3 — hero bez welonu, przyciski w gradiencie
   ========================================================================= */

/* Kadr idzie bez zadnej warstwy. Napis stoi po lewej, gdzie zdjecie jest
   najciemniejsze, wiec biel trzyma prog sama z siebie. */
.hero--foto .hero__tlo::after{content:none}
.hero--foto .container{grid-template-columns:1fr}
.hero--foto .hero-copy,.hero--foto>.container>div{max-width:none}
@media(min-width:900px){.hero--foto .container{grid-template-columns:1fr;padding-block:clamp(96px,13vw,180px)}}

/* Przyciski i pastylki z numerem w gradiencie marki. */
.btn--primary,.btn-tel,.zapytaj .btn--primary{
  background:var(--grad);background-size:180% 100%;color:#fff;border:0;
  transition:background-position var(--motion-dur) var(--motion-ease),transform var(--motion-dur) var(--motion-ease)
}
.btn--primary:hover,.btn-tel:hover{background-position:100% 0;transform:translateY(-1px)}
.btn--tel-duzy{font-size:var(--fs-lg);letter-spacing:.03em;font-weight:800}
.kontakt-tel{
  background:var(--grad);background-size:180% 100%;color:#fff;border-bottom:0;border-radius:var(--radius-md);
  padding:14px 20px;margin-bottom:10px;transition:background-position var(--motion-dur) var(--motion-ease)
}
.kontakt-tel:hover{background-position:100% 0}
.contact .zapisy-card .kontakt-tel{color:#fff}
.contact .zapisy-card .kontakt-tel:hover{color:#fff}
.kontakt-tel .znak{color:#fff}

/* Welon z calej sekcji zszedl, ale wielki napis w gradiencie wypada nad
   jasnym dymem i mial tam 1,2:1. Zamiast przyciemniac caly kadr, cien
   dostaje sam blok tekstu - reszta zdjecia zostaje nietknieta. */
.hero--foto .hero-copy,.hero--foto>.container>div:first-child{position:relative}
.hero--foto .hero-copy::before,.hero--foto>.container>div:first-child::before{
  content:"";position:absolute;z-index:-1;
  inset:-40px -80px -40px -80px;border-radius:48px;
  background:radial-gradient(72% 130% at 34% 50%,rgba(10,6,6,.86) 0%,rgba(10,6,6,.72) 46%,rgba(10,6,6,.26) 76%,rgba(10,6,6,0) 96%)
}
@media(max-width:899px){
  .hero--foto .hero-copy::before,.hero--foto>.container>div:first-child::before{inset:-24px -28px}
}


/* =========================================================================
   RUNDA 4 — pasek w gradiencie, kontakt w ukladzie z formularzem
   ========================================================================= */

/* Hero: delikatne przyciemnienie calego kadru zamiast plamy pod tekstem. */
.hero--foto .hero-copy::before,.hero--foto>.container>div:first-child::before{content:none}
.hero--foto .hero__tlo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,8,8,.62) 0%,rgba(12,8,8,.48) 52%,rgba(12,8,8,.34) 100%)
}
.hero h1 .grad{line-height:.96}

/* --- Pasek ze stylami tanca --------------------------------------------- */
/* Pismo na pasku idzie ciemne, nie biale: gradient konczy sie zolcia, na
   ktorej biel dawala 2,3:1. Ciemne litery trzymaja prog na kazdym
   odcinku przesuwu, od rozu po zolc. */
.strip--grad{background:var(--grad);background-size:200% 100%;animation:gradsweep 9s var(--motion-ease) infinite alternate;color:var(--text-strong)}
.strip--grad .container{gap:var(--space-3) var(--space-6)}
.strip--grad span{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-sm)}
@media(prefers-reduced-motion:reduce){.strip--grad{animation:none}}

/* --- Pierwszy taniec: wyzsza sekcja, ciemny welon ------------------------ */
.sekcja--wysoka{padding-block:clamp(96px,14vw,190px)}
#pierwszy-taniec .h2,#pierwszy-taniec p{color:#fff}
#pierwszy-taniec .kicker{color:#FFC93C}
#pierwszy-taniec .btn--ghost{border-color:#fff;color:#fff}
#pierwszy-taniec .btn--ghost:hover{background:#fff;color:var(--text-strong)}
/* Welon jest lzejszy niz standardowy ciemny, zeby suknia i swiatlo zostaly
   widoczne; pismo i tak trzyma prog, bo lezy na lewej, ciemniejszej stronie. */
#pierwszy-taniec.sekcja--foto-ciemna::after{background:linear-gradient(100deg,rgba(16,10,8,.78) 0%,rgba(16,10,8,.56) 52%,rgba(16,10,8,.3) 100%)}

/* --- Grafik: rowne kafelki w plynacym gradiencie ------------------------- */
/* Wszystkie kafelki grafiku maja rowna wysokosc, takze miedzy wierszami. */
.grafik--3-2{grid-auto-rows:1fr}
.grafik--3-2 .day{height:100%}


/* --- Opinie: szersze karty ---------------------------------------------- */
@media(min-width:900px){.karuzela--szeroka .reviews>*{flex:0 0 calc((100% - var(--space-5))/2)}}

/* --- Cennik na miekkim gradiencie --------------------------------------- */
.section--grad-soft{background:var(--grad-soft)}

/* --- Kontakt w ukladzie z formularzem ----------------------------------- */
.kontakt__grid{display:grid;gap:var(--space-6)}
@media(min-width:900px){.kontakt__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.kontakt__dane{display:grid;gap:var(--space-3)}
.dana{
  display:flex;gap:14px;align-items:flex-start;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-md);padding:16px 18px;
  transition:background var(--motion-dur) var(--motion-ease)
}
a.dana:hover{background:rgba(255,255,255,.12)}
.dana .znak{flex:none;color:#FFC93C;margin-top:2px}
.dana strong{display:block;color:#fff;font-size:var(--fs-base)}
.dana small{display:block;color:#C8BEBE;font-size:var(--fs-sm);margin-top:2px}
.dana small a{color:#FFC93C;text-decoration:none}
.dana small a:hover{text-decoration:underline}
.kontakt__mapa{margin-top:var(--space-2);border-radius:var(--radius-md);overflow:hidden}
.kontakt__mapa iframe{width:100%;height:clamp(220px,28vw,300px);border:0;display:block}

.formularz{background:#fff;border-radius:var(--radius-md);padding:var(--space-6);display:grid;gap:var(--space-4)}
.formularz h3{color:var(--text-strong);margin:0}
.field{display:grid;gap:6px}
.field label{font-size:var(--fs-sm);font-weight:700;color:var(--text-strong)}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--text-body);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:12px 14px;width:100%;min-height:48px
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}
.formularz__reszta{display:grid;gap:var(--space-4)}
@media(min-width:560px){.formularz__reszta{grid-template-columns:1fr 1fr}}
.formularz__wyslij{justify-content:center;cursor:pointer;border:0}
.formularz__rodo{font-size:var(--fs-xs);color:var(--text-muted);margin:0}


/* --- Czytelnosc pisma na gradiencie ------------------------------------- */
/* Gradient konczy sie zolcia, na ktorej biel daje niecale 2,3:1. Duze,
   grube napisy na przyciskach maja wlasny, nizszy prog i biel na nich
   siada, wiec przyciski dostaja 20 px. Male pastylki z numerem zamiast
   tego biora ciemne pismo - to trzyma prog na calej dlugosci przesuwu. */
.btn--primary{font-size:var(--fs-lg);font-weight:800}
.btn-tel{color:var(--text-strong)}
.btn-tel:hover{color:var(--text-strong)}
.btn-tel .znak{color:inherit}

/* Mapa domyka lewa kolumne, zeby nie zostawala pusta plama pod formularzem. */
@media(min-width:900px){.kontakt__mapa iframe{height:clamp(280px,26vw,400px)}}


/* W opiniach wszystkie odnosniki sa zolte i przejmowal to takze przycisk,
   przez co napis gubil sie na jasnym koncu gradientu. */
#opinie .btn--primary{color:#fff}


/* =========================================================================
   RUNDA 5 — nowe tlo hero, menu w stylu nadtytulu sekcji
   ========================================================================= */

/* Nowy kadr ma czarna, pusta lewa strone, wiec welon moze byc duzo lzejszy
   niz przy poprzednim zdjeciu - tancerzy widac wtedy w pelni. */
/* Kadr schodzi nizej, zeby w polu widzenia zostaly buty tancerzy. */
.hero__tlo{background-image:url('images/hero-tlo.jpg?v=2');background-position:62% 88%}
.hero--foto .hero__tlo::after{
  background:linear-gradient(100deg,rgba(8,6,8,.72) 0%,rgba(8,6,8,.46) 40%,rgba(8,6,8,.12) 72%,rgba(8,6,8,.06) 100%)
}
@media(max-width:899px){.hero__tlo{background-position:66% 88%}}

/* Pozycje menu w kroju nadtytulu sekcji: wersaliki, szerokie swiatlo miedzy
   literami, ta sama czerwien. Czerwien podstawowa dawala na bieli 4,2:1,
   wiec i menu, i nadtytuly biora ciemniejszy odcien marki. */
.h2 .kicker{color:var(--color-primary600)}
.mobile-nav a,.main-nav a{
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  font-size:var(--fs-sm);color:var(--color-primary600)
}
.main-nav a:hover,.mobile-nav a:hover{color:var(--text-strong)}

/* Ikony spolecznosciowe w menu */
.nav-social{display:inline-flex;align-items:center;gap:14px}
.nav-social a{display:inline-flex;color:var(--text-strong);transition:color var(--motion-dur) var(--motion-ease)}
.nav-social a:hover{color:var(--color-primary600)}
.main-nav .nav-social{margin-left:2px}
.main-nav .nav-social a::after{content:none}
.nav-social--mobil{display:flex;gap:18px;padding:14px var(--space-5);border-top:1px solid var(--color-border)}
/* Ikony w szufladzie sa odnosnikami wewnatrz menu, wiec lapaly kreske
   i wciecie przewidziane dla pozycji menu. */
.mobile-nav .nav-social a{border-top:0;padding:0}

/* Grafik dostaje to samo tlo co cennik, a kafelki ida na szkle. */
.day{background:none}
.grafik--3-2 .day{height:100%}


/* =========================================================================
   RUNDA 6 — kontakt na gradiencie, rowny grafik, luzniejszy naglowek hero
   ========================================================================= */

/* Wiecej powietrza miedzy "Szkola" a "Tanca". */
.hero h1 .grad{line-height:1.08}

/* --- Grafik: pieciu kafelkom rowna nie tylko wysokosc, ale i szerokosc --- */
/* Dolny wiersz zaczyna sie od drugiej kolumny szesciopolowej siatki, wiec
   dwa kafelki stoja posrodku i maja te sama miare co trzy gorne. */
@media(min-width:900px){
  .grafik--3-2 .day:nth-child(n+4){grid-column:span 2}
  .grafik--3-2 .day:nth-child(4){grid-column:2/span 2}
  .grafik--3-2 .day:nth-child(5){grid-column:4/span 2}
}

/* --- Strzalki karuzeli w gradiencie marki -------------------------------- */
/* Gradient wchodzil dopiero po najechaniu i mial biala strzalke, ktora na
   zoltym koncu gasla. Teraz gradient jest staly, a znak ciemny. */
.karuzela__btn{background:var(--grad);background-size:180% 100%;border:0;color:var(--text-strong);
  transition:background-position var(--motion-dur) var(--motion-ease),transform var(--motion-dur) var(--motion-ease)}
.karuzela__btn:hover{background:var(--grad);background-size:180% 100%;background-position:100% 0;color:var(--text-strong);transform:translateY(-1px)}

/* --- Kafel "Zapytaj o cene" klika sie caly ------------------------------- */
.zapytaj{position:relative}
.kafel-link{color:inherit;text-decoration:none}
.kafel-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.zapytaj .btn{position:relative;z-index:1}

/* --- Kontakt na gradiencie marki ---------------------------------------- */
.contact{background:var(--grad);background-size:200% 100%;color:var(--text-strong)}
.contact .h2,.contact .h2 .kicker{color:var(--text-strong)}
.kontakt__pary{display:grid;gap:var(--space-3)}
@media(min-width:560px){.kontakt__pary{grid-template-columns:1fr 1fr}}
.dana{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 30px rgba(70,20,30,.14),inset 0 1px 0 rgba(255,255,255,.8)
}
a.dana:hover{background:rgba(255,255,255,.94)}
.dana .znak{color:var(--color-primary600)}
.dana strong{color:var(--text-strong)}
.dana small{color:var(--cichy,#4A4141)}
.dana small a{color:var(--color-primary600)}
.kontakt__mapa{margin-top:var(--space-5);box-shadow:0 14px 30px rgba(70,20,30,.14)}
@media(min-width:900px){.kontakt__mapa iframe{height:clamp(300px,24vw,380px)}}


/* =========================================================================
   RUNDA 7 — wydarzenia nad "O nas"
   ========================================================================= */

/* Sekcja idzie w kolorze paska pod hero, czyli w pelnym gradiencie marki,
   a same wydarzenia siedza na bialym szkle - gradient jest zbyt zmienny,
   zeby drobne pismo lezalo na nim wprost. */
.wydarzenia{background:var(--grad);background-size:200% 100%;color:var(--text-strong)}
.wydarzenia .h2,.wydarzenia .h2 .kicker{color:var(--text-strong)}
.wyd-wstep{max-width:62ch;margin:0 0 var(--space-5)}
.wyd-siatka{display:grid;gap:var(--space-4)}
@media(min-width:640px){.wyd-siatka{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.wyd-siatka{grid-template-columns:repeat(4,1fr)}}
.wyd{display:flex;gap:14px;align-items:flex-start;border-radius:var(--radius-md);padding:18px 20px;height:100%}
.wyd__data{flex:none;text-align:center;line-height:1;padding-right:14px;border-right:2px solid rgba(200,60,80,.28)}
.wyd__data b{display:block;font-family:var(--font-heading);font-size:32px;font-weight:800;color:var(--color-primary600)}
.wyd__data span{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-top:4px}
.wyd h3{font-size:var(--fs-base);margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wyd__kiedy{margin:0;font-weight:700;font-size:var(--fs-sm);color:var(--text-strong)}
.wyd__kto{margin:2px 0 0;font-size:var(--fs-sm);color:var(--text-muted)}
.wyd-stopka{margin:var(--space-5) 0 0;font-size:var(--fs-sm);max-width:80ch}
.wyd-stopka a{color:var(--text-strong);font-weight:700}

/* Przycisk na gradiencie musi byc kontra, nie kolejnym gradientem. */
.btn--ciemny{background:var(--text-strong);color:#fff;border:0}
.btn--ciemny:hover{background:#000;color:#fff}


/* =========================================================================
   RUNDA 8 — formularz na szkle, bialy grafik, wysrodkowany dolny rzad kursow
   ========================================================================= */

/* Formularz przestaje byc biala plyta i idzie na szkle, a na szerokich
   ekranach siega tak nisko jak kolumna z danymi obok. */
.formularz{background:rgba(255,255,255,.82)}
@media(min-width:900px){
  .kontakt__grid{align-items:stretch}
  .formularz{height:100%}
}

/* Kafelki social bez opisu maja tylko nazwe, wiec ustawiamy ja w osi ikony. */
.kontakt__pary .dana{align-items:center}
.kontakt__pary .dana .znak{margin-top:0}

/* Grafik: kafelki maja byc biale, nie rozowe od tla, wiec szklo jest gestsze
   niz standardowe i dolozony jest bialy spod. */
#grafik .day{background:rgba(255,255,255,.97)}

/* Nasze kursy: dolny rzad stoi posrodku. Osiem kolumn pozwala dac kazdej
   karcie dwie i przesunac trzy dolne o pol karty, wiec zostaje rowno po
   jednej pustej kolumnie z obu stron. */
@media(min-width:1000px){
  .cards{grid-template-columns:repeat(8,1fr)}
  .cards .card{grid-column:span 2}
  .cards .card:nth-child(5){grid-column:2/span 2}
}

/* Kafelki wydarzen stykaly sie z naglowkiem przez usuniety wstep. */
.wydarzenia .h2{margin-bottom:var(--space-5)}
/* Nazwa wydarzenia lamie sie sama, wiec plakietka z poziomem trzyma sie
   pierwszego wersu zamiast jechac pod spod. */
.wyd__nazwa{display:block}
.wyd h3{align-items:flex-start}
.wyd .lvl{margin-top:2px}


/* =========================================================================
   RUNDA 9 — wspolny ruch gradientu, wysrodkowania, biale strzalki
   ========================================================================= */

/* Pasek pod menu i sekcja wydarzen maja ten sam gradient, te sama szerokosc
   tla i ten sam przebieg w czasie, wiec plyna rownolegle jak jedna plaszczyzna. */
.wydarzenia{background-size:200% 100%;animation:gradsweep 9s var(--motion-ease) infinite alternate}
@media(prefers-reduced-motion:reduce){.wydarzenia{animation:none}}

/* Przycisk pod wydarzeniami i legenda grafiku stoja w osi sekcji. */
.wydarzenia .btn--ciemny{margin-inline:auto}
.wydarzenia > .container > p:last-child{text-align:center}
#grafik .legend{text-align:center}

/* Strzalki karuzeli wracaja na biel: gradient na zoltym koncu schodzil
   ponizej progu dla znakow graficznych, a znak i tak musial byc ciemny. */
.karuzela__btn,.karuzela__btn:hover{
  background:#fff;background-image:none;color:var(--text-strong);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 24px rgba(0,0,0,.28)
}
.karuzela__btn:hover{transform:translateY(-1px)}