/* ============================================================
   LOGOPUZZEL — design system (WOW 2026)
   Baza: śliwka #3B2C60 na kremie · akcent akcji: niebieski
   Zmiana bazy = podmień blok :root „BAZA + TŁA" (patrz 03-WIZUAL.md)
   ============================================================ */

/* ---------- Tokeny ---------- */
:root{
  /* BAZA (śliwka mocniejsza) */
  --ink:#3B2C60; --ink-soft:#615478; --ink-mute:#8E82A6;
  /* Warianty: grafit → --ink:#2B2620;--ink-soft:#5C554C;--ink-mute:#8B837A; (+ neutralne tła) */

  /* TŁA z fioletowym podtonem */
  --cream:#FBF7F0; --cream-alt:#F1ECF5; --tint:#EEE8F4;
  --surface:#FFFFFF; --surface-2:#FDFBFF;

  /* AKCENT AKCJI = niebieski */
  --accent:#0A7BC0; --accent-600:#075E96;
  --accent-grad:linear-gradient(180deg,#0A93DB,#0A6EAF);
  --accent-ink:#FFFFFF; --link:#0A6EAF;

  /* AKCENT CIEPŁY = magenta (eyebrow, kategoria HRV) */
  --accent-warm:#DD137B; --accent-warm-ink:#B80F66;

  /* 6 kolorów puzzli (kategorie) */
  --c-logopedia:#FFD400; --c-neurolog:#0093DD; --c-neurofb:#84C225;
  --c-hrv:#DD137B; --c-wzrok:#BAB3D6; --c-tdcs:#DA251D;

  /* Materiał / głębia */
  --glass:rgba(255,255,255,.55); --glass-brd:rgba(59,44,96,.14);
  --line:rgba(59,44,96,.14);
  --shadow-sm:0 1px 2px rgba(40,26,74,.07);
  --shadow-md:0 10px 26px -12px rgba(40,26,74,.22);
  --shadow-lg:0 28px 64px -24px rgba(40,26,74,.34);
  --radius:18px; --radius-lg:26px; --pill:999px;

  /* Typografia */
  --font-display:'Bricolage Grotesque',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-script:'Caveat','Segoe Script',cursive;
  --fs-display:clamp(2.6rem,5.5vw + .6rem,5rem);
  --fs-h2:clamp(1.7rem,2.6vw + .5rem,2.75rem);
  --fs-h3:clamp(1.15rem,1vw + .6rem,1.5rem);
  --fs-lead:clamp(1.05rem,.6vw + .9rem,1.35rem);
  --lh-tight:1.06; --lh-body:1.6;

  --wrap:1160px; --gutter:clamp(1.1rem,4vw,2.5rem);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F3EEF7; --ink-soft:#C9C0DA; --ink-mute:#9A90B2;
    --cream:#171226; --cream-alt:#1F1734; --tint:#241B3C; --surface:#241B38; --surface-2:#2C2144;
    --accent:#33A9E6; --accent-600:#1E8FCC; --accent-grad:linear-gradient(180deg,#39B0EC,#1E8FCC);
    --link:#5BB8F0; --accent-warm:#FF5BA6; --accent-warm-ink:#FF7DB8;
    --glass:rgba(40,28,64,.55); --glass-brd:rgba(255,255,255,.12); --line:rgba(255,255,255,.12);
    --shadow-md:0 10px 26px -12px rgba(0,0,0,.5); --shadow-lg:0 28px 64px -24px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ink:#F3EEF7; --ink-soft:#C9C0DA; --ink-mute:#9A90B2;
  --cream:#171226; --cream-alt:#1F1734; --tint:#241B3C; --surface:#241B38; --surface-2:#2C2144;
  --accent:#33A9E6; --accent-600:#1E8FCC; --accent-grad:linear-gradient(180deg,#39B0EC,#1E8FCC);
  --link:#5BB8F0; --accent-warm:#FF5BA6; --accent-warm-ink:#FF7DB8;
  --glass:rgba(40,28,64,.55); --glass-brd:rgba(255,255,255,.12); --line:rgba(255,255,255,.12);
  --shadow-md:0 10px 26px -12px rgba(0,0,0,.5); --shadow-lg:0 28px 64px -24px rgba(0,0,0,.6);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body); font-size:1.0625rem; line-height:var(--lh-body);
  color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; position:relative;
}
img,svg,video{max-width:100%; display:block; height:auto}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
ul{list-style:none; padding:0}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:var(--lh-tight); letter-spacing:-.015em}

/* Subtelny „papierowy" noise na całej stronie */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme:dark){body::after{opacity:.06}}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--wrap)); margin-inline:auto}
.section{padding-block:clamp(3.5rem,7vw,6rem); position:relative; z-index:2}
.section--alt{background:var(--cream-alt)}
.section--tint{background:var(--tint)}
.section__head{max-width:56ch; margin-bottom:clamp(1.8rem,4vw,3rem)}
.section__head.center{margin-inline:auto; text-align:center}
.eyebrow{font-family:var(--font-script); color:var(--accent-warm-ink); font-size:1.6rem; font-weight:700; line-height:1; display:inline-block; transform:rotate(-2deg)}
.section__head h2{font-size:var(--fs-h2); margin:.3rem 0 .6rem}
.lead{font-size:var(--fs-lead); color:var(--ink-soft); line-height:1.5}
.skip-link{position:absolute; left:-999px; top:0; z-index:200; background:var(--accent); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}

/* Highlight „mazak" */
.mark{position:relative; white-space:nowrap}
.mark::after{content:""; position:absolute; left:-4px; right:-4px; bottom:.06em; height:.36em; background:var(--c-logopedia); border-radius:8px; z-index:-1; opacity:.9}

/* ---------- Przyciski ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:1rem;
  padding:.85rem 1.4rem; border-radius:var(--pill); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--accent-grad); color:var(--accent-ink); box-shadow:0 14px 26px -12px rgba(10,110,175,.8)}
.btn--primary:hover{box-shadow:0 18px 34px -12px rgba(10,110,175,.9)}
.btn--ghost{background:transparent; color:var(--accent-600); border:1.5px solid rgba(10,110,175,.4)}
.btn--ghost:hover{background:rgba(10,110,175,.07); border-color:var(--accent)}
.btn--lg{padding:1rem 1.7rem; font-size:1.08rem}
.btn--white{background:var(--surface); color:var(--accent-600); box-shadow:var(--shadow-md)}
:root[data-theme="dark"] .btn--ghost, @media(prefers-color-scheme:dark){.btn--ghost{color:var(--link)}}

/* ---------- Nagłówek / nawigacja ---------- */
.site-header{position:sticky; top:0; z-index:100; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:var(--glass); border-bottom:1px solid var(--glass-brd)}
.nav{display:flex; align-items:center; gap:1.2rem; padding-block:.7rem}
.nav__brand{display:flex; align-items:center; flex-shrink:0}
.nav__brand img{height:34px; width:auto}
.nav__menu{display:flex; align-items:center; gap:.3rem; margin-left:auto}
.nav__item{position:relative}
.nav__link{display:inline-flex; align-items:center; gap:.3rem; padding:.55rem .7rem; border-radius:12px; font-weight:600; font-size:.97rem; color:var(--ink-soft)}
.nav__link:hover{color:var(--ink); background:rgba(59,44,96,.06); text-decoration:none}
.nav__link[aria-current="page"]{color:var(--ink)}
.nav__link[aria-expanded]{cursor:pointer}
.nav__caret{width:.7em; height:.7em; transition:transform .2s}
.nav__item--open .nav__caret{transform:rotate(180deg)}
.nav__dd{position:absolute; top:calc(100% + .4rem); left:0; min-width:250px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s ease; z-index:60}
.nav__item--open .nav__dd{opacity:1; visibility:visible; transform:translateY(0)}
.nav__dd a{display:flex; gap:.6rem; align-items:center; padding:.6rem .7rem; border-radius:12px; color:var(--ink); font-weight:600; font-size:.95rem}
.nav__dd a:hover{background:var(--cream-alt); text-decoration:none}
.nav__dd .dot{width:10px; height:10px; border-radius:3px; flex-shrink:0}
.nav__cta{margin-left:.4rem}
.nav__toggle{display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:""; display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.nav__toggle span::before{transform:translateY(-7px)}.nav__toggle span::after{transform:translateY(5px)}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:rotate(-45deg) translateY(-1px)}

@media (max-width:900px){
  .nav__toggle{display:inline-flex}
  .nav__menu{position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:.15rem;
    background:var(--surface); border-bottom:1px solid var(--line); padding:1rem var(--gutter) 1.5rem;
    box-shadow:var(--shadow-lg); transform:translateY(-120%); transition:transform .28s ease; margin-left:0; max-height:calc(100vh - 64px); overflow-y:auto}
  .nav__menu.open{transform:translateY(0)}
  .nav__link{padding:.8rem .6rem; font-size:1.05rem}
  .nav__dd{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none;
    max-height:0; overflow:hidden; padding:0 0 0 1.2rem; transition:max-height .25s ease}
  .nav__item--open .nav__dd{max-height:400px; padding-block:.2rem}
  .nav__cta{margin:.6rem 0 0}
}

/* ---------- Aurora (hero / CTA) ---------- */
.aurora{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.aurora i{position:absolute; border-radius:50%; filter:blur(60px); opacity:.42}
.aurora .a1{width:38vw; height:38vw; min-width:280px; min-height:280px; background:var(--c-logopedia); top:-10%; left:-6%; opacity:.4}
.aurora .a2{width:34vw; height:34vw; min-width:260px; min-height:260px; background:var(--c-neurolog); top:6%; right:-8%; opacity:.28}
.aurora .a3{width:30vw; height:30vw; min-width:240px; min-height:240px; background:var(--c-neurofb); bottom:-14%; left:36%; opacity:.22}
.aurora .a4{width:24vw; height:24vw; min-width:200px; min-height:200px; background:var(--c-wzrok); top:20%; right:22%; opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .aurora i{animation:float 18s ease-in-out infinite alternate}
  .aurora .a2{animation-duration:22s}.aurora .a3{animation-duration:26s}.aurora .a4{animation-duration:20s}
}
@keyframes float{from{transform:translate(0,0) scale(1)}to{transform:translate(3%,4%) scale(1.08)}}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  padding-block:clamp(2.5rem,6vw,4.5rem); position:relative; z-index:2}
.hero__eyebrow{font-family:var(--font-script); color:var(--accent-warm-ink); font-size:1.75rem; font-weight:700; line-height:1; display:inline-block; transform:rotate(-2deg); margin-bottom:.4rem}
.hero h1{font-size:var(--fs-display); margin:.2rem 0 .9rem}
.hero__sub{font-size:var(--fs-lead); color:var(--ink-soft); line-height:1.5; max-width:34ch; margin-bottom:1.6rem}
.hero__cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.6rem}
.chip{display:inline-flex; align-items:center; gap:.6rem; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--pill); padding:.55rem 1rem;
  font-size:.9rem; font-weight:600; box-shadow:var(--shadow-sm)}
.chip b{color:var(--accent-warm-ink)}
.chip .dot{width:7px; height:7px; border-radius:50%; background:var(--c-neurofb)}
.hero__art{justify-self:center; position:relative; width:min(420px,90%)}
.hero__art .disc{position:relative; border-radius:50%; aspect-ratio:1;
  background:radial-gradient(circle at 50% 42%,#fff,var(--surface-2) 55%,var(--tint));
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(59,44,96,.06); padding:8%}
.hero__art img{width:100%; height:100%; object-fit:contain; border-radius:50%}
/* emblemat oddycha jako JEDNOŚĆ — głowa i koło pulsują razem (jedna animacja na całości) */
@media (prefers-reduced-motion:no-preference){.hero__art{animation:breathe 5s ease-in-out infinite}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr; text-align:left}
  .hero__art{width:min(300px,72%); order:-1; margin-bottom:.5rem}
  .hero__sub{max-width:100%}
}

/* ---------- Problemy ---------- */
.problems{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.5rem}
@media (max-width:1000px){.problems{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.problems{grid-template-columns:1fr}}
.problem{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.3rem 1.4rem; box-shadow:var(--shadow-sm)}
.problem .q{width:34px; height:34px; border-radius:10px; background:var(--cream-alt); display:flex; align-items:center; justify-content:center; margin-bottom:.7rem; color:var(--accent); font-family:var(--font-display); font-weight:800}
.problem p{color:var(--ink-soft); font-size:.98rem}
.problems__note{margin-top:1.3rem; font-size:var(--fs-lead); color:var(--ink); font-weight:600}

/* ---------- Pasek korzyści ---------- */
.benefits{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
@media (max-width:760px){.benefits{grid-template-columns:repeat(2,1fr)}}
.benefit{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.2rem; box-shadow:var(--shadow-sm)}
.benefit .ico{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:.8rem}
.benefit h3{font-size:1.05rem; margin-bottom:.25rem}
.benefit p{font-size:.9rem; color:var(--ink-soft)}
.benefits__bridge{grid-column:1/-1; text-align:center; margin-top:.4rem; font-family:var(--font-script); color:var(--accent-warm-ink); font-size:1.5rem}

/* ---------- Bento oferta ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:1rem}
.svc{grid-column:span 2; position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1.5rem 1.5rem 1.4rem; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column}
.svc::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--cat)}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); text-decoration:none}
.svc--lg{grid-column:span 3}
.svc__ico{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; background:color-mix(in srgb,var(--cat) 16%,transparent)}
.svc__ico svg{width:26px; height:26px}
.svc h3{font-size:var(--fs-h3); color:var(--ink); margin-bottom:.4rem}
.svc p{color:var(--ink-soft); font-size:.98rem; flex-grow:1}
.svc__more{margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--accent-600)}
.svc:hover .svc__more{gap:.7rem}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)} .svc,.svc--lg{grid-column:span 1}}
@media (max-width:520px){.bento{grid-template-columns:1fr} .svc,.svc--lg{grid-column:span 1}}

/* ---------- O nas / zespół ---------- */
.about__intro{max-width:60ch; font-size:var(--fs-lead); color:var(--ink-soft); margin-bottom:2rem}
.about__intro strong{color:var(--ink)}
.team{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; margin-bottom:2.2rem}
@media (max-width:760px){.team{grid-template-columns:1fr}}
.person{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow-sm)}
.person__head{display:flex; align-items:center; gap:1rem; margin-bottom:1rem}
.avatar{width:66px; height:66px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:#fff}
.person__head h3{font-size:1.25rem; color:var(--ink)}
.person__head .role{color:var(--ink-soft); font-size:.92rem}
.person p{color:var(--ink-soft); font-size:.96rem; margin-bottom:.8rem}
.person .quote{font-family:var(--font-script); font-size:1.4rem; color:var(--accent-warm-ink); line-height:1.2}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:760px){.values{grid-template-columns:1fr}}
.value{background:var(--tint); border-radius:var(--radius); padding:1.3rem}
.value h3{font-size:1.1rem; color:var(--ink); margin-bottom:.3rem}
.value p{font-size:.95rem; color:var(--ink-soft)}

/* ---------- Kroki ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; counter-reset:step}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem 1.4rem; box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step; content:counter(step); position:absolute; top:-16px; left:1.4rem;
  width:40px; height:40px; border-radius:50%; background:var(--accent-grad); color:#fff; font-family:var(--font-display);
  font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md)}
.step h3{margin:.8rem 0 .3rem; font-size:1.12rem; color:var(--ink)}
.step p{color:var(--ink-soft); font-size:.96rem}

/* ---------- Statystyki / liczniki ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2.2rem}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1rem; box-shadow:var(--shadow-sm)}
.stat .num{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,2.9rem); line-height:1; color:var(--accent-600); letter-spacing:-.02em}
.stat .lab{margin-top:.5rem; font-size:.9rem; color:var(--ink-soft)}
.testimonials{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem}
@media (max-width:820px){.testimonials{grid-template-columns:1fr}}
.testi{background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--glass-brd);
  border-radius:var(--radius-lg); padding:1.5rem; box-shadow:var(--shadow-sm)}
.testi .stars{color:var(--c-logopedia); letter-spacing:.1em; margin-bottom:.6rem; -webkit-text-stroke:.5px rgba(0,0,0,.15)}
.testi blockquote{font-size:1rem; color:var(--ink); line-height:1.55; margin-bottom:.8rem}
.testi cite{font-style:normal; font-weight:700; color:var(--ink); font-size:.95rem}
.testi cite span{font-weight:500; color:var(--ink-mute); font-size:.85rem}
.testimonials__disclaimer{grid-column:1/-1; text-align:center; margin-top:.8rem; font-size:.92rem; color:var(--ink-soft);
  max-width:62ch; margin-inline:auto; padding:.7rem 1.1rem; border-radius:var(--radius);
  background:color-mix(in srgb,var(--ink) 5%,transparent)}
.testimonials__note{grid-column:1/-1; font-size:.9rem; color:var(--ink-mute); text-align:center; margin-top:.2rem}

/* ---------- Trust ---------- */
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:820px){.trust{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.trust{grid-template-columns:1fr}}
.trust__item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow-sm)}
.trust__item .ico{width:42px; height:42px; border-radius:12px; background:var(--cream-alt); display:flex; align-items:center; justify-content:center; margin-bottom:.7rem; color:var(--accent)}
.trust__item h3{font-size:1.05rem; color:var(--ink); margin-bottom:.25rem}
.trust__item p{font-size:.93rem; color:var(--ink-soft)}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-inline:auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.1rem .3rem; font-weight:700; color:var(--ink); font-size:1.05rem}
.faq__q:hover{color:var(--accent-600)}
.faq__ico{flex-shrink:0; width:26px; height:26px; border-radius:50%; border:2px solid var(--accent); position:relative; transition:.2s}
.faq__ico::before,.faq__ico::after{content:""; position:absolute; background:var(--accent); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%)}
.faq__ico::before{width:12px; height:2px}.faq__ico::after{width:2px; height:12px; transition:.2s}
.faq__item[aria-expanded="true"] .faq__ico::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease}
.faq__item[aria-expanded="true"] .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 .3rem 1.2rem; color:var(--ink-soft); font-size:.98rem}

/* ---------- CTA końcowe (pełna szerokość strony, aurora jak w hero) ---------- */
.cta-band{position:relative; overflow:hidden; text-align:center; background:var(--cream);
  padding-block:clamp(3rem,6vw,5.5rem)}
.cta-band__inner{position:relative; z-index:2}
.cta-band .eyebrow{margin-bottom:.3rem}
.cta-band h2{font-size:var(--fs-h2); margin:.2rem 0 .7rem}
.cta-band__lead{color:var(--ink-soft); font-size:var(--fs-lead); max-width:52ch; margin:0 auto 1.7rem}
.cta__phones{display:flex; gap:clamp(1.6rem,4vw,3rem); justify-content:center; flex-wrap:wrap; margin-bottom:1.7rem}
.cta__phone{font-weight:700}
.cta__phone span{display:block; font-size:1.05rem; font-weight:700; color:var(--ink-soft); margin-bottom:.2rem}
.cta__phone a{font-family:var(--font-display); font-size:clamp(1.6rem,2.6vw,2rem); color:var(--ink)}
.cta-band__addr{font-family:var(--font-body); font-size:clamp(1.1rem,1.4vw,1.3rem); font-weight:600; color:var(--ink); margin-top:1.3rem}

/* ---------- Stopka ---------- */
.footer{background:var(--ink); color:#EEE9F5; padding-block:clamp(2.5rem,5vw,3.5rem) 1.5rem; position:relative; z-index:2}
:root[data-theme="dark"] .footer,@media(prefers-color-scheme:dark){.footer{background:#120E1F}}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:2rem}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr; gap:1.5rem}}
.footer__brand-logo{display:inline-block; background:#fff; padding:9px 14px; border-radius:14px; margin-bottom:1rem; box-shadow:var(--shadow-sm)}
.footer__brand-logo img{height:40px; width:auto; display:block; margin:0}
.footer__slogan{font-family:var(--font-script); color:var(--c-logopedia); font-size:1.5rem; margin-bottom:.6rem}
.footer p,.footer li,.footer a{color:#CFC7DE; font-size:.94rem}
.footer a:hover{color:#fff}
.footer h4{font-family:var(--font-body); font-weight:700; color:#fff; margin-bottom:.7rem; font-size:1rem}
.footer ul li{margin-bottom:.4rem}
.footer__bottom{border-top:1px solid rgba(255,255,255,.14); padding-top:1.2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.86rem; color:#B7ADC9}
.footer__social a{margin-right:.8rem; font-weight:600}

/* ---------- Back to top ---------- */
.to-top{position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  width:52px; height:52px; border-radius:50%; background:var(--accent-grad); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(12px) scale(.9); transition:.25s ease}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.to-top:hover{transform:translateY(-3px) scale(1.05); text-decoration:none}
.to-top svg{width:24px; height:24px}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}
.reveal[data-delay="6"]{transition-delay:.48s}
.reveal[data-delay="7"]{transition-delay:.56s}
.reveal[data-delay="8"]{transition-delay:.64s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .hero__art,.aurora i{animation:none}
  .btn:hover,.svc:hover,.to-top:hover{transform:none}
}

/* ---------- Puzzle (dekoracja) ---------- */
:root{
  --pz:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M22%2022H42C42%2014%2058%2014%2058%2022H78V42C86%2042%2086%2058%2078%2058V78H58C58%2086%2042%2086%2042%2078H22V58C14%2058%2014%2042%2022%2042Z'/%3E%3C/svg%3E");
}
.pz-deco{position:absolute; pointer-events:none; z-index:1; color:var(--c-neurolog);
  background:currentColor; -webkit-mask:var(--pz) center/contain no-repeat; mask:var(--pz) center/contain no-repeat;}
@media (prefers-reduced-motion:no-preference){
  .pz-deco{animation:pzfloat 14s ease-in-out infinite alternate}
}
@keyframes pzfloat{from{transform:translateY(-8px) rotate(-6deg)}to{transform:translateY(8px) rotate(8deg)}}

/* hero — pływające puzzle */
.hero .pz-h1{width:64px; height:64px; top:14%; right:8%; opacity:.85; animation-duration:12s}
.hero .pz-h2{width:40px; height:40px; top:62%; right:30%; opacity:.7; animation-duration:16s}
.hero .pz-h3{width:52px; height:52px; bottom:8%; left:3%; opacity:.5; animation-duration:18s}
@media (max-width:860px){.hero .pz-h1{top:2%; right:4%; width:48px; height:48px} .hero .pz-h2,.hero .pz-h3{display:none}}

/* karty oferty — znak wodny w rogu */
.svc::after{content:""; position:absolute; right:-16px; bottom:-16px; width:118px; height:118px;
  background:var(--cat); -webkit-mask:var(--pz) center/contain no-repeat; mask:var(--pz) center/contain no-repeat;
  opacity:.30; transform:rotate(12deg); transition:opacity .25s ease, transform .25s ease; pointer-events:none}
.svc:hover::after{opacity:.44; transform:rotate(2deg) scale(1.06)}

/* O nas — duży puzzel w tle */
#o-nas{overflow:hidden}
#o-nas .wrap{position:relative; z-index:1}
.pz-bg1{width:min(360px,55vw); height:min(360px,55vw); top:-6%; right:-6%; opacity:.06; z-index:0; animation-duration:22s}

/* CTA — pływające puzzle */
.cta .pz-c1{width:56px; height:56px; top:14%; left:6%; opacity:.5}
.cta .pz-c2{width:40px; height:40px; bottom:12%; right:8%; opacity:.45; animation-duration:17s}

/* naklejki (rysowane puzzle q*) — ROZRZUCONE w bocznych strefach (margines), bez zasłaniania tekstu.
   --g = odsunięcie od krawędzi kolumny w głąb strefy (małe = przy bloku, duże = przy krawędzi strony).
   clamp pilnuje, żeby przy każdej szerokości naklejka nie weszła na tekst ani nie wyszła poza ekran. */
.sticker-host{position:relative}
.sticker{position:absolute; z-index:2; pointer-events:none; display:none;
  --w:clamp(50px,4.2vw,72px); --g:24px; width:var(--w);
  filter:drop-shadow(0 10px 18px rgba(40,26,74,.26))}
.sticker.s1{--w:clamp(44px,3.4vw,58px)}
.sticker.s3{--w:clamp(52px,4.6vw,80px)}
.sticker img{display:block; width:100%; height:auto; transform:rotate(var(--tw,8deg))}
@media (prefers-reduced-motion:no-preference){.sticker{animation:pzfloat 16s ease-in-out infinite alternate}}
.sticker--l{ right: calc(50% + 580px + clamp(6px, var(--g), 50% - 580px - var(--w) - 8px)); --tw:-9deg}
.sticker--r{ left:  calc(50% + 580px + clamp(6px, var(--g), 50% - 580px - var(--w) - 8px)); --tw:9deg}
/* pokazuj dopiero, gdy boczna strefa poza kolumną ma sensowną szerokość */
@media (min-width:1320px){ .sticker{display:block} }

/* ---------- Hero podstrony ---------- */
.page-hero{position:relative; overflow:hidden; padding-block:clamp(2rem,5vw,3.6rem) clamp(1.6rem,4vw,2.6rem)}
.page-hero__inner{position:relative; z-index:2; max-width:60ch}
/* hero podstrony z grafiką po prawej */
.page-hero__split{position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.page-hero__art{justify-self:end}
.page-hero__art img{width:clamp(150px,18vw,215px); height:auto; filter:drop-shadow(0 14px 26px rgba(40,26,74,.28))}
@media (prefers-reduced-motion:no-preference){
  .page-hero__art img{animation:bob-art 5.5s ease-in-out infinite alternate}
}
@keyframes bob-art{from{transform:translateY(-7px) rotate(-2deg)}to{transform:translateY(7px) rotate(2deg)}}
@media (max-width:760px){
  .page-hero__split{grid-template-columns:1fr}
  .page-hero__art{justify-self:start; order:-1; margin-bottom:.4rem}
  .page-hero__art img{width:140px}
}
.page-hero h1{font-size:clamp(2.2rem,4.4vw + .5rem,3.6rem); margin:.2rem 0 .8rem}
.page-hero .lead{font-size:var(--fs-lead)}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
.contact-card{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow-sm)}
.contact-card::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--cat,var(--accent))}
.contact-card__ico{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  margin-bottom:.8rem; background:color-mix(in srgb,var(--cat,var(--accent)) 16%,transparent)}
.contact-card h2,.contact-card h3{font-size:1.2rem; color:var(--ink); margin-bottom:.15rem}
.contact-card .who{color:var(--ink-soft); font-size:.92rem; margin-bottom:.9rem}
.contact-card .tel{display:inline-block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem,2.4vw,1.9rem); color:var(--ink); letter-spacing:-.01em}
.contact-card .tel:hover{color:var(--accent-600); text-decoration:none}
.contact-card p{color:var(--ink-soft); font-size:.96rem}
.contact-card a.plain{color:var(--link); font-weight:600; word-break:break-word}
.hours{margin-top:.3rem}
.hours li{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px dashed var(--line); font-size:.98rem}
.hours li:last-child{border-bottom:none}
.hours .d{color:var(--ink-soft)}
.hours .h{font-weight:700; color:var(--ink)}
.hours .h.closed{color:var(--ink-mute); font-weight:600}
.contact-links{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem}
.contact-links a{display:inline-flex; align-items:center; gap:.4rem; background:var(--cream-alt); border:1px solid var(--line);
  border-radius:var(--pill); padding:.5rem .95rem; font-size:.9rem; font-weight:600; color:var(--ink)}
.contact-links a:hover{background:var(--tint); text-decoration:none; border-color:var(--accent)}

/* formularz */
.form-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:1.4rem; align-items:start}
@media (max-width:900px){.form-wrap{grid-template-columns:1fr}}
.form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow-sm)}
.form h2{font-size:var(--fs-h3); margin-bottom:.3rem}
.form__sub{color:var(--ink-soft); font-size:.96rem; margin-bottom:1.2rem}
.field{margin-bottom:1rem}
.field label{display:block; font-weight:700; font-size:.94rem; margin-bottom:.35rem; color:var(--ink)}
.field input,.field select,.field textarea{width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px; padding:.75rem .9rem; transition:border-color .16s, box-shadow .16s}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field .hint{display:block; margin-top:.3rem; font-size:.84rem; color:var(--ink-mute)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--c-tdcs)}
.field .err-msg{display:none; margin-top:.3rem; font-size:.85rem; font-weight:600; color:var(--c-tdcs)}
.field.err .err-msg{display:block}
.field--check{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:1.2rem}
.field--check input{width:auto; flex-shrink:0; margin-top:.25rem; accent-color:var(--accent)}
.field--check label{font-weight:500; font-size:.9rem; color:var(--ink-soft)}
.hp-field{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none}
.btn[disabled]{opacity:.65; cursor:progress}
.form__msg{display:none; margin-top:1rem; padding:.9rem 1.1rem; border-radius:12px; font-size:.95rem; font-weight:600}
.form__msg.show{display:block}
.form__msg--ok{background:color-mix(in srgb,var(--c-neurofb) 18%,transparent); color:#3d6b0a; border:1px solid color-mix(in srgb,var(--c-neurofb) 45%,transparent)}
.form__msg--bad{background:color-mix(in srgb,var(--c-tdcs) 12%,transparent); color:#a8180f; border:1px solid color-mix(in srgb,var(--c-tdcs) 35%,transparent)}
@media (prefers-color-scheme:dark){.form__msg--ok{color:#bdf08a}.form__msg--bad{color:#ffb3ad}}

/* mapa */
.map-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm)}
.map-card iframe{display:block; width:100%; height:340px; border:0}
.map-card__foot{padding:.9rem 1.1rem; font-size:.85rem; color:var(--ink-mute)}

/* ---------- Podstrony usług ---------- */
/* lista „z czym można przyjść” */
.checklist{display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 1.6rem; margin-top:1.4rem}
@media (max-width:760px){.checklist{grid-template-columns:1fr}}
.checklist li{position:relative; padding-left:2.2rem; color:var(--ink-soft); font-size:1.02rem; line-height:1.5}
.checklist li::before{content:""; position:absolute; left:0; top:.15em; width:1.5rem; height:1.5rem; border-radius:7px;
  background:color-mix(in srgb,var(--cat,var(--accent)) 22%,transparent)}
.checklist li::after{content:""; position:absolute; left:.44rem; top:.52em; width:.62rem; height:.34rem;
  border-left:2.5px solid var(--cat,var(--accent)); border-bottom:2.5px solid var(--cat,var(--accent));
  transform:rotate(-45deg)}
.checklist strong{color:var(--ink)}

/* karty metod */
.methods{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem}
@media (max-width:760px){.methods{grid-template-columns:1fr}}
.method{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease}
.method:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
/* pojedynczy kafelek w ostatnim rzędzie — wyśrodkowany, szerokość jednej kolumny */
.method--center{grid-column:1 / -1; justify-self:center; width:calc(50% - .55rem)}
@media (max-width:760px){.method--center{width:100%}}
.method__ico{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  margin-bottom:.8rem; background:color-mix(in srgb,var(--cat,var(--accent)) 16%,transparent)}
.method h3{font-size:1.15rem; color:var(--ink); margin-bottom:.35rem}
.method p{color:var(--ink-soft); font-size:.97rem}
.method .plus{display:block; margin-top:.6rem; font-size:.92rem; color:var(--ink); font-weight:600}

/* galeria zdjęć gabinetu */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery figure{margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--surface)}
.gallery img{width:100%; height:220px; object-fit:cover; transition:transform .4s ease}
.gallery figure:hover img{transform:scale(1.04)}
@media (max-width:600px){.gallery img{height:180px}}

/* pas z ważną informacją */
.notice{display:flex; gap:1rem; align-items:flex-start; background:var(--tint); border-radius:var(--radius-lg);
  padding:1.3rem 1.5rem; border-left:5px solid var(--cat,var(--accent))}
.notice__ico{flex-shrink:0; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--cat,var(--accent))}
.notice h3{font-size:1.05rem; color:var(--ink); margin-bottom:.25rem}
.notice p{color:var(--ink-soft); font-size:.97rem}

/* ---------- Cennik ---------- */
.pricing{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm)}
.price-row{display:flex; gap:1.5rem; align-items:flex-start; justify-content:space-between;
  padding:1.2rem 1.5rem; border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:none}
.price-row:hover{background:var(--cream-alt)}
.price-row h3{font-size:1.08rem; color:var(--ink); margin-bottom:.2rem}
.price-row p{font-size:.93rem; color:var(--ink-soft); max-width:62ch}
.price{flex-shrink:0; font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--accent-600); white-space:nowrap; text-align:right}
.price small{display:block; font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--ink-mute); margin-top:.15rem}
.price--ask{font-family:var(--font-body); font-size:.95rem; font-weight:700; color:var(--ink-soft)}
/* kilka wariantów czasowych w jednej pozycji */
.price--multi{display:flex; flex-direction:column; gap:.25rem; font-family:var(--font-body); font-size:.92rem; font-weight:600; color:var(--ink-soft)}
.price--multi b{font-family:var(--font-display); font-size:1.15rem; color:var(--accent-600); margin-left:.45rem}
@media (max-width:640px){
  .price-row{flex-direction:column; gap:.5rem; padding:1.1rem 1.2rem}
  .price{font-size:1.15rem}
}

/* ---------- Strony tekstowe (polityka prywatności itp.) ---------- */
.prose{max-width:70ch; color:var(--ink-soft); font-size:1.02rem}
.prose h2{font-size:clamp(1.3rem,1.6vw + .8rem,1.7rem); color:var(--ink); margin:2.2rem 0 .7rem}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:1.1rem; color:var(--ink); margin:1.4rem 0 .4rem}
.prose p{margin-bottom:1rem}
.prose ul{margin:0 0 1.1rem; padding-left:0}
.prose ul li{position:relative; padding-left:1.5rem; margin-bottom:.5rem}
.prose ul li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:3px; background:var(--accent)}
.prose strong{color:var(--ink)}
.prose .note{background:var(--tint); border-radius:var(--radius); padding:1rem 1.2rem; margin:1.4rem 0; font-size:.96rem}
.prose .updated{font-size:.9rem; color:var(--ink-mute); margin-top:2.4rem; padding-top:1rem; border-top:1px solid var(--line)}
.prose table{width:100%; border-collapse:collapse; margin-bottom:1.2rem; font-size:.95rem}
.prose th,.prose td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top}
.prose th{color:var(--ink); font-weight:700}

/* ---------- Utilty ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.breadcrumbs{font-size:.88rem; color:var(--ink-mute); padding-block:1rem .2rem}
.breadcrumbs a{color:var(--ink-soft)}