/* ============================================================
   Планета Знаний — лендинг, десктоп-эталон (контейнер 1300px)
   Конвертация из Claude Design макета. Значения перенесены 1:1.
   Палитра и константы — см. decisions.md.
   ============================================================ */

:root{
  --cyan:#4EC2F0;          /* голубой акцент на тёмном */
  --blue:#0B54A0;          /* основной синий, ссылки */
  --blue-hover:#093F78;
  --blue-deep:#16588C;
  --ink:#0F2038;           /* тёмный фон секций / основной текст */
  --ink-1:#071A33;         /* фон первого экрана */
  --card-dark:#172C48;     /* карточки на тёмном */
  --t-46:#46566E;
  --t-64:#64748B;
  --t-90:#90A0B5;
  --t-b1:#B1C0D2;
  --t-bb:#BBC9DB;
  --t-de:#DEE8F2;
  --border:#E4EBF3;
  --border-2:#D8E4F0;
  --green:#22CF63;
  --bg-soft:#F4F8FC;
  --radius-lg:1.75rem;
  --radius:1.375rem;
  --radius-sm:0.875rem;
  --shadow-card:0 26px 54px -30px rgba(0,0,0,.6);
  --shadow-light:0 16px 34px -24px rgba(15,32,56,.34);
  --shadow-section:0 28px 56px -30px rgba(15,32,56,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}   /* плавный скролл к якорям + отступ под липкую шапку */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:Onest,"Segoe UI",Arial,sans-serif;
  font-size:1rem;line-height:1.6;letter-spacing:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hover)}
:focus-visible{outline:3px solid var(--blue);outline-offset:0.1875rem;border-radius:0.375rem}
img{max-width:100%}
picture{display:contents}   /* <picture> не влияет на раскладку, стили ловит вложенный <img> */
.br-m{display:none}   /* перенос строки только на мобилке */

/* ---- контейнер страницы ---- */
.page{width:100%;max-width:81.25rem;margin:0 auto;display:flex;flex-direction:column;gap:1.75rem}

/* ---- кнопки ---- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:0.6875rem;
  font-weight:700;font-size:1rem;line-height:1.2;
  padding:1rem 1.25rem;border-radius:var(--radius-sm);
  transition:transform .18s;white-space:nowrap;
}
.btn:hover{transform:translateY(-0.125rem)}
.btn img{width:1.375rem;height:1.375rem;flex:none}
.btn--wa{background:var(--green);color:#fff;box-shadow:0 14px 28px -16px rgba(0,0,0,.5)}
.btn--wa:hover{color:#fff}
.btn--max{background:#fff;color:var(--blue)}
.btn--max img{width:1.5rem;height:1.5rem;border-radius:0.4375rem}
.btn--max:hover{color:var(--blue)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:0.625rem;flex:none;
  font-weight:700;font-size:1rem;line-height:1.2;padding:1rem 1.625rem;
  border-radius:var(--radius-sm);border:1px solid var(--border);
  color:var(--blue);background:var(--bg-soft);
  transition:background .18s,border-color .18s;
}
.btn-ghost:hover{background:#EAF2FA;border-color:var(--blue);color:var(--blue)}

/* ============================================================
   Шапка (стеклянная плашка)
   ============================================================ */
.bar{
  position:relative;display:flex;align-items:center;gap:1.625rem;padding:0 0.875rem;
  border-radius:62.4375rem;overflow:hidden;border:1px solid rgba(255,255,255,.26);
  background:linear-gradient(150deg,rgba(9,26,48,.58),rgba(9,26,48,.42));
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 22px 44px -24px rgba(0,0,0,.65);
}
.bar-logo{
  position:relative;background:#fff;border-radius:62.4375rem;padding:0.5rem 1.25rem;
  display:flex;align-items:center;box-shadow:0 10px 24px -14px rgba(0,0,0,.6);flex:none;
}
.bar-logo img{height:2.375rem;width:auto;display:block}
.bar-nav{position:relative;display:flex;gap:1.375rem;font-size:0.9375rem;font-weight:500;flex:none}
.bar-nav a{position:relative;color:var(--t-de);white-space:nowrap;transition:color .18s}
.bar-nav a:hover{color:#fff}
.bar-right{position:relative;margin-left:auto;display:flex;align-items:center;gap:1rem;flex:none}
.bar-tel{font-weight:800;font-size:1rem;line-height:1.15;color:#fff;white-space:nowrap}
.bar-tel small{display:block;font-weight:400;font-size:0.75rem;line-height:1.4;margin-top:0.125rem;color:var(--t-bb)}
.bar-msgrs{display:flex;gap:0.5625rem}
.bar-msgrs a{width:2.75rem;height:2.75rem;border-radius:62.4375rem;display:flex;align-items:center;justify-content:center}
.bar-msgrs .wa{background:var(--green)}
.bar-msgrs .wa img{width:1.5rem;height:1.5rem}
.bar-msgrs .max img{width:2.75rem;height:2.75rem;border-radius:62.4375rem;display:block}

/* sticky-вариант шапки (появляется на скролле) */
.sticky-wrap{
  position:fixed;top:0;left:0;right:0;z-index:50;display:none;
  justify-content:center;animation:pz-drop .3s ease;
}
.sticky-wrap.is-visible{display:flex}
@keyframes pz-drop{from{transform:translateY(-130%)}to{transform:none}}
.sticky-wrap .bar{flex:none;width:min(81.25rem,calc(100vw - 2rem));height:4.125rem;margin:0.875rem 0}
.sticky-wrap .bar-logo img{height:2rem}
.sticky-wrap .bar-logo{padding:0.5rem 0.75rem}

/* ============================================================
   Экран 1 — Первый экран
   ============================================================ */
.hero{
  width:100%;height:44.375rem;overflow:hidden;border-radius:var(--radius-lg);
  position:relative;color:#fff;background:var(--ink-1);display:flex;flex-direction:column;
}
.hero__bg{
  position:absolute;inset:0;background:url(../assets/photos/hero.jpg) center/cover no-repeat;
  background-image:-webkit-image-set(url(../assets/photos/hero.webp) type("image/webp"), url(../assets/photos/hero.jpg) type("image/jpeg"));
  background-image:image-set(url(../assets/photos/hero.webp) type("image/webp"), url(../assets/photos/hero.jpg) type("image/jpeg"));
  top:-32.1875rem;bottom:-11.875rem;right:0.0625rem;left:-0.125rem;
}
.hero .bar{height:4.75rem;flex:none;margin:1.375rem 1.875rem 0}
.hero__grid{
  position:relative;flex:none;height:50.125rem;display:grid;
  grid-template-columns:minmax(0,1fr) 23.25rem;gap:3rem;align-items:center;
  padding:0 2.75rem 4rem;
  background:linear-gradient(180deg,rgba(7,26,51,0) 10%,rgba(7,26,51,.38));
}
.hero__col{position:relative}
.hero__intro{display:contents}
.hero__title{
  font-weight:800;font-size:3.875rem;line-height:1.05;letter-spacing:-.03em;margin:0;text-wrap:pretty;
  text-shadow:0 2px 4px rgba(5,16,33,.45),0 8px 40px rgba(5,16,33,.6);
}
.hero__title span{color:var(--cyan)}
.hero__lead{
  margin:1.5rem 0 0;font-size:1.125rem;line-height:1.6;color:#fff;max-width:35rem;text-wrap:pretty;
  text-shadow:0 1px 2px rgba(5,16,33,.7),0 2px 10px rgba(5,16,33,.6),0 8px 32px rgba(5,16,33,.5);
}
.hero__lead .accent{color:var(--cyan);font-weight:700}
.hero__glow{
  position:absolute;left:-3.75rem;top:50%;width:51.25rem;height:35rem;transform:translateY(-50%);
  border-radius:50%;background:radial-gradient(closest-side,rgba(5,16,33,.82),rgba(5,16,33,0) 80%);
  filter:blur(26px);z-index:-1;
}
.hero__badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;margin-top:1.875rem;width:100%;max-width:38.75rem}
.badge{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:0.8125rem 1rem;
  border-radius:0.75rem;font-weight:700;font-size:0.8125rem;line-height:1.25;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.32);color:#fff;
  background:rgba(9,26,48,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .18s,border-color .18s;
}
.badge:hover{background:rgba(16,88,140,.62);border-color:rgba(120,214,255,.6)}
.hero__card{
  position:relative;overflow:hidden;border-radius:var(--radius);padding:1.75rem;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 60px -30px rgba(0,0,0,.6);
}
.hero__card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  background:linear-gradient(150deg,rgba(9,26,48,.62),rgba(9,26,48,.46));
}
.hero__card > *{position:relative}
.hero__card h2{font-size:2rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 0.625rem;text-wrap:pretty;color:#fff}
.hero__card h2 span{color:var(--cyan)}
.hero__card p.sub{font-size:1rem;line-height:1.6;color:var(--t-de);margin:0 0 1.375rem;text-wrap:pretty}
.hero__card .btn{margin-top:0.6875rem}
.hero__card .btn:first-of-type{margin-top:0}
.hero__card .note{margin:0.875rem 0 0;font-size:0.875rem;line-height:1.5;color:var(--t-bb);text-align:center}

/* ============================================================
   Секции — общее
   ============================================================ */
.section{position:relative;width:100%;border-radius:var(--radius-lg);padding:5.5rem 2.75rem;overflow:hidden}
.section--dark{background:var(--ink);color:#fff;isolation:isolate}
.section--light{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-section)}
.section__title{font-size:2.875rem;font-weight:800;letter-spacing:-.028em;line-height:1.08;margin:0;text-wrap:pretty}
.section--dark .section__title{color:#fff}
.section--light .section__title{color:var(--ink)}
.section__title .accent-cyan{color:var(--cyan)}
.section__title .accent-blue{color:var(--blue)}
.section__lead{margin:1rem 0 0;font-size:1.125rem;line-height:1.6;text-wrap:pretty}
.section--dark .section__lead{color:var(--t-bb)}
.section--light .section__lead{color:var(--t-46)}
.section__lead .accent-cyan{color:var(--cyan);font-weight:700}
.section__lead .accent-blue{color:var(--blue);font-weight:700}

/* ---- сетки карточек ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2.75rem;align-items:stretch}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:2.75rem;align-items:stretch}

/* ---- карточки ---- */
.card{border-radius:var(--radius);padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:0.75rem}
.card--dark{background:var(--card-dark);border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-card)}
.card--light{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-light);gap:0.625rem}
.card h3{font-size:1.375rem;font-weight:700;line-height:1.3;letter-spacing:-.015em;margin:0}
.card--dark h3{color:#fff}
.card--light h3{color:var(--ink)}
.card p{margin:0;font-size:1rem;line-height:1.6;text-wrap:pretty}
.card--dark p{color:var(--t-bb)}
.card--light p{color:var(--t-46)}
.card p b{font-weight:700}
.card--dark p b{color:var(--t-bb)}

/* ============================================================
   Слайдер — общий каркас (Почему / Достижения / Отзывы)
   ============================================================ */
.slider{position:relative}
.slider__viewport{overflow:hidden;touch-action:pan-y}
.slider__track{cursor:grab}
.slider__track.is-dragging{cursor:grabbing}
.slider__track{display:flex;gap:1.25rem;transition:transform .42s cubic-bezier(.4,.02,.2,1)}
.slider__btn{
  position:absolute;top:50%;transform:translateY(-50%);border-radius:62.4375rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;z-index:2;
  transition:background .18s,opacity .18s;
}
.slider__btn svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slider__dots{display:flex;justify-content:center;gap:0.5rem}
.slider__dots button{width:0.5rem;height:0.5rem;padding:0;border:0;border-radius:62.4375rem;cursor:pointer;transition:background .18s,width .18s}

/* ============================================================
   Экран 3 — Почему выбирают (слайдер внутри сетки)
   ============================================================ */
.why-lead{width:auto;height:auto}
.why-slider{grid-column:span 2;position:relative;min-height:15rem;display:flex;flex-direction:column}
.why-slider .slider__viewport{flex:1 1 auto;min-height:0}
.why-slider .slider__track{height:100%}
.why-slide{
  flex:0 0 calc(50% - 0.625rem);height:100%;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-light);position:relative;
}
.why-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.why-slider .slider__btn{
  left:0.75rem;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.5);background:rgba(15,32,56,.42);
}
.why-slider .slider__btn.next{left:auto;right:0.75rem}
.why-slider .slider__btn:hover{background:rgba(15,32,56,.66)}
.why-slider .slider__btn svg{width:1.125rem;height:1.125rem;stroke:#fff}
.why-slider .slider__dots{margin-top:0.75rem;z-index:2}
.why-slider .slider__dots button{background:rgba(15,32,56,.24)}

/* ============================================================
   Экран 4 — О нас
   ============================================================ */
.about__grid{display:grid;grid-template-columns:4fr 8fr;gap:3.5rem;align-items:stretch}
.about__media{display:grid;grid-template-rows:1fr auto;gap:0.875rem}
.about__photo{position:relative;border-radius:var(--radius);overflow:hidden;height:100%;border:1px solid var(--border);box-shadow:0 24px 50px -30px rgba(15,32,56,.28)}
.about__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.about__cap{margin:0;font-size:0.875rem;line-height:1.5;color:var(--t-64);text-align:center}
.about__text{margin-top:1.75rem;display:grid;gap:1rem}
.about__text p{margin:0;font-size:1rem;line-height:1.6;text-wrap:pretty;color:var(--t-46)}
.about__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.875rem;margin-top:2rem}
.stat{border-top:2px solid var(--blue);padding:1rem 0 0}
.stat b{display:block;font-weight:800;font-size:2.5rem;line-height:1.05;letter-spacing:-.03em;color:var(--blue)}
.stat span{display:block;margin-top:0.375rem;font-size:0.875rem;line-height:1.5;color:var(--t-64)}
/* скрытый фото-слайдер «О нас» (в макете display:none) */
.about-slider{position:relative;height:17.5rem;margin-top:2.75rem;display:none}

/* ============================================================
   Экран 5 — Достижения
   ============================================================ */
.ach-slider{margin-top:2.75rem}
.ach-slider .slider__track{align-items:stretch}
.award{flex:none;width:18rem;margin:0;display:flex;flex-direction:column}
.award__frame{
  background:var(--card-dark);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  box-shadow:var(--shadow-card);transition:box-shadow .2s,transform .2s;overflow:hidden;
}
.award__frame:hover{box-shadow:0 30px 60px -28px rgba(0,0,0,.7);transform:translateY(-0.125rem)}
.award__frame img{width:100%;height:25rem;object-fit:cover;object-position:center top;display:block}
.award figcaption{margin-top:0.875rem;font-size:0.875rem;line-height:1.5;color:var(--t-90)}
.ach-slider .slider__btn{
  top:12.5rem;width:3.25rem;height:3.25rem;border:1px solid rgba(255,255,255,.28);background:var(--card-dark);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.6);left:0.5rem;
}
.ach-slider .slider__btn.next{left:auto;right:0.5rem}
.ach-slider .slider__btn:hover{background:var(--blue)}
.ach-slider .slider__btn svg{width:1.5rem;height:1.5rem;stroke:#fff}
.ach-dots{margin-top:1.625rem}
.ach-dots button{background:rgba(255,255,255,.3)}
.ach-tail{margin:2.5rem 0 0;font-size:1rem;line-height:1.6;text-wrap:pretty;color:var(--t-bb)}

/* ============================================================
   Экран 6 — Отзывы
   ============================================================ */
.reviews__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem}
.rev-slider{margin-top:2.75rem}
.review{flex:none;width:18rem}
.review__frame{
  background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 18px 40px -26px rgba(15,32,56,.28);transition:box-shadow .2s,transform .2s;
  overflow:hidden;height:31rem;display:flex;align-items:center;justify-content:center;
}
.review__frame:hover{box-shadow:0 26px 54px -26px rgba(15,32,56,.34);transform:translateY(-0.125rem)}
/* скриншот вписывается целиком (contain), незаполненное — серый фон плашки (по ТЗ) */
.review__frame img{width:100%;height:100%;object-fit:contain;display:block}
.rev-slider .slider__btn{
  top:15.5rem;width:3.25rem;height:3.25rem;border:1px solid var(--border);background:#fff;
  box-shadow:0 16px 34px -18px rgba(15,32,56,.4);left:-1.375rem;
}
.rev-slider .slider__btn.next{left:auto;right:-1.375rem}
.rev-slider .slider__btn:hover{background:#EAF2FA}
.rev-slider .slider__btn svg{width:1.5rem;height:1.5rem;stroke:var(--blue)}
.rev-dots{margin-top:1.625rem}
.rev-dots button{background:rgba(11,84,160,.24)}

/* ============================================================
   Экран 7 — Цены
   ============================================================ */
.prices__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr 1fr auto;gap:1.25rem;margin-top:2.75rem;align-items:stretch}
.price{border-radius:var(--radius);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-light);padding:1.75rem 1.875rem;display:flex;flex-direction:column}
.price h3{font-size:1.375rem;font-weight:700;line-height:1.3;letter-spacing:-.015em;margin:0 0 0.625rem;color:var(--ink)}
.price p{margin:0;font-size:1rem;line-height:1.6;text-wrap:pretty;color:var(--t-46)}
.price__row{display:flex;margin-top:auto;padding-top:1.375rem}
.price__row .sep{padding-left:1.5rem;margin-left:1.5rem;border-left:1px solid var(--border)}
.price__big{display:block;font-size:2rem;font-weight:800;letter-spacing:-.02em;color:var(--blue);line-height:1.1;white-space:nowrap}
.price__mid{display:block;font-size:1.375rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.2;white-space:nowrap}
.price__cap{font-size:0.875rem;line-height:1.5;color:var(--t-64)}
.price--soft{background:var(--bg-soft);gap:0.625rem}
.price--wide{grid-column:span 3}
.price--wide p{max-width:96ch}
.price p .accent{color:var(--blue);font-weight:700}
.price-cta{
  position:relative;border-radius:var(--radius);background:var(--ink);
  box-shadow:0 26px 54px -34px rgba(15,32,56,.5);color:#fff;margin-top:1.25rem;padding:2.375rem 2.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:3rem;
}
.price-cta h2{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0;text-wrap:pretty;color:#fff}
.price-cta h2 span{color:var(--cyan)}
.price-cta p{margin:0.75rem 0 0;font-size:1rem;line-height:1.6;text-wrap:pretty;color:var(--t-bb);max-width:37.5rem}
.price-cta .note{margin:0.75rem 0 0;font-size:0.875rem;line-height:1.5;color:var(--t-90)}
.price-cta__btns{flex:none;display:grid;gap:0.75rem;width:20rem}

/* ============================================================
   Экран 8 — Футер
   ============================================================ */
.footer{color:#fff;padding:5.5rem 2.75rem 1.875rem;position:relative;overflow:hidden;border-radius:var(--radius-lg);isolation:isolate;background:var(--ink)}
.footer__grid{display:grid;grid-template-columns:1fr 1.5fr;gap:1.25rem;align-items:stretch}
.footer__info{background:var(--card-dark);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:2.125rem 2.25rem;display:flex;flex-direction:column;gap:1.625rem;color:#fff;min-width:0}
.footer__info span,.footer__addr span{overflow-wrap:break-word}
.footer__logo{display:inline-flex;align-self:flex-start;background:#fff;border-radius:62.4375rem;padding:0.625rem 1.375rem}
.footer__logo img{height:2.875rem;width:auto;display:block}
.footer__info > p{margin:0;font-size:1rem;line-height:1.6;color:var(--t-bb);text-wrap:pretty}
.footer__block{display:flex;flex-direction:column;gap:0.75rem}
.footer__block b{font-size:1.125rem;font-weight:800;letter-spacing:-.015em}
.footer__hours{display:grid;grid-template-columns:1fr auto;gap:0.5rem 1.5rem;font-size:1rem;color:var(--t-bb)}
.footer__hours .val{font-weight:700;color:#fff}
.footer__addr{padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.14)}
.footer__addr span{font-size:1rem;color:var(--t-bb)}
.footer__addr .tel{font-size:1.375rem;font-weight:800;letter-spacing:-.015em;color:#fff;margin-top:0.25rem}
.footer__email-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer__email-row a.mail{font-size:1rem;color:var(--cyan)}
.footer__soc{display:flex;gap:0.625rem}
.footer__soc a{width:2.125rem;height:2.125rem;border-radius:62.4375rem;display:flex;align-items:center;justify-content:center}
.footer__soc .wa{background:var(--green)}
.footer__soc .tg{background:#2AABEE}
.footer__soc .vk{background:var(--blue)}
.footer__soc .wa img{width:1.1875rem;height:1.1875rem}
.footer__soc .tg img,.footer__soc .vk img{width:1.1875rem;height:1.1875rem;filter:brightness(0) invert(1)}
.footer__soc .max img{width:2.125rem;height:2.125rem;border-radius:0.625rem;display:block}
.footer__map{border-radius:var(--radius);overflow:hidden;background:var(--card-dark);border:1px solid rgba(255,255,255,.14);min-height:32.5rem;display:flex;flex-direction:column;min-width:0}
.footer__map-head{padding:1.625rem 1.875rem 0}
.footer__map-head b{font-size:1.375rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.footer__map-frame{position:relative;flex:1;margin:1.25rem;border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.footer__map-frame iframe{width:100%;height:100%;border:0;display:block}
.footer__copy{display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:0.875rem;line-height:1.5;color:var(--t-90)}

/* ============================================================
   Бургер-кнопка и мобильное меню (скрыты на десктопе)
   ============================================================ */
.burger{
  display:none;flex:none;margin-left:auto;width:2.75rem;height:2.75rem;border:0;
  background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:0.3125rem;padding:0 0.625rem;
}
.burger span{display:block;height:0.125rem;border-radius:0.125rem;background:#fff}

.m-menu{
  position:fixed;inset:0;z-index:100;background:rgba(7,26,51,.98);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;flex-direction:column;padding:1.25rem;overflow-y:auto;color:#fff;
}
.m-menu.is-open{display:flex}
body.menu-open{overflow:hidden}
.m-menu__top{display:flex;align-items:center;justify-content:space-between}
.m-menu .bar-logo{padding:0.5rem 1rem}
.m-menu .bar-logo img{height:1.875rem}
.m-menu__close{width:2.75rem;height:2.75rem;border:0;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.m-menu__nav{display:flex;flex-direction:column;margin-top:0.75rem}
.m-menu__nav a{color:#fff;font-size:1.25rem;font-weight:700;padding:1rem 0.375rem;border-bottom:1px solid rgba(255,255,255,.12)}
.m-menu__nav a:hover{color:var(--cyan)}
.m-menu__contacts{margin-top:1.75rem;display:flex;flex-direction:column;gap:0.375rem}
.m-menu__tel{color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-.015em}
.m-menu__hours{color:var(--t-bb);font-size:0.875rem}
.m-menu__msgrs{display:flex;gap:0.75rem;margin-top:1rem}
.m-menu__msgrs a{width:3rem;height:3rem;border-radius:62.4375rem;display:flex;align-items:center;justify-content:center}
.m-menu__msgrs .wa{background:var(--green)}
.m-menu__msgrs .tg{background:#2AABEE}
.m-menu__msgrs .vk{background:var(--blue)}
.m-menu__msgrs .wa img{width:1.5rem;height:1.5rem}
.m-menu__msgrs .tg img,.m-menu__msgrs .vk img{width:1.5rem;height:1.5rem;filter:brightness(0) invert(1)}
.m-menu__msgrs .max img{width:3rem;height:3rem;border-radius:0.875rem;display:block}

/* ============================================================
   Лайтбокс (полноэкранный просмотр фото — все карусели)
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:1.5rem;background:rgba(7,16,33,.93);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.lightbox.is-open{display:flex}
.lightbox img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:0.75rem;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.lightbox__close{
  position:absolute;top:1rem;right:1rem;width:2.875rem;height:2.875rem;border:0;border-radius:62.4375rem;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.625rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .18s;
}
.lightbox__close:hover{background:rgba(255,255,255,.28)}
.why-slide img,.award__frame img,.review__frame img{cursor:zoom-in}
/* листание внутри лайтбокса: стрелки по бокам + счётчик снизу */
.lightbox img{touch-action:none;-webkit-user-drag:none;user-select:none}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:3.25rem;height:3.25rem;border-radius:62.4375rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.14);color:#fff;
  transition:background .18s;
}
.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__nav.prev{left:1rem}
.lightbox__nav.next{right:1rem}
.lightbox__counter{
  position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:2;
  color:#fff;font-size:0.875rem;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,.14);border-radius:62.4375rem;padding:0.375rem 0.875rem;
}
@media (max-width:767px){
  .lightbox__nav{width:2.75rem;height:2.75rem}
  .lightbox__nav.prev{left:0.5rem}
  .lightbox__nav.next{right:0.5rem}
}

/* ============================================================
   Шапка → бургер раньше десктопной точки (≤1200)
   На 1025–1200 нав + телефон + мессенджеры не влезают в стеклянную
   плашку (все flex:none, не сжимаются) и обрезались overflow:hidden —
   это и был «флюид-баг» шапки. Раскладку секций не трогаем.
   ============================================================ */
@media (max-width:1200px){
  .bar-nav,.bar-right{display:none}
  .burger{display:flex}
}

/* ============================================================
   Планшет (≤1024)
   ============================================================ */
@media (max-width:1024px){
  .page{padding:0 1.25rem}
  .hero .bar{margin:1rem 1rem 0;height:4rem;gap:0.75rem}
  .hero .bar-logo img{height:2rem}
  /* секции */
  .section{padding:3.75rem 2rem}
  .footer{padding:3.75rem 2rem 1.75rem}
  /* подвал: инфо-колонка была сжата, email+соцсети «расплывались» через space-between */
  .footer__grid{grid-template-columns:1fr 1.15fr}
  .footer__info{padding:1.875rem 1.75rem}
  .footer__map{min-height:26rem}
  .footer__email-row{flex-wrap:wrap;justify-content:flex-start;gap:0.875rem}
  /* сетки */
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* «Почему»: 2 колонки. Карточка «Можно в онлайн-формате» (3-я) висела одна
     с дырой справа — растягиваем её на всю ширину, слайдер тоже (base span 2). */
  #why .card--light:nth-of-type(3){grid-column:1 / -1}
  .prices__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
  .price--wide{grid-column:1 / -1}
  /* hero → стек */
  .hero{height:auto}
  /* чистый кроп без вшитой надписи «Учебный год …» (десктоп-фото на планшете её показывало) */
  .hero__bg{
    inset:0;
    background-image:url(../assets/photos/hero-mobile.jpg);
    background-image:-webkit-image-set(url(../assets/photos/hero-mobile.webp) type("image/webp"), url(../assets/photos/hero-mobile.jpg) type("image/jpeg"));
    background-image:image-set(url(../assets/photos/hero-mobile.webp) type("image/webp"), url(../assets/photos/hero-mobile.jpg) type("image/jpeg"));
    background-size:cover;background-position:center;
  }
  .hero__grid{height:auto;grid-template-columns:1fr;gap:1.75rem;padding:2.25rem 1.75rem 2.75rem}
  /* hero в 1 колонку → плашки растягиваем на всю ширину (иначе дырка справа) */
  .hero__badges{max-width:none}
  .hero__title{font-size:3rem}
  /* «Английскому языку» — на отдельную строку */
  .hero__title span{display:block}
  .section__title{font-size:2.375rem}
}

/* ============================================================
   Мобайл (≤767, до 360)
   ============================================================ */
@media (max-width:767px){
  .page{padding:0 0.75rem;gap:1.125rem}
  .section,.footer,.hero{border-radius:1.375rem}
  .section{padding:2.5rem 1.125rem}
  .footer{padding:2.75rem 1.125rem 1.5rem}
  /* шапка */
  .hero .bar{margin:0.75rem 0.625rem 0;height:3.625rem;gap:0.625rem}
  .hero .bar-logo{padding:0.375rem 0.875rem}
  .hero .bar-logo img{height:1.625rem}
  /* hero (мобилка): 3 островка — фото+текст / плашки / CTA */
  .hero{background:transparent;border-radius:0;overflow:visible;height:auto;gap:0.75rem}
  .hero__bg{display:none}
  .hero .bar{position:absolute;inset:0.75rem 0.625rem auto;margin:0;z-index:3}
  .hero__grid{display:flex;flex-direction:column;gap:0.75rem;height:auto;padding:0;background:none}
  .hero__col{display:contents}
  .hero__glow{display:none}
  /* Островок 1: фото + заголовок + подзаголовок */
  .hero__intro{
    display:flex;flex-direction:column;justify-content:flex-end;position:relative;
    aspect-ratio:366/470;border-radius:1.375rem;overflow:hidden;
    padding:4.75rem 1.25rem 1.375rem;color:#fff;background:var(--ink-1);
    box-shadow:0 1.375rem 2.75rem -1.625rem rgba(0,0,0,.55);
    background-image:url(../assets/photos/hero-mobile.jpg);
    background-image:-webkit-image-set(url(../assets/photos/hero-mobile.webp) type("image/webp"), url(../assets/photos/hero-mobile.jpg) type("image/jpeg"));
    background-image:image-set(url(../assets/photos/hero-mobile.webp) type("image/webp"), url(../assets/photos/hero-mobile.jpg) type("image/jpeg"));
    background-size:cover;background-position:center;
  }
  .hero__intro::before{
    content:"";position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(180deg,rgba(7,26,51,.10) 0%,rgba(7,26,51,.24) 42%,rgba(7,26,51,.80) 100%);
  }
  .hero__intro > *{position:relative}
  .hero__title{font-size:2.125rem}
  .hero__lead{margin-top:0.875rem;font-size:1rem}
  /* Островок 2: плашки преимуществ на тёмном фоне */
  .hero__badges{
    grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:0.625rem;max-width:none;margin:0;
    background:var(--ink-1);border-radius:1.375rem;padding:1.125rem;
    box-shadow:0 1.375rem 2.75rem -1.625rem rgba(0,0,0,.55);
  }
  .badge{padding:0.4375rem 0.3125rem;line-height:1.15;letter-spacing:.03em;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
  /* Островок 3: CTA «Первое занятие» */
  .hero__card{
    margin:0;padding:1.5rem 1.25rem;
    background:var(--ink-1);border:0;border-radius:1.375rem;
    box-shadow:0 1.375rem 2.75rem -1.625rem rgba(0,0,0,.55);
  }
  .hero__card::before{display:none}
  .hero__card h2{font-size:1.625rem}
  /* типографика секций */
  .section__title{font-size:1.75rem}
  .section__lead{font-size:1rem}
  /* сетки в 1 колонку */
  .grid-2,.grid-3{grid-template-columns:1fr}
  /* на мобилке слайдер в 1 колонку (иначе base grid-column:span 2 создаёт лишний столбец) */
  #why .why-slider{grid-column:1 / -1}
  .prices__grid{grid-template-columns:1fr}
  /* О нас */
  .about__grid{grid-template-columns:1fr;gap:1.75rem}
  /* кадрируем как на десктопе — убираем пустоту над головой */
  .about__photo{height:clamp(18.75rem,80vw,25rem)}
  .about__photo img{position:absolute;inset:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center top}
  .about__stats{grid-template-columns:1fr;gap:1.125rem}
  /* футер */
  .footer__grid{grid-template-columns:1fr}
  .footer__map{min-height:21.25rem}
  .footer__email-row{flex-wrap:wrap;justify-content:flex-start;gap:1rem}
  /* перенос строки в заголовках */
  .br-m{display:inline}
  /* отзывы: заголовок → карусель → кнопка внизу */
  #reviews{display:flex;flex-direction:column}
  .reviews__head{display:contents}
  #reviews .section__title{order:1}
  #reviews .rev-slider{order:2}
  #reviews .btn-ghost{order:3;margin-top:1.5rem;justify-content:center;text-align:center}
  /* CTA цен */
  .price-cta{flex-direction:column;align-items:flex-start;gap:1.5rem;padding:1.75rem 1.375rem}
  .price-cta h2{font-size:1.5rem}
  .price-cta__btns{width:100%}
  /* длинные подписи кнопок («Записаться через WhatsApp») переносим, а не тянем за край на узких экранах */
  .price-cta__btns .btn,.hero__card .btn{white-space:normal}
  /* блоки цен на узкой мобилке: поджимаем паддинги/шрифт/разделитель, иначе две неразрывные цены + фикс-сепаратор вылезают за карточку */
  .price{padding:1.5rem 1.125rem}
  .price__big{font-size:1.5rem}
  .price__row{padding-top:1.125rem}
  .price__row .sep{padding-left:0.75rem;margin-left:0.75rem}
  /* слайдеры: 1 тайл на экран */
  .why-slide{flex:0 0 100%}
  /* один тайл на экран — во всю ширину, чтобы карточка была по центру (было 78vw → прижималось влево) */
  .award,.review{width:100%;max-width:none}
  .rev-slider .slider__btn{left:0}
  .rev-slider .slider__btn.next{left:auto;right:0}
  /* прогресс-бар (точки): единое положение во всех трёх каруселях */
  .why-slider{min-height:0}
  .why-slider .slider__viewport{flex:none;height:14.375rem}
  .why-slider .slider__dots{margin-top:1rem}
  .ach-dots,.rev-dots{margin-top:1rem}
  /* логотип в подвале: компактный, по центру */
  .footer__logo{padding:0.5rem 1.125rem;align-self:center}
  .footer__logo img{height:2.125rem}
}