/* ═══════════════════════════════════════════════════════════
   Cinderella — центр семейного обучения, Томилино
   Дизайн-система: тёплый «сказочный» минимализм.
   База — цвета логотипа (оранжевый + голубой платья Золушки),
   к ним сиреневый, розовый, золотой и мятный для направлений.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Токены ────────────────────────────────────────────── */
:root{
  --orange:      #ef6c10;  --orange-deep:#c9560a;  --orange-tint:#fff1e3;
  --sky:         #2b7fa8;  --sky-deep:   #1f6386;  --sky-tint:   #e2f0fa;
  --lilac:       #7a58d1;  --lilac-deep: #5f3fb5;  --lilac-tint: #efe9fd;
  --rose:        #dd4f86;  --rose-deep:  #b93c6c;  --rose-tint:  #fdeaf2;
  --gold:        #c78a08;  --gold-deep:  #a06f04;  --gold-tint:  #fdf3d5;
  --mint:        #12a184;  --mint-deep:  #0b7d66;  --mint-tint:  #ddf5ee;
  --sky-300:     #9ccde8;

  --ink:         #15181e;
  --ink-2:       #4b5260;
  --ink-3:       #868d99;
  --paper:       #ffffff;
  --cream:       #fdf8f2;
  --line:        rgba(21,24,30,.10);
  --line-2:      rgba(21,24,30,.06);

  /* акцент по умолчанию — переопределяется модификаторами --sky/--rose/… */
  --c:      var(--orange);
  --c-deep: var(--orange-deep);
  --c-tint: var(--orange-tint);

  --sh-1: 0 1px 2px rgba(21,24,30,.04), 0 4px 16px rgba(21,24,30,.05);
  --sh-2: 0 2px 6px rgba(21,24,30,.05), 0 18px 50px -12px rgba(21,24,30,.16);
  --sh-3: 0 30px 80px -24px rgba(21,24,30,.30);

  --r-s: 14px;  --r-m: 22px;  --r-l: 30px;  --r-xl: 40px;

  --gap: clamp(20px, 3vw, 32px);
  --pad: clamp(72px, 9vw, 128px);
  --ease: cubic-bezier(.22,.68,.28,1);
  --bounce: cubic-bezier(.34,1.56,.48,1);

  --ff: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-d: "Playfair Display", Georgia, serif;
}

/* цветовые темы блоков */
.t-orange,.dir--orange,.why--orange,.svc--orange,.vid--orange,.tch--orange,.rev__ava--orange,.step--orange{ --c:var(--orange); --c-deep:var(--orange-deep); --c-tint:var(--orange-tint) }
.t-sky,.dir--sky,.why--sky,.svc--sky,.vid--sky,.tch--sky,.rev__ava--sky,.step--sky{ --c:var(--sky); --c-deep:var(--sky-deep); --c-tint:var(--sky-tint) }
.t-lilac,.dir--lilac,.why--lilac,.svc--lilac,.vid--lilac,.rev__ava--lilac,.step--lilac{ --c:var(--lilac); --c-deep:var(--lilac-deep); --c-tint:var(--lilac-tint) }
.t-rose,.dir--rose,.why--rose,.svc--rose,.vid--rose,.tch--rose,.rev__ava--rose,.step--rose{ --c:var(--rose); --c-deep:var(--rose-deep); --c-tint:var(--rose-tint) }
.t-gold,.dir--gold,.why--gold,.svc--gold,.vid--gold,.rev__ava--gold,.step--gold{ --c:var(--gold); --c-deep:var(--gold-deep); --c-tint:var(--gold-tint) }
.t-mint,.dir--mint,.why--mint,.svc--mint,.vid--mint,.step--mint{ --c:var(--mint); --c-deep:var(--mint-deep); --c-tint:var(--mint-tint) }

/* ── 2. База ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:500 clamp(16px,1.02vw,17px)/1.65 var(--ff);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,iframe{ max-width:100%; display:block }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer }
input,select{ font:inherit; color:inherit }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.028em; line-height:1.1; text-wrap:balance }
p{ text-wrap:pretty }
p,ul,ol,dl{ margin:0 }
ul{ padding:0; list-style:none }
::selection{ background:var(--orange-tint); color:var(--ink) }

h1{ font-size:clamp(1.95rem,3.9vw,3.25rem) }
.hl{ color:var(--c) }
.h1-sub{ display:block; margin-top:.2em; font-size:.7em; color:var(--ink); letter-spacing:-.022em }
h2{ font-size:clamp(1.72rem,3.3vw,2.9rem) }
h3{ font-size:clamp(1.22rem,1.7vw,1.6rem) }
h4{ font-size:1.03rem; letter-spacing:-.01em }

.container{ position:relative; z-index:1; width:min(1220px, 100% - clamp(32px,6vw,72px)); margin-inline:auto }
.ico{ width:1.15em; height:1.15em; flex:0 0 auto; stroke-width:1.8 }

.skip-link{
  position:fixed; top:8px; left:8px; z-index:200; padding:10px 16px;
  background:var(--ink); color:#fff; border-radius:99px; transform:translateY(-160%);
  transition:transform .2s;
}
.skip-link:focus-visible{ transform:none }
:focus-visible{ outline:2.5px solid var(--orange); outline-offset:3px; border-radius:6px }

/* ── 3. Кнопки ────────────────────────────────────────────── */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.92em 1.6em; border:1.5px solid var(--bd); border-radius:99px;
  background:var(--bg); color:var(--fg);
  font-weight:700; font-size:.96rem; letter-spacing:-.01em; line-height:1.2;
  transition:transform .22s var(--bounce), box-shadow .22s var(--ease), background .18s, color .18s, border-color .18s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn--primary{ --bg:var(--orange); box-shadow:0 8px 24px -8px rgba(239,108,16,.6) }
.btn--primary:hover{ --bg:var(--orange-deep); box-shadow:0 14px 32px -10px rgba(239,108,16,.7) }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line) }
.btn--ghost:hover{ --bd:var(--ink); background:rgba(21,24,30,.03) }
.btn--wa{ --bg:#25d366; box-shadow:0 8px 24px -10px rgba(37,211,102,.75) }
.btn--wa:hover{ --bg:#1fbb59 }
.btn--max{ --bg:var(--lilac); box-shadow:0 8px 24px -10px rgba(122,88,209,.75) }
.btn--max:hover{ --bg:var(--lilac-deep) }
.btn--sm{ padding:.68em 1.25em; font-size:.88rem }
.btn--lg{ padding:1.06em 1.95em; font-size:1rem }
.btn--full{ width:100% }

/* ── 4. Мелкая типографика ───────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em; margin-bottom:1.05em;
  font-size:.775rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange) }
.accent{
  font-family:var(--ff-d); font-style:italic; font-weight:500;
  color:var(--orange); letter-spacing:-.01em; white-space:nowrap;
}
@media (max-width:420px){ .accent{ white-space:normal } }

/* ── 5. Topbar / Header ──────────────────────────────────── */
.topbar{
  background:linear-gradient(90deg,var(--sky-tint),var(--lilac-tint) 55%,var(--orange-tint));
  border-bottom:1px solid var(--line-2); font-size:.82rem;
}
.topbar__in{ display:flex; gap:1.5rem; justify-content:space-between; padding:.62rem 0; color:var(--ink-2) }
.topbar__item{ display:flex; align-items:center; gap:.5em; min-width:0 }
.topbar__item .ico{ color:var(--sky) }
@media (max-width:760px){ .topbar__item--right{ display:none } }
@media (max-width:560px){ .topbar .nb{ display:none } }

.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.hdr.is-stuck{ border-bottom-color:var(--line-2); box-shadow:0 6px 24px -18px rgba(21,24,30,.5) }
.hdr__in{ display:flex; align-items:center; gap:clamp(14px,2.4vw,40px); padding:.72rem 0 }

.brand{ display:flex; align-items:center; gap:.72rem; flex:0 0 auto }
.brand__mark{
  width:52px; height:52px; border-radius:50%;
  box-shadow:0 0 0 2px var(--orange-tint), 0 0 0 3px rgba(239,108,16,.35);
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.05 }
.brand__name{ font-family:var(--ff-d); font-size:1.42rem; font-weight:500; color:var(--orange) }
.brand__sub{ font-size:.63rem; font-weight:700; letter-spacing:.115em; text-transform:uppercase; color:var(--ink-3) }

.nav{ display:flex; gap:clamp(10px,1.5vw,26px); margin-inline:auto; font-size:.925rem; font-weight:600 }
.nav a{ position:relative; padding:.35em 0; color:var(--ink-2); transition:color .2s }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; border-radius:2px;
  background:var(--orange); transition:right .3s var(--ease);
}
.nav a:hover{ color:var(--ink) }
.nav a:hover::after{ right:0 }

.hdr__act{ display:flex; align-items:center; gap:.85rem; flex:0 0 auto }
.hdr__tel{ font-weight:700; font-size:.94rem; white-space:nowrap; transition:color .2s }
.hdr__tel:hover{ color:var(--orange) }

.burger{ display:none; width:42px; height:42px; padding:11px 9px; border-radius:12px }
.burger span{ display:block; height:2px; border-radius:2px; background:var(--ink); transition:.28s var(--ease) }
.burger span+span{ margin-top:5px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:1080px){
  .nav{
    position:fixed; inset:auto 0 auto 0; top:var(--nav-top,120px);
    flex-direction:column; gap:0; margin:0 clamp(12px,3vw,24px); padding:.5rem;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
    box-shadow:var(--sh-2); font-size:1.02rem;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:.28s var(--ease);
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none }
  .nav a{ padding:.85em 1em; border-radius:14px }
  .nav a:hover{ background:var(--sky-tint) }
  .nav a::after{ display:none }
  .burger{ display:block }
  .hdr__tel{ display:none }
}
@media (max-width:520px){
  .brand__sub{ display:none }
  .brand__mark{ width:46px; height:46px }
}

/* ── 6. Hero ─────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(48px,6vw,86px) 0 clamp(44px,5vw,70px); overflow:hidden }
.hero__in{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,72px); align-items:center }
.blob{ position:absolute; border-radius:50%; filter:blur(72px); pointer-events:none; z-index:-1 }
.blob--a{ width:46vw; height:46vw; top:-16vw; right:-10vw; background:rgba(156,205,232,.42) }
.blob--b{ width:34vw; height:34vw; bottom:-14vw; left:-12vw; background:rgba(239,108,16,.18) }
.blob--c{ width:28vw; height:28vw; top:26vw; left:34vw; background:rgba(122,88,209,.14) }

.hero__lede{ max-width:46ch; margin-top:1.15em; font-size:clamp(.95rem,1.08vw,1.04rem); color:var(--ink-2) }
.hero__lede b{ color:var(--ink); font-weight:800 }

.hero__offer{ display:flex; flex-wrap:wrap; gap:.5rem .65rem; margin-top:1.8em }
.hero__offer li{
  display:flex; align-items:center; gap:.5em;
  padding:.5em .95em; border:1.5px solid var(--line); border-radius:99px;
  background:rgba(255,255,255,.75); font-size:.86rem; font-weight:600;
}
.hero__offer .ico{ width:.95em; height:.95em; color:var(--orange) }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2em }

.hero__stats{
  display:grid; grid-template-columns:repeat(3,auto); gap:clamp(18px,3vw,44px);
  justify-content:start; margin-top:2.6em; padding-top:1.7em; border-top:1px solid var(--line);
}
.hero__stats dt{ font-size:clamp(1.35rem,2.2vw,1.85rem); font-weight:800; letter-spacing:-.03em }
.hero__stats div:nth-child(1) dt{ color:var(--orange) }
.hero__stats div:nth-child(2) dt{ color:var(--sky) }
.hero__stats div:nth-child(3) dt{ color:var(--rose) }
.hero__stats dd{ margin:.1em 0 0; font-size:.8rem; color:var(--ink-3); max-width:16ch; line-height:1.35 }

.hero__media{ position:relative; padding:clamp(14px,2.5vw,28px) 0 }
.hero__ph{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-xl); background:var(--sky-tint) }
.hero__ph--main{ box-shadow:var(--sh-3) }
/* только прямой потомок: внутри лежит ещё логотип плашки */
.hero__ph--main>img{ aspect-ratio:4/4.5; object-fit:cover; width:100% }
.hero__ph--small{
  position:absolute; right:-5%; top:-3%; width:35%;
  border:6px solid var(--paper); border-radius:var(--r-l); box-shadow:var(--sh-2);
  transform:rotate(3deg);
}
.hero__ph--small>img{ aspect-ratio:1; object-fit:cover; width:100% }

/* «Cinderella — английский · логопедия …» на главной картинке */
.brandband{
  position:absolute; left:3.5%; right:3.5%; bottom:4%;
  display:flex; align-items:center; gap:.8rem;
  padding:.7rem .9rem; border-radius:var(--r-m);
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
  box-shadow:0 12px 34px -14px rgba(0,0,0,.55);
}
.brandband__logo{ width:48px; height:48px; flex:0 0 auto; border-radius:50% }
.brandband__txt{ min-width:0 }
.brandband__txt b{
  display:block; font-family:var(--ff-d); font-weight:500; font-size:1.25rem;
  line-height:1.05; color:var(--orange);
}
.brandband__txt span{
  display:block; margin-top:.1em; font-size:.86rem; font-weight:700; line-height:1.25;
  letter-spacing:.005em; color:var(--ink-2);
}

.hero__badge{
  position:absolute; left:-7%; top:36%; max-width:12.5rem; z-index:2;
  padding:.95rem 1.15rem; border-radius:var(--r-m);
  background:var(--paper); box-shadow:var(--sh-2);
  font-size:.8rem; font-weight:600; line-height:1.35; color:var(--ink-2);
}
.hero__badge-num{
  display:block; margin-bottom:.15em; font-size:1.02rem; font-weight:800;
  color:var(--orange); letter-spacing:-.025em;
}
.sparkle{ position:absolute; pointer-events:none; z-index:2 }
.sparkle--1{ width:36px; top:-4px; left:2%; color:var(--gold) }
.sparkle--2{ width:22px; top:30%; right:-12px; color:var(--sky-300) }
.sparkle--3{ width:28px; bottom:12%; left:-3%; color:var(--rose); opacity:.75 }

@media (max-width:960px){
  .hero__in{ grid-template-columns:1fr; gap:clamp(34px,7vw,54px) }
  .hero__media{ max-width:520px; margin-inline:auto; width:100% }
  .hero__ph--main>img{ aspect-ratio:4/4 }
  .hero h1 br{ display:none }
  .hero__lede{ max-width:46ch }
  .hero__badge{ left:auto; right:-2%; top:auto; bottom:22% }
}
@media (max-width:560px){
  .hero__ph--small,.sparkle--3{ display:none }
  .hero__badge{ max-width:10.5rem; padding:.75rem .9rem; bottom:26% }
  .brandband__txt b{ font-size:1.1rem }
  .brandband__logo{ width:40px; height:40px }
}
@media (max-width:420px){ .hero__stats{ grid-template-columns:repeat(2,auto); row-gap:1.2em } }

/* ── 7. Главные направления ──────────────────────────────── */
.dirs{ padding:0 0 clamp(40px,5vw,64px) }
.dirs__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.2vw,16px) }
.dir a{
  position:relative; display:flex; flex-direction:column; height:100%;
  padding:clamp(18px,1.7vw,24px);
  background:var(--c-tint); border:1.5px solid transparent; border-radius:var(--r-l);
  transition:transform .28s var(--bounce), box-shadow .28s var(--ease), border-color .2s;
}
.dir a:hover{ transform:translateY(-6px); border-color:var(--c); box-shadow:0 18px 36px -18px var(--c) }
.dir__ico{
  display:grid; place-items:center; width:56px; height:56px; margin-bottom:.85rem;
  border-radius:50%; background:var(--paper); box-shadow:0 0 0 2px var(--c);
  color:var(--c);
}
.dir__ico svg{ width:30px; height:30px }
.dir b{ font-size:1.02rem; font-weight:800; letter-spacing:-.02em; color:var(--c-deep) }
.dir__sub{ margin-top:.3em; font-size:.79rem; line-height:1.4; color:var(--ink-2) }
.dir__go{
  margin-top:auto; padding-top:.9rem; font-size:1.05rem; font-weight:700; color:var(--c);
  transition:transform .25s var(--ease);
}
.dir a:hover .dir__go{ transform:translateX(5px) }
@media (max-width:1000px){ .dirs__grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:620px){ .dirs__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:380px){ .dirs__grid{ grid-template-columns:1fr } }

/* ── 8. Секции ───────────────────────────────────────────── */
.sect{ position:relative; overflow:hidden; padding:var(--pad) 0 }
.sect--cream{ background:var(--cream) }
.sect--sky{ background:var(--sky-tint) }
.sect--dots{
  background-color:var(--paper);
  background-image:
    radial-gradient(rgba(239,108,16,.16) 1.6px, transparent 1.7px),
    radial-gradient(rgba(43,127,168,.16) 1.6px, transparent 1.7px);
  background-size:38px 38px, 38px 38px;
  background-position:0 0, 19px 19px;
}
.sect__head{ max-width:44rem; margin-bottom:clamp(38px,5vw,64px) }
.sect__head--center{ margin-inline:auto; text-align:center }
.sect__head--split{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem;
  align-items:end; justify-content:space-between; max-width:none;
}
.sect__lede{ margin-top:1em; font-size:clamp(1.02rem,1.2vw,1.15rem); color:var(--ink-2) }

/* ── 9. Цитата ───────────────────────────────────────────── */
.quote-band{ padding:0 0 clamp(24px,4vw,44px) }
.quote-band__in{
  position:relative; display:flex; align-items:center; gap:clamp(22px,4vw,48px);
  padding:clamp(30px,4vw,54px) clamp(26px,4vw,56px);
  border-radius:var(--r-xl); color:#fff; overflow:hidden;
  background:
    radial-gradient(70% 130% at 90% 10%, rgba(122,88,209,.55), transparent 60%),
    radial-gradient(60% 120% at 6% 90%, rgba(43,127,168,.55), transparent 60%),
    var(--ink);
}
.quote-band__logo{ width:clamp(76px,9vw,116px); height:clamp(76px,9vw,116px); flex:0 0 auto; border-radius:50% }
.quote-band blockquote{ margin:0 }
.quote-band p{
  font-family:var(--ff-d); font-style:italic; font-size:clamp(1.1rem,1.85vw,1.6rem);
  line-height:1.42; letter-spacing:-.015em;
}
.quote-band footer{
  margin-top:1.1em; font-family:var(--ff); font-size:.82rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--orange);
}
.sparkle--q1{ width:30px; top:14%; right:6%; color:rgba(255,255,255,.5) }
.sparkle--q2{ width:18px; bottom:18%; right:14%; color:var(--gold) }
@media (max-width:640px){ .quote-band__in{ flex-direction:column; align-items:flex-start } }

/* ── 10. 6 отличий ───────────────────────────────────────── */
.grid-why{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.why{
  position:relative; padding:clamp(24px,2.6vw,34px);
  background:var(--c-tint); border:1.5px solid transparent; border-radius:var(--r-l);
  transition:transform .3s var(--bounce), box-shadow .3s var(--ease), border-color .2s;
}
.why:hover{ transform:translateY(-5px); border-color:var(--c); box-shadow:0 20px 40px -22px var(--c) }
.why__n{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:1rem;
  border-radius:50%; background:var(--c); color:#fff;
  font-family:var(--ff-d); font-size:1.1rem; font-style:italic; font-weight:500;
}
.why h3{ font-size:1.13rem; margin-bottom:.5rem; color:var(--c-deep) }
.why p{ font-size:.94rem; color:var(--ink-2) }
@media (max-width:900px){ .grid-why{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .grid-why{ grid-template-columns:1fr } }

/* ── 11. Услуги ──────────────────────────────────────────── */
.svc{ padding:clamp(30px,4vw,52px) 0 }
.svc__in{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,72px); align-items:center }
.svc--rev .svc__media{ order:2 }
.svc__media{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--c-tint); box-shadow:var(--sh-2);
  outline:8px solid var(--c-tint); outline-offset:-1px;
}
.svc__media img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.svc__n{
  display:inline-block; margin-bottom:1em; padding:.4em .9em; border-radius:99px;
  background:var(--c-tint); color:var(--c-deep);
  font-size:.735rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
}
.svc__copy h3{ margin-bottom:.7em; max-width:30ch }
.svc__copy p{ color:var(--ink-2) }
.svc__copy>p+p{ margin-top:.85em }
.svc__lede{ font-size:clamp(1.02rem,1.15vw,1.1rem); color:var(--ink)!important }

.svc__list{ display:grid; gap:.7rem; margin:1.5em 0 }
.svc__list li{ position:relative; padding-left:1.45em; font-size:.96rem; color:var(--ink-2) }
.svc__list li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; border-radius:50%; background:var(--c);
}
.svc__list b{ color:var(--ink); font-weight:700 }
.svc__list--blocks{ gap:1.2rem }
.svc__list--blocks li{ padding-left:1.15em; border-left:3px solid var(--c) }
.svc__list--blocks li::before{ display:none }
.svc__list--blocks b{ display:block; margin-bottom:.3em; color:var(--c-deep) }

.svc__hl{
  margin:1.35em 0!important; padding:.95em 1.2em;
  background:var(--c-tint); border-radius:var(--r-s);
  font-size:.95rem; font-weight:600; color:var(--ink)!important;
}
.svc__teacher{
  margin:1.35em 0!important; padding:1.05em 1.25em;
  background:var(--cream); border-radius:var(--r-s);
  border-left:3px solid var(--c); font-size:.95rem;
}
.svc__note{ font-size:.95rem; font-weight:600 }
.svc__copy .btn{ margin-top:1.7em }
@media (max-width:900px){
  .svc__in{ grid-template-columns:1fr; gap:28px }
  .svc--rev .svc__media{ order:0 }
  .svc__copy h3{ max-width:none }
}

/* ── 12. Галерея ─────────────────────────────────────────── */
.gal{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:dense;
  grid-auto-rows:clamp(130px,15vw,205px); gap:clamp(10px,1.3vw,18px);
}
.gal__i{ position:relative; padding:0; overflow:hidden; border-radius:var(--r-m); background:var(--sky-tint) }
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.gal__i::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(21,24,30,.06) }
.gal__i:hover img{ transform:scale(1.06) }
.gal__i--big{ grid-column:span 2; grid-row:span 2 }
@media (max-width:820px){ .gal{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:520px){ .gal{ grid-template-columns:repeat(2,1fr); grid-auto-rows:38vw } }

/* ── 13. Педагоги ────────────────────────────────────────── */
.teachers{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap) }
.tch{
  padding:clamp(22px,2.6vw,34px);
  background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
}
.tch__head{ display:flex; gap:clamp(14px,1.6vw,22px); align-items:flex-start; margin-bottom:1.5em }
.tch__photo{
  position:relative; flex:0 0 auto; width:clamp(128px,15vw,186px); aspect-ratio:4/5;
  border-radius:var(--r-m); overflow:hidden; background:var(--c-tint);
  box-shadow:0 12px 28px -14px var(--c);
}
.tch__photo img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1 }
.tch__mono{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.7rem; font-weight:800; color:var(--c-deep);
}
.tch__head>div{ padding-top:.3em }
.tch__head h3{ color:var(--c-deep) }
.tch__role{ margin-top:.35em; font-size:.88rem; color:var(--ink-2) }
.tch__tag{
  display:inline-block; margin-top:.6em; padding:.25em .8em; border-radius:99px;
  background:var(--c-tint); color:var(--c-deep);
  font-family:var(--ff-d); font-style:italic; font-size:.85rem;
}
.tch__lede{ font-size:1.02rem; color:var(--ink) }
.tch p{ color:var(--ink-2); font-size:.95rem }
.tch>p+p{ margin-top:.85em }
.tch h4{ margin:1.5em 0 .6em; color:var(--c-deep) }
.tch__list{ display:grid; gap:.6rem; margin:.9em 0 1.2em }
.tch__list li{ position:relative; padding-left:1.45em; font-size:.95rem; color:var(--ink-2) }
.tch__list li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--c) }
.tch__list b{ color:var(--ink) }
.tch__cta{ margin-top:1.4em!important; padding:1.05em 1.25em; background:var(--c-tint); border-radius:var(--r-s); font-size:.95rem }
.tch__cta b{ color:var(--ink) }
.tch .btn{ margin-top:1.5em }
@media (max-width:900px){ .teachers{ grid-template-columns:1fr } }
@media (max-width:420px){
  .tch__head{ flex-direction:column }
  .tch__photo{ width:130px }
}

/* ── 14. Отзывы ──────────────────────────────────────────── */
.rating{ display:flex; align-items:center; gap:.7rem; font-size:.92rem; color:var(--ink-2) }
.rating__stars{ color:var(--gold); font-size:1.15rem; letter-spacing:.06em }
.rating__txt b{ color:var(--ink); font-size:1.05rem }
.rating__txt a{ font-weight:700; color:var(--ink); border-bottom:1.5px solid var(--gold); transition:color .2s }
.rating__txt a:hover{ color:var(--gold-deep) }

.rev-hl{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.4rem;
  margin-bottom:var(--gap); padding:clamp(24px,3vw,38px) clamp(24px,3.5vw,44px);
  background:var(--paper); border-radius:var(--r-l);
  box-shadow:var(--sh-1); border-left:6px solid var(--gold);
}
.rev-hl__q{ font-family:var(--ff-d); font-style:italic; font-size:clamp(1.15rem,2vw,1.7rem); line-height:1.35 }
.rev-hl__a{ font-size:.85rem; font-weight:700; color:var(--gold-deep); white-space:nowrap }

.revs{ columns:3; column-gap:var(--gap) }
.rev{
  break-inside:avoid; margin:0 0 var(--gap); padding:clamp(22px,2.4vw,30px);
  background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--r-l);
  box-shadow:var(--sh-1);
}
.rev__stars{ color:var(--gold); font-size:.92rem; letter-spacing:.08em; margin-bottom:.8em }
.rev blockquote{ margin:0 }
.rev blockquote p{ font-size:.92rem; color:var(--ink-2); line-height:1.6 }
.rev blockquote p+p{ margin-top:.7em }
.rev figcaption{
  display:flex; align-items:center; gap:.6rem; margin-top:1.2em;
  padding-top:1.05em; border-top:1px solid var(--line-2); font-size:.9rem; font-weight:700;
}
.rev__ava{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--c-tint); color:var(--c-deep); font-size:.85rem; font-weight:800;
}
.revs__more{ text-align:center; margin-top:.5rem }
.js .revs:not(.is-all) .is-extra{ display:none }
html:not(.js) .revs__more{ display:none }
@media (max-width:960px){ .revs{ columns:2 } }
@media (max-width:600px){ .revs{ columns:1 } .rev-hl__a{ white-space:normal } }

/* ── 15. Видео ───────────────────────────────────────────── */
.vids{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap) }
.vid{ margin:0 }
.vid__btn{
  display:block; position:relative; width:100%; padding:0; aspect-ratio:4/5;
  overflow:hidden; border-radius:var(--r-l); background:var(--c);
  outline:7px solid var(--c-tint); outline-offset:-1px;
}
.vid__btn img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .3s }
.vid__btn:hover img{ transform:scale(1.05); opacity:.86 }
.vid__play{
  position:absolute; inset:0; margin:auto; width:58px; height:58px;
  display:grid; place-items:center; border-radius:50%;
  background:#fff; color:var(--c-deep); box-shadow:0 8px 26px rgba(0,0,0,.28);
  transition:transform .3s var(--bounce);
}
.vid__play svg{ width:26px; height:26px; margin-left:2px }
.vid__btn:hover .vid__play{ transform:scale(1.12) }
.vid figcaption{ margin-top:.9em; font-size:.95rem; font-weight:700; color:var(--c-deep) }
.vid iframe{ width:100%; aspect-ratio:4/5; border:0; border-radius:var(--r-l); display:block }
@media (max-width:900px){ .vids{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:460px){ .vids{ grid-template-columns:1fr } }

/* ── 16. Модалка «Записаться» ────────────────────────────── */
.cta{
  width:min(560px,94vw); max-width:none; padding:0; border:0; overflow:visible;
  background:transparent; color:var(--ink);
}
.cta::backdrop{ background:rgba(12,14,18,.62); backdrop-filter:blur(4px) }
.cta[open]{ animation:cta-in .32s var(--ease) }
@keyframes cta-in{ from{ opacity:0; transform:translateY(16px) scale(.97) } }

.cta__card{
  outline:none;
  position:relative; padding:clamp(26px,4vw,40px);
  background:var(--paper); border-radius:var(--r-xl); box-shadow:var(--sh-3);
  max-height:92vh; overflow-y:auto;
}
.cta__x{
  position:absolute; top:14px; right:14px; z-index:2;
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--cream); color:var(--ink-2); font-size:1.5rem; line-height:1;
  transition:background .2s, color .2s;
}
.cta__x:hover{ background:var(--line-2); color:var(--ink) }
.cta__title{ font-size:clamp(1.5rem,3.4vw,2rem); max-width:16ch }
.cta__lede{ margin-top:.9em; font-size:.96rem; color:var(--ink-2) }

.cta__tels{ display:grid; gap:.6rem; margin-top:1.8em }
.cta__tel{
  display:flex; align-items:center; gap:.9rem; padding:.85em 1.1em;
  background:var(--orange-tint); border:1.5px solid transparent; border-radius:var(--r-m);
  transition:border-color .2s, transform .22s var(--bounce);
}
.cta__tel:hover{ border-color:var(--orange); transform:translateY(-2px) }
.cta__tel .ico{ width:24px; height:24px; flex:0 0 auto; color:var(--orange) }
.cta__tel span{ display:grid }
.cta__tel b{ font-size:1.08rem; letter-spacing:-.01em }
.cta__tel i{ font-style:normal; font-size:.8rem; font-weight:600; color:var(--ink-3) }

.cta__msgr{ display:grid; gap:.6rem; margin-top:.85rem }
.cta__facts{ display:grid; gap:.55rem; margin-top:1.7em; padding-top:1.4em; border-top:1px solid var(--line) }
.cta__facts li{ display:flex; align-items:flex-start; gap:.7em; font-size:.9rem; color:var(--ink-2) }
.cta__facts .ico{ width:1.05em; height:1.05em; margin-top:.35em; flex:0 0 auto; color:var(--sky) }
.cta__note{ margin-top:.9em; font-size:.78rem; color:var(--ink-3) }
@media (max-width:520px){
  .cta__card{ padding:26px 20px 24px }
  .cta__x{ top:10px; right:10px }
  .cta__title{ max-width:calc(100% - 44px) }
}
@media (prefers-reduced-motion:reduce){ .cta[open]{ animation:none } }

/* ── 17. Контакты ────────────────────────────────────────── */
.cts{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--gap); align-items:stretch }
.cts__cards{ display:grid; gap:var(--gap) }
.ct{
  padding:clamp(22px,2.5vw,30px);
  background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--r-l);
  box-shadow:var(--sh-1);
}
.ct__ico{ width:40px; height:40px; margin-bottom:1rem }
.ct h3{ font-size:1.05rem; margin-bottom:.6rem }
.ct p{ font-size:.96rem; color:var(--ink-2) }
.ct p+p{ margin-top:.3em }
.ct a{ font-weight:700; color:var(--ink); transition:color .2s }
.ct a:hover{ color:var(--orange) }
.ct .btn{ color:#fff }
.ct .btn:hover{ color:#fff }
.ct__muted{ font-size:.82rem!important; color:var(--ink-3)!important }
.ct__msgr{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 .8rem }
.cts__map{
  overflow:hidden; border-radius:var(--r-xl); box-shadow:var(--sh-1);
  border:1.5px solid var(--line-2); background:var(--sky-tint);
}
.cts__map iframe{ width:100%; height:100%; min-height:clamp(340px,40vw,520px); border:0; display:block }
@media (max-width:900px){ .cts{ grid-template-columns:1fr } }

/* ── 18. Footer ──────────────────────────────────────────── */
.ftr{ padding:clamp(48px,6vw,76px) 0 1.6rem; background:var(--cream); border-top:1px solid var(--line-2) }
.ftr__in{ display:grid; grid-template-columns:1.1fr 1fr .8fr; gap:clamp(28px,4vw,56px); padding-bottom:clamp(34px,4vw,54px) }
.ftr__brand{ display:flex; gap:1rem; align-items:center }
.ftr__brand img{ width:64px; height:64px; border-radius:50%; flex:0 0 auto }
.ftr__brand p{ font-size:.96rem; font-weight:700; line-height:1.4 }
.ftr__brand span{ font-weight:500; font-size:.86rem; color:var(--ink-3) }
.ftr__nav{ display:grid; grid-template-columns:repeat(2,auto); gap:.55rem 1.6rem; align-content:start; font-size:.94rem }
.ftr__nav a{ color:var(--ink-2); transition:color .2s }
.ftr__nav a:hover{ color:var(--orange) }
.ftr__ct{ display:grid; gap:.35rem; align-content:start; font-size:.94rem }
.ftr__ct a{ font-weight:700 }
.ftr__ct a:hover{ color:var(--orange) }
.ftr__ct p{ margin-top:.5rem; font-size:.86rem; color:var(--ink-3); line-height:1.5 }
.ftr__btm{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  padding-top:1.4rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-3);
}
.ftr__btm a:hover{ color:var(--orange) }
@media (max-width:820px){ .ftr__in{ grid-template-columns:1fr; gap:32px } }

/* ── 19. Плавающие кнопки + лайтбокс ─────────────────────── */
.fabs{
  position:fixed; right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px); z-index:90;
  display:grid; gap:.6rem;
}
.fab{
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%; color:#fff;
  transition:transform .25s var(--bounce);
}
.fab:hover{ transform:scale(1.1) }
.fab svg{ width:28px; height:28px }
.fab--wa{ background:#25d366; box-shadow:0 10px 30px -6px rgba(37,211,102,.6) }
.fab--max{ background:var(--lilac); box-shadow:0 10px 30px -6px rgba(122,88,209,.6) }

.lb{
  width:min(1100px,94vw); max-width:none; max-height:92vh; padding:0;
  border:0; border-radius:var(--r-l); background:transparent; overflow:visible;
}
.lb::backdrop{ background:rgba(12,14,18,.86); backdrop-filter:blur(4px) }
.lb img{ width:100%; max-height:88vh; object-fit:contain; border-radius:var(--r-m) }
.lb__x{
  position:absolute; top:-14px; right:-14px; z-index:2; width:44px; height:44px; border-radius:50%;
  background:var(--paper); color:var(--ink); font-size:1.5rem; line-height:1; box-shadow:var(--sh-2);
}
@media (max-width:600px){ .lb__x{ top:-52px; right:0 } }

/* ── 19.5. Векторный декор ───────────────────────────────── */
.deco{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  animation:float var(--dur,7s) ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)) }
  50%    { transform:translateY(-12px) rotate(var(--rot,0deg)) }
}

/* первый экран */
.deco--cloud1{ left:.5%;  top:9%;   width:150px; color:#e7f2fa; --dur:9s }
.deco--cloud2{ right:1%;  top:2%;   width:110px; color:#faeee2; --dur:11s }
.deco--balloon1{ left:1.5%; bottom:30%; width:52px; --dur:6.5s; --rot:-8deg }
.deco--pencil1{ right:.6%; top:44%;  width:34px; --dur:8s; --rot:14deg }

/* 6 отличий */
.deco--blocks1{ right:1.5%; top:9%;    width:96px; --dur:8.5s; --rot:-5deg }
.deco--star1  { left:2.5%;  bottom:16%; width:28px; color:var(--gold); --dur:5.5s }

/* шаги */
.deco--balloon2{ right:2%; top:12%;    width:54px; --dur:7.5s; --rot:7deg }
.deco--star2   { left:2%;  bottom:14%; width:30px; color:var(--lilac); --dur:6s }

/* услуги */
.deco--blocks2{ left:1%;   top:4%; width:92px; --dur:9s; --rot:6deg }
.deco--pencil2{ right:2%;  top:3%; width:34px; --dur:7s; --rot:-16deg }

/* галерея и педагоги — внутри .container */
.deco--balloon3{ right:0;   top:-6px;  width:50px; --dur:7s;   --rot:6deg }
.deco--balloon4{ right:66px; top:24px; width:40px; --dur:8.5s; --rot:-9deg }
.deco--cloud3  { right:0;   top:-4px;  width:126px; color:#eef4f9; --dur:10s }

/* цитата и блок записи */
.deco--carriage2{ right:3%; bottom:-14px; width:112px; opacity:.9; --dur:9s }
.deco--star3{ left:6%;  top:14%;    width:26px; color:rgba(255,255,255,.5); --dur:6s }
.deco--star4{ right:8%; bottom:16%; width:34px; color:var(--gold); --dur:7.5s }

@media (max-width:1100px){
  .deco--cloud1,.deco--cloud2,.deco--pencil1,
  .deco--blocks1,.deco--blocks2,.deco--pencil2,.deco--balloon4{ display:none }
}
@media (max-width:700px){ .deco{ display:none } }

/* ── 19.6. Шаги «как всё начинается» ─────────────────────── */
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap) }
.steps::before{
  content:""; position:absolute; z-index:0; left:11%; right:11%; top:52px;
  border-top:3px dashed rgba(21,24,30,.16);
}
.step{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 .4rem;
}
.step__ico{
  display:grid; place-items:center; width:104px; height:104px; margin-bottom:1.15rem;
  border-radius:50%; background:var(--c-tint); color:var(--c);
  box-shadow:0 0 0 9px var(--paper), 0 16px 30px -18px var(--c);
}
.step__ico svg{ width:46px; height:46px }
.step__n{
  position:absolute; top:2px; left:calc(50% + 30px);
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--c); color:#fff; font-size:.92rem; font-weight:800;
  box-shadow:0 0 0 4px var(--paper);
}
.step b{ font-size:1.06rem; font-weight:800; letter-spacing:-.02em; color:var(--c-deep) }
.step__txt{ margin-top:.45em; font-size:.92rem; line-height:1.55; color:var(--ink-2); max-width:24ch }
.steps__cta{ margin-top:clamp(30px,3.6vw,46px); text-align:center }
@media (max-width:900px){
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:clamp(28px,4vw,40px) }
  .steps::before{ display:none }
}
@media (max-width:480px){ .steps{ grid-template-columns:1fr } }

/* ── 20. Появление при скролле ───────────────────────────── */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .75s var(--ease), transform .75s var(--ease) }
.js .reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important }
  .js .reveal{ opacity:1; transform:none }
}

/* ── 21. Печать ──────────────────────────────────────────── */
@media print{
  .hdr,.topbar,.fabs,.cts__map,.dirs{ display:none }
  body{ font-size:11pt }
  .revs{ columns:2 }
}