/* =============================================================
   Bawiarenka — arkusz stylów
   Kierunek: Smart Kids Planet, ale energiczniej i z własną paletą.
   Pomarańcz = akcje (kup, zarezerwuj), niebieski/turkus = akcenty,
   róż i limonka tylko w dekoracjach. Dużo bieli jako oddech.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul[role="list"] { list-style: none; padding: 0; }

:root {
  --pom:   #FF8A1F;
  --pom-2: #F07300;
  --nieb:  #2D9BF0;
  --tur:   #14C1E0;
  --roz:   #FF4F96;
  --lim:   #C6E83A;
  --zol:   #FFD23F;
  --tusz:  #1E2340;
  --tusz-2:#5A607A;
  --krem:  #FFF7EC;
  --biel:  #FFFFFF;

  --font-naglowek: 'Baloo 2', 'Nunito', sans-serif; /* Fredoka nie ma polskiego ń — przeglądarka brała je z innej czcionki */
  --font-tekst: 'Nunito', system-ui, sans-serif;

  --pad: clamp(1rem, 2.5vw, 3rem);
  --r: 22px;
  --r-xl: clamp(28px, 4vw, 48px);
  --ease: cubic-bezier(.34, 1.56, .64, 1); /* lekkie odbicie — energicznie */
}

body {
  font-family: var(--font-tekst);
  color: var(--tusz);
  background: var(--biel);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-naglowek); line-height: 1.05; font-weight: 700; }

/* --------------------------------- PRZYCISKI ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: 14px;
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s;
}
.btn:hover { transform: translateY(-3px); }
/* Cień w kolorze przycisku, nie szary — wygląda jak naklejka, nie jak guzik systemowy. */
.btn--pom { background: var(--pom); color: #fff; box-shadow: 0 6px 0 var(--pom-2); }
.btn--pom:hover { box-shadow: 0 9px 0 var(--pom-2); }
.btn--roz { background: var(--roz); color: #fff; border-radius: 999px; padding-inline: 1.6rem; }
.btn--obrys { background: #fff; color: var(--tusz); border: 2.5px solid var(--tusz); box-shadow: 0 6px 0 var(--tusz); }
.btn--obrys:hover { box-shadow: 0 9px 0 var(--tusz); }
.btn--duzy { padding: 1.05rem 1.9rem; font-size: 1.08rem; }

/* ---------------------------------- TAŚMA ---------------------------------- */
.tasma { background: var(--tur); color: #fff; overflow: hidden; font-weight: 700; font-size: .95rem; }
.tasma__tor { display: flex; width: max-content; animation: tasma 32s linear infinite; }
.tasma__lista { display: flex; list-style: none; padding: .7rem 0; margin: 0; }
.tasma__lista li { padding-inline: 2.5rem; white-space: nowrap; }
.tasma__lista li::before { content: '✦'; margin-right: 2.5rem; color: var(--zol); }
@keyframes tasma { to { transform: translateX(-50%); } }

/* --------------------------------- NAGŁÓWEK -------------------------------- */
.szapka { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 4px 20px rgba(30,35,64,.06); }
.szapka__in {
  max-width: 1920px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1rem var(--pad);
}
/* Logo-napis do czasu prawdziwego logo: dwa kolory, okrągła czcionka. */
.logo { font-family: var(--font-naglowek); font-weight: 700; font-size: 1.85rem; letter-spacing: -.01em; margin-right: auto; }
.logo__b { color: var(--pom); }
.logo__r { color: var(--nieb); }

.menu { display: flex; gap: 1.6rem; }
.menu a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .98rem; transition: color .2s; }
.menu a:hover { color: var(--pom); }
.menu svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jezyk { display: flex; gap: .5rem; font-weight: 700; color: var(--tusz-2); }
.jezyk__akt { color: var(--tusz); }

/* „Więcej”: pozostałe podstrony w rozwijanej liście (najechanie albo Tab) */
.menu { align-items: center; }
.menu__wiecej { position: relative; }
.menu__wiecej-btn { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: .98rem; color: inherit; cursor: pointer; }
.menu__wiecej-btn:hover, .menu__wiecej:focus-within .menu__wiecej-btn { color: var(--pom); }
.menu__strz { width: 1rem !important; height: 1rem !important; transition: transform .2s; }
.menu__lista { position: absolute; top: calc(100% + .9rem); right: -1rem; min-width: 220px; display: grid; padding: .6rem; background: #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(30,35,64,.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.menu__lista::before { content: ''; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; } /* mostek — lista nie znika, gdy kursor schodzi z przycisku */
.menu__wiecej:hover .menu__lista, .menu__wiecej:focus-within .menu__lista { opacity: 1; visibility: visible; transform: none; }
.menu__wiecej:hover .menu__strz, .menu__wiecej:focus-within .menu__strz { transform: rotate(180deg); }
.menu__lista a { padding: .65rem .9rem; border-radius: 12px; }
.menu__lista a:hover { background: #FFF1E3; }
/* węższe laptopy: bez ikon, mniejsze odstępy, żeby całe menu się mieściło */
@media (max-width: 1600px) { .menu { gap: 1.1rem; } .menu > a svg { display: none; } }
.menu a, .menu__wiecej-btn, .szapka__cta { white-space: nowrap; }
.menu__waskie { display: none; }
@media (max-width: 1350px) { .menu__szerokie { display: none !important; } .menu__waskie { display: block; } }
@media (max-width: 1300px) { .menu { gap: .9rem; } .menu a, .menu__wiecej-btn { font-size: .92rem; } }
@media (max-width: 1200px) { .menu { gap: .65rem; } .szapka__in { gap: .8rem; } .szapka__cta { padding-left: 1rem; padding-right: 1rem; } }
@media (max-width: 1100px) { .menu { display: none; } }
@media (max-width: 560px) {
  .szapka__cta, .jezyk { display: none; }
  .logo { font-size: 1.55rem; }
}

/* ----------------------------------- HERO ---------------------------------- */
.hero { max-width: 1920px; margin: 0 auto; padding: clamp(.75rem, 1.5vw, 1.5rem) clamp(.75rem, 1.5vw, 1.5rem) 3rem; }

/* Hero to duży zaokrąglony kafel, nie zdjęcie od krawędzi do krawędzi. */
.hero__karta {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: var(--r-xl);
  background: var(--krem);
}

.hero__pigulka {
  display: inline-block;
  padding: .45rem 1rem;
  border-radius: 999px;
  background: #fff;
  font-weight: 800; font-size: .9rem;
  box-shadow: 0 4px 0 rgba(30,35,64,.08);
  }
.hero h1 { font-size: clamp(2.8rem, 2rem + 4vw, 5.6rem); margin: 1.1rem 0 1.3rem; letter-spacing: -.02em; }

/* Słowo podkreślone malowanym pociągnięciem pędzla. */
.pedzel { position: relative; color: var(--pom); white-space: nowrap; }
.pedzel::after {
  content: '';
  position: absolute; left: -2%; right: -2%; bottom: .08em; height: .26em;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20c40-10 90-14 140-11s110 8 150-3' stroke='%23C6E83A' stroke-width='14' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.hero__lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--tusz-2); max-width: 36rem; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.2rem; }

.hero__fakty { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.2rem); }
.hero__fakty li { display: flex; flex-direction: column; }
.hero__fakty b { font-family: var(--font-naglowek); font-size: 1.6rem; color: var(--nieb); line-height: 1.1; }
.hero__fakty span { font-size: .88rem; color: var(--tusz-2); font-weight: 600; }

/* --- Obraz i dekoracje --- */
.hero__obraz { position: relative; aspect-ratio: 1; }

/* Zdjęcie w kształcie nieregularnej plamy zamiast prostokąta. */
.blob {
  position: absolute; inset: 6%;
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(30,35,64,.35);
  z-index: 2;
  animation: blob 14s ease-in-out infinite;
}
.blob img, .blob__ilustracja { width: 100%; height: 100%; object-fit: cover; }
@keyframes blob {
  50% { border-radius: 55% 45% 42% 58% / 55% 52% 48% 45%; }
}

.dek { position: absolute; pointer-events: none; }
.dek--fala { inset: -2% -4% -6% 0; z-index: 1; fill: var(--tur); opacity: .18; animation: plyw 9s ease-in-out infinite; }
.dek--wezyk {
  width: 70px; right: -2%; bottom: -6%; z-index: 3;
  fill: none; stroke: var(--lim); stroke-width: 16; stroke-linecap: round;
  animation: plyw 6s ease-in-out infinite reverse;
}
.dek--kolo { width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--pom); top: -2%; right: 4%; z-index: 1; animation: plyw 7s ease-in-out infinite; }
.dek--kropka { width: 7%; aspect-ratio: 1; border-radius: 50%; background: var(--roz); left: -1%; top: 30%; z-index: 3; animation: plyw 5s ease-in-out infinite; }
.dek--gwiazdka { width: 9%; left: 8%; bottom: 4%; z-index: 3; fill: var(--zol); animation: obrot 12s linear infinite; }
@keyframes plyw { 50% { transform: translateY(-14px); } }
@keyframes obrot { to { transform: rotate(360deg); } }

/* Naklejki przyklejone do zdjęcia, lekko obrócone. */
.naklejka {
  position: absolute; z-index: 4;
  padding: .6rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  font-family: var(--font-naglowek); font-weight: 600; font-size: clamp(.9rem, .8rem + .4vw, 1.1rem);
  box-shadow: 0 8px 20px rgba(30,35,64,.15);
  animation: wskok .8s var(--ease) both;
}
.naklejka--1 { top: 12%; left: -4%; transform: rotate(-6deg); animation-delay: .5s; }
.naklejka--2 { bottom: 14%; right: -3%; transform: rotate(5deg); animation-delay: .75s; }
@keyframes wskok { from { opacity: 0; scale: .5; } }

/* Treść wjeżdża kaskadą przy wejściu. */
.hero__tresc > * { animation: wjazd .7s cubic-bezier(.2,.8,.2,1) both; }
.hero__tresc > :nth-child(2) { animation-delay: .08s; }
.hero__tresc > :nth-child(3) { animation-delay: .16s; }
.hero__tresc > :nth-child(4) { animation-delay: .24s; }
.hero__tresc > :nth-child(5) { animation-delay: .32s; }
@keyframes wjazd { from { opacity: 0; transform: translateY(24px); } }

/* ---------------------------------- SKRÓTY --------------------------------- */
.skroty {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
}
.skrot {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.3rem 1.4rem;
  border-radius: var(--r);
  color: #fff;
  font-family: var(--font-naglowek); font-weight: 600; font-size: 1.15rem;
  transition: transform .3s var(--ease);
}
.skrot:hover { transform: translateY(-4px) rotate(-1deg); }
.skrot__ik { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 1.3rem; flex: none; }
.skrot i { margin-left: auto; font-style: normal; font-size: 1.3rem; transition: transform .3s var(--ease); }
.skrot:hover i { transform: translateX(4px); }
.skrot--pom  { background: var(--pom); }
.skrot--nieb { background: var(--nieb); }
.skrot--tur  { background: var(--tur); }
.skrot--roz  { background: var(--roz); }

/* --------------------------------- MOBILE ---------------------------------- */
@media (max-width: 960px) {
  .hero__karta { grid-template-columns: 1fr; }
  .hero__obraz { max-width: 520px; width: 100%; margin: 0 auto; }
  .skroty { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hero__karta { padding: 1.6rem 1.2rem 2rem; }
  .hero__cta .btn { width: 100%; }
  .skroty { grid-template-columns: 1fr; }
  .naklejka--1 { left: 0; }
  .naklejka--2 { right: 0; }
  .dek--wezyk { right: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Miejsce na zdjęcie z Magnific — spokojne, bez rysunków-zapychaczy. */
.blob__zastepcze { width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(140deg, #FFD9B0, #BFE7F5); color: rgba(30,35,64,.45);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.skrot__ik svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Na szerokim ekranie obraz nie może rosnąć bez końca razem z kolumną. */
.hero__obraz { max-width: 640px; width: 100%; justify-self: center; }
.hero h1 { line-height: .98; }

/* Gęściej: mniej pustego pola w karcie, większa treść, obraz bliżej tekstu. */
.hero__karta { padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 4vw, 4rem); gap: clamp(1rem, 3vw, 3rem); grid-template-columns: 1fr 1fr; }
.hero h1 { font-size: clamp(3rem, 1.6rem + 5vw, 7rem); margin: .8rem 0 1rem; }
.hero__lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); max-width: 40rem; margin-bottom: 1.6rem; }
.hero__cta { margin-bottom: 1.6rem; }
.hero__obraz { max-width: 760px; }
@media (max-width: 960px) { .hero__karta { grid-template-columns: 1fr; } }
/* Obraz dosunięty do tekstu, a nie do prawej krawędzi — znika dziura po środku. */
.hero__karta { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.hero__obraz { max-width: 640px; justify-self: start; }
.hero__lead { max-width: 44rem; }
@media (max-width: 960px) { .hero__karta { grid-template-columns: 1fr; } .hero__obraz { justify-self: center; } }
/* Obraz ma wypełnić swoją kolumnę: większy limit i mniejszy margines plamy. */
.hero__obraz { max-width: 900px; justify-self: stretch; }
.blob { inset: 2%; }

/* ---- Hero mieści się w oknie przeglądarki --------------------------------
   Wysokość karty = okno minus pasek zapowiedzi i nagłówek (~150 px) minus
   margines. Obraz liczony od WYSOKOŚCI, a nie szerokości — przy szerokim,
   niskim oknie to wysokość jest ograniczeniem. Nagłówek skaluje się też
   z wysokością okna (vh), żeby na laptopie nie wypychał przycisków w dół. */
@media (min-width: 961px) {
  .hero__karta { height: calc(100svh - 175px); min-height: 520px; max-height: 900px; padding-block: clamp(1.2rem, 3vh, 2.5rem); }
  .hero__obraz { height: 100%; max-height: calc(100svh - 230px); width: auto; max-width: 100%; aspect-ratio: 1; justify-self: center; }
  .hero h1 { font-size: clamp(2.6rem, min(5.2vw, 9vh), 7rem); margin: min(1.4vh, .8rem) 0 min(2vh, 1rem); }
  .hero__lead { font-size: clamp(1rem, min(1.2vw, 2.1vh), 1.35rem); margin-bottom: min(3vh, 1.6rem); }
  .hero__cta { margin-bottom: min(3vh, 1.6rem); }
}
/* Szerokość = mniejsza z: szerokość kolumny, wysokość okna. Wysokość wynika
   z proporcji 1:1 — wcześniej oba wymiary były narzucone osobno i przy
   węższym oknie plama robiła się owalna. */
@media (min-width: 961px) {
  .hero__obraz { height: auto; width: min(100%, calc(100svh - 230px)); max-height: none; aspect-ratio: 1; }
}

/* ---- Lewa połowa hero: więcej charakteru ---------------------------------- */
.hero__pigulka { display: inline-flex; align-items: center; gap: .55rem; background: var(--tusz); color: #fff; box-shadow: none; }
.kropka-puls { width: .55rem; height: .55rem; border-radius: 50%; background: var(--lim); box-shadow: 0 0 0 0 rgba(198,232,58,.7); animation: puls 1.8s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 .55rem rgba(198,232,58,0); } 100% { box-shadow: 0 0 0 0 rgba(198,232,58,0); } }

/* Trzy linijki, trzy kolory — nagłówek jest grafiką, nie zdaniem. */
.hero h1 { display: flex; flex-direction: column; line-height: .92; }
.h1__w--nieb { color: var(--nieb); }
.h1__w--pom { color: var(--pom); }
.h1__w:nth-child(2) { padding-left: .6em; } /* lekkie schodkowanie zamiast równego bloku */

.hero__lead { color: var(--tusz); font-weight: 600; max-width: 32rem; }
.hero__cta { position: relative; }
/* Odręczna strzałka do przycisków — jedyny „rysunek" po lewej stronie. */
.hero__strzalka {
  position: absolute; left: calc(100% + .5rem); top: -1.8rem; width: 90px;
  fill: none; stroke: var(--roz); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  transform: scaleX(-1) rotate(10deg);
}

/* Fakty jako kolorowe kafelki zamiast szarego tekstu. */
.hero__fakty { gap: .8rem; }
.fakt {
  padding: .8rem 1.1rem; border-radius: 18px; color: #fff; min-width: 9rem;
  transition: transform .3s var(--ease);
}
.fakt:nth-child(1) { transform: rotate(-2deg); }
.fakt:nth-child(3) { transform: rotate(2deg); }
.fakt:hover { transform: rotate(0) translateY(-3px); }
.fakt b { display: block; font-family: var(--font-naglowek); font-size: 1.5rem; color: #fff; line-height: 1.05; }
.fakt span { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.9); }
.fakt--pom  { background: var(--pom); }
.fakt--nieb { background: var(--nieb); }
.fakt--tur  { background: var(--tur); }

@media (max-width: 1280px) { .hero__strzalka { display: none; } }
@media (max-width: 560px) { .fakt { min-width: 0; flex: 1 1 40%; } .h1__w:nth-child(2) { padding-left: 0; } }
@media (min-width: 961px) {
  .hero h1 { font-size: clamp(3rem, min(6.4vw, 11vh), 8rem); }
}

/* ---- Nagłówek hero: styl D (wybrany 10.10) -------------------------------
   Miękki Sniglet, białe litery z grubym granatowym konturem i cieniem pod
   spodem — jak napis z kreskówki. paint-order:stroke rysuje kontur POD
   wypełnieniem, więc gruba linia nie zjada wnętrza liter. */
.hero h1 {
  display: block;
  font-family: 'Baloo 2', var(--font-naglowek);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .005em;
  color: #fff;
  -webkit-text-stroke: .06em var(--tusz);
  paint-order: stroke fill;
  text-shadow: 0 .09em 0 var(--tusz);
}
.hero h1 span { color: var(--zol); }
/* W jednej linii — rozmiar liczony tak, żeby całe hasło zmieściło się w kolumnie. */
@media (min-width: 961px) {
  .hero h1 { white-space: nowrap; font-size: clamp(2.2rem, 3.5vw, 5rem); }
}
/* Przy mniejszym stopniu (jedna linia) gruby kontur zjadał wnętrze liter. */
.hero h1 { -webkit-text-stroke-width: .045em; text-shadow: 0 .07em 0 var(--tusz); }
/* Tło hero: jasny błękit zamiast kremu — chłodniejsze, czystsze, a białe
   litery hasła z granatowym konturem dalej mają kontrast. */
.hero__karta { background: #DDF3FF; }

/* ---- Warianty tła hero do wyboru (?tlo=...) — po decyzji zostaje jeden ---- */
.tlo-biel  .hero__karta { background: #fff; box-shadow: 0 0 0 2px #EEF1F6 inset; }
.tlo-tur   .hero__karta { background: var(--tur); }
.tlo-nieb  .hero__karta { background: var(--nieb); }
.tlo-zolty .hero__karta { background: #FFE27A; }
.tlo-roz   .hero__karta { background: #FFD6E7; }
.tlo-plamy .hero__karta {
  background:
    radial-gradient(38% 55% at 8% 18%, #BFF0F8 0 60%, transparent 61%),
    radial-gradient(30% 45% at 92% 92%, #FFE27A 0 60%, transparent 61%),
    radial-gradient(22% 30% at 55% 105%, #FFD6E7 0 60%, transparent 61%),
    #fff;
}
/* Na mocnych tłach tekst i przyciski jaśniejsze, żeby nie zginęły. */
.tlo-tur .hero__lead, .tlo-nieb .hero__lead { color: #fff; }
.tlo-tur .fakt--tur { background: var(--nieb); }
.tlo-nieb .fakt--nieb { background: var(--tusz); }