/* ══════════════════════════════════════════════════════════════════
   samimami.ru — общие стили. Правим здесь, на всех страницах меняется сразу.
   Цвета центра: лиловый #9a51ab, жёлтый #ffcf6f, бирюзовый #00a3ad, подложка #faf6ff.
   Шрифты свои (без Google Fonts): Mulish — текст, Fregat — заголовки, Kobzar — рукописные подписи.
   ══════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Mulish";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/mulish-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Mulish";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/mulish-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fregat";font-weight:400;font-display:swap;src:url(/assets/fonts/fregat.woff2) format("woff2")}
@font-face{font-family:"Fregat";font-weight:700;font-display:swap;src:url(/assets/fonts/fregatbold.woff2) format("woff2")}
@font-face{font-family:"Kobzar";font-weight:400;font-display:swap;src:url(/assets/fonts/kobzarks.woff2) format("woff2")}

:root{
  --violet:#9a51ab;--violet-dark:#7d3b8e;--yellow:#ffcf6f;--yellow-dark:#f5bd4a;--teal:#00a3ad;--teal-dark:#008890;
  --lilac:#faf6ff;--mint:#eaf5f6;--cream:#fff6e3;--text:#464646;--ink:#111;--muted:#828282;--line:#e8e0ee;
  --radius:40px;--radius-m:30px;--radius-s:20px;
  --wrap:1240px;--gutter:clamp(16px,3vw,40px);--section-gap:clamp(56px,8vw,110px);
  --font:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-h:"Fregat","Mulish",system-ui,sans-serif;--font-script:"Kobzar","Mulish",cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;font:400 17px/1.55 var(--font);color:var(--text);background:#fff}
img,svg,video{max-width:100%;height:auto}
a{color:var(--violet);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--violet-dark)}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:400;line-height:1.08;margin:0 0 .5em;color:var(--violet)}
h1{font-size:clamp(38px,6.2vw,76px);color:#fff}
h2{font-size:clamp(30px,4.4vw,52px)}
h3{font-size:clamp(22px,2.4vw,28px);color:var(--ink)}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em;margin:0 0 1em}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:10px;z-index:100}
.skip:focus{left:8px}
main{display:block}
.section{padding:var(--section-gap) 0 0}
.section--tight{padding-top:calc(var(--section-gap)*.6)}
.section__head{max-width:760px;margin-bottom:clamp(24px,3vw,44px)}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{font:600 18px/1.3 var(--font);color:var(--ink);margin:0 0 10px}
.lead{font-size:clamp(18px,1.6vw,21px);font-weight:600;color:var(--ink)}
.script{font-family:var(--font-script);color:var(--teal)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* кнопки и «таблетки» */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 30px;border:0;border-radius:100px;font:600 16px/1.2 var(--font);text-decoration:none;text-align:center;transition:transform .15s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn--violet{background:var(--violet);color:#fff}.btn--violet:hover{background:var(--violet-dark);color:#fff}
.btn--yellow{background:var(--yellow);color:var(--ink)}.btn--yellow:hover{background:var(--yellow-dark);color:var(--ink)}
.btn--white{background:#fff;color:var(--violet)}.btn--white:hover{background:var(--cream);color:var(--violet-dark)}
.btn--ghost{background:transparent;border:2px solid var(--violet);color:var(--violet)}.btn--ghost:hover{background:var(--violet);color:#fff}
.btn--sm{min-height:42px;padding:8px 22px;font-size:15px}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:8px 22px;border-radius:100px;border:0;font:500 15px/1.2 var(--font);color:var(--ink);text-decoration:none;white-space:nowrap}
.pill--mint{background:var(--mint)}.pill--cream{background:var(--cream)}.pill--violet{background:var(--violet);color:#fff;gap:10px;text-transform:uppercase;font-size:14px}
.pill:hover{color:var(--ink)}.pill--violet:hover{color:#fff;background:var(--violet-dark)}
.dots{display:inline-flex;gap:4px}.dots i{width:6px;height:6px;border-radius:50%;background:#fff}

/* шапка */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 2px 24px rgba(154,81,171,.08)}
.site-header__in{display:flex;align-items:center;gap:12px;min-height:84px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--violet);margin-right:auto;white-space:nowrap}
.logo__img{width:78px;height:auto;display:block}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__txt b{font:600 23px/1 var(--font);color:var(--violet)}
.logo__txt i{font:400 18px/1 var(--font-script);font-style:normal;margin-top:4px;color:var(--violet)}
.menu-btn{cursor:pointer}
@media (max-width:1060px){.pill--addr{display:none}}
@media (max-width:760px){.pill--phone{display:none}.site-header__in{min-height:68px}.logo__img{width:60px}.logo__txt b{font-size:19px}.logo__txt i{font-size:15px}}

/* боковое меню */
.drawer{position:fixed;inset:0;z-index:90;visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer__shade{position:absolute;inset:0;background:rgba(40,20,50,.45);opacity:0;transition:opacity .25s}
.drawer.is-open .drawer__shade{opacity:1}
.drawer__box{position:absolute;right:0;top:0;bottom:0;width:min(440px,100%);background:#fff;padding:22px 28px 30px;display:flex;flex-direction:column;gap:22px;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease;border-radius:var(--radius) 0 0 var(--radius)}
.drawer.is-open .drawer__box{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between}
.drawer__close{position:relative;width:46px;height:46px;border:0;border-radius:50%;background:var(--violet)}
.drawer__close span{position:absolute;left:13px;top:22px;width:20px;height:2px;background:#fff;transform:rotate(45deg)}
.drawer__close span+span{transform:rotate(-45deg)}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{padding:13px 0;border-bottom:1px solid var(--line);font:600 20px/1.2 var(--font);color:var(--ink);text-decoration:none}
.drawer__nav a:hover,.drawer__nav a[aria-current]{color:var(--violet)}
.drawer__contacts{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.drawer__contacts a{color:var(--ink);font-weight:600;text-decoration:none}
.drawer__contacts .btn{margin-top:8px}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--lilac)}
.socials a:hover{background:var(--mint)}
body.is-locked{overflow:hidden}

/* первый экран внутренних страниц */
.hero{position:relative;margin:14px var(--gutter) 0;border-radius:var(--radius);color:#fff;background:var(--violet);overflow:hidden;min-height:clamp(340px,38vw,470px);display:flex;align-items:flex-end}
.hero--teal{background:var(--teal)}.hero--violet{background:var(--violet)}.hero--yellow{background:var(--yellow);color:var(--ink)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.hero::before{width:620px;height:620px;right:-120px;top:-260px}
.hero::after{width:380px;height:380px;left:-140px;bottom:-200px;background:rgba(255,255,255,.08)}
.hero__in{position:relative;z-index:1;width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:clamp(70px,9vw,120px) var(--gutter) 28px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px;align-items:end}
.hero h1{margin:0 0 clamp(40px,5vw,70px)}
.hero__art{align-self:end;justify-self:center;max-height:clamp(240px,30vw,400px);width:auto;margin-bottom:56px}
.hero__nav{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
.hero__back{display:inline-flex;align-items:center;background:#fff;color:var(--violet);padding:9px 20px;border-radius:100px;text-decoration:none;font-weight:600}
.crumbs{display:flex;gap:6px;align-items:center;background:#fff;color:var(--muted);padding:9px 20px;border-radius:100px;font-weight:500}
.crumbs a{color:var(--ink);text-decoration:none}.crumbs a:hover{color:var(--violet)}
@media (max-width:760px){.hero__in{grid-template-columns:1fr;padding-top:100px}.hero__art{grid-row:1;max-height:230px;margin:0 auto -10px}.hero h1{margin-bottom:28px}}

/* главная: первый экран */
.home-hero{position:relative;padding:clamp(30px,5vw,70px) 0 clamp(40px,6vw,80px);text-align:center;overflow:hidden}
.home-hero::before{content:"";position:absolute;left:-14%;top:-6%;width:62%;aspect-ratio:1;border-radius:50%;background:#f1f9fa;z-index:0}
.home-hero::after{content:"";position:absolute;right:-12%;bottom:-10%;width:50%;aspect-ratio:1;border-radius:50%;background:var(--lilac);z-index:0}
.home-hero__in{position:relative;z-index:1;max-width:620px;margin:0 auto;padding:clamp(20px,5vw,60px) 0}
.home-hero__script{font:400 clamp(28px,4.4vw,51px)/1.1 var(--font-script);color:var(--teal);margin:0}
.home-hero h1{font-size:clamp(46px,9vw,100px);margin:.05em 0 .25em;background:linear-gradient(90deg,var(--violet) 15%,var(--teal) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.home-hero__lead{font-size:clamp(20px,2.2vw,26px);color:var(--ink);margin:0 0 .8em}
.home-hero__sub{max-width:460px;margin:0 auto 1.4em;color:var(--text)}
.bubble{position:absolute;z-index:1;border-radius:50%;overflow:hidden;background:var(--yellow);border:0;box-shadow:0 8px 30px rgba(154,81,171,.15)}
.bubble img{width:100%;height:100%;object-fit:cover;display:block}
.bubble--v{background:var(--violet)}.bubble--t{background:var(--teal)}
.bubble--ring{outline:2px solid var(--violet);outline-offset:8px}
.b1{width:clamp(110px,15vw,190px);left:4%;top:8%}.b2{width:clamp(70px,9vw,110px);left:9%;top:52%}.b3{width:clamp(80px,10vw,130px);left:19%;top:62%}
.b4{width:clamp(80px,10vw,128px);right:12%;top:6%}.b5{width:clamp(60px,7vw,90px);right:3%;top:34%}.b6{width:clamp(100px,14vw,200px);right:10%;bottom:4%}
@media (max-width:900px){.b2,.b3,.b5{display:none}.b1{left:-2%;top:2%;width:96px}.b4{right:-1%;top:0;width:84px}.b6{right:-2%;bottom:0;width:100px}.home-hero__in{padding:130px 0 80px}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;background:var(--violet);color:#fff;border-radius:var(--radius);padding:clamp(28px,4vw,52px);margin:0 var(--gutter)}
.stat{display:flex;gap:18px;align-items:center}
.stat__ring{flex:none;display:grid;place-items:center;width:96px;height:96px;border:2px solid rgba(255,255,255,.35);border-radius:50%;font:600 22px/1 var(--font);text-align:center}
.stat__ring--a{border-top-color:var(--teal)}.stat__ring--b{border-top-color:var(--yellow)}.stat__ring--c{border-top-color:#fff}
.stat h3{color:#fff;font:600 22px/1.2 var(--font);margin:0 0 6px}
.stat p{margin:0;font-size:16px;opacity:.92}
@media (max-width:860px){.stats{grid-template-columns:1fr;gap:22px}}

/* текст + картинки */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center}
.split--top{align-items:start}
.split--wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split__media{display:grid;gap:14px}
@media (max-width:860px){.split,.split--wide-left{grid-template-columns:1fr}.split__media{order:-1}}
.collage{display:grid;grid-template-columns:1fr 1.15fr;gap:14px}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-m);display:block}
.collage__tall{grid-row:span 2}
.collage img:nth-child(1){aspect-ratio:1;transform:rotate(-4deg)}
.collage img:nth-child(3){aspect-ratio:1;transform:rotate(3deg)}
.photo{width:100%;border-radius:var(--radius-m);display:block}
.cols-2{columns:2;column-gap:clamp(24px,5vw,70px)}
.cols-2 p{break-inside:avoid-column}
@media (max-width:760px){.cols-2{columns:1}}
.checks{list-style:none;padding:0;display:grid;gap:14px}
.checks li{position:relative;padding-left:26px}
.checks li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--teal)}

/* панель «Наши услуги» */
.panel{border-radius:var(--radius);padding:clamp(28px,5vw,70px) clamp(18px,4vw,60px);margin:0 var(--gutter)}
.panel--teal{background:var(--teal);color:#fff}.panel--teal h2{color:#fff}
.panel--violet{background:var(--violet);color:#fff}.panel--violet h2{color:#fff}
.panel--lilac{background:var(--lilac)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:820px;margin:0 auto}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;background:#fff;color:var(--text);border-radius:var(--radius-m);padding:14px 14px 28px;box-shadow:0 10px 36px rgba(0,0,0,.1)}
.card>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px;margin-bottom:20px;display:block}
.card h3{padding:0 14px;font:600 22px/1.25 var(--font);margin:0 0 8px;color:var(--ink)}
.card p{padding:0 14px;font-size:16px;flex:1}
.card .btn{margin:6px 14px 0}
.cards .card:nth-child(even){margin-top:50px}
@media (max-width:640px){.cards .card:nth-child(even){margin-top:0}}

/* полоса «Онлайн-курсы» */
.band{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:20px;margin:0 var(--gutter)}
.band__main{background:var(--violet);color:#fff;border-radius:var(--radius);padding:clamp(28px,4vw,60px)}
.band__main h2{color:#fff;margin-bottom:.4em}
.band__main p{max-width:780px}
.band__pic{background:var(--teal);border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;min-height:260px}
.band__pic img{width:112%;max-width:none;margin:0 -6%;height:auto;display:block}
@media (max-width:860px){.band{grid-template-columns:1fr}.band__pic img{width:auto;max-height:340px;margin:0}}

/* ленты (преподаватели, отзывы) */
.rail-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.rail-btns{display:flex;gap:10px}
.rail-btn{width:46px;height:46px;border-radius:50%;border:0;background:var(--mint);color:var(--ink);font-size:18px}
.rail-btn:hover{background:var(--violet);color:#fff}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 18px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-btns[hidden]{display:none!important}
.person{display:flex;flex-direction:column;justify-content:flex-start;flex:none;width:min(260px,72vw);scroll-snap-align:start;position:relative;border:0;text-align:center;border-radius:var(--radius-m);padding:14px 14px 22px;color:var(--ink);background:var(--mint);font:inherit}
.person:nth-child(3n+2){background:var(--lilac)}.person:nth-child(3n){background:var(--cream)}
.person img{width:100%;aspect-ratio:1/1.02;object-fit:cover;object-position:top;border-radius:22px;display:block;margin-bottom:14px}
.person b{display:block;font:600 19px/1.25 var(--font)}
.person span{display:block;font-size:15px;font-weight:300;margin-top:4px}
.shot{flex:none;scroll-snap-align:start;margin:0}
.shot img{height:clamp(240px,30vw,320px);width:auto;border-radius:20px;display:block;background:var(--lilac)}

/* галерея */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gallery figure{position:relative;margin:0;border-radius:var(--radius-m);overflow:hidden;background:var(--lilac)}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.gallery figcaption{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);background:#fff;border-radius:var(--radius-s);padding:14px 18px;font-size:15px;line-height:1.35;box-shadow:0 4px 18px rgba(0,0,0,.1)}
.gallery figcaption b{display:block;font:600 19px/1.2 var(--font);color:var(--ink);margin-bottom:4px}
@media (max-width:760px){.gallery{grid-template-columns:1fr}}

/* доверие: большое фото и жёлтая подложка */
.trust__photo{position:relative;border-radius:var(--radius-m);background:var(--yellow);padding:24px 24px 0;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.trust__photo img{max-height:380px;width:auto}
.trust__cap{background:var(--mint);border-radius:var(--radius-m);text-align:center;padding:26px;margin-top:10px;color:var(--ink);font-size:18px}

/* призыв с формой */
.cta{background:var(--violet);color:#fff;border-radius:var(--radius);margin:0 var(--gutter);padding:clamp(34px,5vw,70px) clamp(18px,4vw,60px);text-align:center;position:relative;overflow:hidden}
.cta h2{color:#fff}
.cta p{max-width:760px;margin:0 auto 1.4em}
.cta__art{position:absolute;left:50%;top:-34px;width:150px;transform:translateX(-50%);display:none}
.cta .lead-form{max-width:860px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;text-align:left;align-items:end}
.cta .lead-form .check,.cta .lead-form .form-error,.cta .lead-form .btn{grid-column:1/-1}
.cta .lead-form .btn{justify-self:center;width:min(390px,100%);margin-top:6px}
.cta .check{color:#fff;justify-self:center;max-width:540px}.cta .check a{color:#fff}
@media (max-width:860px){.cta .lead-form{grid-template-columns:1fr}}
.cta .lead-ok{padding:10px 0}

/* формы */
.field{display:grid;gap:6px;font-size:15px;font-weight:600}
.field span small{font-weight:400;opacity:.8}
.field input,.field select,.field textarea{width:100%;min-height:55px;padding:12px 18px;border:1px solid var(--line);border-radius:15px;font:400 16px/1.3 var(--font);color:#000;background:#fff}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(0,163,173,.4);border-color:var(--teal)}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#d93a3a;outline:2px solid rgba(217,58,58,.25)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--violet)}
.form-error{background:#fde8e8;color:#8a1f1f;border-radius:14px;padding:12px 16px;font-size:15px;margin:0}
.form-error a{color:#8a1f1f;font-weight:700}
.lead-form{display:grid;gap:14px}
.lead-form__hint{margin:-6px 0 4px;color:var(--text)}
[hidden]{display:none!important}

/* окна */
.dlg{border:0;border-radius:var(--radius-m);padding:clamp(24px,4vw,44px);width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;color:var(--text);box-shadow:0 20px 70px rgba(40,20,50,.35)}
.dlg::backdrop{background:rgba(40,20,50,.55)}
.dlg h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:.4em}
.dlg__close{position:absolute;right:14px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:var(--lilac);font-size:26px;line-height:1;color:var(--ink)}
.dlg--wide{width:min(860px,calc(100vw - 24px))}
.dlg .lead-ok{text-align:center;padding:10px 0}
.dlg-person{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start}
.dlg-person img{width:100%;border-radius:22px;aspect-ratio:1/1.1;object-fit:cover;object-position:top}
.dlg-person h2{margin-bottom:.1em}
.dlg-person .role{font-weight:700;color:var(--teal);margin-bottom:14px}
.dlg-person ul{padding-left:1.1em}.dlg-person li{margin-bottom:.6em}
@media (max-width:640px){.dlg-person{grid-template-columns:1fr}.dlg-person img{max-width:200px}}

/* направления (страница /napravleniya) */
.dirs{display:grid;gap:24px}
.dir{display:grid;grid-template-columns:230px minmax(0,1fr) 270px;gap:clamp(18px,3vw,36px);background:#fff;border-radius:var(--radius-m);padding:18px;align-items:stretch;box-shadow:0 6px 28px rgba(154,81,171,.1)}
.dir__img{position:relative;border-radius:22px;overflow:hidden;background:var(--mint);min-height:220px}
.dir__img img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.badge{position:absolute;left:10px;top:10px;z-index:1;background:var(--teal);color:#fff;border-radius:100px;padding:5px 14px;font-weight:700;font-size:14px}
.dir__body{padding:6px 0}
.dir__body h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:.3em;color:var(--ink)}
.dir__short{margin-bottom:14px}
.dir__meta h4{font:700 16px/1.3 var(--font);color:var(--violet);margin:12px 0 2px}
.dir__meta p{margin:0;font-size:16px}
.dir__buy{background:var(--lilac);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px;justify-content:center;text-align:center}
.dir__buy small{display:block;font-size:14px;color:var(--text)}
.dir__price{font:700 30px/1.1 var(--font);color:var(--ink)}
.dir__buy .btn{width:100%}
.dir__call{background:none;border:0;color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:4px}
@media (max-width:980px){.dir{grid-template-columns:190px minmax(0,1fr)}.dir__buy{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left}.dir__buy .btn{width:auto}}
@media (max-width:620px){.dir{grid-template-columns:1fr}.dir__img{min-height:0;aspect-ratio:16/10}.dir__buy{flex-direction:column;text-align:center}.dir__buy .btn{width:100%}}
.prices{width:100%;border-collapse:collapse;margin:8px 0 18px}
.prices td{padding:10px 0;border-bottom:1px solid var(--line)}
.prices td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.note{font-size:15px;color:var(--muted)}

/* специалисты на странице массажа */
.expert{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(24px,4vw,60px);align-items:start}
.expert img{width:100%;border-radius:var(--radius-m);aspect-ratio:1;object-fit:cover;object-position:top}
.expert h3{font-size:clamp(28px,3.4vw,40px)}
.expert dt{font:700 19px/1.3 var(--font);color:var(--violet);margin-top:18px}
.expert dd{margin:4px 0 0}
@media (max-width:760px){.expert{grid-template-columns:1fr}}

/* контакты */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,60px)}
.contact-grid dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.contact-grid dt{font:700 17px/1.3 var(--font);color:var(--ink);margin-top:14px}
.contact-grid dd{margin:0}
.map{border:0;width:100%;height:100%;min-height:380px;border-radius:var(--radius-m);background:var(--lilac)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* анкета */
.form-card{max-width:760px;margin:0 auto;background:#fff;border-radius:var(--radius-m);padding:clamp(20px,4vw,44px);box-shadow:0 10px 40px rgba(154,81,171,.14)}
.form-card .lead-form{gap:18px}

/* страницы онлайн-курсов */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.course{display:flex;flex-direction:column;background:var(--lilac);border-radius:var(--radius-m);padding:16px 16px 26px}
.course img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;margin-bottom:16px;background:#fff}
.course h3{padding:0 8px}.course p{padding:0 8px;flex:1}.course .btn{margin:6px 8px 0}
.tag{display:inline-block;background:var(--teal);color:#fff;border-radius:100px;padding:4px 14px;font-size:14px;font-weight:700;margin-bottom:12px}
.price-big{font:700 clamp(30px,4vw,44px)/1.1 var(--font);color:var(--ink)}
.price-old{text-decoration:line-through;color:var(--muted);font-weight:500;font-size:.6em;margin-left:10px}
.program{width:100%;border-radius:var(--radius-s);border:1px solid var(--line);background:#fff}
.faq details{border:1px solid var(--line);border-radius:var(--radius-s);padding:0 22px;margin-bottom:12px;background:#fff}
.faq summary{cursor:pointer;padding:18px 0;font:700 18px/1.3 var(--font);color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--violet)}
.faq details[open] summary::after{content:"–"}
.faq details>*:not(summary){padding-bottom:18px}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius-m);overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.table-scroll{overflow-x:auto}
.table-scroll table{border-collapse:collapse;min-width:520px;width:100%}
.table-scroll td,.table-scroll th{border:1px solid var(--line);padding:8px 12px;vertical-align:top;font-size:15px}

/* документы */
.doc{padding:clamp(28px,5vw,60px) 0 0}
.doc h1{color:var(--ink);font-size:clamp(28px,4vw,44px);margin-bottom:.8em}
.doc__body{font-size:17px;max-width:1000px}
.doc__body p{margin:0 0 1em}
.doc__body table{border-collapse:collapse;width:100%;margin:1em 0}
.doc__body td,.doc__body th{border:1px solid var(--line);padding:8px 12px;vertical-align:top}
.doc .crumbs{display:inline-flex;margin-bottom:22px;background:var(--lilac)}

/* подвал */
.site-footer{margin-top:var(--section-gap);padding-bottom:20px}
.site-footer>.wrap{background:var(--lilac);border-radius:var(--radius);padding:clamp(24px,4vw,48px) clamp(18px,4vw,40px) 20px;max-width:calc(var(--wrap) + var(--gutter)*2 - 20px)}
.foot{display:grid;grid-template-columns:1.3fr 1.1fr 1fr 1fr 1.1fr;gap:28px}
.foot h3{font:700 17px/1.3 var(--font);color:var(--ink);margin:0 0 8px}
.foot h3:not(:first-child){margin-top:20px}
.foot p,.foot address{font-style:normal;font-size:16px;margin:0 0 8px}
.foot a{color:var(--ink);text-decoration:none}.foot a:hover{color:var(--violet)}
.foot__about p{color:var(--muted);margin:14px 0}
.foot__about small{display:block;margin-top:14px;font-size:12px;color:var(--muted)}
.foot__links{display:flex;flex-direction:column;gap:8px;font-size:16px}
.foot__legal{display:flex;flex-wrap:wrap;gap:20px 80px;margin-top:30px;color:var(--muted);font-size:15px}
.foot__legal p{margin:0}
.foot__bar{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;background:#fff;border-radius:100px;padding:14px 26px;margin-top:26px;font-size:14px;font-weight:500;color:var(--ink)}
.foot__bar nav{display:flex;flex-wrap:wrap;gap:6px 22px;flex:1}
.foot__bar a{color:var(--ink);text-decoration:none}.foot__bar a:hover{color:var(--violet)}
.to-top{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--violet);color:#fff!important;font-size:20px}
@media (max-width:1100px){.foot{grid-template-columns:1fr 1fr 1fr}.foot__about{grid-column:1/-1}}
@media (max-width:640px){.foot{grid-template-columns:1fr}.foot__bar{border-radius:var(--radius-s)}}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ── страницы онлайн-курсов ── */
.chero{position:relative;margin:14px var(--gutter) 0;border-radius:var(--radius);background:var(--lilac);overflow:hidden;padding:clamp(24px,4vw,44px) 0 28px}
.chero--teal{background:var(--mint)}
.chero__top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.dash{display:inline-flex;align-items:center;gap:8px;border:1px dashed #b9a6c7;border-radius:100px;padding:7px 18px;font-weight:600;color:var(--ink);text-decoration:none;font-size:15px;background:rgba(255,255,255,.5)}
.dash::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet)}
.chero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:end}
.chero__mid{text-align:center;padding:10px 0 20px}
.chero h1{background:linear-gradient(90deg,var(--teal),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-size:clamp(40px,7vw,92px);margin:0 0 .1em}
.chero__script{font:400 clamp(30px,4.6vw,64px)/1.1 var(--font-script);color:var(--violet);margin:0 0 .5em}
.chero__pre{font-weight:600;color:var(--ink);margin:0 auto 1em;max-width:420px}
.chero__lead{max-width:500px;margin:0 auto 1.4em}
.chero__art{max-height:clamp(240px,32vw,440px);width:auto;justify-self:center}
.play{display:inline-flex;align-items:center;gap:12px;background:none;border:0;color:var(--ink);font-weight:600;font-size:16px;text-align:left;text-decoration:none}
.play__ico{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--teal);color:#fff;font-size:22px}
.chero .hero__nav{margin-top:14px;padding:0 var(--gutter);justify-content:flex-start}
@media (max-width:900px){.chero__grid{grid-template-columns:1fr}.chero__art{max-height:230px}.chero__art--l{order:2}.chero__art--r{display:none}}
.embed{position:relative;aspect-ratio:16/9;border-radius:var(--radius-m);overflow:hidden;background:#222 center/cover;max-width:1000px;margin:0 auto;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed__btn{position:absolute;inset:0;width:100%;border:0;background:rgba(40,20,50,.35);color:#fff;font-size:20px;font-weight:700;display:grid;place-items:center;gap:8px;align-content:center}
.embed__btn b{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--teal);font-size:32px}
.for-you{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;align-items:stretch}
.for-you__list{background:var(--lilac);border-radius:var(--radius-m);padding:28px}
.for-you__list ul{margin:0;padding-left:1.1em;display:grid;gap:14px}
.for-you__right{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:20px}
.mini{background:var(--mint);border-radius:22px;padding:16px 22px;margin-bottom:12px}
.mini b{display:block;font:600 21px/1.2 var(--font);color:var(--ink);margin-bottom:4px}
.mini b::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--violet);margin-right:10px}
.for-you__pic{background:var(--lilac);border-radius:var(--radius-m);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.for-you__pic img{max-height:400px;width:auto}
@media (max-width:960px){.for-you,.for-you__right{grid-template-columns:1fr}}
.numgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 34px;margin:26px 0}
.numgrid small{display:block;color:var(--muted);font-weight:700}
.numgrid b{display:block;font:600 20px/1.25 var(--font);color:var(--ink);margin:2px 0 8px}
.numgrid p{font-size:16px;margin:0}
@media (max-width:860px){.numgrid{grid-template-columns:1fr}}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:30px}
.chip{background:var(--lilac);border-radius:20px;padding:16px 18px}
.chip b{display:block;font:700 20px/1.2 var(--font);color:var(--ink)}
.chip b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--violet);margin-right:8px}
.chip span{font-size:15px}
.cols-3{columns:3;column-gap:34px}.cols-3>*{break-inside:avoid-column}
@media (max-width:960px){.cols-3{columns:1}}
.materials{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px;align-items:center}
.materials__pics{display:flex;justify-content:center;gap:0}.materials__pics img{max-height:360px;width:auto}
@media (max-width:860px){.materials{grid-template-columns:1fr}}
.price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.price-card{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;background:var(--mint);border-radius:var(--radius-m);padding:28px}
.price-card--l{background:var(--lilac)}
.price-card img{width:100%;border-radius:14px}
.price-card h3{font-size:30px;margin:6px 0}
.ticks{list-style:none;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px #e7d6ee}
.fine{font-size:13px;color:var(--text);margin-top:12px}
@media (max-width:960px){.price-grid{grid-template-columns:1fr}.price-card{grid-template-columns:1fr}.price-card img{max-width:220px}}
.faq-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:start}
.faq-side{background:var(--mint);border-radius:var(--radius-m);padding:28px;text-align:center;display:grid;gap:12px}
.faq details{background:var(--lilac);border-color:transparent}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}}
.modules details{border:1px solid var(--line);border-radius:var(--radius-s);margin-bottom:12px;background:#fff;padding:0 22px}
.modules summary{cursor:pointer;padding:16px 0;font:600 19px/1.3 var(--font);color:var(--ink);list-style:none;display:flex;gap:14px}
.modules summary small{color:var(--violet);font-weight:700;white-space:nowrap}
.modules summary::after{content:"❯";margin-left:auto;color:var(--muted)}
.modules details[open] summary::after{transform:rotate(90deg)}
.modules .mod-body{padding-bottom:18px}
.mod-by{display:flex;gap:6px;color:var(--muted);font-size:15px;margin-bottom:8px}
.phones{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 16px;justify-content:flex-start}
.phones img{height:380px;width:auto;flex:none}
.docs-row{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:center;padding:34px 0 0;font-size:15px}
.docs-row a{color:var(--ink);text-decoration:none}.docs-row a:hover{color:var(--violet)}
.cplx{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,260px);gap:24px;align-items:center;padding:20px;border-radius:var(--radius-m);background:#fff;box-shadow:0 6px 28px rgba(154,81,171,.1);margin-bottom:22px}
.cplx img{width:100%;border-radius:20px;aspect-ratio:2/1.5;object-fit:cover}
.cplx h3{margin:0 0 6px}
.cplx__stats{display:flex;gap:26px;margin:10px 0;color:var(--text)}
.cplx__stats b{display:block;font:700 18px/1.2 var(--font);color:var(--ink)}
.cplx__stats small{font-size:14px;color:var(--muted)}
.cplx__buy{display:grid;gap:10px;justify-items:start}
@media (max-width:960px){.cplx{grid-template-columns:1fr}}
.age{display:inline-block;border:1px dashed var(--teal);border-radius:100px;padding:2px 14px;font-weight:700;color:var(--teal);font-size:14px;margin-bottom:6px}
.band-lbl{font:600 22px/1.3 var(--font);color:var(--ink);margin:36px 0 16px}

/* ══ Анимации ══════════════════════════════════════════════════════════════
   Включаются только если у человека не отключены анимации в системе и работает JS:
   маленький скрипт в <head> ставит на <html> класс .anim. Без него страница статична и читается как есть.
   Блоки сами получают data-rv из site.js (список селекторов там) — в разметку руками ничего добавлять не нужно. */
.anim [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--rd,0s),transform .75s cubic-bezier(.2,.7,.2,1) var(--rd,0s);will-change:opacity,transform}
.anim [data-rv=left]{transform:translateX(-40px)}
.anim [data-rv=right]{transform:translateX(40px)}
.anim [data-rv=zoom]{transform:scale(.92)}
.anim [data-rv=fade]{transform:none}
.anim [data-rv].is-in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-8px)}}
.anim .hero h1,.anim .hero__art,.anim .hero__nav{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.anim .hero__art{animation-name:pop;animation-delay:.15s}
.anim .hero__nav{animation-delay:.3s}
.anim .hero::before{animation:drift 14s ease-in-out infinite}
.anim .hero::after{animation:drift 18s ease-in-out infinite reverse}
.anim .home-hero__in>*{animation:rise .85s cubic-bezier(.2,.7,.2,1) both}
.anim .home-hero__in>*:nth-child(1){animation-delay:.05s}.anim .home-hero__in>*:nth-child(2){animation-delay:.2s}
.anim .home-hero__in>*:nth-child(3){animation-delay:.32s}.anim .home-hero__in>*:nth-child(4){animation-delay:.44s}
.anim .home-hero__in>*:nth-child(5){animation-delay:.56s}
.anim .bubble{animation:pop .8s cubic-bezier(.2,.9,.3,1.2) both,float 7s ease-in-out 1s infinite}
.anim .b1{animation-delay:.1s,1s}.anim .b2{animation-delay:.3s,1.6s;animation-duration:.8s,8s}.anim .b3{animation-delay:.45s,.4s;animation-duration:.8s,6.5s}
.anim .b4{animation-delay:.2s,.8s;animation-duration:.8s,7.5s}.anim .b5{animation-delay:.5s,1.2s;animation-duration:.8s,9s}.anim .b6{animation-delay:.35s,.2s;animation-duration:.8s,8.5s}
.anim .chero__top,.anim .chero__mid>*,.anim .chero__art{animation:rise .85s cubic-bezier(.2,.7,.2,1) both}
.anim .chero__mid>*:nth-child(2){animation-delay:.1s}.anim .chero__mid>*:nth-child(3){animation-delay:.2s}.anim .chero__mid>*:nth-child(4){animation-delay:.3s}.anim .chero__mid>*:nth-child(5){animation-delay:.4s}
.anim .chero__art{animation-name:pop;animation-delay:.2s}
.anim .home-hero::before,.anim .home-hero::after{animation:drift 20s ease-in-out infinite}
/* наведение: карточки чуть приподнимаются */
.card,.dir,.course,.cplx,.person,.mini,.chip,.shot img{transition:transform .28s ease,box-shadow .28s ease}
.card:hover,.dir:hover,.cplx:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(154,81,171,.18)}
.person:hover,.course:hover,.mini:hover,.chip:hover{transform:translateY(-4px)}
.shot img:hover{transform:scale(1.03)}
.gallery img,.collage img,.dir__img img,.card>img,.course img{transition:transform .6s ease}
.gallery figure:hover img,.dir:hover .dir__img img,.card:hover>img,.course:hover img{transform:scale(1.05)}
.gallery figure,.dir__img,.card{overflow:hidden}
.card{overflow:visible}.card>img{overflow:hidden}
.bubble img{transition:transform .5s ease}.bubble:hover img{transform:scale(1.08)}
.stat__ring{transition:transform .4s ease,border-color .4s}.stat:hover .stat__ring{transform:rotate(12deg) scale(1.05)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease;pointer-events:none}
.btn:hover::after{transform:translateX(120%)}
@media print{.anim [data-rv]{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){.anim *,.anim *::before,.anim *::after{animation:none!important}.anim [data-rv]{opacity:1!important;transform:none!important}}

/* окно педагога на телефоне: фото на всю ширину, крестик поверх фото справа */
@media (max-width:640px){
  .dlg--person{padding:0;overflow-x:hidden}
  .dlg--person .dlg-person{display:block}
  .dlg--person .dlg-person>img{width:100%;max-width:none;aspect-ratio:4/3.4;border-radius:0;display:block}
  .dlg--person .dlg-person>div{padding:20px 22px 26px}
  .dlg--person .dlg__close{z-index:2;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.2)}
}

/* крестик закрытия окон: линии рисуем сами, чтобы он стоял ровно по центру кружка */
.dlg__close{font-size:0;line-height:0;padding:0;transition:transform .3s ease,background .2s}
.dlg__close::before,.dlg__close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:var(--ink);transition:background .2s}
.dlg__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.dlg__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dlg__close:hover{transform:rotate(90deg) scale(1.1);background:var(--violet)}
.dlg__close:hover::before,.dlg__close:hover::after{background:#fff}
@media (max-width:640px){
  .dlg--person .dlg__close,.dlg__close{width:32px;height:32px;right:12px;top:12px}
  .dlg__close::before,.dlg__close::after{width:12px}
}

/* главная на телефоне: заголовок выше, без малыша у кнопок, кнопки одной ширины, меньше воздуха до полосы «6 лет» */
@media (max-width:900px){
  .home-hero{padding-bottom:20px}
  .home-hero__in{padding:100px 0 8px!important}
  .home-hero .b6{display:none}
  .home-hero .btn-row{flex-direction:column;align-items:center;gap:12px}
  .home-hero .btn-row .btn{width:min(310px,100%)}
}

/* телефон: компактная кнопка меню и компактная панель меню */
@media (max-width:760px){
  .menu-btn{min-height:36px;padding:6px 14px;font-size:12px;gap:7px}
  .menu-btn .dots i{width:4px;height:4px}
  .drawer__box{padding:14px 20px 18px;gap:12px}
  .drawer__close{width:38px;height:38px}
  .drawer__close span{left:10px;top:18px;width:18px}
  .drawer__nav a{padding:9px 0;font-size:17px}
  .drawer__contacts{gap:4px;font-size:15px}
  .drawer__contacts .btn{min-height:40px;padding:8px 22px;margin-top:6px;font-size:15px}
  .socials a{width:36px;height:36px}
}

/* ── боковое меню: плавное выезжание, матовый фон, нумерация, игрушки (как в проекте «Травник») ── */
.drawer{transition:visibility 0s .5s}
.drawer.is-open{transition-delay:0s}
.drawer__shade{background:rgba(120,70,140,.28);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:opacity .45s ease}
.drawer__box{width:min(420px,75vw);background:linear-gradient(#fff,#f4eaf8);box-shadow:-24px 0 60px -30px rgba(60,20,80,.5);overflow:hidden auto;overscroll-behavior:contain;transition:transform .55s cubic-bezier(.22,.8,.2,1)}
.drawer__box>*:not(.drawer__toy){position:relative;z-index:1}
.drawer__toy{position:absolute;z-index:0;opacity:.4;filter:saturate(.55);pointer-events:none;height:auto}
.drawer__toy--a{right:-46px;bottom:-14px;width:230px;transform:rotate(-8deg)}
.drawer__toy--b{left:-34px;bottom:130px;width:130px;transform:rotate(7deg);opacity:.3}
.drawer__nav a{display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateX(34px);transition:opacity .5s ease calc(.15s + var(--i) * .07s),transform .6s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i) * .07s),color .2s}
.drawer__nav a small{font:700 12px/1 var(--font);letter-spacing:.1em;color:var(--violet)}
.drawer.is-open .drawer__nav a{opacity:1;transform:none}
.drawer__contacts,.drawer .socials{opacity:0;transform:translateY(16px);transition:opacity .5s ease calc(.15s + var(--i,7) * .07s),transform .6s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i,7) * .07s)}
.drawer.is-open .drawer__contacts,.drawer.is-open .socials{opacity:1;transform:none}
.drawer.is-open .drawer__close{animation:m-spin .6s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes m-spin{from{transform:rotate(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.drawer__close{transition:transform .35s ease,background .2s,box-shadow .2s}
.drawer__close:hover{transform:rotate(90deg) scale(1.1);background:var(--violet-dark);box-shadow:0 6px 16px rgba(125,59,142,.4)}
@media (max-width:760px){
  .drawer__box{padding:calc(env(safe-area-inset-top,0px) + 34px) 20px 18px}
}
@media (prefers-reduced-motion:reduce){.drawer__box,.drawer__nav a,.drawer__contacts,.drawer .socials,.drawer__shade{transition:none}.drawer.is-open .drawer__close{animation:none}.drawer__nav a,.drawer__contacts,.drawer .socials{opacity:1;transform:none}}

/* телефон: кружки в полосе «6 лет» меньше на 30%, текста помещается больше */
@media (max-width:860px){
  .stats{gap:16px;padding:24px 20px}
  .stat{gap:14px}
  .stat__ring{width:67px;height:67px;font-size:16px}
  .stat h3{font-size:19px;margin-bottom:3px}
  .stat p{font-size:15px;line-height:1.4}
}

/* шапка всегда закреплена; при прокрутке — матовое стекло */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
body{overflow-x:clip}

@media (max-width:760px){.btn-row--mission .btn{width:100%}}

/* ── воздушные шарики на первом экране главной (спокойные цвета, лопаются по клику) ── */
.balloons{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.balloon{position:absolute;bottom:-90px;left:var(--x);width:var(--s);height:calc(var(--s) * 1.22);cursor:pointer;pointer-events:auto;animation:balloon-up var(--d) linear var(--dl) both;will-change:transform}
.balloon i{position:absolute;inset:0;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),transparent 38%),var(--c);opacity:.5;animation:balloon-sway var(--sw) ease-in-out infinite alternate;transform-origin:50% 100%}
.balloon i::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:calc(var(--s) * .9);background:rgba(120,90,140,.28);transform-origin:top}
.balloon:hover i{opacity:.65}
@keyframes balloon-up{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--hh,800px) - 220px))}}
@keyframes balloon-sway{from{transform:translateX(-14px) rotate(-4deg)}to{transform:translateX(14px) rotate(4deg)}}
.balloon.is-pop i{animation:balloon-pop .22s ease-out forwards}
@keyframes balloon-pop{to{transform:scale(1.35);opacity:0}}
.balloon-bit{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--c);opacity:.7;animation:balloon-bit .7s cubic-bezier(.2,.7,.3,1) forwards;pointer-events:none}
@keyframes balloon-bit{to{transform:translate(var(--bx),var(--by)) scale(.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.balloons{display:none}}
.home-hero__in{pointer-events:none}.home-hero__in>*{pointer-events:auto}.home-hero__lead,.home-hero__sub{pointer-events:none}.home-hero__in .btn-row{pointer-events:none}.home-hero__in .btn{pointer-events:auto}

/* шарики — поверх большого полукруга фона, бабочки из лопнувших шариков */
.home-hero{isolation:isolate}
.home-hero::before,.home-hero::after{z-index:-1}
.butterfly{position:absolute;left:0;top:0;width:64px;height:52px;pointer-events:none;will-change:transform}
.butterfly svg{display:block;width:100%;height:100%;overflow:visible}
.butterfly .bf-w{transform-box:fill-box;transform-origin:100% 50%;animation:bf-flap .22s ease-in-out infinite alternate}
@keyframes bf-flap{from{transform:scaleX(1)}to{transform:scaleX(.25)}}

/* главная, блок «Онлайн-курсы» на телефоне: без фото, кнопка на всю ширину */
@media (max-width:860px){
  .band__pic{display:none}
  .band__main .btn{width:100%}
}
.balloon,.balloon *{outline:none!important;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.balloon:active,.balloon:focus{background:none}
.butterfly{opacity:0}

.trust__cap{padding:22px 12px;font-size:clamp(14.5px,4.1vw,18px)}
.rail{cursor:grab}
.rail.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail.is-drag *{pointer-events:none;user-select:none}
.rail img{-webkit-user-drag:none;user-drag:none}
@media (max-width:640px){.foot__bar{padding:14px 18px}.foot__bar nav{flex:1 1 100%}}
@media (min-width:700px){.cta .check{max-width:none;white-space:nowrap}}
.foot__legal{justify-content:space-between}
.foot__legal p:last-child{margin-left:auto;text-align:right}
@media (max-width:640px){.foot__legal p:last-child{margin-left:0;text-align:left}}
.check{align-items:center}.check input{margin:0}

/* выпадающий список в стиле сайта */
.csel{position:relative}
.csel__btn{width:100%;min-height:55px;padding:12px 44px 12px 18px;border:1px solid var(--line);border-radius:15px;background:#fff;font:400 16px/1.3 var(--font);color:#000;text-align:left;cursor:pointer;position:relative;transition:border-color .2s,box-shadow .2s}
.csel__btn::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--violet);border-bottom:2px solid var(--violet);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.csel.is-open .csel__btn{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,163,173,.25)}
.csel.is-open .csel__btn::after{transform:translateY(-20%) rotate(-135deg)}
.csel__btn.is-ph{color:#8a8a8a}
.csel__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:240px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 14px 36px rgba(90,40,110,.2);animation:csel-in .18s ease}
@keyframes csel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.csel__opt{padding:11px 14px;border-radius:11px;font-size:16px;cursor:pointer;color:var(--ink);transition:background .15s}
.csel__opt:hover{background:var(--lilac);color:var(--violet)}
.csel__opt.is-on{background:var(--lilac);color:var(--violet);font-weight:700}
.csel__opt.is-ph{color:#8a8a8a}

/* главная: блок «Наша миссия» */
.mission{background:var(--lilac);border-radius:var(--radius-m);padding:clamp(22px,3.4vw,40px)}
.mission__label{font:700 13px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 12px}
.mission__title{font-size:clamp(26px,3.2vw,38px);margin:0 0 .5em}
.mission p{line-height:1.6}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 20px}
.tags li{background:#fff;border-radius:100px;padding:7px 15px;font-size:14.5px;font-weight:600;color:var(--violet);box-shadow:0 2px 8px rgba(154,81,171,.1)}

@media (max-width:640px){.tags{gap:6px}.tags li{padding:6px 11px;font-size:12.5px}}
/* «Наши услуги»: летающие матовые иконки по бокам (только широкие экраны) */
#uslugi .panel{position:relative;overflow:hidden}
#uslugi .panel>*:not(.svc-fly){position:relative;z-index:1}
.svc-fly{position:absolute;inset:0;z-index:0;pointer-events:none;display:none}
@media (min-width:1100px){.svc-fly{display:block}}
.svc-fly .fly{position:absolute;opacity:0;width:var(--w);animation:fly-io 6.5s ease-in-out forwards;filter:drop-shadow(0 8px 14px rgba(0,60,70,.12))}
.svc-fly .fly svg{display:block;width:100%;height:auto}
@keyframes fly-io{
  0%{opacity:0;transform:translateX(calc(var(--sx) * 90px)) scale(.7) rotate(calc(var(--sx) * 10deg))}
  14%{opacity:.34;transform:translateX(0) scale(1) rotate(0)}
  50%{opacity:.34;transform:translateY(-16px) rotate(calc(var(--sx) * -4deg))}
  86%{opacity:.34;transform:translateY(4px) rotate(0)}
  100%{opacity:0;transform:translateX(calc(var(--sx) * 90px)) scale(.7) rotate(calc(var(--sx) * 10deg))}
}
@media (prefers-reduced-motion:reduce){.svc-fly{display:none!important}}
.cards .card:nth-child(even){margin-top:0}

button,a,.rail-btn,.person,.shot{-webkit-tap-highlight-color:transparent}
.rail-btn{outline:none}.rail-btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

.expert .btn-row .btn{width:100%}
/* телефон: на картинке первого экрана нет «Вернуться назад» и крошек, ниже меньше пустоты */
@media (max-width:760px){
  .hero__nav,.chero .hero__nav{display:none}
  .hero{min-height:0;align-items:stretch}
  .hero__in{padding:70px var(--gutter) 22px}
  .hero__art{margin-bottom:0;max-height:200px}
  .hero h1{margin-bottom:0}
  .chero{padding-bottom:12px}
}

.e404{font:400 clamp(90px,16vw,170px)/1 var(--font-h);margin:0;background:linear-gradient(90deg,var(--violet),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo__txt b{letter-spacing:.02em;font-size:21px}@media (max-width:760px){.logo__txt b{font-size:17px}}

.tags .tags__br{display:none;padding:0;box-shadow:none;background:none}
@media (max-width:640px){.tags .tags__br{display:block;flex-basis:100%;height:0}}

.tags .tags__br{display:none;padding:0;box-shadow:none;background:none;flex-basis:100%;height:0}
@media (min-width:641px){.tags .tags__br--d{display:block}}
@media (max-width:640px){.tags .tags__br--m{display:block}}

/* окна: заголовок не заезжает под крестик, кружок меньше и дальше от угла */
.dlg h2{padding-right:46px}
.dlg__close{width:34px;height:34px;right:20px;top:20px}
.dlg__close::before,.dlg__close::after{width:14px}
@media (max-width:640px){
  .dlg{padding-top:30px}
  .dlg h2{padding-right:40px;margin-top:0}
  .dlg__close,.dlg--person .dlg__close{width:30px;height:30px;right:14px;top:14px}
  .dlg__close::before,.dlg__close::after{width:11px}
  .dlg--person h2{padding-right:0}
}
/* заголовок окна на одной линии с крестиком */
.dlg{padding-top:20px}
.dlg h2{min-height:34px;display:flex;align-items:center;margin-bottom:.5em}
.dlg-person h2{min-height:0;display:block}
@media (max-width:640px){.dlg{padding-top:14px}.dlg h2{min-height:30px}.dlg--person{padding:0}}
@media (min-width:641px){.dlg__close{top:22px}}
.logo__txt{align-items:center}
.dlg{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
@media (max-width:640px){.dlg{margin-top:max(24px,env(safe-area-inset-top));max-height:calc(100dvh - 56px)}}

/* /online: цена текстом, название курса — ссылка, большие цифры «О проекте» */
.cplx__buy{align-items:flex-start}
.cplx__price{font:700 28px/1.1 var(--font);color:var(--ink)}
.cplx__link{color:inherit;text-decoration:none}.cplx__link:hover{color:var(--violet)}
.bigstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:30px 0 10px}
.bigstats b{display:block;font:400 clamp(40px,5vw,60px)/1.05 var(--font-h);color:var(--violet);margin-bottom:6px}
.bigstats span{font-size:16px;color:var(--text)}
@media (max-width:760px){.bigstats{grid-template-columns:1fr;gap:18px}}
.cplx__buy{align-items:center;justify-items:center;text-align:center}
.cplx__price{font-weight:500;font-size:26px}
.cplx__buy .btn{min-width:200px}
@media (max-width:960px){.cplx__buy{justify-items:stretch}.cplx__buy .btn{min-width:0;width:100%}}