/* =========================================================
   EWA WOŁCZAK — LOGOPEDA — components.css — komponenty sekcji strony
   Wydzielone ze styles.css podczas refactoringu (2026).
   ========================================================= *//* =========================================================
   ABOUT
   ========================================================= */
.about{
  max-width:var(--container); margin:0 auto;
  padding:112px var(--pad) 76px;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
  align-items:center;
}
.about__media{ position:relative; }
.about__photo-frame{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  aspect-ratio:5/6;
  box-shadow:0 30px 60px -24px rgba(43,42,51,.22);
  background:var(--coral-light);
}
.about__photo-frame::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(241,130,90,.14), transparent 45%);
  pointer-events:none;
}
.about__photo-frame img{
  width:100%; height:100%; object-fit:cover; object-position:center 15%;
}
.about__doodle{
  position:absolute; width:90px; height:90px;
  bottom:-30px; right:-30px;
  animation:doodlefloat 7s ease-in-out infinite;
}


.about__lead{ color:var(--ink-soft); font-size:16.5px; line-height:1.7; margin-top:22px; max-width:56ch; }
.about__quals{ display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
.qual-pill{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--sage-light);
  color:var(--sage-deep);
  font-weight:700; font-size:14px;
  padding:11px 18px; border-radius:100px;
}
.qual-pill__icon{ display:inline-flex; align-items:center; }

.about__cert-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:22px;
  font-weight:700; font-size:14.5px;
  color:var(--coral-deep);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.about__cert-link:hover{ border-color:var(--coral-deep); }
.about__cert-link svg{ transition:transform var(--dur-base) var(--ease); }
.about__cert-link:hover svg{ transform:translateX(3px); }

@media (max-width:860px){
  .about{ grid-template-columns:1fr; }
  .about__media{ max-width:320px; margin:0 auto; }
}

/* wave divider between sections */
.wave-divider{ line-height:0; margin-top:-2px; }
.wave-divider svg{ width:100%; height:60px; display:block; }

/* =========================================================
   SERVICES — pasek kart (jak na referencyjnej stronie)
   ========================================================= */
.services{ background:var(--sage-light); padding:76px 0 112px; overflow:hidden; }

.service-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(82vw, 320px);
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:40px var(--pad) 20px;
  scrollbar-width:none;
}
.service-rail::-webkit-scrollbar{ display:none; }

.service-card{
  scroll-snap-align:start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px 26px;
  display:flex; flex-direction:column;
  transform:rotate(var(--rot, 0deg));
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  will-change:transform;
}
.service-card:hover{
  transform:translateY(-4px) rotate(var(--rot, 0deg));
  box-shadow:0 22px 40px -18px rgba(43,42,51,.16);
  border-color:var(--coral);
  background:#FFFDFA;
}
.service-card__top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
.service-card__icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sage-light); color:var(--coral-deep);
  border:1px solid var(--line);
  transition:background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.service-card:hover .service-card__icon{
  background:var(--coral); color:var(--paper); transform:rotate(-3deg) scale(1.02);
}
.service-card__no{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:20px;
  color:var(--coral-deep);
  background:var(--paper);
  border:2px solid var(--coral-light);
  border-radius:12px;
  width:42px; height:42px;
  transition:background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.service-card:hover .service-card__no{
  background:var(--coral); border-color:var(--coral); color:var(--paper);
  transform:rotate(3deg) scale(1.02);
}
.service-card h3{
  font-family:var(--f-display); font-size:21px; font-weight:600; margin-bottom:10px;
}
.service-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; flex:1; }
.service-card__tags{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;
}
.service-card__tags li{
  font-size:11.5px; font-weight:600; color:var(--coral-deep);
  background:rgba(241,130,90,.1);
  padding:6px 12px; border-radius:100px;
}

/* =========================================================
   WORK STYLE (jak wyglądają zajęcia)
   ========================================================= */
.work-style{
  max-width:var(--container); margin:0 auto;
  padding:124px var(--pad);
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:start;
}
.checklist{
  display:flex; flex-direction:column; gap:18px;
  background:var(--coral-light);
  border-radius:28px;
  padding:40px 34px;
}
.checklist li{
  display:flex; align-items:center; gap:14px;
  font-weight:700; font-size:16px; color:var(--ink);
}
.checklist__dot{
  width:24px; height:24px; border-radius:50%;
  background:var(--coral);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.checklist__dot::after{
  content:'✓'; color:var(--paper); font-size:13px; font-weight:900;
}

@media (max-width:860px){
  .work-style{ grid-template-columns:1fr; }
}

/* =========================================================
   GALLERY — zdjęcia z gabinetu
   ========================================================= */
.gallery{ padding:0 var(--pad) 124px; }
.gallery__grid{
  max-width:var(--container); margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:26px;
}
.gallery__item{
  display:flex;
  flex-direction:column;
}
.gallery__frame{
  display:block;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 20px 44px -26px rgba(43,42,51,.22);
  border:6px solid var(--paper);
  outline:1px solid var(--line);
  line-height:0;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  cursor:pointer;
}
.gallery__frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  transition:transform var(--dur-slow) var(--ease);
}
.gallery__item:hover .gallery__frame{
  transform:translateY(-3px);
  box-shadow:0 24px 46px -22px rgba(43,42,51,.28);
}
.gallery__item:hover .gallery__frame img{ transform:scale(1.03); }
.gallery__caption{
  margin-top:14px;
  text-align:center;
  font-weight:700;
  font-size:14.5px;
  color:var(--ink);
  background:var(--paper-soft);
  border:1px solid var(--line);
  border-radius:100px;
  padding:9px 18px;
}

@media (max-width:860px){
  .gallery__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .gallery__grid{ grid-template-columns:1fr; max-width:340px; }
}

/* =========================================================
   METHODS — animated scroll path
   ========================================================= */
.methods{ background:var(--paper-soft); padding-bottom:80px; }

.methods__stepper{
  max-width:820px; margin:0 auto;
  padding:0 var(--pad);
}

.methods__tabs{
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--line);
}
.methods__tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  background:none;
  border:none;
  padding:0 4px 18px;
  cursor:pointer;
  text-align:left;
  opacity:.45;
  transition:opacity var(--dur-base) var(--ease);
}
.methods__tab:hover{ opacity:.75; }
.methods__tab.is-active{ opacity:1; }
.methods__tab-no{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(22px, 3.2vw, 30px);
  color:var(--coral-deep);
}
.methods__tab-label{
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}
@media (max-width:560px){
  .methods__tab-label{ display:none; }
  .methods__tab{ align-items:center; }
}

.methods__progress{
  position:relative;
  height:3px;
  background:transparent;
  margin-top:-1px;
}
.methods__progress-fill{
  position:absolute;
  top:0; left:0;
  height:3px;
  width:25%;
  background:var(--coral);
  border-radius:2px;
  transition:width .5s var(--ease);
}

.methods__panels{
  position:relative;
  min-height:96px;
  padding-top:30px;
}
.methods__panel{
  font-size:17px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:60ch;
  opacity:0;
  transform:translateY(8px);
  animation:methodsPanelIn .4s var(--ease) forwards;
}
@keyframes methodsPanelIn{
  to{ opacity:1; transform:translateY(0); }
}

.methods__hint{
  margin-top:18px;
  font-size:12.5px;
  color:var(--ink-soft);
  opacity:.7;
  transition:opacity var(--dur-base) var(--ease);
}
.methods__hint.is-hidden{ opacity:0; }

/* =========================================================
   AGES
   ========================================================= */
.ages{ padding-bottom:76px; }
.age-rail{
  max-width:var(--container); margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.age-card{
  background:var(--sage);
  color:var(--paper);
  border-radius:28px;
  padding:30px 24px;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}
.age-card:nth-child(1){ background:var(--coral); }
.age-card:nth-child(2){ background:var(--sage); }
.age-card:nth-child(3){ background:var(--ink); }
.age-card:nth-child(4){ background:var(--sage-deep); }
.age-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 38px -18px rgba(43,42,51,.35);
  filter:brightness(1.04);
}
.age-card__range{
  display:block;
  font-family:var(--f-display); font-weight:700; font-size:26px;
  margin-bottom:14px;
}
.age-card p{ font-size:14.5px; line-height:1.6; opacity:.92; }

@media (max-width:1024px){
  .age-rail{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .age-rail{ grid-template-columns:1fr; }
}

/* =========================================================
   WHY
   ========================================================= */
.why{ background:var(--ink); color:var(--paper); padding:24px 0 124px; }
.why .section-head__title{ color:var(--paper); }
.why .section-head__eyebrow{ color:var(--coral); }
.why .section-head__eyebrow::before{ background:var(--coral); }

.why__inner{ max-width:var(--container); margin:0 auto; padding:0 var(--pad); }
.why__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:20px;
}
.why-card{
  background:rgba(255,249,242,.06);
  border:1px solid rgba(255,249,242,.14);
  border-radius:24px;
  padding:34px 28px;
  transition:transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.why-card:hover{
  transform:translateY(-4px);
  background:rgba(255,249,242,.1);
  box-shadow:0 18px 34px -18px rgba(0,0,0,.35);
}
.why-card__mark{ display:inline-flex; margin-bottom:16px; }
.why-card h3{ font-family:var(--f-display); font-weight:600; font-size:20px; margin-bottom:10px; }
.why-card p{ color:rgba(255,249,242,.7); font-size:14.5px; line-height:1.6; }

@media (max-width:860px){
  .why__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{ padding:112px 0 124px; overflow:hidden; }
.testimonials__track{
  display:flex; gap:28px;
  margin-top:50px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
  user-select:none;
  -webkit-overflow-scrolling:touch;
}
.testimonials__track::-webkit-scrollbar{ display:none; }
.testimonials__track.is-dragging{ cursor:grabbing; scroll-behavior:auto; }

.testimonials blockquote{
  position:relative;
  width:340px; flex-shrink:0;
  border-radius:24px;
  padding:34px 30px 30px;
  overflow:hidden;
}
.testi-card--1{ background:var(--coral-light); }
.testi-card--2{ background:var(--sage-light); }
.testi-card--3{ background:var(--coral-deep); }
.testi-card--3 .testi-card__quote{ color:rgba(255,255,255,.28); }

.testi-card__quote{
  position:absolute;
  top:2px; right:18px;
  font-family:var(--f-display);
  font-size:76px;
  line-height:1;
  color:rgba(43,42,51,.09);
  pointer-events:none;
  user-select:none;
}
.testimonials p{
  position:relative;
  font-size:15.5px; line-height:1.6; font-style:italic; color:var(--ink);
}
.testi-card--3 p{ color:var(--paper); }

/* =========================================================
   PRACTICAL (location / offer / hours) — przebudowane
   ========================================================= */
.practical{ padding:0 var(--pad) 124px; }
.practical__shell{
  max-width:var(--container); margin:0 auto;
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(43,42,51,.22);
}

.practical__side{
  background:var(--ink);
  color:var(--paper);
  padding:48px 40px;
  display:flex;
  flex-direction:column;
}
.practical__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:18px; color:var(--coral);
}
.practical__eyebrow-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  border-radius:50%;
  background:rgba(241,130,90,.16);
  color:currentColor;
  flex:none;
}
.practical__place{
  font-family:var(--f-display); font-weight:600; font-size:38px;
  margin-bottom:18px; color:var(--paper);
}
.practical__text{
  color:rgba(255,249,242,.7); font-size:15px; line-height:1.7;
  flex:1;
}
.practical__badge{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:28px;
  font-size:13.5px; font-weight:700;
  color:var(--paper);
  background:rgba(255,249,242,.08);
  border:1px solid rgba(255,249,242,.16);
  padding:12px 18px;
  border-radius:100px;
  width:fit-content;
}
.practical__badge-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--sage);
  box-shadow:0 0 0 4px rgba(143,168,136,.3);
}

.practical__main{
  background:var(--paper);
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  gap:36px;
}
.practical__eyebrow--light{ color:var(--coral-deep); }

.practical__block{ display:flex; flex-direction:column; }

.price-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  gap:20px;
}
.price-row:last-child{ border-bottom:none; }
.price-row span{ font-size:15px; color:var(--ink-soft); }
.price-row span small{ display:block; font-size:12.5px; margin-top:2px; opacity:.8; }
.price-row strong{
  font-family:var(--f-display); font-weight:700; font-size:24px;
  color:var(--sage-deep); white-space:nowrap;
}
.price-row strong small{ font-family:var(--f-body); font-size:14px; font-weight:600; }

.hours-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 28px;
}
.hours-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:14.5px; padding:11px 0;
  border-bottom:1px solid var(--line);
}
.hours-row span{ color:var(--ink-soft); }
.hours-row strong{ font-weight:700; }
.hours-row--closed{ grid-column:1/-1; }
.hours-row--closed strong{ color:var(--coral-deep); }

@media (max-width:860px){
  .practical__shell{ grid-template-columns:1fr; }
  .practical__side, .practical__main{ padding:38px 28px; }
  .hours-grid{ grid-template-columns:1fr; gap:0; }
  .hours-row--closed{ grid-column:auto; }
}

/* Żywy status "Teraz przyjmuję / zamknięte" — liczony w JS (home.js) */
.status-badge{
  display:inline-flex; align-items:center; gap:9px;
  margin:14px 0 20px;
  font-size:13.5px; font-weight:700;
  padding:9px 16px 9px 12px;
  border-radius:100px;
  background:var(--paper-soft);
  color:var(--ink-soft);
  width:fit-content;
}
.status-badge__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--ink-soft);
  flex:none;
}
.status-badge.is-open{ color:var(--sage-deep); background:var(--sage-light); }
.status-badge.is-open .status-badge__dot{
  background:var(--sage-deep);
  box-shadow:0 0 0 4px rgba(95,120,88,.18);
  animation:statusPulse 2.2s ease-in-out infinite;
}
.status-badge.is-closed{ color:var(--coral-deep); background:var(--coral-light); }
.status-badge.is-closed .status-badge__dot{ background:var(--coral-deep); }
@keyframes statusPulse{
  0%, 100%{ box-shadow:0 0 0 4px rgba(95,120,88,.18); }
  50%{ box-shadow:0 0 0 7px rgba(95,120,88,.08); }
}

/* Mapa osadzona wewnątrz panelu "Lokalizacja" (żeby nie powielać sekcji
   lokalizacji na stronie) */
.practical__map{
  margin-top:22px;
  border-radius:18px;
  overflow:hidden;
  height:190px;
  border:1px solid rgba(255,249,242,.16);
  filter:saturate(.9);
}
.practical__map iframe{ display:block; width:100%; height:100%; }
.practical__map-cta{
  display:inline-flex; align-items:center; gap:9px;
  width:fit-content;
  margin-top:14px;
  padding:11px 20px;
  font-size:13.5px;
  border-color:rgba(255,249,242,.28);
  color:var(--paper);
  background:transparent;
}
.practical__map-cta:hover{
  border-color:rgba(255,249,242,.5);
  color:var(--paper);
  background:rgba(255,249,242,.08);
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ padding:124px var(--pad) 100px; }
.contact__blob{
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:var(--coral-light); opacity:.5; filter:blur(10px);
  top:-200px; right:-200px; z-index:0;
  -webkit-mask-image:radial-gradient(circle at center, #000 45%, transparent 78%);
  mask-image:radial-gradient(circle at center, #000 45%, transparent 78%);
}
.contact__inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }
.contact__title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(34px, 5vw, 50px); margin-bottom:18px;
}
.contact__details{ display:flex; gap:28px; flex-wrap:wrap; margin-top:30px; }
.contact__detail{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:17px;
  padding:14px 22px; border-radius:100px;
  background:var(--paper-soft);
  transition:background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.contact__detail:hover{
  background:var(--coral-light);
  transform:translateY(-3px);
  box-shadow:0 14px 26px -16px rgba(43,42,51,.3);
}
.contact__detail:active{ transition-duration:var(--dur-instant); transform:translateY(0) scale(.98); }
.contact__detail-icon{ display:inline-flex; align-items:center; color:var(--coral-deep); }
.contact__note{ margin-top:16px; font-size:14px; color:var(--ink-soft); }

.contact__form{
  margin-top:50px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  background:var(--paper);
  border-radius:28px;
  padding:36px;
  box-shadow:0 30px 60px -30px rgba(43,42,51,.2);
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field label{ font-weight:700; font-size:13.5px; color:var(--ink-soft); }
.field input, .field textarea{
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--paper-soft);
  padding:13px 16px;
  font-size:15.5px;
  color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{
  color:var(--ink-soft);
  opacity:.65;
  transition:opacity var(--dur-fast) var(--ease);
}
.field input:focus::placeholder, .field textarea:focus::placeholder{ opacity:.4; }
.field input:focus, .field textarea:focus{
  border-color:var(--coral);
  outline:none;
  background:var(--paper);
  box-shadow:0 0 0 4px rgba(241,130,90,.14);
}
.contact__form .btn--wide{ grid-column:1/-1; margin-top:6px; }
.contact__form-note{ grid-column:1/-1; text-align:center; font-size:13px; color:var(--ink-soft); transition:color var(--dur-fast) var(--ease); }

/* subtelne pojawienie się komunikatu (błędu / potwierdzenia) — działa
   automatycznie przy zmianie display:none → widoczny, bez dodatkowego JS */

.field-error, .contact__form-note.is-updated{
  animation:fieldMessageIn var(--dur-base) var(--ease);
}

@media (max-width:640px){
  .contact__form{ grid-template-columns:1fr; padding:26px; }
}

/* =========================================================
   SCROLL REVEAL utility
   ========================================================= */
[data-reveal]{
  opacity:0; transform:translateY(var(--reveal-distance));
  transition:opacity var(--reveal-duration) var(--ease), transform var(--reveal-duration) var(--ease);
  will-change:opacity, transform;
}
[data-reveal].is-visible{
  opacity:1; transform:translateY(0);
}

/* elementy wewnątrz sekcji z data-reveal pojawiają się z niewielkim
   opóźnieniem (stagger) — nagłówek i tekst dostają fade + translateY */
[data-reveal] .section-head__eyebrow,
[data-reveal] .section-head__title,
[data-reveal] .section-head__lead,
[data-reveal].section-head__eyebrow,
[data-reveal].section-head__title,
[data-reveal].section-head__lead{
  opacity:0; transform:translateY(14px);
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.section-head__eyebrow,
.section-head__title,
.section-head__lead{
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
[data-reveal].is-visible .section-head__eyebrow{ transition-delay:.02s; }
[data-reveal].is-visible .section-head__title{ transition-delay:.08s; }
[data-reveal].is-visible .section-head__lead{ transition-delay:.14s; }
[data-reveal].is-visible .section-head__eyebrow,
[data-reveal].is-visible .section-head__title,
[data-reveal].is-visible .section-head__lead{ opacity:1; transform:translateY(0); }

/* stagger dla siatek kart — 70ms odstępu między elementami.
   Karty, które mają już własny hover-lift (age/why/file/service), dostają
   tylko fade (bez transform w stanie końcowym), żeby nie kolidować ze
   specyficznością reguły hover. Elementy bez własnego hover-transform
   (galeria, checklist) dostają pełne fade + translateY. */
.age-rail > .age-card,
.why__grid > .why-card,
.downloads__grid > .file-card,
.service-rail > .service-card{
  opacity:0;
  transition:opacity var(--dur-base) var(--ease);
}
.gallery__grid > .gallery__item,
.checklist > li{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
[data-reveal].is-visible .age-rail > .age-card,
.age-rail.is-visible > .age-card,
[data-reveal].is-visible .why__grid > .why-card,
.why__grid.is-visible > .why-card,
[data-reveal].is-visible .downloads__grid > .file-card,
.downloads__grid.is-visible > .file-card,
.service-rail.is-visible > .service-card{
  opacity:1;
}
[data-reveal].is-visible .gallery__grid > .gallery__item,
.gallery__grid.is-visible > .gallery__item,
[data-reveal].is-visible .checklist > li,
.checklist.is-visible > li{
  opacity:1; transform:translateY(0);
}
.service-rail > .service-card:nth-child(1),.age-rail > .age-card:nth-child(1),.why__grid > .why-card:nth-child(1),.gallery__grid > .gallery__item:nth-child(1),.checklist > li:nth-child(1),.downloads__grid > .file-card:nth-child(1){ transition-delay:.0s; }
.service-rail > .service-card:nth-child(2),.age-rail > .age-card:nth-child(2),.why__grid > .why-card:nth-child(2),.gallery__grid > .gallery__item:nth-child(2),.checklist > li:nth-child(2),.downloads__grid > .file-card:nth-child(2){ transition-delay:.07s; }
.service-rail > .service-card:nth-child(3),.age-rail > .age-card:nth-child(3),.why__grid > .why-card:nth-child(3),.gallery__grid > .gallery__item:nth-child(3),.checklist > li:nth-child(3),.downloads__grid > .file-card:nth-child(3){ transition-delay:.14s; }
.service-rail > .service-card:nth-child(4),.gallery__grid > .gallery__item:nth-child(4),.checklist > li:nth-child(4),.downloads__grid > .file-card:nth-child(4){ transition-delay:.21s; }
.service-rail > .service-card:nth-child(5),.checklist > li:nth-child(5),.downloads__grid > .file-card:nth-child(5){ transition-delay:.28s; }
.service-rail > .service-card:nth-child(6),.downloads__grid > .file-card:nth-child(6){ transition-delay:.35s; }
.service-rail > .service-card:nth-child(7),.downloads__grid > .file-card:nth-child(7){ transition-delay:.42s; }
.downloads__grid > .file-card:nth-child(n+8){ transition-delay:.48s; }

/* delikatne "wejście" zdjęcia — skala 1.05 → 1 razem z fade (nie koliduje z hover-zoomem galerii) */
[data-reveal] .about__photo-frame img{
  transform:scale(1.03);
  transition:transform var(--dur-slow) var(--ease);
}
[data-reveal].is-visible .about__photo-frame img{
  transform:scale(1);
}

/* =========================================================
   KARTY PLIKÓW — gotowe do pobrania (CMS)
   ========================================================= */
.file-card__action--ready{
  background:var(--coral, #D6785A);
  color:#fff;
  cursor:pointer;
  text-decoration:none;
}
.file-card__action--ready:hover{
  filter:brightness(1.05);
}
.file-card__action--ready:active{
  filter:brightness(.97);
}

/* =========================================================
   BANER OGŁOSZEŃ (CMS)
   ========================================================= */
.site-banner{
  position:fixed;
  top:0; left:0; right:0;
  z-index:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:linear-gradient(135deg, var(--coral, #D6785A), #c25f3f);
  color:#fff;
  padding:12px 48px 12px 20px;
  font-size:.92rem;
  font-weight:600;
  text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.site-banner__inner{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.site-banner__emoji{ font-size:1.15rem; }
.site-banner__close{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.18);
  border:none;
  color:#fff;
  width:26px; height:26px;
  border-radius:50%;
  cursor:pointer;
  font-size:.85rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-banner__close:hover{
  background:rgba(255,255,255,.32);
  transform:translateY(-50%) scale(1.02);
}
.site-banner__close:active{ transform:translateY(-50%) scale(.96); }
@media (max-width:600px){
  .site-banner{
    padding:10px 42px 10px 14px;
    font-size:.82rem;
  }
  .site-banner__close{ right:10px; width:23px; height:23px; }
}

/* =========================================================
   BANER PEŁNOEKRANOWY / BLOKUJĄCY (CMS)
   ========================================================= */
.site-banner-modal{
  position:fixed;
  inset:0;
  z-index:700;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(63,44,34,.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  padding:24px;
}
.site-banner-modal__card{
  background:#fff;
  border-radius:24px;
  padding:38px 32px;
  max-width:440px;
  width:100%;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  animation:bannerModalPop .32s var(--ease);
}

.site-banner-modal__emoji{
  font-size:2.6rem;
  display:block;
  margin-bottom:14px;
}
.site-banner-modal__text{
  font-size:1.05rem;
  color:var(--ink);
  line-height:1.6;
  margin:0 0 26px;
}
.site-banner-modal .btn{ margin:0 auto; }
@media (max-width:480px){
  .site-banner-modal__card{ padding:30px 24px; }
  .site-banner-modal__emoji{ font-size:2.2rem; }
  .site-banner-modal__text{ font-size:.95rem; }
}

/* =========================================================
   INTRO / COOKIE BAR / BAŃKI MYDLANE / LINK DO PLIKÓW W STOPCE
   (wcześniej inline <style> w index.php)
   ========================================================= */
  .bubbles-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:60;
    overflow:hidden;
  }
  .bubble{
    position:absolute;
    top:0;
    left:0;
    border-radius:50%;
    pointer-events:auto;
    cursor:grab;
    will-change:transform;
    backdrop-filter:blur(1.5px) saturate(115%);
    -webkit-backdrop-filter:blur(1.5px) saturate(115%);
    box-shadow:inset -3px -4px 8px rgba(0,0,0,0.03), inset 3px 4px 8px rgba(255,255,255,0.35), 0 3px 10px rgba(80,50,30,0.05);
    touch-action:none;
    opacity:.55;
    transition:box-shadow .2s ease, opacity .3s ease;
  }
  .bubble:hover{
    opacity:.85;
    box-shadow:inset -3px -4px 8px rgba(0,0,0,0.03), inset 3px 4px 8px rgba(255,255,255,0.55), 0 4px 14px rgba(80,50,30,0.08);
  }
  .bubble:active{
    cursor:grabbing;
  }
  .bubble.is-popping{
    animation:bubblePop .4s cubic-bezier(.36,.07,.19,.97) forwards;
    pointer-events:none;
  }
  .bubble__shine{
    position:absolute;
    top:16%;
    left:22%;
    width:28%;
    height:18%;
    border-radius:50%;
    background:rgba(255,255,255,0.6);
    filter:blur(1px);
    pointer-events:none;
  }
  @keyframes bubblePop{
    0%{transform:scale(var(--bp-scale,1)) rotate(0deg);opacity:.7;}
    55%{transform:scale(calc(var(--bp-scale,1) * 1.4)) rotate(8deg);opacity:.4;}
    100%{transform:scale(calc(var(--bp-scale,1) * 1.8)) rotate(14deg);opacity:0;}
  }
  .bubble-spark{
    position:fixed;
    top:0;
    left:0;
    border-radius:50%;
    pointer-events:none;
    z-index:61;
    animation:sparkBurst .65s ease-out forwards;
  }
  @keyframes sparkBurst{
    0%{transform:translate(0,0) scale(1);opacity:1;}
    100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){
    .bubbles-layer{display:none;}
  }
  @media (max-width: 640px){
    .bubbles-layer{opacity:.8;}
  }

  /* ===================== INTRO ===================== */
  .intro-overlay{
    position:fixed;
    inset:0;
    z-index:500;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--paper, #FBF3E7);
    overflow:hidden;
  }
  .intro-overlay__bg{
    position:absolute;
    inset:-15%;
    background:radial-gradient(circle at 50% 45%, var(--coral, #D6785A) 0%, transparent 62%);
    opacity:.14;
    animation:introPulseBg 2.6s ease-in-out infinite;
  }
  @keyframes introPulseBg{
    0%,100%{ transform:scale(1); opacity:.12; }
    50%{ transform:scale(1.18); opacity:.22; }
  }
  .intro-stage{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    max-width:88vw;
  }
  .toy-blocks{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    perspective:600px;
  }
  .toy-row{
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .toy-block{
    width:clamp(28px, 7.5vw, 48px);
    height:clamp(28px, 7.5vw, 48px);
    border-radius:11px;
    background:var(--bg, #D6785A);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
      inset 0 -5px 0 rgba(0,0,0,.12),
      inset 0 3px 0 rgba(255,255,255,.25),
      0 10px 18px rgba(80,50,30,.22);
    opacity:0;
    transform:translateY(-260px) rotate(-18deg);
    animation-name:blockDrop, blockWiggle;
    animation-duration:.68s, .5s;
    animation-timing-function:cubic-bezier(.34,1.05,.64,1), ease-in-out;
    animation-fill-mode:forwards, none;
    animation-delay:var(--bd, 0s), calc(var(--bd, 0s) + .74s);
  }
  .toy-block span{
    font-size:clamp(.95rem, 3.6vw, 1.4rem);
    font-weight:800;
    color:#fff;
    text-shadow:0 2px 0 rgba(0,0,0,.14);
    transform:translateY(-1px);
  }
  @keyframes blockDrop{
    0%{ transform:translateY(-260px) rotate(-18deg); opacity:0; }
    52%{ opacity:1; }
    68%{ transform:translateY(9px) rotate(6deg); }
    84%{ transform:translateY(-5px) rotate(-3deg); }
    100%{ transform:translateY(0) rotate(0deg); opacity:1; }
  }
  @keyframes blockWiggle{
    0%,100%{ transform:rotate(0deg) scale(1); }
    35%{ transform:rotate(-7deg) scale(1.05); }
    65%{ transform:rotate(6deg) scale(1.05); }
  }
  .intro-tagline{
    margin:14px 0 0;
    font-family:'Caveat', cursive;
    font-weight:700;
    font-size:2.1rem;
    letter-spacing:.01em;
    color:var(--coral, #D6785A);
  }
  .intro-tagline span{
    display:inline-block;
    opacity:0;
    transform:translateY(6px) rotate(-1deg);
    animation:introLetterIn .25s ease forwards;
    animation-delay:calc(2.3s + var(--cd, 0s));
  }
  @media (max-width:480px){
    .intro-tagline{ font-size:1.7rem; }
  }
  @keyframes introLetterIn{
    to{ opacity:1; transform:translateY(0) rotate(-1deg); }
  }
  .intro-overlay.is-leaving{
    animation:introFadeOut .6s ease forwards;
    pointer-events:none;
  }
  .intro-overlay.is-leaving .toy-block{
    animation:blockTopple .45s ease-in forwards;
    animation-delay:calc(var(--bd, 0s) * .35);
  }
  .intro-overlay.is-leaving .intro-tagline{
    animation:introFadeOut .3s ease forwards;
  }
  @keyframes blockTopple{
    to{ transform:translateY(140px) rotate(75deg); opacity:0; }
  }
  @keyframes introFadeOut{
    to{ opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .intro-overlay{ display:none; }
  }

  /* ===================== LINK "PLIKI DO POBRANIA" W STOPCE ===================== */
  .footer__files-link{
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin:6px 0 30px;
    padding:6px 20px 6px 6px;
    background:rgba(255,249,242,.07);
    border:1px solid rgba(255,249,242,.14);
    color:var(--paper, #FBF3E7);
    font-weight:600;
    font-size:.92rem;
    text-decoration:none;
    border-radius:999px;
    transition:background .2s ease, transform .2s ease, border-color .2s ease;
  }
  .footer__files-link:hover{
    background:rgba(255,249,242,.14);
    border-color:rgba(255,249,242,.28);
    transform:translateY(-2px);
  }
  .footer__files-link__icon{
    width:34px; height:34px;
    border-radius:50%;
    background:var(--coral, #D6785A);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    flex-shrink:0;
  }
  .footer__files-link__arrow{
    transition:transform .2s ease;
    opacity:.7;
  }
  .footer__files-link:hover .footer__files-link__arrow{
    transform:translateX(3px);
    opacity:1;
  }
  @media (max-width:480px){
    .footer__files-link{
      font-size:.88rem;
    }
  }

  /* ===================== COOKIE BAR ===================== */
  .cookie-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:300;
    display:flex;
    justify-content:center;
    padding:16px;
    transform:translateY(120%);
    opacity:0;
    transition:transform .4s var(--ease, cubic-bezier(.22,.61,.36,1)), opacity .4s var(--ease, cubic-bezier(.22,.61,.36,1));
    pointer-events:none;
  }
  .cookie-bar.is-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .cookie-bar.is-hiding{
    transform:translateY(120%);
    opacity:0;
  }
  .cookie-bar__inner{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    justify-content:space-between;
    max-width:760px;
    width:100%;
    background:#fff;
    border-radius:20px;
    padding:18px 24px;
    box-shadow:0 18px 40px rgba(80,50,30,.18);
  }
  .cookie-bar__text{
    margin:0;
    font-size:.88rem;
    line-height:1.45;
    color:#4a382c;
    flex:1 1 320px;
  }
  .cookie-bar__icon{ margin-right:4px; }
  .cookie-bar__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .cookie-bar__btn{
    white-space:nowrap;
    font-size:.85rem;
    padding:10px 18px;
  }
  @media (max-width:560px){
    .cookie-bar__inner{ flex-direction:column; align-items:stretch; text-align:center; }
    .cookie-bar__actions{ justify-content:center; }
  }
/* =========================================================
   FORMULARZ HASŁA DO POBRANIA PLIKU (download.php)
   (wcześniej inline <style> w download.php)
   ========================================================= */
body:has(.download-password-box){
  font-family:'Nunito Sans', system-ui, sans-serif; background:#FBF3E7; color:#3f2c22;
  display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; padding:20px;
}
.download-password-box{
  background:#fff; border-radius:20px; padding:30px; max-width:360px; width:100%;
  box-shadow:0 18px 40px rgba(80,50,30,.10); text-align:center;
}
.download-password-box h1{ font-size:1.2rem; margin:0 0 6px; }
.download-password-box p{ color:#6b5d50; font-size:.9rem; margin:0 0 20px; }
.download-password-box input[type="password"]{
  width:100%; padding:11px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.15);
  font-size:.95rem; margin-bottom:14px; box-sizing:border-box;
}
.download-password-box button{
  width:100%; padding:12px 20px; border-radius:999px; background:#D6785A; color:#fff;
  font-weight:700; border:none; cursor:pointer; font-size:.95rem;
}
.download-password-box__error{ background:#fbe4de; color:#9c3b23; padding:10px 14px; border-radius:10px; font-size:.85rem; margin-bottom:14px; }
.download-password-box__back{ display:inline-block; margin-top:16px; color:#D6785A; font-size:.85rem; text-decoration:none; }

/* =========================================================
   REZERWACJA — kalendarz i formularz umawiania wizyty
   (wcześniej inline <style> w rezerwacja.php)
   ========================================================= */
  /* ===================== NAGŁÓWEK PODSTRONY ===================== */
  .subpage-hero{
    padding:150px 24px 56px;
    text-align:center;
    background:var(--paper, #FBF3E7);
  }
  @keyframes subpageHeroIn{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes subpageHeroLinkIn{
    from{ opacity:0; transform:translateY(4px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .subpage-hero__eyebrow, .subpage-hero__title, .subpage-hero__lead{
    animation:subpageHeroIn .4s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
  }
  .subpage-hero__back{
    animation:subpageHeroLinkIn .3s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
  }
  .subpage-hero__eyebrow{ animation-delay:.02s; }
  .subpage-hero__title{ animation-delay:.07s; }
  .subpage-hero__lead{ animation-delay:.13s; }
  .subpage-hero__back{ animation-delay:.2s; }
  .subpage-hero__eyebrow{
    display:inline-block;
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--coral, #D6785A);
    font-weight:700;
    margin:0 0 10px;
  }
  .subpage-hero__title{
    margin:0 0 14px;
    font-size:clamp(1.9rem, 4.5vw, 2.7rem);
    color:#3f2c22;
  }
  .subpage-hero__lead{
    max-width:580px;
    margin:0 auto;
    color:#6b5d50;
    font-size:1rem;
    line-height:1.65;
  }
  .subpage-hero__back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:22px;
    font-size:.88rem;
    font-weight:600;
    color:var(--coral, #D6785A);
    text-decoration:none;
  }
  .subpage-hero__back:hover{ text-decoration:underline; }

  @media (max-width:560px){
    .subpage-hero{ padding-top:120px; }
  }

  /* ===================== COOKIE BAR ===================== */
  .cookie-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:300;
    display:flex;
    justify-content:center;
    padding:16px;
    transform:translateY(120%);
    opacity:0;
    transition:transform .4s var(--ease, cubic-bezier(.22,.61,.36,1)), opacity .4s var(--ease, cubic-bezier(.22,.61,.36,1));
    pointer-events:none;
  }
  .cookie-bar.is-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .cookie-bar.is-hiding{
    transform:translateY(120%);
    opacity:0;
  }
  .cookie-bar__inner{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    justify-content:space-between;
    max-width:760px;
    width:100%;
    background:#fff;
    border-radius:20px;
    padding:18px 24px;
    box-shadow:0 18px 40px rgba(80,50,30,.18);
  }
  .cookie-bar__text{
    margin:0;
    font-size:.88rem;
    line-height:1.45;
    color:#4a382c;
    flex:1 1 320px;
  }
  .cookie-bar__icon{ margin-right:4px; }
  .cookie-bar__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .cookie-bar__btn{
    white-space:nowrap;
    font-size:.85rem;
    padding:10px 18px;
  }
  @media (max-width:560px){
    .cookie-bar__inner{ flex-direction:column; align-items:stretch; text-align:center; }
    .cookie-bar__actions{ justify-content:center; }
  }
  .dzien-owijka-pub{
    position:relative;
  }
  .dzien-mini-dymek{
    position:absolute;
    bottom:100%; left:50%;
    transform:translateX(-50%) translateY(-8px);
    background:var(--ink);
    color:#fff;
    padding:9px 14px;
    border-radius:12px;
    font-size:.76rem;
    font-weight:700;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:6px;
    box-shadow:0 10px 24px rgba(0,0,0,.22);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:50;
    text-align:left;
    line-height:1.4;
    transition:opacity var(--dur-fast, .2s) var(--ease, cubic-bezier(.22,.61,.36,1)), visibility var(--dur-fast, .2s);
  }
  .dzien-mini-dymek small{ font-weight:600; opacity:.75; font-size:.68rem; }
  .dzien-mini-dymek::after{
    content:'';
    position:absolute;
    top:100%; left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:var(--ink);
  }
  .dzien-owijka-pub:hover .dzien-mini-dymek{ opacity:1; visibility:visible; }

  /* ramka pojawiająca się natychmiast po najechaniu na KAŻDY dzień */
  .dzien-owijka-pub::after{
    content:'';
    position:absolute;
    inset:-4px;
    border-radius:13px;
    border:2px solid var(--coral);
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
  }
  .dzien-owijka-pub:hover::after{ opacity:.9; }

  /* statyczny, nie migający znacznik dzisiejszej daty */
  .ramka-dzisiaj{
    position:absolute;
    inset:-4px;
    border-radius:13px;
    border:2px solid rgba(214,120,90,.4);
    pointer-events:none;
  }

  /* delikatna mikrointerakcja focus dla pól formularza rezerwacji */
  #rezerwacjaForm input[type="text"],
  #rezerwacjaForm input[type="tel"],
  #rezerwacjaForm input[type="email"],
  #rezerwacjaForm textarea{
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  #rezerwacjaForm input[type="text"]:focus,
  #rezerwacjaForm input[type="tel"]:focus,
  #rezerwacjaForm input[type="email"]:focus,
  #rezerwacjaForm textarea:focus{
    border-color:var(--coral, #D6785A) !important;
    outline:none;
    box-shadow:0 0 0 4px rgba(214,120,90,.14);
  }
/* =========================================================
   STREFA RODZICA — ekran z kodem dostępu
   (wcześniej inline <style> w strefa-rodzica.php)
   ========================================================= */
  /* ===================== NAGŁÓWEK PODSTRONY ===================== */
  .subpage-hero{
    padding:150px 24px 56px;
    text-align:center;
    background:var(--paper, #FBF3E7);
  }
  @keyframes subpageHeroIn{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes subpageHeroLinkIn{
    from{ opacity:0; transform:translateY(4px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .subpage-hero__eyebrow, .subpage-hero__title, .subpage-hero__lead{
    animation:subpageHeroIn .4s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
  }
  .subpage-hero__back{
    animation:subpageHeroLinkIn .3s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
  }
  .subpage-hero__eyebrow{ animation-delay:.02s; }
  .subpage-hero__title{ animation-delay:.07s; }
  .subpage-hero__lead{ animation-delay:.13s; }
  .subpage-hero__back{ animation-delay:.2s; }
  #kodInput{ transition:border-color .2s ease, box-shadow .2s ease; }
  #kodInput:focus{ border-color:var(--coral, #D6785A) !important; outline:none; box-shadow:0 0 0 4px rgba(214,120,90,.14); }
  .subpage-hero__eyebrow{
    display:inline-block;
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--coral, #D6785A);
    font-weight:700;
    margin:0 0 10px;
  }
  .subpage-hero__title{
    margin:0 0 14px;
    font-size:clamp(1.9rem, 4.5vw, 2.7rem);
    color:#3f2c22;
  }
  .subpage-hero__lead{
    max-width:580px;
    margin:0 auto;
    color:#6b5d50;
    font-size:1rem;
    line-height:1.65;
  }
  .subpage-hero__back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:22px;
    font-size:.88rem;
    font-weight:600;
    color:var(--coral, #D6785A);
    text-decoration:none;
  }
  .subpage-hero__back:hover{ text-decoration:underline; }

  @media (max-width:560px){
    .subpage-hero{ padding-top:120px; }
  }

  /* ===================== COOKIE BAR ===================== */
  .cookie-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:300;
    display:flex;
    justify-content:center;
    padding:16px;
    transform:translateY(120%);
    opacity:0;
    transition:transform .4s var(--ease, cubic-bezier(.22,.61,.36,1)), opacity .4s var(--ease, cubic-bezier(.22,.61,.36,1));
    pointer-events:none;
  }
  .cookie-bar.is-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .cookie-bar.is-hiding{
    transform:translateY(120%);
    opacity:0;
  }
  .cookie-bar__inner{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    justify-content:space-between;
    max-width:760px;
    width:100%;
    background:#fff;
    border-radius:20px;
    padding:18px 24px;
    box-shadow:0 18px 40px rgba(80,50,30,.18);
  }
  .cookie-bar__text{
    margin:0;
    font-size:.88rem;
    line-height:1.45;
    color:#4a382c;
    flex:1 1 320px;
  }
  .cookie-bar__icon{ margin-right:4px; }
  .cookie-bar__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .cookie-bar__btn{
    white-space:nowrap;
    font-size:.85rem;
    padding:10px 18px;
  }
  @media (max-width:560px){
    .cookie-bar__inner{ flex-direction:column; align-items:stretch; text-align:center; }
    .cookie-bar__actions{ justify-content:center; }
  }

/* =========================================================
   PLIKI DO POBRANIA — lista plików i karty
   (wcześniej inline <style> w pliki-do-pobrania.php)
   ========================================================= */
  /* ===================== NAGŁÓWEK PODSTRONY ===================== */
  .subpage-hero{
    padding:150px 24px 56px;
    text-align:center;
    background:var(--paper, #FBF3E7);
  }
  @keyframes subpageHeroIn{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes subpageHeroLinkIn{
    from{ opacity:0; transform:translateY(4px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .subpage-hero__eyebrow, .subpage-hero__title, .subpage-hero__lead{
    animation:subpageHeroIn .4s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
  }
  .subpage-hero__back{
    animation:subpageHeroLinkIn .3s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
  }
  .subpage-hero__eyebrow{ animation-delay:.02s; }
  .subpage-hero__title{ animation-delay:.07s; }
  .subpage-hero__lead{ animation-delay:.13s; }
  .subpage-hero__back{ animation-delay:.2s; }
  .subpage-hero__eyebrow{
    display:inline-block;
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--coral, #D6785A);
    font-weight:700;
    margin:0 0 10px;
  }
  .subpage-hero__title{
    margin:0 0 14px;
    font-size:clamp(1.9rem, 4.5vw, 2.7rem);
    color:#3f2c22;
  }
  .subpage-hero__lead{
    max-width:580px;
    margin:0 auto;
    color:#6b5d50;
    font-size:1rem;
    line-height:1.65;
  }
  .subpage-hero__back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:22px;
    font-size:.88rem;
    font-weight:600;
    color:var(--coral, #D6785A);
    text-decoration:none;
  }
  .subpage-hero__back:hover{ text-decoration:underline; }

  /* ===================== SEKCJA PLIKÓW ===================== */
  .downloads{
    max-width:1140px;
    margin:0 auto;
    padding:8px 24px 110px;
  }
  .downloads__note{
    background:#fff;
    border:1px dashed rgba(214,120,90,.35);
    border-radius:18px;
    padding:16px 20px;
    max-width:760px;
    margin:0 auto 44px;
    text-align:center;
    font-size:.88rem;
    color:#7a6a5b;
    line-height:1.55;
  }
  .downloads__grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px, 240px));
    justify-content:center;
    gap:16px;
  }
  .file-card{
    background:#fff;
    border-radius:18px;
    padding:18px 18px 16px;
    box-shadow:0 10px 24px rgba(80,50,30,.07);
    border:1px solid rgba(0,0,0,.04);
    display:flex;
    flex-direction:column;
    gap:7px;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .file-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(80,50,30,.13);
    background:#FFFDFA;
  }
  .file-card__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
  }
  .file-card__icon{
    width:36px;
    height:36px;
    border-radius:10px;
    background:var(--sage-light, #E7EFE1);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.05rem;
    flex-shrink:0;
    overflow:hidden;
  }
  .file-card__icon img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .file-card__type{
    font-size:.62rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--coral, #D6785A);
    background:rgba(214,120,90,.1);
    padding:3px 8px;
    border-radius:999px;
    white-space:nowrap;
  }
  .file-card h3{
    margin:1px 0 0;
    font-size:.92rem;
    color:#3f2c22;
    line-height:1.3;
  }
  .file-card p{
    margin:0;
    font-size:.78rem;
    color:#6b5d50;
    line-height:1.45;
    flex:1;
  }
  .file-card__action{
    margin-top:4px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    font-size:.74rem;
    font-weight:700;
    padding:7px 13px;
    border-radius:999px;
    background:#f1e7da;
    color:#9c8a78;
    cursor:not-allowed;
  }
  .file-card__action--ready{
    background:var(--coral, #D6785A);
    color:#fff;
    cursor:pointer;
    text-decoration:none;
    transition:filter .2s ease, transform .2s ease;
  }
  .file-card__action--ready:hover{
    filter:brightness(1.05);
    transform:scale(1.04);
  }
  .file-card__action--ready:active{ transform:scale(.97); }
  @media (max-width:560px){
    .subpage-hero{ padding-top:120px; }
  }

  /* ===================== COOKIE BAR ===================== */
  .cookie-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:300;
    display:flex;
    justify-content:center;
    padding:16px;
    transform:translateY(120%);
    opacity:0;
    transition:transform .4s var(--ease, cubic-bezier(.22,.61,.36,1)), opacity .4s var(--ease, cubic-bezier(.22,.61,.36,1));
    pointer-events:none;
  }
  .cookie-bar.is-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .cookie-bar.is-hiding{
    transform:translateY(120%);
    opacity:0;
  }
  .cookie-bar__inner{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    justify-content:space-between;
    max-width:760px;
    width:100%;
    background:#fff;
    border-radius:20px;
    padding:18px 24px;
    box-shadow:0 18px 40px rgba(80,50,30,.18);
  }
  .cookie-bar__text{
    margin:0;
    font-size:.88rem;
    line-height:1.45;
    color:#4a382c;
    flex:1 1 320px;
  }
  .cookie-bar__icon{ margin-right:4px; }
  .cookie-bar__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .cookie-bar__btn{
    white-space:nowrap;
    font-size:.85rem;
    padding:10px 18px;
  }
  @media (max-width:560px){
    .cookie-bar__inner{ flex-direction:column; align-items:stretch; text-align:center; }
    .cookie-bar__actions{ justify-content:center; }
  }

/* =========================================================
   DYMEK: QUIZ "CZY MOJE DZIECKO POTRZEBUJE TERAPII?"
   ========================================================= */
.quiz-bubble{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:250;
  display:flex;
  align-items:center;
  gap:0;
  height:56px;
  padding:0;
  border-radius:28px;
  border:none;
  background:linear-gradient(135deg, var(--coral), var(--coral-deep));
  color:#fff;
  font-family:var(--f-body);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(199,95,56,.55);
  overflow:hidden;
  opacity:0;
  transform:scale(.6);
  animation:quizBubbleIn .45s var(--ease) 2.2s forwards;
  transition:box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.quiz-bubble:hover{
  box-shadow:0 14px 32px -8px rgba(199,95,56,.6);
  transform:translateY(-2px);
}
.quiz-bubble:active{ transform:translateY(0) scale(.97); }

.quiz-bubble__ring{
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(241,130,90,.55);
  animation:quizBubblePing 2.8s ease-out 3s infinite;
  pointer-events:none;
}
@keyframes quizBubblePing{
  0%{ box-shadow:0 0 0 0 rgba(241,130,90,.5); }
  70%{ box-shadow:0 0 0 16px rgba(241,130,90,0); }
  100%{ box-shadow:0 0 0 0 rgba(241,130,90,0); }
}

.quiz-bubble__icon{
  flex:none;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.quiz-bubble__icon svg{ width:22px; height:22px; }

.quiz-bubble__label{
  display:block;
  max-width:0;
  white-space:nowrap;
  overflow:hidden;
  opacity:0;
  transition:max-width .35s var(--ease), opacity .25s var(--ease) .05s, padding .35s var(--ease);
}
.quiz-bubble:hover .quiz-bubble__label,
.quiz-bubble:focus-visible .quiz-bubble__label{
  max-width:200px;
  opacity:1;
  padding-right:22px;
}

@keyframes quizBubbleIn{
  to{ opacity:1; transform:scale(1); }
}
@media (max-width:640px){
  .quiz-bubble{ right:16px; bottom:16px; height:52px; }
  .quiz-bubble__icon{ width:52px; height:52px; }
  .quiz-bubble:hover .quiz-bubble__label{ max-width:0; opacity:0; padding-right:0; } /* na dotyku nie ma hovera — zostaje ikoną */
}
@media (prefers-reduced-motion: reduce){
  .quiz-bubble{ animation:quizBubbleIn .01s linear 0s forwards; opacity:1; transform:scale(1); }
  .quiz-bubble__ring{ animation:none; }
}

.quiz-modal{
  position:fixed;
  inset:0;
  z-index:800;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.quiz-modal[hidden]{ display:none; }
.quiz-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(43,42,51,.45);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.quiz-modal__panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  max-height:min(90vh, 620px);
  overflow-y:auto;
  background:var(--paper);
  border-radius:24px;
  padding:36px 28px 28px;
  box-shadow:0 30px 70px -20px rgba(43,42,51,.4);
  animation:quizPanelIn .3s var(--ease) both;
}
@keyframes quizPanelIn{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.quiz-modal__close{
  position:absolute;
  top:16px; right:16px;
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background:var(--paper-soft);
  color:var(--ink-soft);
  font-size:15px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.quiz-modal__close:hover{ background:var(--coral-light); color:var(--coral-deep); }
.quiz-modal__title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:22px;
  margin:0 0 22px;
  padding-right:24px;
}
.quiz-step__count{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--coral-deep);
  margin:0 0 10px;
}
.quiz-step__question{
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 24px;
}
.quiz-step__actions{
  display:flex;
  gap:12px;
}
.quiz-btn{
  flex:1;
  padding:13px 18px;
  border-radius:999px;
  font-family:var(--f-body);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.quiz-btn:hover{ transform:translateY(-2px); }
.quiz-btn--yes{
  border:none;
  background:var(--coral);
  color:#fff;
}
.quiz-btn--yes:hover{ background:var(--coral-deep); }
.quiz-btn--no{
  border:1.5px solid var(--line);
  background:transparent;
  color:var(--ink);
}
.quiz-btn--no:hover{ border-color:var(--coral); }

.quiz-step--result{ text-align:center; }
.quiz-result__icon{ display:flex; justify-content:center; color:var(--coral-deep); margin-bottom:8px; }
.quiz-result__title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:20px;
  margin:0 0 10px;
}
.quiz-result__text{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0 0 22px;
}
.quiz-result__cta{ width:100%; text-align:center; justify-content:center; }

.quiz-modal__disclaimer{
  margin:22px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11.5px;
  color:var(--ink-soft);
  text-align:center;
  line-height:1.5;
}

/* =========================================================
   ZAPROSZENIE DO OPINII NA GOOGLE
   ========================================================= */
.google-review{
  padding:0 var(--pad) 100px;
}
.google-review__inner{
  max-width:680px;
  margin:0 auto;
  background:var(--sage-light);
  border-radius:26px;
  padding:40px 34px;
  display:flex;
  align-items:center;
  gap:32px;
}
.google-review__col{ flex:1; text-align:left; }
.google-review__stars{
  font-size:22px;
  letter-spacing:4px;
  color:#F5A623;
  margin-bottom:14px;
}
.google-review__score{
  font-size:14.5px;
  color:var(--sage-deep);
  font-weight:700;
  margin:0 0 10px;
}
.google-review__text{
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink);
  max-width:38ch;
  margin:0 0 22px;
}
.google-review__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.google-review__btn svg{ flex:none; }

.google-review__divider{
  width:1px;
  align-self:stretch;
  background:rgba(43,42,51,.12);
  flex:none;
}

.google-review__qr-col{
  flex:none;
  text-align:center;
}
.google-review__qr-frame{
  background:var(--paper);
  border-radius:18px;
  padding:12px;
  box-shadow:0 12px 26px -14px rgba(43,42,51,.25);
  display:inline-flex;
}
.google-review__qr-frame img{
  display:block;
  width:104px;
  height:104px;
  border-radius:6px;
}
.google-review__qr-caption{
  margin:10px 0 0;
  font-size:12px;
  font-weight:700;
  color:var(--sage-deep);
  letter-spacing:.02em;
}

@media (max-width:640px){
  .google-review__inner{
    flex-direction:column;
    text-align:center;
    padding:36px 26px;
  }
  .google-review__col{ text-align:center; }
  .google-review__text{ margin-left:auto; margin-right:auto; }
  .google-review__divider{
    width:100%; height:1px;
  }
}

/* =========================================================
   FAQ — najczęstsze pytania (akordeon)
   ========================================================= */
.faq{
  padding:20px var(--pad) 100px;
}
.faq__list{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.faq__item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:0 22px;
  box-shadow:0 14px 30px -24px rgba(43,42,51,.2);
  transition:box-shadow var(--dur-base) var(--ease);
}
.faq__item.is-open{
  box-shadow:0 18px 36px -22px rgba(43,42,51,.26);
}
.faq__question{
  width:100%;
  background:none;
  border:none;
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
  font-family:inherit;
  font-weight:700;
  font-size:16px;
  text-align:left;
  color:var(--ink);
}
.faq__question:focus-visible{
  outline:2px solid var(--coral-deep);
  outline-offset:4px;
  border-radius:10px;
}
.faq__icon{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--coral-light);
  color:var(--coral-deep);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.faq__item.is-open .faq__icon{
  transform:rotate(180deg);
  background:var(--coral);
  color:var(--paper);
}
/* Animacja rozwijania przez grid-template-rows (0fr → 1fr) — płynna zmiana
   wysokości bez znajomości docelowej wysokości w pikselach i bez JS. */
.faq__answer-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .38s var(--ease);
}
.faq__item.is-open .faq__answer-wrap{
  grid-template-rows:1fr;
}
.faq__answer-inner{
  overflow:hidden;
}
.faq__answer{
  margin:0;
  padding-bottom:20px;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.65;
  max-width:64ch;
}