/* ========================================================================
   LegoMax Design System
   Шрифты: PFDinDisplayPro (база), FirstTimeWriting (акцент)
   Палитра из корп. гайда: зелёный/лайм — конструирование и робототехника;
   оранжевый — схемотехника и подготовка к школе;
   зелёный тёмный — могу сам и летние курсы;
   бирюза — электроника и лагерь.
   ======================================================================== */

/* Подключение шрифтов — бренд: PF Din Display Pro (база) + FirstTimeWriting (акцент).
   В прототипе используем системный крепкий геометрический стек; оригинальные
   шрифты применяются при деплое через @font-face с локальными файлами. */

/* Акцентный «рукописный» шрифт — подгружаем публичный близкий по духу (Caveat),
   оригинальный FirstTimeWriting заменит при публикации */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');

:root {
  /* Брендовые цвета */
  --c-dark: #1C3B21;        /* тёмно-зелёный (основной текст, лого) */
  --c-dark-soft: #2A4E30;
  --c-lime: #86BC25;        /* салатовый — робототехника, конструирование */
  --c-lime-bg: #8AC340;     /* фоновый лайм (из баннеров) */
  --c-green: #2F7A3A;       /* зелёный — могу сам, летние курсы */
  --c-green-deep: #248B3C;
  --c-orange: #F39A1F;      /* оранжевый — схемотехника, подготовка к школе */
  --c-orange-deep: #E5841A;
  --c-teal: #1FA8A3;        /* бирюза — электроника, лагерь */
  --c-teal-deep: #189894;
  --c-cream: #F5F0E6;       /* тёплый фон */
  --c-white: #ffffff;
  --c-ink: #1C3B21;
  --c-ink-soft: #3A5440;
  --c-ink-mute: #6B7F6F;
  --c-line: #D9E2D8;
  --c-line-soft: #EAEFE9;

  /* Семантический токен для «акцентного тёмного текста» (заголовки, strong,
     ключевые подписи на светлой поверхности). В светлой теме — брендовый
     тёмно-зелёный. В тёмной теме его перекрашивает блок
     [data-theme-applied="dark"], чтобы такие надписи были светлыми. */
  --c-headline: #1C3B21;

  /* Теневая система */
  --sh-sm: 0 2px 8px rgba(28, 59, 33, 0.08);
  --sh-md: 0 8px 24px rgba(28, 59, 33, 0.10);
  --sh-lg: 0 20px 48px rgba(28, 59, 33, 0.14);

  /* Радиусы */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Контейнер */
  --maxw: 1240px;
  --pad-x: clamp(16px, 4vw, 40px);

  /* Типографика */
  --f-base: 'PF Din Display Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-accent: 'Caveat', 'FirstTime', 'PF Din Display Pro', cursive;
}

/* Сброс */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-base);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }

/* Типографическая шкала */
.eyebrow {
  font-family: var(--f-base);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.accent-hand {
  font-family: var(--f-accent);
  font-weight: 400;
  color: var(--c-orange);
}
h1, h2, h3, h4 { font-family: var(--f-base); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; margin: 0; color: var(--c-ink); text-wrap: balance; }
h1 { font-size: clamp(38px, 6vw, 72px); text-transform: uppercase; }
h2 { font-size: clamp(30px, 4.5vw, 52px); text-transform: uppercase; }
h3 { font-size: clamp(22px, 2.6vw, 30px); }
h4 { font-size: clamp(18px, 2vw, 22px); }
p { margin: 0; text-wrap: pretty; }

/* Контейнер */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }
section { padding-block: clamp(60px, 9vw, 120px); }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  font-family: var(--f-base);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  position: relative;
  z-index: 1;
  touch-action: manipulation;
}
/* На мобильном длинные тексты кнопок могут не влезать — разрешаем перенос
   и чуть уменьшаем padding. «Записаться на пробное занятие» больше не выезжает. */
@media (max-width: 520px) {
  .btn {
    white-space: normal;
    padding: 14px 20px;
    font-size: 14px;
    letter-spacing: 0.03em;
    line-height: 1.25;
    text-align: center;
  }
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* SVG внутри кнопок всегда 16×16 — без этого inline-SVG без width/height
   растягиваются до всей доступной flex-области (особенно видно на sidebar-
   кнопках в картах курсов со стрелкой). */
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn .btn-icon-slot { display: inline-flex; align-items: center; justify-content: center; }

/* Частая причина «кнопка кликается только в одном месте» — когда внутри кнопки
   есть крупный SVG/спан, который перекрывает область и/или становится event.target.
   Клик всегда должен попадать в саму кнопку/ссылку. */
.btn > * { pointer-events: none; }
.btn-primary { background: var(--c-orange); color: var(--c-white); box-shadow: 0 8px 20px rgba(243, 154, 31, 0.35); }
.btn-primary:hover { background: var(--c-orange-deep); box-shadow: 0 12px 28px rgba(243, 154, 31, 0.45); }
.btn-dark { background: var(--c-dark); color: var(--c-white); }
.btn-dark:hover { background: var(--c-dark-soft); }
.btn-outline { background: transparent; color: var(--c-headline); box-shadow: inset 0 0 0 2px var(--c-dark); }
.btn-outline:hover { background: var(--c-dark); color: var(--c-white); }
.btn-ghost { background: rgba(255,255,255,0.12); color: var(--c-white); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,0.22); }

/* Контакты: кнопка «Написать в Макс» — чуть уже + фирменный SVG */
.btn-max-narrow { padding: 16px 22px; }
.btn-max-narrow .btn-icon-slot img { width: 18px; height: 18px; display: block; }
@media (max-width: 520px) {
  .btn-max-narrow { padding: 14px 18px; }
}

/* Декоративные абсолютные элементы не должны перехватывать клики/hover.
   Иначе создаётся эффект «кнопка кликается только по пикселю». */
.hero-visual-bg,
.hero-mascot,
.hero-bubble,
.cta-banner-visual,
.cta-banner-visual img,
.course-card-overlay,
.course-card-ph-mascot,
.price-card-badge,
.pathway-step-line,
.tg-toast-sticker,
.ring-center {
  pointer-events: none;
}

/* Чип */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--c-line-soft);
  color: var(--c-ink-soft);
}
.chip.lime { background: #EAF5D1; color: var(--c-headline); }
.chip.green { background: #D4EBD8; color: var(--c-headline); }
.chip.orange { background: #FEE8C7; color: #8A5A0E; }
.chip.teal { background: #CFEBEA; color: #0E5E5B; }
.chip.dark { background: var(--c-dark); color: var(--c-white); }

/* Pattern (крестики по корп. гайду) */
.pattern-crosses {
  background-image:
    radial-gradient(circle, rgba(255, 215, 0, 0.18) 1px, transparent 1.5px),
    linear-gradient(180deg, transparent 10px, transparent 10px);
  background-size: 18px 18px;
}
/* более выраженный паттерн крестиков через SVG-data */
.bg-crosses {
  background-color: var(--c-lime-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23FFD400' stroke-width='1.2' opacity='0.35'><path d='M20 14v12M14 20h12'/></g></svg>");
}
.bg-crosses-orange {
  background-color: var(--c-orange);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23FFD400' stroke-width='1.2' opacity='0.4'><path d='M20 14v12M14 20h12'/></g></svg>");
}
.bg-crosses-teal {
  background-color: var(--c-teal);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23FFD400' stroke-width='1.2' opacity='0.3'><path d='M20 14v12M14 20h12'/></g></svg>");
}
.bg-crosses-green {
  background-color: var(--c-green);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23FFD400' stroke-width='1.2' opacity='0.3'><path d='M20 14v12M14 20h12'/></g></svg>");
}

/* ==================== HEADER ==================== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line-soft);
}
.site-header-inner {
  display: flex; align-items: center; gap: 28px;
  padding-block: 14px;
}
.site-logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.site-logo img { height: 62px; width: auto; display: block; transition: transform .25s ease; }
.site-logo:hover img { transform: scale(1.03); }
@media (max-width: 900px) {
  .site-logo img { height: 52px; }
}
@media (max-width: 480px) {
  .site-logo img { height: 44px; }
}

.main-nav { display: flex; gap: 4px; margin-inline-start: auto; align-items: center; }
.main-nav a {
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: 15px;
  color: var(--c-ink-soft);
  transition: background .15s, color .15s;
  white-space: nowrap; /* чтобы «О центре» / «Летний лагерь» не переносились */
}
.main-nav a:hover { background: var(--c-line-soft); color: var(--c-headline); }
.main-nav a.active { background: var(--c-dark); color: var(--c-white); }

.header-cta {
  display: flex; align-items: center; gap: 14px;
}
.header-phone {
  font-weight: 700; font-size: 15px; color: var(--c-headline);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;      /* не ломать телефон на строки */
  flex-shrink: 0;           /* не дать шапке ужимать номер */
  line-height: 1;           /* без этого у flex-item возникает baseline-сдвиг */
}
/* Фиксируем размер SVG-иконки и убираем baseline-смещение */
.header-phone svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  display: block;
  align-self: center;
  position: relative;
  top: 1px; /* Визуальная коррекция: иконка телефона в одну строку с номером */
}
/* Текст номера — тоже блок, чтобы align-items:center в .header-phone
   сработал без baseline-сдвига шрифта */
.header-phone span {
  display: block;
  line-height: 1;
  align-self: center;
}

.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--c-line-soft);
  align-items: center; justify-content: center;
}
.burger svg { width: 22px; height: 22px; }

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .header-phone { display: none; }
  .burger { display: inline-flex; }
  .header-cta .btn { padding: 12px 18px; font-size: 13px; }
}

/* Мобильное меню */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--c-dark);
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: 24px var(--pad-x);
  color: var(--c-white);

  /* Прокрутка внутри меню, если контент не влез на экран.
     Без overflow-y:auto низ меню («Контакты», кнопки) обрезается и
     недоступен на низких экранах / с открытой адресной строкой браузера. */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* инерция на iOS */
  overscroll-behavior: contain;       /* не «продавливать» скролл на body */

  /* Фикс мобильных браузеров: 100vh не учитывает адресную строку,
     из-за чего низ меню уезжал за экран. dvh/svh дают реальную видимую
     высоту; fallback на vh для старых браузеров. */
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}
.mobile-menu.open { display: flex; }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-close { width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; margin-top: 32px; }
.mobile-menu nav a {
  padding: 16px 20px;
  font-size: 22px; font-weight: 700;
  border-radius: var(--r-md);
  color: var(--c-white);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}
.mobile-menu nav a:hover { background: rgba(255,255,255,0.12); }
.mobile-menu-foot { margin-top: auto; padding-block: 20px; font-size: 14px; color: rgba(255,255,255,0.7); display: flex; flex-direction: column; gap: 12px; }
.mobile-menu-foot .btn { justify-content: center; }

/* ==================== HERO ==================== */
.hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 80px) clamp(60px, 9vw, 120px);
  overflow: hidden;
  background: var(--c-cream);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: var(--c-white);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-headline);
  margin-bottom: 24px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.hero-kicker:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(28, 59, 33, 0.3);
}
.hero-kicker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-lime);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

.hero h1 { margin-bottom: 20px; }
.hero h1 .accent-hand {
  display: inline-block;
  font-family: var(--f-accent);
  font-weight: 400;
  color: var(--c-orange);
  text-transform: none;
  font-size: 0.9em;
  transform: rotate(-3deg);
  margin-inline: 6px;
  -webkit-text-stroke: 1.5px var(--c-orange);
  paint-order: stroke;
}
.hero-sub {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--c-ink-soft);
  max-width: 540px;
  margin-bottom: 32px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 560px;
}
.hero-stat strong {
  display: block;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  color: var(--c-headline);
  line-height: 1;
}
.hero-stat span {
  font-size: 13px;
  color: var(--c-ink-mute);
  font-weight: 500;
}

.hero-visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
}
.hero-visual-bg {
  position: absolute; inset: 0;
  border-radius: 40% 60% 65% 35% / 55% 45% 55% 45%;
  animation: morph 14s ease-in-out infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 40% 60% 65% 35% / 55% 45% 55% 45%; }
  50% { border-radius: 60% 40% 35% 65% / 45% 55% 45% 55%; }
}
.hero-mascot {
  position: absolute;
  inset: 6% 6% 0 6%;
  z-index: 2;
}
.hero-mascot img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 20px 40px rgba(28, 59, 33, 0.2));
}
.hero-bubble {
  position: absolute;
  top: 8%; right: 4%;
  background: var(--c-white);
  border-radius: 50%;
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-md);
  z-index: 3;
  transform: rotate(-6deg);
  border: 2px solid var(--c-orange);
}
.hero-bubble span {
  font-family: var(--f-accent);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--c-headline);
  line-height: 1;
  padding: 12px;
  -webkit-text-stroke: 0.8px var(--c-dark);
}

.hero-badge {
  position: absolute;
  bottom: 12%; left: -4%;
  background: var(--c-orange);
  color: var(--c-white);
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--sh-md);
  transform: rotate(-4deg);
  z-index: 3;
}

/* Анимированный badge «8 направлений»: лёгкое покачивание + пульсация при hover */
.hero-badge-anim {
  /* Бейдж = ссылка на #/courses. Перебиваем дефолт для <a>. */
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  animation: badgeFloat 3.6s ease-in-out infinite;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
}
.hero-badge-anim:focus-visible {
  outline: 3px solid var(--c-white);
  outline-offset: 3px;
}
.hero-badge-anim span { display: inline-block; transition: transform .35s ease; }
.hero-badge-anim::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--c-orange);
  opacity: 0;
  z-index: -1;
  transition: opacity .3s ease, transform .5s ease;
  transform: scale(.95);
}
.hero-badge-anim:hover {
  animation-play-state: paused;
  transform: rotate(0deg) scale(1.12) translateY(-4px);
  box-shadow: 0 16px 40px -10px rgba(243,154,31,0.55);
  background: color-mix(in oklab, var(--c-orange) 92%, white);
}
.hero-badge-anim:hover span {
  transform: scale(1.04);
}
.hero-badge-anim:hover::before {
  opacity: 0.25;
  transform: scale(1.18);
}
@keyframes badgeFloat {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge-anim { animation: none; }
  .hero-badge-anim:hover { transform: rotate(-4deg) scale(1.05); }
}

/* ==================== LIGHTBOX (Галерея) ==================== */
.gallery-item img { cursor: zoom-in; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.04); }

.lightbox {
  position: fixed; inset: 0;
  background: rgba(15, 20, 28, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 40px 80px;
  opacity: 0;
  transition: opacity .2s ease;
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto; height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 70px -10px rgba(0,0,0,0.6);
  animation: lbIn .25s ease;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

.lightbox-counter {
  position: absolute;
  left: 50%; bottom: -36px;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.lightbox-close,
.lightbox-nav {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  width: 48px; height: 48px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
  font-weight: 300;
}
.lightbox-close { position: absolute; top: 20px; right: 24px; font-size: 32px; }
.lightbox-nav { flex-shrink: 0; margin: 0 20px; }
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255,255,255,0.18); transform: scale(1.08); }

@media (max-width: 640px) {
  /* На мобильном стрелки не должны перекрывать фото.
     Делаем нижнюю «панель» в свободной зоне под изображением. */
  .lightbox { padding: 12px 12px calc(104px + env(safe-area-inset-bottom)); }
  .lightbox-close {
    top: 12px; right: 12px;
    width: 40px; height: 40px;
    font-size: 24px;
    z-index: 2;
  }

  .lightbox-nav {
    width: 52px; height: 52px;
    font-size: 30px;
    margin: 0;
    position: absolute;
    top: auto;
    bottom: calc(18px + env(safe-area-inset-bottom));
    transform: none;
    z-index: 2;
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
  }
  /* Центрируем кнопки под фото (не у краёв экрана, чтобы не конфликтовать с системными жестами). */
  .lightbox-nav.lightbox-prev { left: calc(50% - 68px); }
  .lightbox-nav.lightbox-next { left: calc(50% + 16px); }

  /* Оставляем место под счётчик и стрелки. */
  .lightbox-img { max-height: calc(100vh - 180px); }
  .lightbox-counter { bottom: 78px; font-size: 12px; }
}

@media (max-width: 640px) {
  .hero-bubble { width: 100px; height: 100px; }
  .hero-bubble span { font-size: 16px; padding: 8px; }
  .hero-badge { font-size: 11px; padding: 10px 14px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* ==================== HERO: ПЛАВАЮЩИЕ ФИРМЕННЫЕ ЭЛЕМЕНТЫ ==================== */
.hero-bg-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  /* Точечный паттерн фоном (очень тонкий) */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(134, 188, 37, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(243, 154, 31, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(31, 168, 163, 0.05) 0%, transparent 50%);
  animation: heroBgDrift 20s ease-in-out infinite alternate;
}
.hero > .wrap { position: relative; z-index: 1; }

@keyframes heroBgDrift {
  from { background-position: 0% 0%, 0% 0%, 0% 0%; }
  to   { background-position: 5% 10%, -5% -8%, 8% -5%; }
}

/* Общие свойства декоративных значков */
.deco {
  position: absolute;
  display: block;
  opacity: 0.55;
  will-change: transform;
  transform-origin: center;
}
.deco svg { width: 100%; height: 100%; display: block; }

/* Цвета — фирменные */
.deco-gear  { color: var(--c-lime); }
.deco-brick { color: var(--c-orange); }
.deco-chip  { color: var(--c-teal); }
.deco-plus  { color: var(--c-lime); opacity: 0.35; }
.deco-star  { color: var(--c-orange); opacity: 0.35; }

/* Позиции и размеры — 8 элементов, раскиданы по hero */
.deco-1 { top: 8%;  left: 3%;   width: 64px; height: 64px; animation: floatA 18s ease-in-out infinite; }
.deco-2 { top: 14%; left: 42%;  width: 52px; height: 52px; animation: floatB 22s ease-in-out infinite;   animation-delay: -3s; transform: rotate(-8deg); }
.deco-3 { top: 62%; left: 4%;   width: 72px; height: 72px; animation: floatC 24s ease-in-out infinite;   animation-delay: -6s; }
.deco-4 { top: 30%; left: 36%;  width: 36px; height: 36px; animation: floatA 16s ease-in-out infinite;   animation-delay: -2s; }
.deco-5 { top: 70%; left: 38%;  width: 42px; height: 42px; animation: floatB 20s ease-in-out infinite;   animation-delay: -5s; }
.deco-6 { top: 4%;  right: 2%;  width: 56px; height: 56px; animation: floatC 19s ease-in-out infinite;   animation-delay: -8s; }
.deco-7 { top: 82%; right: 6%;  width: 58px; height: 58px; animation: floatA 21s ease-in-out infinite;   animation-delay: -4s; transform: rotate(6deg); }
.deco-8 { top: 50%; left: 28%;  width: 28px; height: 28px; animation: floatB 15s ease-in-out infinite;   animation-delay: -7s; }

@keyframes floatA {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(14px, -18px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes floatB {
  0%   { transform: translate(0, 0) rotate(-8deg); }
  50%  { transform: translate(-16px, 14px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(-8deg); }
}
@keyframes floatC {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(10px, 12px) rotate(-10deg) scale(1.06); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* Помельче на мобильных и скрываем самые мелкие */
@media (max-width: 640px) {
  .deco-1 { width: 46px; height: 46px; }
  .deco-2 { width: 38px; height: 38px; top: 4%; left: 50%; }
  .deco-3 { width: 52px; height: 52px; top: 74%; }
  .deco-6 { width: 40px; height: 40px; }
  .deco-7 { width: 40px; height: 40px; }
  .deco-4, .deco-5, .deco-8 { display: none; }
}

/* Уважение к настройкам пользователя */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-deco, .deco {
    animation: none !important;
  }
  .hero-kicker-dot { animation: none !important; }
  .hero-visual-bg { animation: none !important; }
}

/* ==================== SECTION HEADER ==================== */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.section-head-left { max-width: 720px; }
.section-head .eyebrow { display: inline-block; margin-bottom: 12px; }
.section-head h2 .accent-hand {
  font-family: var(--f-accent);
  font-weight: 400;
  text-transform: none;
  font-size: 0.85em;
  display: inline-block;
  transform: rotate(-2deg);
  margin-inline: 4px;
}
.section-head p { margin-top: 16px; color: var(--c-ink-soft); font-size: 17px; max-width: 640px; }
.section-head-link { font-weight: 700; color: var(--c-headline); display: inline-flex; gap: 6px; align-items: center; border-bottom: 2px solid var(--c-dark); padding-bottom: 2px; }

/* ==================== COURSE CARDS ==================== */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.course-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* aspect-ratio 1:1 — под квадратные PNG-баннеры дизайнера (540×540) */
  aspect-ratio: 1;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .3s ease;
  box-shadow: var(--sh-sm);
  display: block;
  background: var(--c-cream); /* подложка под прозрачные края при contain */
}
.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}
.course-card img {
  /* contain — чтобы PNG не обрезался. На квадратных карточках (Home, Related)
     PNG 1:1 заполняет целиком. На вертикальных карточках (#/courses, 4:5)
     остаётся небольшой вертикальный зазор — закрашивается background карточки. */
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.course-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 20px;
  background: linear-gradient(180deg, transparent, rgba(28, 59, 33, 0.6) 100%);
  color: var(--c-white);
  display: flex; align-items: end; justify-content: space-between;
  gap: 12px;
}
.course-card-overlay strong { font-size: 14px; font-weight: 700; }
.course-card-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-headline);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s;
  flex-shrink: 0;
}
.course-card:hover .course-card-arrow {
  transform: rotate(-45deg);
}

/* ==================== ADVANTAGES ==================== */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.advantage {
  padding: 32px 28px;
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  transition: border-color .2s, transform .2s;
}
.advantage:hover {
  border-color: var(--c-lime);
  transform: translateY(-3px);
}
.advantage-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: #EAF5D1;
  color: var(--c-green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.advantage-icon svg { width: 28px; height: 28px; }
.advantage h3 { font-size: 20px; text-transform: none; margin-bottom: 8px; }
.advantage p { color: var(--c-ink-soft); font-size: 15px; }

/* ==================== CTA BANNER ==================== */
.cta-banner {
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 72px);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 820px) {
  .cta-banner { grid-template-columns: 1fr; }
  .cta-banner-visual { display: none; }
}
.cta-banner h2 { color: var(--c-white); margin-bottom: 16px; }
.cta-banner h2 .accent-hand { color: var(--c-orange); -webkit-text-stroke: 1px var(--c-orange); }
/* На оранжевом фоне CTA (bg-crosses-orange) акцент-оранжевый не читается — жёлтый с тёмной обводкой */
.cta-banner.bg-crosses-orange h2 .accent-hand {
  color: #FFD400;
  -webkit-text-stroke: 1.2px var(--c-dark);
}
.cta-banner p { font-size: 18px; margin-bottom: 28px; opacity: 0.92; max-width: 540px; }
.cta-banner-visual {
  position: relative;
  height: 280px;
}
.cta-banner-visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ==================== REVIEWS ==================== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.review {
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  display: flex; flex-direction: column;
  gap: 16px;
}
.review-stars { display: flex; gap: 2px; color: var(--c-orange); }
.review-stars svg { width: 18px; height: 18px; fill: currentColor; }
.review-text { font-size: 16px; line-height: 1.6; color: var(--c-ink); flex: 1; }
.review-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--c-line-soft); padding-top: 16px; }
.review-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-dark); color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  flex-shrink: 0;
}
.review-author { font-weight: 700; font-size: 15px; }
.review-child { font-size: 13px; color: var(--c-ink-mute); }
.review-course {
  margin-left: auto;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--c-line-soft);
  font-weight: 600;
}

/* ==================== FOOTER ==================== */
.site-footer {
  background: var(--c-dark);
  color: rgba(255,255,255,0.85);
  padding-block: 60px 30px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 820px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; gap: 28px; } }
.footer-brand img { height: 62px; width: auto; }
.footer-brand p { margin-top: 16px; font-size: 14px; max-width: 340px; }
.footer h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-white); margin-bottom: 16px; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer ul a:hover { color: var(--c-lime); }
.footer-bottom {
  margin-top: 24px;
  display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* ==================== PAGE HEADER (не главная) ==================== */
.page-hero {
  background: var(--c-cream);
  padding-block: clamp(56px, 7vw, 100px) clamp(40px, 5vw, 70px);
  position: relative; overflow: hidden;
}
.page-hero .eyebrow { color: var(--c-orange); margin-bottom: 14px; }
.page-hero h1 { max-width: 820px; margin-bottom: 16px; }
.page-hero p { max-width: 640px; font-size: 19px; color: var(--c-ink-soft); }

/* ============================================================
   ABOUT INTRO — блок «Как всё начиналось» на странице О центре.
   Десктоп: фото обтекается текстом (float: right).
   Мобильный: текст сверху → фото во всю ширину → текст снизу.
   ============================================================ */
.about-intro {
  max-width: 980px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.about-intro-title {
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 24px;
}
.about-intro-text {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--c-ink-soft);
}
.about-intro-text strong { color: var(--c-headline); }
.about-photo {
  display: block;
  cursor: zoom-in;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 40px -18px rgba(28, 59, 33, 0.3);
  transition: transform .3s ease;
}
/* Десктоп: фото справа, текст обтекает */
@media (min-width: 861px) {
  .about-photo {
    float: right;
    width: 45%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0 0 20px 32px;
    max-width: 440px;
  }
  .about-intro::after {
    content: '';
    display: block;
    clear: both;
  }
}
/* Мобильный: фото во всю ширину */
@media (max-width: 860px) {
  .about-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 20px 0;
    /* Вытягиваем фото до краёв экрана, игнорируя padding wrap */
    margin-left: calc(var(--pad-x) * -1);
    margin-right: calc(var(--pad-x) * -1);
    width: calc(100% + var(--pad-x) * 2);
    max-width: none;
    border-radius: 0;
  }
}
.about-photo:hover {
  transform: translateY(-3px);
}

/* ==================== COURSE DETAIL ==================== */
.course-detail-hero {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(40px, 5vw, 72px);
  color: var(--c-white);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 60px;
}
@media (max-width: 860px) {
  .course-detail-hero {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    border-radius: var(--r-lg);
    gap: 20px;
  }
}
/* Длинные слова («Конструирование», «Робототехника», «Схемотехника»)
   должны корректно переноситься на мобильном, не вылезать за край. */
.course-detail-hero h1 {
  color: var(--c-white);
  margin-bottom: 16px;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 640px) {
  .course-detail-hero h1 {
    font-size: clamp(26px, 7vw, 36px);
  }
  .course-detail-hero p {
    font-size: 16px !important;
  }
}
.course-detail-hero-image {
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  /* Подложки нет — маскот ложится прямо на цветной фон темы курса,
     заданный у .course-detail-hero снаружи. */
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: visible;
}
.course-detail-hero-image img {
  width: 118%;
  height: auto;
  max-height: 118%;
  object-fit: contain;
  object-position: bottom center;
  /* Чуть выходит за границы для более динамичного кадра */
  margin-bottom: -6%;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
}
/* На мобильном сдерживаем, чтоб не торчало куда попало */
@media (max-width: 860px) {
  .course-detail-hero-image img {
    width: 88%;
    max-height: 100%;
    margin-bottom: 0;
  }
}

.course-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}

.course-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 60px;
}
@media (max-width: 860px) { .course-body { grid-template-columns: 1fr; } }

.program-list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: programCounter;
}
.program-list li {
  counter-increment: programCounter;
  position: relative;
  padding: 20px 20px 20px 76px;
  border-bottom: 1px solid var(--c-line-soft);
}
.program-list li:last-child { border-bottom: none; }
.program-list li::before {
  content: counter(programCounter);
  position: absolute; left: 14px; top: 8px;
  /* Рукописный шрифт для цифр — задаёт «нарисованный» характер */
  font-family: var(--f-accent);
  font-size: 56px;
  font-weight: 700;
  color: var(--c-orange);
  line-height: 1;
  transform: rotate(-6deg);
  transform-origin: center;
  text-shadow: 2px 2px 0 color-mix(in oklab, var(--c-orange) 15%, transparent);
}
/* Чередуем цвет цифр — живее смотрится */
.program-list li:nth-child(2n)::before   { color: var(--c-teal); transform: rotate(5deg); }
.program-list li:nth-child(3n)::before   { color: var(--c-lime); transform: rotate(-3deg); }
.program-list li:nth-child(4n)::before   { color: var(--c-green); transform: rotate(4deg); }
.program-list li { padding-left: 82px; }
@media (max-width: 520px) {
  .program-list li::before { font-size: 44px; left: 10px; top: 10px; }
  .program-list li { padding-left: 64px; }
}

.highlights {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.highlights li {
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  line-height: 1.55;
}
.highlights li::before {
  content: '';
  position: absolute; left: 0; top: 5px;
  width: 22px; height: 22px;
  background: var(--c-lime);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.sidebar-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 32px;
  position: sticky;
  top: 100px;
}
.sidebar-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--c-line-soft);
}
.sidebar-row:last-of-type { border-bottom: none; }
.sidebar-row dt { color: var(--c-ink-mute); font-size: 14px; }
.sidebar-row dd { font-weight: 700; margin: 0; font-size: 15px; text-align: right; }
.sidebar-price {
  display: block;
  font-size: 28px;
  font-weight: 900;
  color: var(--c-headline);
  margin-block: 16px 4px;
}
.sidebar-price-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-ink-mute);
  margin: 0 0 20px;
}
.sidebar-price-note a {
  color: var(--c-orange);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.sidebar-price-note a:hover { color: var(--c-headline); }

/* Карточка лагеря — с акцентом на скидку */
.sidebar-card-camp {
  border-color: var(--c-orange);
  border-width: 2px;
  box-shadow: 0 14px 30px -14px rgba(243, 154, 31, 0.35);
}
.sidebar-camp-badge {
  display: inline-block;
  padding: 6px 12px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sidebar-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-block: 8px 20px;
}
.sidebar-price-old {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink-mute);
  text-decoration: line-through;
}
.sidebar-card-camp .sidebar-price {
  color: var(--c-orange);
  margin: 0;
}

/* Список цен по месяцам в sidebar-е лагеря */
.camp-price-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.camp-price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--c-cream);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--c-ink-soft);
}
.camp-price-list li strong {
  color: var(--c-headline);
  font-size: 16px;
  font-weight: 900;
}
/* Прошедший месяц — приглушённый, с перечёркиванием */
.camp-price-list li.camp-price-past {
  opacity: 0.55;
}
.camp-price-list li.camp-price-past strong {
  text-decoration: line-through;
  color: var(--c-ink-mute);
}
/* Текущий месяц — оранжевая подсветка */
.camp-price-list li.camp-price-current {
  background: color-mix(in oklab, var(--c-orange) 10%, var(--c-cream));
  border: 1px solid var(--c-orange);
}
.camp-price-list li.camp-price-current strong { color: var(--c-orange); }

/* Скидки под ценами */
.camp-discounts {
  margin-top: 12px;
  padding: 12px;
  background: color-mix(in oklab, var(--c-lime) 12%, white);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.camp-discount {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-ink);
}

/* Блок «Расписание смен» на странице лагеря */
.camp-shifts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.camp-shift {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 18px 20px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-orange);
  border-radius: var(--r-md);
  box-shadow: 0 8px 18px -12px rgba(28, 59, 33, 0.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.camp-shift:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(28, 59, 33, 0.28);
}
.camp-shift-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD400 0%, var(--c-orange) 100%);
  color: var(--c-headline);
  font-weight: 900;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  box-shadow: 0 4px 10px -4px rgba(243, 154, 31, 0.5);
}
.camp-shift-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-headline);
  line-height: 1.2;
}
.camp-shift-dates {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  background: var(--c-cream);
  color: var(--c-ink-mute);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.camp-shift-desc {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-ink);
}
@media (max-width: 560px) {
  .camp-shift { grid-template-columns: 1fr; padding: 14px 16px; }
  .camp-shift-num { width: 36px; height: 36px; font-size: 16px; }
}

/* ==================== SCHEDULE ==================== */
.schedule-grid {
  display: grid;
  grid-template-columns: 200px repeat(6, 1fr);
  gap: 1px;
  background: var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.schedule-cell {
  background: var(--c-white);
  padding: 16px 14px;
  font-size: 14px;
}
.schedule-head {
  background: var(--c-dark); color: var(--c-white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: center;
}
.schedule-time { font-weight: 700; }
.schedule-slot {
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.3;
}
.schedule-slot.lime { background: var(--c-lime); color: var(--c-headline); }
.schedule-slot.green { background: var(--c-green); }
.schedule-slot.orange { background: var(--c-orange); }
.schedule-slot.teal { background: var(--c-teal); }
.schedule-slot-age { display: block; font-weight: 500; opacity: 0.85; font-size: 11px; margin-top: 2px; }
@media (max-width: 960px) {
  .schedule-grid { display: block; }
  .schedule-head, .schedule-cell { display: block; padding: 12px; }
  .schedule-head { display: none; }
  .schedule-day {
    padding: 20px 16px 8px;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    background: var(--c-cream) !important;
    border-bottom: 2px solid var(--c-dark);
  }
}

/* ==================== PRICING ==================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.price-card {
  padding: 36px 32px;
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  display: flex; flex-direction: column;
  position: relative;
}
.price-card.featured {
  background: var(--c-dark);
  color: var(--c-white);
  border: none;
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
}
.price-card-badge {
  position: absolute; top: -14px; right: 24px;
  background: var(--c-orange); color: var(--c-white);
  font-size: 12px; font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.price-card h3 { font-size: 22px; text-transform: none; margin-bottom: 6px; }
.price-card.featured h3 { color: var(--c-white); }
.price-card-desc { font-size: 14px; color: var(--c-ink-mute); margin-bottom: 20px; }
.price-card.featured .price-card-desc { color: rgba(255,255,255,0.7); }
.price-amount { font-size: 40px; font-weight: 900; margin-bottom: 4px; line-height: 1; }
.price-amount small { font-size: 16px; font-weight: 500; opacity: 0.65; }
.price-per { font-size: 14px; color: var(--c-ink-mute); margin-bottom: 24px; }
.price-card.featured .price-per { color: rgba(255,255,255,0.7); }
.price-list {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px;
}
.price-list li {
  padding-left: 26px;
  position: relative;
  line-height: 1.4;
}
.price-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--c-lime); font-weight: 900;
}
.price-card.featured .price-list li::before { color: var(--c-orange); }

/* ==================== TEACHERS ==================== */
.teachers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.teacher {
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 16px;
}
.teacher-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-headline);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  font-weight: 900;
}
.teacher h3 { font-size: 22px; text-transform: none; }
.teacher-role { color: var(--c-orange); font-weight: 700; font-size: 14px; }
.teacher-bio { color: var(--c-ink-soft); font-size: 15px; }
.teacher-exp {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--c-line-soft);
  font-size: 13px;
  color: var(--c-ink-mute);
  font-weight: 700;
}

/* ==================== GALLERY ==================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
  gap: 12px;
}
.gallery-item {
  background: var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item.w2 { grid-column: span 2; }
.gallery-item.h2 { grid-row: span 2; }
.gallery-item.w3 { grid-column: span 3; }
@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery-item.w3, .gallery-item.w2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.w3, .gallery-item.w2 { grid-column: span 2; }
}

.gallery-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-mute);
  font-size: 13px;
  background: repeating-linear-gradient(45deg, var(--c-line-soft), var(--c-line-soft) 12px, var(--c-white) 12px, var(--c-white) 24px);
}

/* Мини-галерея «Фото с занятий» на странице курса */
.course-photos {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--c-line);
}
.course-photos-title {
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0 0 20px;
  color: var(--c-headline);
}
.course-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.course-photos-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.course-photos-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.3);
}
.course-photos-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* Раздел «Занятия» в общей галерее — такая же сетка как у дипломов */
.gallery-classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.gallery-class-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-class-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.3);
}
.gallery-class-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* Дипломы и награды — отдельный раздел ниже фотографий */
.gallery-diplomas-head {
  margin-top: 60px;
  margin-bottom: 24px;
  padding-top: 40px;
  border-top: 1px solid var(--c-line);
}
.gallery-diplomas-head h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0 0 8px;
  color: var(--c-headline);
}
.gallery-diplomas-head p {
  color: var(--c-ink-soft);
  margin: 0;
  max-width: 640px;
}
.gallery-diplomas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.gallery-diploma-item {
  aspect-ratio: 3 / 4;
  background: var(--c-cream);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-diploma-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.3);
}
.gallery-diploma-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}

/* ==================== FAQ ==================== */
.faq-list {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.faq-item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s;
}
.faq-item[open] { border-color: var(--c-lime); }
.faq-item summary {
  padding: 20px 24px;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-line-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.faq-item[open] .faq-icon {
  background: var(--c-orange);
  color: var(--c-white);
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 24px 24px;
  color: var(--c-ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

/* ==================== CONTACTS ==================== */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}
@media (max-width: 860px) { .contacts-grid { grid-template-columns: 1fr; } }
.contact-card {
  padding: 32px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-list li { display: flex; gap: 16px; align-items: start; }
.contact-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: #EAF5D1;
  color: var(--c-green);
  display: flex; align-items: center; justify-content: center;
}
.contact-icon svg { width: 22px; height: 22px; }
.contact-list strong { display: block; font-size: 13px; color: var(--c-ink-mute); font-weight: 500; }
.contact-list a, .contact-list span { font-size: 17px; font-weight: 700; color: var(--c-headline); }

.map-embed {
  aspect-ratio: 1.4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #E8EFE5;
  position: relative;
}

/* ==================== MODAL (запись) ==================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 59, 33, 0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  animation: fade .2s ease;
}
.modal-backdrop.open { display: flex; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--c-white);
  border-radius: var(--r-xl);
  max-width: 580px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px;
  position: relative;
  animation: slideUp .3s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-line-soft);
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--c-line); }
.modal h2 { font-size: 28px; margin-bottom: 8px; }
.modal-sub { color: var(--c-ink-soft); margin-bottom: 28px; }

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.form-field label { font-size: 13px; font-weight: 700; color: var(--c-ink-soft); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  font-family: var(--f-base);
  font-size: 15px;
  transition: border-color .15s;
  background: var(--c-white);
  color: var(--c-ink);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--c-lime);
}
.form-hint { font-size: 12px; color: var(--c-ink-mute); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.form-row > * { min-width: 0; }
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-success {
  text-align: center;
  padding: 40px 20px;
}
.form-success-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}

/* ==================== FLOATING CONTACT ==================== */
.floating-contact {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-dark);
  color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-md);
  transition: transform .2s, box-shadow .2s;
}
.fc-btn:hover { transform: scale(1.05); box-shadow: var(--sh-lg); }
.fc-btn.whatsapp { background: #25D366; }
.fc-btn.telegram { background: #26A5E4; }
.fc-btn.max {
  /* Небольшой сдвиг палитры в сторону фирменного градиента MAX */
  background: linear-gradient(135deg, #44ccff 0%, #5533ee 66%, #9933dd 100%);
}
.fc-btn.vk { background: #0077FF; }
.fc-btn.phone { background: var(--c-orange); }
.fc-btn svg { width: 24px; height: 24px; }

/* ==================== TWEAKS PANEL ==================== */
.tweaks-panel {
  position: fixed;
  top: 80px; right: 16px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-lg);
  z-index: 50;
  width: 280px;
  display: none;
  font-size: 14px;
}
.tweaks-panel.open { display: block; }
.tweaks-panel h3 { font-size: 16px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; }
.tweak-group { margin-bottom: 16px; }
.tweak-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 12px; color: var(--c-ink-mute); text-transform: uppercase; }
.tweak-swatches { display: flex; gap: 8px; }
.tweak-swatch {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s;
}
.tweak-swatch.active { border-color: var(--c-headline); }

/* Согласие на ПДн + ошибка формы */
.form-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--c-ink-soft);
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--c-orange);
  flex-shrink: 0;
  cursor: pointer;
}
.form-consent a { color: var(--c-headline); text-decoration: underline; }
.form-consent span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Блок согласий: одно обязательное + два опциональных */
.form-consents {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--c-cream);
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-soft);
  width: 100%;
  min-width: 0;
}
.form-consents .form-consent { font-size: 12.5px; }

/* Бейдж «Обязательно» у основного согласия */
.form-consent-required {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  background: var(--c-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Опциональные согласия — визуально приглушённые */
.form-consent-optional {
  color: var(--c-ink-mute);
  padding-top: 8px;
  border-top: 1px dashed var(--c-line);
}
.form-consent-optional input[type="checkbox"] {
  accent-color: var(--c-lime);
}
.form-error {
  background: #FDECEC;
  color: #B02020;
  border: 1px solid #F3C2C2;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 14px;
}

/* Успешная отправка */
.form-success {
  text-align: center;
  padding: 24px 8px 8px;
}
.form-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--c-lime) 18%, transparent);
  color: var(--c-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.form-success h2 { margin-bottom: 12px; }
.form-success .btn { margin-top: 24px; }

/* Cookies-плашка */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--c-dark);
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 500;
  font-size: 14px;
  line-height: 1.45;
  transform: translateY(120%);
  transition: transform .35s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { margin: 0; flex: 1; }
.cookie-banner a { color: var(--c-orange); text-decoration: underline; }
.cookie-banner button {
  flex-shrink: 0;
  background: var(--c-orange);
  color: var(--c-headline);
  border: none;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.cookie-banner button:hover { background: #FFB53D; }
@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* Блокировка скролла body при открытой модалке/меню/лайтбоксе.
   Класс ставится/снимается из app.js через lockScroll()/unlockScroll().
   На html тоже overflow:hidden — фикс известной проблемы iOS Safari,
   где body.overflow:hidden сам по себе не останавливает скролл. */
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  /* height:100% нужен, чтобы iOS Safari корректно прекратил скролл:
     без него body с overflow:hidden на iOS всё равно иногда скроллится. */
  height: 100%;
}
/* Когда меню/модалка закрыты — скролл восстанавливается автоматически
   (класс снят). Никаких inline-стилей на body не остаётся. */

/* Утилиты */
.hide-on-mobile { display: initial; }
.show-on-mobile { display: none; }
@media (max-width: 640px) {
  .hide-on-mobile { display: none; }
  .show-on-mobile { display: initial; }
}

/* ==================== PRIVACY PAGE ==================== */
.privacy-meta-top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  color: var(--c-ink-mute);
}
.privacy-meta-top strong { color: var(--c-headline); }

/* Внешняя секция страницы политики — поджатый padding, чтобы контент
   начинался сразу под page-hero и не «отъезжал» на 100+ пикселей вниз. */
.privacy-section-wrap { padding-block: 28px 60px; }

.privacy-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .privacy-wrap { grid-template-columns: 1fr; gap: 32px; }
  .privacy-section-wrap { padding-block: 20px 40px; }
}

/* Оглавление политики НЕ sticky — клиент попросил, чтобы оглавление
   листалось вместе с содержанием (а не висело на месте при скролле). */
.privacy-toc {
  position: static;
  background: var(--c-cream);
  border-radius: var(--r-lg);
  padding: 24px;
  border: 1px solid var(--c-line);
}
.privacy-toc-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-ink-mute);
  margin-bottom: 12px;
}
.privacy-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: toc;
}
.privacy-toc ol li { counter-increment: toc; }
.privacy-toc ol li a {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.privacy-toc ol li a::before {
  content: counter(toc);
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-ink-mute);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.privacy-toc ol li a:hover {
  background: var(--c-white);
  color: var(--c-headline);
}
.privacy-toc ol li a:hover::before {
  background: var(--c-lime);
  color: var(--c-headline);
  border-color: var(--c-lime);
}

.privacy-body {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink-soft);
}
.privacy-section {
  /* Отступ между разделами — поджат по запросу клиента (было 48 → 24 → 14). */
  margin-bottom: 14px;
  /* Ни фона, ни паддинга — чтобы между блоками не было видимых «карточек» */
  background: transparent;
  padding: 0;
  scroll-margin-top: 100px;
}
.privacy-section:first-of-type { margin-top: 0; }
.privacy-section:last-child { margin-bottom: 0; }
/* Заголовок секции — flush слева, без дополнительных margin сверху */
.privacy-section > h2:first-child { margin-top: 0; }
.privacy-section-flash {
  animation: privacyFlash 1.2s ease;
}
@keyframes privacyFlash {
  0%   { background: transparent; }
  20%  { background: color-mix(in oklab, var(--c-lime) 25%, transparent); border-radius: 12px; }
  100% { background: transparent; }
}
.privacy-section h2 {
  color: var(--c-headline);
  font-size: clamp(20px, 2vw, 24px);
  margin: 0 0 6px 0;          /* было 16px снизу — поджимаем */
  padding: 0;
  line-height: 1.2;
}
/* Между параграфами тоже поджимаем (было 12px) */
.privacy-body p { margin: 0 0 6px 0; }
.privacy-body p:last-child { margin-bottom: 0; }
.privacy-body strong { color: var(--c-headline); }

.privacy-list {
  list-style: none;
  margin: 4px 0 8px;            /* было 8px / 16px */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;                     /* было 8px */
}
.privacy-list li {
  position: relative;
  padding-left: 22px;
}
.privacy-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  background: var(--c-lime);
  border-radius: 2px;
  transform: rotate(45deg);
}

.privacy-note {
  margin: 12px 0 0 !important;
  padding: 14px 18px;
  background: color-mix(in oklab, var(--c-orange) 8%, transparent);
  border-left: 3px solid var(--c-orange);
  border-radius: 8px;
  font-size: 14px;
  color: var(--c-ink);
}

.privacy-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 20px 24px;
  background: var(--c-cream);
  border-radius: var(--r-md);
  font-size: 15px;
}
.privacy-contacts strong {
  display: inline-block;
  min-width: 80px;
  color: var(--c-headline);
}

.privacy-footer-meta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  color: var(--c-ink-mute);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================================
   FOUNDER CARD — карточка Светланы: шапка + раскрывающаяся история
   ============================================================ */
.founder {
  background: var(--c-white);
  border: 2px solid var(--c-lime);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(28, 59, 33, 0.25);
  margin-bottom: 40px;
}

/* Шапка — две колонки: маскот и текст.
   align-items: center — для визуального баланса; тексты начинаются почти
   сразу от верхнего края, padding уменьшен, чтобы не было «зазора»
   над бейджем «Основатель центра». */
.founder-hero {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  gap: 28px;
  padding: 28px 44px 28px 32px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--c-lime) 35%, white) 0%,
    var(--c-white) 100%);
  position: relative;
}
.founder-hero::before {
  /* Фирменные крестики в фоне шапки */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23F39A1F' stroke-width='1.2' opacity='0.2'><path d='M20 14v12M14 20h12'/></g></svg>");
  animation: crossesDrift 60s linear infinite;
  pointer-events: none;
}
.founder-hero-mascot {
  position: relative;
  z-index: 1;
  text-align: center;
}
.founder-hero-mascot img {
  width: 240px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(28, 59, 33, 0.25));
  animation: founderFloat 5s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes founderFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
.founder-hero-body {
  position: relative;
  z-index: 1;
}
.founder-name {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--c-headline);
}
.founder-role {
  font-size: 16px;
  color: var(--c-ink-soft);
  font-weight: 600;
  margin-bottom: 10px;
}
.founder-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: var(--c-ink-mute);
  margin-bottom: 18px;
}
.founder-quote {
  margin: 0;
  padding: 18px 0 0;
  border-top: 2px dashed var(--c-lime);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--c-headline);
  font-weight: 500;
  max-width: 580px;
}

/* Раскрывающийся блок «Читать полную историю» */
.founder-more {
  border-top: 1px solid var(--c-line);
}
.founder-more summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--c-cream);
  font-weight: 700;
  color: var(--c-headline);
  transition: background .2s ease;
  user-select: none;
}
.founder-more summary::-webkit-details-marker { display: none; }
.founder-more summary:hover { background: color-mix(in oklab, var(--c-lime) 15%, var(--c-cream)); }
.founder-more-label {
  font-size: 15px;
}
.founder-more-icon {
  display: inline-flex;
  width: 36px; height: 36px;
  background: var(--c-white);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, background .2s ease;
}
.founder-more[open] .founder-more-icon {
  transform: rotate(180deg);
  background: var(--c-lime);
}

.founder-more-body {
  padding: 32px 44px 44px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.founder-block h3 {
  font-size: clamp(20px, 2vw, 24px);
  color: var(--c-headline);
  margin: 0 0 14px;
  position: relative;
  padding-left: 18px;
}
.founder-block h3::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  background: var(--c-lime);
  border-radius: 2px;
}
.founder-block p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
  margin: 0 0 10px;
}
.founder-block p:last-child { margin-bottom: 0; }
.founder-extra {
  margin-top: 16px !important;
  padding: 14px 18px;
  background: var(--c-cream);
  border-left: 3px solid var(--c-orange);
  border-radius: 8px;
  font-size: 15px !important;
  color: var(--c-ink-soft) !important;
}

.founder-principles {
  display: grid;
  gap: 16px;
}
.founder-principle {
  display: flex;
  gap: 18px;
  padding: 18px 20px;
  background: var(--c-cream);
  border-radius: var(--r-md);
}
.founder-principle-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-headline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
}
.founder-principle strong {
  display: block;
  font-size: 16px;
  color: var(--c-headline);
  margin-bottom: 4px;
}
.founder-principle p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
}

.founder-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
}

/* Заголовок блока «Педагоги-практики» */
.teachers-section-title {
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 48px 0 24px;
  color: var(--c-headline);
}

/* Заголовки разделов на странице курсов */
.courses-section-title {
  font-size: clamp(22px, 2.4vw, 32px);
  margin: 48px 0 20px;
  color: var(--c-headline);
  display: flex;
  align-items: center;
  gap: 10px;
}
.courses-section-title:first-child { margin-top: 0; }
.courses-section-summer {
  /* Летние разделы — солнечный акцент слева полоской */
  padding-left: 16px;
  border-left: 6px solid;
  border-image: linear-gradient(180deg, #FFD400 0%, var(--c-orange) 100%) 1;
}
.courses-section-lead {
  margin: -12px 0 20px;
  color: var(--c-ink-soft);
  max-width: 640px;
  font-size: 15px;
}

/* ==================== PLACEHOLDER-КАРТОЧКА летнего курса ====================
   Используется для isSummer: true курсов. Либо с маскотом (course-card-with-mascot),
   либо с заглушкой-эмодзи. Фон — цвет темы курса + паттерн крестиков. */
.course-card-placeholder {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px 22px;
  gap: 8px;
  color: var(--c-headline);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--c-cream);
}
/* Тёплое «солнце» в правом верхнем углу — ТОЛЬКО у летних карточек */
.course-card-summer::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFD400 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
/* Паттерн крестиков поверх — у ВСЕХ карточек */
.course-card-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23F39A1F' stroke-width='1.2' opacity='0.22'><path d='M20 14v12M14 20h12'/></g></svg>");
  pointer-events: none;
  z-index: 0;
}
.course-theme-lime   { background: color-mix(in oklab, var(--c-lime)   30%, var(--c-cream)); }
.course-theme-green  { background: color-mix(in oklab, var(--c-green)  22%, var(--c-cream)); }
.course-theme-orange { background: color-mix(in oklab, var(--c-orange) 26%, var(--c-cream)); }
.course-theme-teal   { background: color-mix(in oklab, var(--c-teal)   26%, var(--c-cream)); }

/* Маскот — большое PNG-изображение, сидит сверху карточки и «выходит» из фона. */
.course-card-ph-mascot {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: auto;
  max-height: 65%;
  object-fit: contain;
  object-position: bottom center;
  z-index: 1;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.course-card-with-mascot:hover .course-card-ph-mascot {
  transform: translateX(-50%) scale(1.06) translateY(-4px);
}
/* Когда есть маскот — текст прижимается к низу карточки */
.course-card-with-mascot .course-card-ph-text {
  margin-top: auto;
  position: relative;
  z-index: 2;
  width: 100%;
}

.course-card-ph-sun {
  position: relative;
  z-index: 1;
  font-size: 38px;
  line-height: 1;
  margin-bottom: 8px;
}
.course-card-ph-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.course-card-ph-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--c-headline);
  /* Лёгкая тень для читаемости поверх светлого фона */
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.course-card-ph-age {
  display: inline-block;
  padding: 5px 14px;
  background: var(--c-dark);
  color: var(--c-white);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.3);
}
/* На мобильном — чуть поменьше, чтобы длинные названия не ломали карточку */
@media (max-width: 520px) {
  .course-card-ph-title { font-size: 20px; }
  .course-card-ph-age   { font-size: 12.5px; padding: 4px 12px; }
}
.course-card-placeholder:hover {
  transform: translateY(-4px) scale(1.015);
}
/* Sidebar на странице курса: блок «Ведёт курс» — компактный список педагогов */
.sidebar-card-teachers {
  margin-bottom: 16px;
}
.sidebar-teachers-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-teachers-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-teacher-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: var(--c-headline);
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-teacher-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sidebar-teacher-info { min-width: 0; }
.sidebar-teacher-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-headline);
  line-height: 1.15;
  display: flex;
  flex-direction: column;
}
.sidebar-teacher-name .teacher-name-first,
.sidebar-teacher-name .teacher-name-last {
  display: block;
}
.sidebar-teacher-role {
  font-size: 12px;
  color: var(--c-ink-mute);
  margin-top: 4px;
}

/* Двухстрочные имена педагогов — общие стили */
.teacher-name-first,
.teacher-name-last {
  display: block;
  line-height: 1.08;
}
.teacher-name-last {
  font-weight: 900;
}

/* ===== МОДАЛКА «Подробнее о Светлане» ===== */
.founder-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 28, 0.75);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 10000;
  overflow-y: auto;
  padding: 40px 20px;
  opacity: 0;
  transition: opacity .2s ease;
}
.founder-modal.open { display: flex; opacity: 1; }
.founder-modal-content {
  background: var(--c-white);
  border-radius: var(--r-xl);
  max-width: 820px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
  animation: founderModalIn .28s cubic-bezier(.22,.61,.36,1);
  position: relative;
}
@keyframes founderModalIn {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.founder-modal-close {
  position: fixed;
  top: 20px; right: 24px;
  z-index: 10001;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-headline);
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.5);
  transition: transform .2s ease;
}
.founder-modal-close:hover { transform: scale(1.08); }

/* Шапка модалки — компактная, без маскота (фото перенесено в body) */
.founder-modal-header {
  padding: 22px 32px 16px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--c-lime) 35%, white) 0%,
    var(--c-white) 100%);
}
.founder-modal-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.founder-modal-name {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.15;
  margin: 0 0 2px;
  color: var(--c-headline);
}
.founder-modal-role {
  font-size: 14px;
  color: var(--c-ink-soft);
  font-weight: 600;
  margin-bottom: 10px;
}
.founder-modal-quote {
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 2px dashed var(--c-lime);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-headline);
  font-weight: 500;
}

/* Тело модалки — одна колонка, плотная типографика, фото обтекается. */
.founder-modal-body {
  padding: 20px 32px 24px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-ink);
}
/* Обёртка портрета: фирменный градиентный фон с паттерном под PNG */
.founder-modal-portrait {
  float: right;
  width: 42%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  margin: 0 0 12px 20px;
  border-radius: var(--r-md);
  box-shadow: 0 14px 28px -10px rgba(28, 59, 33, 0.3);
  shape-outside: margin-box;
  /* Фирменный фон: лаймовый градиент + паттерн крестиков */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23F39A1F' stroke-width='1.2' opacity='0.25'><path d='M20 14v12M14 20h12'/></g></svg>"),
    linear-gradient(135deg,
      color-mix(in oklab, var(--c-lime) 45%, white) 0%,
      color-mix(in oklab, var(--c-lime) 20%, white) 100%);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.founder-modal-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(28, 59, 33, 0.25));
}
.founder-modal-body h3 {
  font-size: 16px;
  color: var(--c-headline);
  margin: 14px 0 6px;
  padding-left: 12px;
  position: relative;
  clear: none; /* заголовки тоже обтекают фото */
}
.founder-modal-body h3:first-of-type { margin-top: 0; }
.founder-modal-body h3::before {
  content: '';
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 3px;
  background: var(--c-lime);
  border-radius: 2px;
}
.founder-modal-body p {
  margin: 0 0 6px;
}
.founder-modal-body p:last-child { margin-bottom: 0; }

/* Блок, которому нужно быть «под» обтекающим фото на всю ширину модалки */
.founder-modal-full {
  clear: both;
  margin-top: 16px;
}
.founder-modal-full h3:first-child { margin-top: 0; }

/* Принципы — grid 2×2 на десктопе, 1 колонка на мобильном, цифры через counter */
.founder-modal-principles {
  list-style: none;
  counter-reset: fp;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .founder-modal-principles { grid-template-columns: 1fr; }
}
/* li = flex (а не grid): текст корректно заполняет всю доступную ширину.
   minmax(0,1fr) в grid родителя + min-width:0 у flex-потомков —
   стандартная защита от «ломания» текста по одному слову в строке. */
.founder-modal-principles li {
  counter-increment: fp;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--c-cream);
  border-radius: var(--r-sm);
  min-width: 0;
}
.founder-modal-principles li::before {
  content: counter(fp);
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-headline);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 13px;
}
.founder-modal-principles li > div {
  min-width: 0;
  flex: 1;
}
.founder-modal-pnum {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-lime);
  color: var(--c-headline);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 15px;
}
.founder-modal-principles strong {
  display: block;
  color: var(--c-headline);
  margin-bottom: 1px;
  font-size: 13.5px;
}
.founder-modal-principles p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-ink-soft);
}
.founder-modal-pnum {
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
}
.founder-modal-extra {
  margin-top: 8px !important;
  padding: 10px 12px;
  background: var(--c-cream);
  border-left: 3px solid var(--c-orange);
  border-radius: 6px;
  font-size: 13.5px !important;
  color: var(--c-ink-soft) !important;
  line-height: 1.45 !important;
}
.founder-modal-cta {
  padding: 14px 32px 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--c-cream);
  border-top: 1px solid var(--c-line);
}

@media (max-width: 640px) {
  .founder-modal { padding: 12px; }
  .founder-modal-content { border-radius: var(--r-lg); }
  .founder-modal-header { padding: 18px 20px 14px; }
  .founder-modal-body { padding: 16px 20px 20px; }
  /* На мобильном портрет больше не «плавает» — сверху во всю ширину */
  .founder-modal-portrait {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px 0;
  }
  .founder-modal-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 24px; }
}

/* ===== TEACHERS-ROW — горизонтальные мини-карточки в ряд =====
   4 педагога → 4 колонки на широких экранах, 2 — на планшете, 1 — на мобайле. */
.teachers-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 1200px) { .teachers-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .teachers-row { grid-template-columns: 1fr; } }

.teacher-mini {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-lime);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.teacher-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -18px rgba(28, 59, 33, 0.3);
}
.teacher-theme-lime   { border-left-color: var(--c-lime); }
.teacher-theme-green  { border-left-color: var(--c-green); }
.teacher-theme-orange { border-left-color: var(--c-orange); }
.teacher-theme-teal   { border-left-color: var(--c-teal); }

.teacher-mini-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.teacher-mini-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 22px;
  color: var(--c-headline);
  flex-shrink: 0;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.2);
  overflow: hidden;
}
/* Если внутри аватара <img> — он заполняет круг целиком (реальное фото педагога).
   transform: scale(1.15) — приближаем, чтобы лицо было крупнее.
   object-position: 50% 20% — фокус на верхнюю часть (лицо), а не по центру. */
.teacher-mini-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
  transform: scale(1.15);
  transform-origin: center 30%;
}
.teacher-theme-lime   .teacher-mini-avatar { background: var(--c-lime); }
.teacher-theme-green  .teacher-mini-avatar { background: color-mix(in oklab, var(--c-green) 65%, white); }
.teacher-theme-orange .teacher-mini-avatar { background: var(--c-orange); color: var(--c-white); }
.teacher-theme-teal   .teacher-mini-avatar { background: color-mix(in oklab, var(--c-teal) 65%, white); }

.teacher-mini-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--c-headline);
  line-height: 1.15;
  display: flex;
  flex-direction: column;
}
.teacher-mini-name .teacher-name-first,
.teacher-mini-name .teacher-name-last {
  font-weight: 900;
  font-size: 1em;
  line-height: 1.08;
  color: var(--c-headline);
  letter-spacing: 0.01em;
}
.teacher-mini-name .teacher-name-last { margin-top: 1px; }
.teacher-mini-role {
  font-size: 12px;
  color: var(--c-ink-mute);
  margin-top: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.teacher-mini-tagline {
  font-size: 14px;
  color: var(--c-headline);
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
}
.teacher-mini-about {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
}

/* Ведёт курсы: компактный список плашек с ссылками */
.teacher-mini-courses {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--c-line-soft);
}
.teacher-mini-courses-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-mute);
  margin-bottom: 8px;
}
.teacher-mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.teacher-mini-chips .chip {
  font-size: 12px;
  padding: 4px 10px;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.teacher-mini-chips .chip:hover {
  transform: translateY(-1px);
  filter: brightness(0.95);
}

/* ===== Карточка основателя: мягкий акцент внутри ряда ===== */
.teacher-mini-founder {
  border-color: var(--c-lime);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--c-lime) 12%, white) 0%,
    var(--c-white) 100%);
}
/* Мягкая подсветка роли «Основатель центра» — не яркая плашка, а
   дискретный акцент: лёгкий лаймовый фон + чуть более тёмный цвет текста */
.teacher-mini-role-founder {
  display: inline-block;
  margin-top: 4px !important;
  padding: 3px 10px;
  background: color-mix(in oklab, var(--c-lime) 30%, white);
  color: var(--c-headline) !important;
  border-radius: 6px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.teacher-mini-more-btn {
  margin-top: 12px;
  font-size: 13px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.teacher-mini-more-btn:hover {
  background: var(--c-lime);
  border-color: var(--c-lime);
}

/* Кнопка-указатель «скролл вниз» под рядом педагогов.
   Справа страницы, прокручивает к CTA «Записаться на пробное занятие». */
.teachers-scroll-hint-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 24px;
}
.teachers-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: transparent;
  border: 2px dashed color-mix(in oklab, var(--c-lime) 60%, var(--c-dark));
  border-radius: 999px;
  color: var(--c-headline);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.teachers-scroll-hint:hover {
  background: var(--c-lime);
  border-color: var(--c-lime);
  border-style: solid;
  transform: translateY(-2px);
}
.teachers-scroll-hint-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-dark);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.teachers-scroll-hint-arrow svg { width: 16px; height: 16px; }
.teachers-scroll-hint:hover .teachers-scroll-hint-arrow {
  animation: scrollHintBounce 0.8s ease-in-out infinite;
}
@keyframes scrollHintBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (max-width: 560px) {
  .teachers-scroll-hint-wrap { justify-content: center; }
  .teachers-scroll-hint { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .teachers-scroll-hint:hover .teachers-scroll-hint-arrow { animation: none; }
}

@media (max-width: 760px) {
  .founder-hero {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 20px;
    text-align: center;
  }
  .founder-hero-mascot img { width: 160px; }
  .founder-quote { text-align: left; }
  .founder-meta { justify-content: center; }
  .founder-more summary { padding: 18px 22px; }
  .founder-more-body { padding: 22px 22px 28px; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .founder-hero::before,
  .founder-hero-mascot img { animation: none !important; }
}

/* ============================================================
   PATHWAY — «ЛЕСТНИЦА КУРСОВ» от 2 до 17 лет
   Зигзаг ступеней слева-справа, соединительная линия посредине,
   маскот-спутник справа, привязанный к скроллу через sticky.
   ============================================================ */
.pathway {
  background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-white) 100%);
  padding-block: clamp(60px, 9vw, 120px);
  position: relative;
  overflow: hidden;
}
.pathway::before {
  /* Фирменные крестики в фоне секции — едва заметны */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23F39A1F' stroke-width='1.2' opacity='0.12'><path d='M20 14v12M14 20h12'/></g></svg>");
  animation: crossesDrift 80s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.pathway .wrap { position: relative; z-index: 1; }
.pathway-head { margin-bottom: clamp(40px, 5vw, 60px); }
.pathway-head p { max-width: 720px; }

/* Сцена: одна колонка, лестница по всей ширине */
.pathway-stage {
  position: relative;
}

/* Лестница */
.pathway-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Вертикальная линия по центру — «позвоночник» лестницы */
.pathway-list::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: repeating-linear-gradient(
    180deg,
    var(--c-lime) 0 14px,
    transparent 14px 24px
  );
  opacity: 0.55;
  border-radius: 2px;
}
@media (max-width: 720px) {
  .pathway-list::before { left: 22px; margin-left: 0; }
}

/* Заголовок возрастной группы */
.pathway-group-label {
  display: flex;
  justify-content: center;
  margin-block: 32px 24px;
  position: relative;
  z-index: 2;
}
.pathway-group-label span {
  display: inline-block;
  padding: 8px 22px;
  background: var(--c-white);
  border: 2px solid var(--c-dark);
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-headline);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.2);
}
.pathway-group-kids   span { background: color-mix(in oklab, var(--c-lime)   30%, white); }
.pathway-group-school span { background: color-mix(in oklab, var(--c-orange) 25%, white); }
.pathway-group-teens  span { background: color-mix(in oklab, var(--c-teal)   25%, white); }
/* Летний бейдж на отдельной ступени лестницы — солнечный акцент внутри
   обычной возрастной группы (вместо отдельного раздела "Лето"). */
.pathway-step-summer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #FFD400 0%, var(--c-orange) 100%);
  color: var(--c-white);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px -2px rgba(243, 154, 31, 0.5);
}
/* Вся карточка летнего курса — мягкий жёлтый ореол справа */
.pathway-step-summer .pathway-step-card {
  border: 1px solid color-mix(in oklab, #FFD400 35%, white);
  background: linear-gradient(135deg,
    color-mix(in oklab, #FFD400 6%, white) 0%,
    var(--c-white) 60%);
}
@media (max-width: 720px) {
  .pathway-group-label { justify-content: flex-start; padding-left: 28px; }
}

/* Ступень */
.pathway-step {
  position: relative;
  margin-block: 28px;
  display: flex;
  width: 100%;
}
.pathway-step-left  { justify-content: flex-start; }
.pathway-step-right { justify-content: flex-end; }

/* Соединительная «скобка» от карточки к центральной линии */
.pathway-step-line {
  position: absolute;
  top: 50%;
  width: calc(50% - 46%); /* запас между карточкой и линией */
  height: 3px;
  background: var(--c-lime);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity .5s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.pathway-step-left  .pathway-step-line { right: 50%; transform-origin: right center; }
.pathway-step-right .pathway-step-line { left: 50%;  transform-origin: left center; }
.pathway-step.is-visible .pathway-step-line {
  opacity: 0.7;
  transform: scaleX(1);
}

/* Карточка ступени */
.pathway-step-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 46%;
  padding: 22px 24px;
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 2px solid transparent;
  box-shadow: 0 10px 30px -15px rgba(28, 59, 33, 0.2);
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22, .61, .36, 1),
    box-shadow .3s ease,
    border-color .3s ease;
}
.pathway-step-left  .pathway-step-card { transform: translateY(20px) translateX(-10px); }
.pathway-step-right .pathway-step-card { transform: translateY(20px) translateX(10px); }
.pathway-step.is-visible .pathway-step-card {
  opacity: 1;
  transform: translate(0, 0);
}
.pathway-step-card:hover {
  border-color: var(--c-lime);
  box-shadow: 0 20px 40px -15px rgba(28, 59, 33, 0.35);
  transform: translate(0, -3px) !important;
}

/* Маскот курса — слегка выходит за границу карточки только сверху.
   По бокам и снизу остаётся внутри (иначе JPG-фон был бы виден на
   кремовой секции, т.к. multiply работает только с белым фоном). */
.pathway-step-mascot {
  flex-shrink: 0;
  width: 130px; height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.pathway-step-mascot img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  transform: rotate(-3deg);
}
/* Карточкам разрешаем «видеть» вылезающего маскота */
.pathway-step-card { overflow: visible; }

/* Для right-карточек маскот тоже вылезает «наружу» лестницы,
   но с поворотом в другую сторону — живой зеркальный эффект */
.pathway-step-right .pathway-step-mascot img { transform: rotate(3deg); }

.pathway-step-card:hover .pathway-step-mascot img {
  transform: rotate(-1deg) translateY(-6px) scale(1.06);
}
.pathway-step-right .pathway-step-card:hover .pathway-step-mascot img {
  transform: rotate(1deg) translateY(-6px) scale(1.06);
}
.pathway-step-body { flex: 1; min-width: 0; }
.pathway-step-age {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-mute);
  margin-bottom: 4px;
}
.pathway-step-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-headline);
  margin-bottom: 4px;
  line-height: 1.2;
}
.pathway-step-short {
  font-size: 13px;
  color: var(--c-ink-soft);
  line-height: 1.45;
}
.pathway-step-arrow {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-lime-bg);
  color: var(--c-headline);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease, background .3s ease;
}
/* Жёстко фиксируем размер SVG внутри стрелки — иначе на мобилках он раздувается */
.pathway-step-arrow svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.pathway-step-card:hover .pathway-step-arrow {
  background: var(--c-lime);
  transform: rotate(-45deg);
}

/* ============ МОБИЛЬНАЯ ВЕРСИЯ ЛЕСТНИЦЫ ============
   Пересобираем целиком: компактные ступени в одну колонку,
   маленькие аккуратные элементы, нет гигантских кругов. */
@media (max-width: 720px) {
  /* Сцена перестаёт быть двухколонной */
  .pathway-stage { grid-template-columns: 1fr; gap: 0; }

  /* Все ступени — выровнены по левому краю, без зигзага */
  .pathway-step,
  .pathway-step-left,
  .pathway-step-right {
    justify-content: flex-start;
    margin-block: 14px;
  }

  /* Центральная вертикальная линия — слева от карточек */
  .pathway-list::before {
    left: 14px;
    margin-left: 0;
    width: 3px;
  }

  /* Карточка ступени: занимает почти всю ширину, компактная */
  .pathway-step-card {
    width: calc(100% - 28px);
    margin-left: 28px;
    padding: 12px 12px;
    gap: 10px;
    border-radius: 14px;
  }
  .pathway-step-left  .pathway-step-card,
  .pathway-step-right .pathway-step-card {
    transform: translateY(12px) translateX(0);
  }

  /* Соединительная «скобка» от номера к центральной линии — короткая */
  .pathway-step-line {
    display: none; /* на мобильном пропускаем, чтобы не загромождать */
  }

  /* Маскот курса — компактнее на мобильном, но всё равно «торчит» */
  .pathway-step-mascot {
    width: 84px;
    height: 92px;
    margin: 0;
  }

  /* Контент */
  .pathway-step-age { font-size: 11px; margin-bottom: 2px; }
  .pathway-step-title { font-size: 15px; margin-bottom: 2px; }
  .pathway-step-short {
    font-size: 12px;
    line-height: 1.4;
    /* обрезаем описание 2 строками, иначе карточка растёт */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Стрелка — маленькая, аккуратная */
  .pathway-step-arrow {
    width: 26px;
    height: 26px;
  }
  .pathway-step-arrow svg {
    width: 12px;
    height: 12px;
  }

  /* Заголовки возрастных групп — тоже компактнее */
  .pathway-group-label {
    margin-block: 22px 14px;
  }
  .pathway-group-label span {
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  /* Подвал лестницы: кнопки в столбец, полной ширины */
  .pathway-foot .btn {
    width: 100%;
  }
}

/* Очень узкие экраны (iPhone SE, старые Android) */
@media (max-width: 380px) {
  .pathway-step-card { padding: 12px; gap: 8px; }
  .pathway-step-mascot { width: 68px; height: 76px; margin: 0; }
  .pathway-step-title { font-size: 14px; }
  .pathway-step-short { font-size: 11px; }
}

/* (Блоки .pathway-milestone и .pathway-mascot удалены —
    вехи и sticky-маскот больше не используются.) */

/* Подвал секции: две CTA-кнопки */
.pathway-foot {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 60px);
}

@media (prefers-reduced-motion: reduce) {
  .pathway::before,
  .pathway-mascot img {
    animation: none !important;
  }
  .pathway-step-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .pathway-step-line {
    opacity: 0.7 !important;
    transform: scaleX(1) !important;
  }
}

/* ============================================================
   ПРОМО-ПЛАШКА «ЛЕТНЯЯ РАСПРОДАЖА — ЛАГЕРЬ -50%»
   Красно-жёлтый sale-style баннер с солнцем, лучами и билетной выемкой.
   ============================================================ */
/* Секция промо-плашки — на общем кремовом фоне страницы.
   margin-top: -40px — «всасываем» в нижнюю часть hero, чтобы визуально
   плашка сидела ближе к шапке. Сверху/снизу одинаковый кремовый отступ. */
.promo-section {
  background: var(--c-cream);
  padding-block: 32px;
  margin-top: -40px;
}
.promo-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px 36px 28px 40px;
  /* Красно-оранжевый sale-градиент: яркий «распродажный» акцент */
  background: linear-gradient(135deg, #E94B2C 0%, #F23E3E 45%, #FF6A1A 100%);
  border-radius: var(--r-lg);
  box-shadow:
    0 20px 50px -15px rgba(233, 75, 44, 0.55),
    inset 0 0 0 2px rgba(255, 212, 0, 0.6); /* жёлтая внутренняя рамка */
  color: var(--c-white);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
/* Мягкие жёлтые «лучи» — вращаются, создают впечатление летнего солнца */
.promo-banner-rays {
  position: absolute;
  top: 50%; left: 6%;
  width: 360px; height: 360px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    rgba(255, 212, 0, 0) 0deg,
    rgba(255, 212, 0, 0.25) 20deg,
    rgba(255, 212, 0, 0) 40deg,
    rgba(255, 212, 0, 0.25) 60deg,
    rgba(255, 212, 0, 0) 80deg,
    rgba(255, 212, 0, 0.25) 100deg,
    rgba(255, 212, 0, 0) 120deg,
    rgba(255, 212, 0, 0.25) 140deg,
    rgba(255, 212, 0, 0) 160deg,
    rgba(255, 212, 0, 0.25) 180deg,
    rgba(255, 212, 0, 0) 360deg
  );
  animation: promoRays 20s linear infinite;
}
@keyframes promoRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Яркое «солнце» в правом углу */
.promo-banner-sun {
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle at center,
    rgba(255, 212, 0, 0.7) 0%,
    rgba(255, 212, 0, 0.25) 40%,
    rgba(255, 212, 0, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: promoSun 4s ease-in-out infinite;
}
@keyframes promoSun {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.1); opacity: 1; }
}
/* Фирменные крестики поверх — мелкий «дым» для фирменной фактуры */
.promo-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23FFD400' stroke-width='1.2' opacity='0.2'><path d='M20 14v12M14 20h12'/></g></svg>");
  animation: crossesDrift 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.promo-banner:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow:
    0 28px 60px -15px rgba(233, 75, 44, 0.65),
    inset 0 0 0 2px rgba(255, 212, 0, 0.8);
}
/* Бейдж-круг со скидкой «как стикер на ценнике» */
.promo-banner-badge {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--c-yellow, #FFD400);
  color: var(--c-headline);
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  animation: promoBadgeBeat 1.5s ease-in-out infinite;
  border: 4px solid var(--c-white);
}
.promo-banner-badge-pct {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.promo-banner-badge-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}
@keyframes promoBadgeBeat {
  0%, 100% { transform: scale(1) rotate(-8deg); }
  50%      { transform: scale(1.1) rotate(-8deg); }
}
.promo-banner-content {
  position: relative; z-index: 2;
}
.promo-banner-eyebrow {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFD400;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.promo-banner-title {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  color: var(--c-white);
  margin: 0 0 8px;
  font-weight: 900;
}
.promo-strike {
  position: relative;
  font-weight: 700;
  opacity: 0.75;
  font-size: 0.75em;
  margin-right: 6px;
}
.promo-strike::after {
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  top: 55%;
  height: 3px;
  background: #FFD400;
  transform: rotate(-6deg);
  border-radius: 2px;
}
.promo-newprice {
  font-weight: 900;
  color: #FFD400;
  font-size: 1.1em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.promo-banner-sub {
  font-size: 15px;
  margin: 0 0 4px;
  opacity: 0.95;
}
.promo-banner-note {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;
}
.promo-banner-cta {
  position: relative; z-index: 2;
  flex-shrink: 0;
}
.promo-banner-cta .btn {
  white-space: nowrap;
  pointer-events: none; /* вся плашка — одна большая ссылка */
  background: var(--c-dark);
  color: var(--c-white);
  font-weight: 800;
  padding: 16px 24px;
}
@media (max-width: 760px) {
  .promo-banner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "badge content"
      "cta   cta";
    padding: 22px;
    gap: 16px 18px;
  }
  .promo-banner-badge { grid-area: badge; width: 72px; height: 72px; }
  .promo-banner-badge-pct { font-size: 18px; }
  .promo-banner-content { grid-area: content; }
  .promo-banner-cta { grid-area: cta; text-align: center; }
  .promo-banner-cta .btn { width: 100%; }
  .promo-banner-rays { width: 200px; height: 200px; }
  .promo-banner-sun { width: 160px; height: 160px; top: -50px; right: -50px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-banner-rays,
  .promo-banner-sun,
  .promo-banner-badge,
  .promo-banner::before {
    animation: none !important;
  }
}

/* ============================================================
   АНИМАЦИИ — единая система для всего сайта.
   Все анимации уважают prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. SCROLL-REVEAL ---------- */
/* Начальное состояние: блок сдвинут вниз на 24px и прозрачный.
   Когда IntersectionObserver добавляет .is-visible — блок въезжает на место. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform 0.7s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 2. АНИМИРОВАННЫЙ ФОН .bg-crosses* ---------- */
/* Крестики медленно ползут по диагонали — цикл 60 секунд,
   ощущение «живого» фирменного пространства. */
@keyframes crossesDrift {
  from { background-position: 0 0; }
  to   { background-position: 80px 80px; }
}
.bg-crosses,
.bg-crosses-orange,
.bg-crosses-teal,
.bg-crosses-green {
  animation: crossesDrift 60s linear infinite;
}

/* ---------- 3. HERO: ПЛАВАЮЩИЙ МАСКОТ ---------- */
/* Мальчик на главной слегка покачивается — 5-секундный цикл. */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-1deg); }
}
.hero-mascot img {
  animation: heroFloat 5s ease-in-out infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* Облачко «мам, смотри что я могу» — пульсация масштаба, разная фаза */
@keyframes bubblePulse {
  0%, 100% { transform: translateY(0) rotate(-3deg) scale(1); }
  50%      { transform: translateY(-6px) rotate(-2deg) scale(1.03); }
}
.hero-bubble {
  animation: bubblePulse 6s ease-in-out infinite;
}

/* ---------- 4. ОРБИТЫ/ТОЧКИ ВОКРУГ HERO ---------- */
/* Добавляю декоративные «частицы» фирменных цветов поверх hero-visual.
   Четыре точки вращаются вокруг центра разными орбитами и скоростями. */
.hero-visual {
  position: relative;
}
.hero-visual::before,
.hero-visual::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.hero-visual::before {
  width: 14px; height: 14px;
  background: var(--c-orange);
  top: 8%; left: 12%;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-orange) 20%, transparent);
  animation: orbitA 7s ease-in-out infinite;
}
.hero-visual::after {
  width: 10px; height: 10px;
  background: var(--c-lime);
  bottom: 18%; right: 10%;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--c-lime) 25%, transparent);
  animation: orbitB 9s ease-in-out infinite;
}
@keyframes orbitA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, 20px) scale(1.15); }
  66%      { transform: translate(-20px, 40px) scale(0.9); }
}
@keyframes orbitB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, -30px) scale(1.2); }
}

/* ---------- 5. КАРТОЧКИ КУРСОВ: ИГРА ПРИ HOVER ---------- */
/* У нас object-fit: contain — при hover картинка слегка «приближается»,
   фон карточки получает лаймовое свечение, тень усиливается. */
.course-card {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
              box-shadow .3s ease,
              background .3s ease;
}
.course-card img {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.course-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 40px -15px rgba(28, 59, 33, 0.35);
  background: color-mix(in oklab, var(--c-lime-bg) 60%, var(--c-cream));
}
.course-card:hover img {
  transform: scale(1.06);
}

/* ---------- 6. CTA-МАСКОТЫ: ЛЁГКОЕ ПОКАЧИВАНИЕ ---------- */
/* Маскоты в cta-banner по всем страницам — медленное дыхание.
   Важно: НЕ сочетать с hero-mascot (у него своя анимация). */
@keyframes mascotSway {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-4px); }
}
.cta-banner-visual img {
  animation: mascotSway 4.5s ease-in-out infinite;
  transform-origin: bottom center;
  will-change: transform;
}

/* ---------- 7. КАРТОЧКИ ПЕДАГОГОВ: АКЦЕНТ ПРИ HOVER ---------- */
.teacher {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
              box-shadow .3s ease;
}
.teacher:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(28, 59, 33, 0.2);
}
.teacher-avatar {
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1),
              background .3s ease;
}
.teacher:hover .teacher-avatar {
  transform: scale(1.08) rotate(-5deg);
}

/* ---------- 8. КАРТОЧКИ ПРЕИМУЩЕСТВ ---------- */
.advantage {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
              box-shadow .3s ease;
}
.advantage:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -12px rgba(243, 154, 31, 0.25);
}
.advantage-icon {
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.advantage:hover .advantage-icon {
  transform: scale(1.12) rotate(8deg);
}

/* ---------- 9. КНОПКИ: ЛЁГКИЙ LIFT ---------- */
.btn {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* ---------- 10. HEADER: МИНИ-ПОДСВЕТКА ПОД АКТИВНЫМ ПУНКТОМ ---------- */
.main-nav a {
  position: relative;
  transition: color .2s ease;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--c-orange);
  transition: width .3s ease, left .3s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after {
  width: 60%;
  left: 20%;
}

/* ---------- 11. ПРИЁМ: "UNDERLINE SLIDE" У ССЫЛОК В ТЕКСТЕ ---------- */
.privacy-body a,
.faq-answer a {
  background-image: linear-gradient(var(--c-orange), var(--c-orange));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s ease;
}
.privacy-body a:hover,
.faq-answer a:hover {
  background-size: 100% 2px;
}

/* ---------- 12. FLOATING-КНОПКИ: ПУЛЬСАЦИЯ ---------- */
/* Одна из кнопок (мессенджер) периодически "дышит" — привлекает внимание. */
@keyframes fcPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
  50%      { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                         0 0 0 12px rgba(37, 211, 102, 0); }
}
.fc-btn.whatsapp {
  animation: fcPulse 2.6s ease-out infinite;
}

/* ---------- ОТКЛЮЧЕНИЕ АНИМАЦИЙ ---------- */
/* Пользователи с prefers-reduced-motion: reduce получают статичный сайт. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bg-crosses, .bg-crosses-orange, .bg-crosses-teal, .bg-crosses-green,
  .hero-mascot img,
  .hero-bubble,
  .hero-visual::before,
  .hero-visual::after,
  .cta-banner-visual img,
  .fc-btn.whatsapp {
    animation: none !important;
  }
  .course-card:hover,
  .teacher:hover,
  .advantage:hover,
  .btn:hover {
    transform: none !important;
  }
}

/* ============================================================
   TG-TOAST — приглашение в Telegram-канал на главной.
   Два состояния: expanded (карточка) / collapsed (mini-иконка).
   ============================================================ */
.tg-toast {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.tg-toast.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Полная карточка --- */
.tg-toast-card {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  width: min(420px, calc(100vw - 40px));
  background: var(--c-white);
  border: 2px solid #26A5E4;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
  opacity: 0;
  pointer-events: none;
}
.tg-toast.is-expanded .tg-toast-card {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.tg-toast.is-expanded .tg-toast-mini { pointer-events: none; opacity: 0; transform: scale(0.6); }

.tg-toast-close {
  position: absolute;
  top: 6px; right: 8px;
  z-index: 2;
  background: rgba(255,255,255,0.9);
  border: none;
  font-size: 22px;
  color: var(--c-ink-mute);
  cursor: pointer;
  width: 28px; height: 28px;
  line-height: 1;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.tg-toast-close:hover { background: var(--c-cream); color: var(--c-headline); transform: scale(1.08); }

/* Большое ПРЯМОУГОЛЬНОЕ фото + эмодзи-стикер */
.tg-toast-photo-wrap {
  position: relative;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23FFD400' stroke-width='1.2' opacity='0.4'><path d='M20 14v12M14 20h12'/></g></svg>"),
    linear-gradient(135deg, #26A5E4 0%, color-mix(in oklab, #26A5E4 70%, var(--c-dark)) 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tg-toast-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Круглый эмодзи-стикер в углу фото */
.tg-toast-sticker {
  position: absolute;
  top: 10px; left: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.3);
  animation: tgSticker 2.4s ease-in-out infinite;
}
@keyframes tgSticker {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.08); }
}

.tg-toast-text {
  padding: 14px 18px 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tg-toast-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #26A5E4;
  margin-bottom: 4px;
}
.tg-toast-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-headline);
  line-height: 1.25;
  margin-bottom: 6px;
}
.tg-toast-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-ink-soft);
  margin: 0 0 10px;
}
.tg-toast-desc strong { color: var(--c-headline); }

.tg-toast-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: #26A5E4;
  color: var(--c-white);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
  position: relative;
  width: fit-content;
}
.tg-toast-btn:hover { background: #1B91CC; transform: translateY(-1px); }
.tg-toast-btn svg { flex-shrink: 0; }

/* Пульсирующий ореол у кнопки «Подписаться» */
.tg-toast-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid #26A5E4;
  opacity: 0;
  animation: tgPulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes tgPulse {
  0%   { opacity: 0.5; transform: scale(0.95); }
  100% { opacity: 0;   transform: scale(1.2);  }
}

/* --- Свёрнутая mini-иконка --- */
.tg-toast-mini {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #26A5E4;
  color: var(--c-white);
  border: 3px solid var(--c-white);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, background .2s ease;
}
.tg-toast.is-collapsed .tg-toast-mini {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.tg-toast.is-collapsed .tg-toast-card {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.8);
}
.tg-toast-mini:hover { background: #1B91CC; transform: scale(1.1); }
.tg-toast-mini-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #26A5E4;
  opacity: 0;
  animation: tgPulse 2s ease-out infinite;
  pointer-events: none;
}

@media (max-width: 520px) {
  .tg-toast { left: 12px; right: 12px; bottom: 12px; }
  /* Компактная горизонтальная карточка: фото 76px слева, текст справа */
  .tg-toast-card {
    grid-template-columns: 76px 1fr;
    width: auto;
    border-width: 1.5px;
  }
  .tg-toast-photo-wrap {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .tg-toast-sticker {
    top: 4px; left: 4px;
    width: 22px; height: 22px;
    font-size: 11px;
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.3);
  }
  .tg-toast-text {
    padding: 10px 14px 12px 12px;
  }
  .tg-toast-eyebrow {
    font-size: 10px;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
  }
  .tg-toast-title {
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 4px;
  }
  /* Описание скрываем — в компактной карточке нет места на абзац */
  .tg-toast-desc { display: none; }
  .tg-toast-btn {
    padding: 7px 12px;
    font-size: 12px;
    gap: 6px;
  }
  .tg-toast-btn svg { width: 14px; height: 14px; }
  .tg-toast-close {
    top: 4px; right: 4px;
    width: 24px; height: 24px;
    font-size: 18px;
  }
  /* Mini-кнопка — чуть меньше и ближе к углу */
  .tg-toast-mini {
    width: 48px; height: 48px;
  }
  .tg-toast-mini svg { width: 20px; height: 20px; }
}

/* Переключение темы тоста на ВК (класс .vk-toast на корневом контейнере) */
.vk-toast .tg-toast-card       { border-color: #0077FF; }
.vk-toast .tg-toast-photo-wrap {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23FFD400' stroke-width='1.2' opacity='0.4'><path d='M20 14v12M14 20h12'/></g></svg>"),
    linear-gradient(135deg, #0077FF 0%, color-mix(in oklab, #0077FF 70%, var(--c-dark)) 100%);
}
.vk-toast .tg-toast-eyebrow    { color: #0077FF; }
.vk-toast .tg-toast-btn        { background: #0077FF; }
.vk-toast .tg-toast-btn:hover  { background: #0062CC; }
.vk-toast .tg-toast-pulse,
.vk-toast .tg-toast-mini-pulse { border-color: #0077FF; }
.vk-toast .tg-toast-mini       { background: #0077FF; }
.vk-toast .tg-toast-mini:hover { background: #0062CC; }

@media (prefers-reduced-motion: reduce) {
  .tg-toast-pulse,
  .tg-toast-mini-pulse,
  .tg-toast-sticker {
    animation: none;
  }
  .tg-toast-card,
  .tg-toast-mini {
    transition: opacity .2s ease;
  }
}

/* ==========================================================================
   WHY PARENTS — блок «Почему родители выбирают LegoMax» (главная)
   3 большие карточки с крупным номером, хайлайтер-акцентом и тёплым фоном.
   ========================================================================== */
.why-parents-section {
  background: var(--c-white);
}
.why-parents-section .section-head h2 { text-transform: none; }
.why-parents-section .section-head p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 760px;
  margin-top: 14px;
}
.why-parents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wp;
}
@media (max-width: 960px)  { .why-parents-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .why-parents-grid { grid-template-columns: 1fr; } }

.why-parents-card {
  position: relative;
  padding: 36px 30px 32px;
  border-radius: var(--r-lg);
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.why-parents-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--c-orange) 60%, var(--c-line));
  box-shadow: 0 14px 30px -18px rgba(0,0,0,0.2);
}
/* Тематизация — каждая карточка свой акцент, ритм по ряду */
.why-parents-card-1 { background: color-mix(in oklab, var(--c-lime) 18%, var(--c-cream)); }
.why-parents-card-2 { background: color-mix(in oklab, var(--c-orange) 14%, var(--c-cream)); }
.why-parents-card-3 { background: color-mix(in oklab, var(--c-teal) 14%, var(--c-cream)); }

.why-parents-num {
  font-family: var(--f-accent, inherit);
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  color: var(--c-orange);
  transform: rotate(-4deg);
  align-self: flex-start;
  margin-bottom: 4px;
}
.why-parents-card-1 .why-parents-num { color: var(--c-green); }
.why-parents-card-2 .why-parents-num { color: var(--c-orange); }
.why-parents-card-3 .why-parents-num { color: var(--c-teal); }

.why-parents-title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--c-headline);
  margin: 0;
  text-transform: none;
  text-wrap: balance;
}
.why-parents-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin: 0;
  text-wrap: pretty;
}
/* Outro-абзац — обведён «карандашом» (SVG-рамка от руки, чуть дрожащая) */
.why-parents-outro {
  max-width: 820px;
  margin: 50px auto 0;
  text-align: center;
  font-size: 19px;
  line-height: 1.55;
  color: var(--c-ink);
  font-style: italic;
  padding: 32px 40px;
  position: relative;
  background: transparent;
  z-index: 0;
}
.why-parents-outro::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' preserveAspectRatio='none' fill='none' stroke='%23F39A1F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M 20 10 Q 80 6, 180 8 T 380 12 Q 390 14, 392 28 L 394 110 Q 392 128, 376 130 Q 240 134, 60 128 Q 12 126, 10 112 L 8 32 Q 8 14, 22 10 Z'/><path d='M 24 14 Q 120 10, 200 12 T 370 18' opacity='0.4'/></svg>") no-repeat center/100% 100%;
  z-index: -1;
  pointer-events: none;
}
.why-parents-outro::after {
  /* «Подпись от руки» в углу — маленький спаркл */
  content: '';
  position: absolute;
  top: -14px;
  right: 24px;
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L13.8 9.2 L21 11 L13.8 12.8 L12 20 L10.2 12.8 L3 11 L10.2 9.2 Z' stroke='%23F39A1F' stroke-width='1.8' fill='none' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  transform: rotate(-18deg);
  pointer-events: none;
}

/* Founder modal — новые блоки whyParents */
.founder-modal-why-intro {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.founder-modal-why-list {
  list-style: none;
  counter-reset: fwp;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 18px;
}
.founder-modal-why-list li {
  counter-increment: fwp;
  position: relative;
  padding: 18px 22px 18px 64px;
  background: var(--c-cream);
  border-radius: var(--r-md);
  border-left: 4px solid var(--c-orange);
}
.founder-modal-why-list li::before {
  content: counter(fwp);
  position: absolute;
  left: 18px;
  top: 14px;
  font-family: var(--f-accent, inherit);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-orange);
  transform: rotate(-4deg);
}
.founder-modal-why-list li:nth-child(1) { border-left-color: var(--c-green); }
.founder-modal-why-list li:nth-child(1)::before { color: var(--c-green); }
.founder-modal-why-list li:nth-child(3) { border-left-color: var(--c-teal); }
.founder-modal-why-list li:nth-child(3)::before { color: var(--c-teal); }
.founder-modal-why-list li strong {
  display: block;
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--c-headline);
}
.founder-modal-why-list li p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink);
}
.founder-modal-why-outro {
  margin-top: 18px;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  padding: 16px 20px;
  background: color-mix(in oklab, var(--c-lime) 15%, var(--c-white));
  border-radius: var(--r-md);
}

/* About stats — блок с цифрами центра.
   Базовая сетка. «about-stats-wide» — расширенный инфографический вариант
   с 8 плитками, поддерживает тематические карточки (accent, trophy и т.п.). */
.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px 24px;
  margin-top: 80px;
  padding: 48px 40px;
  background: var(--c-cream);
  border-radius: var(--r-xl);
}
.about-stat-num {
  font-size: 48px;
  font-weight: 900;
  color: var(--c-headline);
  line-height: 1;
}
.about-stat-label {
  color: var(--c-ink-mute);
  margin-top: 12px;
}

@media (max-width: 520px) {
  .about-stats { padding: 32px 24px; gap: 24px; }
  .about-stat-num { font-size: 40px; }
}

/* ==========================================================================
   STATS — новая визуальная подача. 3 смысловых блока:
   1. stats-hero    — крупные геройские числа (лет/детей/направлений)
   2. stats-podium  — пьедестал с 2 медалями (призовые места)
   3. stats-rings   — 3 донат-диаграммы (%-показатели)
   ========================================================================== */

/* ---- Блок 1: stats-hero — 3 крупных числа в ряд на тёплом фоне ---- */
.stats-hero {
  margin-top: 72px;
  padding: 56px 48px;
  background: var(--c-cream);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}
.stats-hero::before {
  /* Крест-паттерн фона, как у других «тёмных» секций */
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23000' stroke-width='1' opacity='0.04'><path d='M20 14v12M14 20h12'/></g></svg>") repeat;
  pointer-events: none;
}
.stats-hero-eyebrow {
  position: relative;
  text-align: center;
  font-size: 15px;
  color: var(--c-ink-soft);
  margin: 0 0 32px;
  letter-spacing: 0.02em;
}
.stats-hero-eyebrow strong { color: var(--c-headline); font-weight: 900; }
.stats-hero-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
}
.stats-hero-item {
  text-align: center;
  min-width: 0;
  flex: 1;
}
.stats-hero-item-graduates {
  transform: translateX(-10%);
}
.stats-hero-num {
  font-family: var(--f-base);
  font-weight: 900;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.9;
  color: var(--c-headline);
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.stats-hero-plus {
  font-size: 0.5em;
  color: var(--c-orange);
  margin-left: 4px;
  font-weight: 900;
}
.stats-hero-label {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stats-hero-divider {
  width: 1px;
  height: 100px;
  background: color-mix(in oklab, var(--c-ink) 20%, transparent);
  flex-shrink: 0;
}
@media (max-width: 1040px) {
  .stats-hero-item-graduates { transform: translateX(-6%); }
}
@media (max-width: 760px) {
  .stats-hero { padding: 40px 24px; }
  .stats-hero-row { flex-direction: column; gap: 32px; }
  .stats-hero-divider { width: 60%; height: 1px; }
  .stats-hero-label { font-size: 13px; }
  .stats-hero-item-graduates { transform: none; }
}

/* ---- Блок 2: stats-podium — пьедестал с 2 ступенями ---- */
.stats-podium {
  margin-top: 72px;
  padding: 56px 32px 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--c-orange) 6%, var(--c-white)) 0%,
    var(--c-white) 100%);
  border-radius: var(--r-xl);
  text-align: center;
  overflow: hidden;
}
.stats-podium-head { margin-bottom: 56px; }
.stats-podium-head .eyebrow { display: inline-block; margin-bottom: 10px; }
.stats-podium-head h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  text-transform: none;
  margin: 0;
  text-wrap: balance;
}

.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 12px;
}
.podium-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}
.podium-medal {
  color: var(--c-orange);
  margin-bottom: 12px;
  /* Начальное состояние — вне viewport сверху */
  opacity: 0;
  transform: translateY(-24px) scale(0.6) rotate(-12deg);
  transition: opacity .5s ease .4s,
              transform .6s cubic-bezier(0.34, 1.56, 0.64, 1) .4s;
}
.podium-medal-gold   { color: #E5A01D; }
.podium-medal-bronze { color: #C88B5A; }

.podium-value {
  font-family: var(--f-base);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  line-height: 1;
  color: var(--c-headline);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  margin-bottom: 8px;
  /* Синхронно с пьедесталом */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease .2s, transform .5s ease .2s;
}
.podium-plus {
  font-size: 0.55em;
  color: var(--c-orange);
  margin-left: 2px;
}
.podium-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  max-width: 180px;
  margin: 0 auto 16px;
  line-height: 1.3;
  opacity: 0;
  transition: opacity .5s ease .5s;
}

.podium-block {
  width: 100%;
  max-width: 220px;
  background: var(--c-cream);
  border-radius: 12px 12px 0 0;
  border: 2px solid var(--c-line);
  border-bottom: none;
  position: relative;
  /* Стартовое состояние — ниже своего места */
  transform: translateY(100%);
  transition: transform .7s cubic-bezier(0.5, 0, 0.5, 1);
}
.podium-block::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed currentColor;
  border-radius: 8px 8px 0 0;
  opacity: 0.25;
}
.podium-block-gold {
  height: 140px;
  background: linear-gradient(180deg, #FFE68A 0%, #E5A01D 100%);
  border-color: color-mix(in oklab, #E5A01D 60%, var(--c-line));
  color: #7A5210;
}
.podium-block-bronze {
  height: 96px;
  background: linear-gradient(180deg, #EFC299 0%, #C88B5A 100%);
  border-color: color-mix(in oklab, #C88B5A 60%, var(--c-line));
  color: #66371A;
}

/* Появление внутри viewport */
.stats-podium.is-visible .podium-block { transform: translateY(0); }
.stats-podium.is-visible .podium-value { opacity: 1; transform: translateY(0); }
.stats-podium.is-visible .podium-medal { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
.stats-podium.is-visible .podium-label { opacity: 1; }

/* Задержки по ступеням — золото появляется чуть раньше */
.podium-step-1 .podium-block  { transition-delay: 0ms; }
.podium-step-2 .podium-block  { transition-delay: 200ms; }
.podium-step-1 .podium-medal  { transition-delay: 500ms; }
.podium-step-2 .podium-medal  { transition-delay: 700ms; }

@media (max-width: 600px) {
  .stats-podium { padding: 40px 16px 0; }
  .podium { gap: 10px; }
  .podium-value { font-size: 38px; }
  .podium-block-gold { height: 110px; }
  .podium-block-bronze { height: 80px; }
  .podium-label { font-size: 11px; max-width: 120px; }
}

/* ---- Блок 3: stats-rings — 3 донат-диаграммы ---- */
.stats-rings {
  margin-top: 72px;
  padding: 56px 40px;
  background: var(--c-cream);
  border-radius: var(--r-xl);
  text-align: center;
}
.stats-rings-head { margin-bottom: 44px; }
.stats-rings-head .eyebrow { display: inline-block; margin-bottom: 10px; }
.stats-rings-head h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  text-transform: none;
  margin: 0;
  text-wrap: balance;
}
.stats-rings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .stats-rings-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-rings { padding: 40px 20px; }
}
.ring-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ring-wrap {
  position: relative;
  width: 180px;
  height: 180px;
}
.ring-svg {
  width: 100%;
  height: 100%;
  transition: transform .2s ease;
}
.ring-card:hover .ring-svg { transform: scale(1.03); }
.ring-fill {
  /* dashoffset будет анимироваться JS-кодом при попадании в viewport.
     Фолбэк: без анимации зрительно показываем целевое заполнение. */
  transition: stroke-dashoffset 1.4s cubic-bezier(0.45, 0, 0.25, 1);
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-base);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  color: var(--c-headline);
  letter-spacing: -0.02em;
}
.ring-center .ring-pct {
  font-size: 0.55em;
  color: var(--c-ink-soft);
  font-weight: 800;
  margin-left: 1px;
  vertical-align: top;
}
.ring-label {
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-ink-soft);
  max-width: 220px;
  text-wrap: balance;
}

/* Reduced motion — отключаем анимации выезда, показываем статику */
@media (prefers-reduced-motion: reduce) {
  .podium-block,
  .podium-medal,
  .podium-value,
  .podium-label { transition: none; opacity: 1; transform: none; }
  .ring-fill { transition: none; }
}

/* ==========================================================================
   WHY PARENTS TEASER (главная) — компактная карточка-ссылка
   ========================================================================== */
.why-parents-teaser-section {
  background: var(--c-white);
}
.why-parents-teaser {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 40px 48px;
  background: color-mix(in oklab, var(--c-lime) 16%, var(--c-cream));
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in oklab, var(--c-green) 30%, var(--c-line));
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  position: relative;
  overflow: hidden;
}
.why-parents-teaser:hover {
  transform: translateY(-3px);
  border-color: var(--c-orange);
  box-shadow: 0 18px 38px -20px rgba(0,0,0,0.25);
  background: color-mix(in oklab, var(--c-lime) 22%, var(--c-cream));
}
.why-parents-teaser-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.why-parents-teaser .eyebrow { margin-bottom: 2px; }
.why-parents-teaser-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.15;
  text-transform: none;
  color: var(--c-headline);
  margin: 0;
  text-wrap: balance;
}
.why-parents-teaser-lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 680px;
  margin: 0;
}
.why-parents-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 800;
  font-size: 15px;
  color: var(--c-orange);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.why-parents-teaser:hover .why-parents-teaser-cta { color: var(--c-headline); }
.why-parents-teaser:hover .why-parents-teaser-cta svg { transform: translateX(4px); }
.why-parents-teaser-cta svg { transition: transform .2s ease; }

.why-parents-teaser-num {
  font-family: var(--f-accent, inherit);
  font-weight: 400;
  font-size: clamp(110px, 16vw, 200px);
  line-height: 0.9;
  color: color-mix(in oklab, var(--c-orange) 65%, transparent);
  transform: rotate(-6deg);
  padding-right: 12px;
  user-select: none;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .why-parents-teaser {
    grid-template-columns: 1fr;
    padding: 32px 28px;
    gap: 16px;
  }
  .why-parents-teaser-num {
    font-size: 120px;
    align-self: flex-end;
    margin-top: -24px;
  }
}

/* ==========================================================================
   DOODLE LAYER — рукописные карандаш/маркер/хайлайтер акценты
   Применяются точечно: только заголовки, hero, CTA, карточки.
   НЕ применяются на: цены, расписание, формы, контакты.
   ========================================================================== */

/* 1. HIGHLIGHTER — подсветка маркером под текстом.
   Используется как обёртка <span class="doodle-hl">важное слово</span> */
.doodle-hl {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 .12em;
}
.doodle-hl::before {
  content: '';
  position: absolute;
  inset: 18% -.08em 6% -.08em;
  background: var(--c-lime);
  z-index: -1;
  transform: skew(-6deg) rotate(-0.8deg);
  border-radius: 6px 14px 8px 12px / 10px 6px 12px 8px;
  opacity: 0.55;
}
.doodle-hl--yellow::before { background: #FFD400; opacity: 0.55; }

/* 2. UNDERLINE — карандашное подчёркивание (SVG с дрожащей линией) */
.doodle-ul {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.doodle-ul::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -8px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 40 2, 80 5 T 160 4 T 198 6' stroke='%23F39A1F' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.doodle-ul--dark::after   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 40 2, 80 5 T 160 4 T 198 6' stroke='%231C3B21' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>"); }

/* 3. CIRCLE — ручной овал вокруг цифры/слова */
.doodle-circle {
  position: relative;
  display: inline-block;
  padding: 0.15em 0.5em;
  z-index: 0;
}
.doodle-circle::before {
  content: '';
  position: absolute;
  inset: -.15em -.1em -.1em -.15em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 80' preserveAspectRatio='none'><path d='M 70 4 C 30 4, 6 20, 6 40 C 6 62, 35 76, 72 76 C 110 76, 136 60, 134 38 C 132 18, 108 6, 68 6' stroke='%23F39A1F' stroke-width='2.8' fill='none' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
  z-index: -1;
}
.doodle-circle--teal::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 80' preserveAspectRatio='none'><path d='M 70 4 C 30 4, 6 20, 6 40 C 6 62, 35 76, 72 76 C 110 76, 136 60, 134 38 C 132 18, 108 6, 68 6' stroke='%231FA8A3' stroke-width='2.8' fill='none' stroke-linecap='round'/></svg>"); }
.doodle-circle--lime::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 80' preserveAspectRatio='none'><path d='M 70 4 C 30 4, 6 20, 6 40 C 6 62, 35 76, 72 76 C 110 76, 136 60, 134 38 C 132 18, 108 6, 68 6' stroke='%238AC340' stroke-width='2.8' fill='none' stroke-linecap='round'/></svg>"); }

/* 4. STAR / SPARKLE — звёздочка-акцент. Ставим перед/после элемента. */
.doodle-sparkle {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L13.5 9 L21 10.5 L14 13.5 L12 21 L10 13.5 L3 10.5 L10.5 9 Z' stroke='%23F39A1F' stroke-width='1.5' fill='none' stroke-linejoin='round'/></svg>") no-repeat center/contain;
}

/* 7. «Тык»-ссылка — маленький игривый inline-линк со стрелкой и подсветкой */
.doodle-tyk {
  display: inline-block;
  font-family: var(--f-accent, inherit);
  font-style: italic;
  font-weight: 700;
  color: var(--c-orange);
  text-decoration: none;
  position: relative;
  padding: 0 .25em 2px;
  margin-left: .25em;
  transition: transform .15s ease, color .15s ease;
  white-space: nowrap;
}
.doodle-tyk::before {
  content: '';
  position: absolute;
  inset: 55% -.15em 5% -.15em;
  background: #FFD400;
  z-index: -1;
  opacity: 0.6;
  transform: skew(-6deg) rotate(-1deg);
  border-radius: 4px 10px 6px 8px / 8px 4px 10px 6px;
}
/* Вариант с <button> — сбросить дефолтные браузерные стили кнопки.
   Используется там, где «тык» не является навигационной ссылкой,
   а открывает модалку/вызывает действие (чтобы href=# не скроллил наверх). */
.doodle-tyk-btn {
  border: 0;
  background: transparent;
  font-family: var(--f-accent, inherit);
  font-style: italic;
  font-weight: 700;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  /* Остальные стили от .doodle-tyk — padding, color, margin и т.д. */
}

/* Стрелочка-иконка — inline SVG через background-image.
   Чистая векторная графика, а не юникод ↗ (U+2197), которая на iOS/Android
   рендерится как цветной эмодзи. */
.doodle-tyk::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F39A1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 L17 7'/><path d='M9 7 L17 7 L17 15'/></svg>") no-repeat center/contain;
  transition: transform .15s ease, background-image .15s ease;
}
.doodle-tyk:hover {
  color: var(--c-headline);
  transform: rotate(-1.5deg) scale(1.05);
}
.doodle-tyk:hover::after {
  transform: translate(2px, -3px) rotate(8deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3B21' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 L17 7'/><path d='M9 7 L17 7 L17 15'/></svg>");
}

/* 8. Рукописная кавычка-блоб для отзывов */
.doodle-quote {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 44px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 44' fill='none' stroke='%23F39A1F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10 34 C 6 24, 10 14, 20 8'/><path d='M18 34 C 14 24, 18 14, 28 8'/><path d='M32 34 C 28 24, 32 14, 42 8'/><path d='M40 34 C 36 24, 40 14, 50 8'/></svg>") no-repeat center/contain;
  margin-bottom: 6px;
}

/* 9. Штрих-подчёркивание для H2 секций (маркер) */
.section-head h2 .doodle-hl::before {
  inset: 60% -.1em 0 -.1em;
  opacity: 0.5;
}

/* Примечание: .accent-hand НЕ используется как хайлайтер-подложка — он сам по
   себе курсив + оранжевый цвет. Подложка под ним давала перегруз
   «оранжевое на оранжевом». Для хайлайтера есть отдельный класс .doodle-hl. */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .doodle-tyk:hover { transform: none; }
  .doodle-tyk:hover::after { transform: none; }
}

/* ==========================================================================
   PROTECTED IMAGES — защита фото детей от бытового сохранения.
   Это НЕ настоящая защита (F12 → любой достанет URL), но перекрывает:
   - drag-and-drop на рабочий стол
   - выделение и копирование
   - браузерное меню «Сохранить изображение»
   - iOS long-press → контекстное меню
   В связке с JS-перехватчиком contextmenu/dragstart (app.js).
   ========================================================================== */
.gallery-item img,
.gallery-class-item img,
.gallery-diploma-item img,
.course-photos-item img,
.about-photo,
.lightbox-img,
.founder-modal-portrait img,
.teacher-mini-avatar img,
.sidebar-teacher-avatar img,
.review img,
.review-card img {
  /* Запрет пользовательского выделения */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* iOS/Safari: запрет long-press контекстного меню */
  -webkit-touch-callout: none;
  /* Запрет перетаскивания */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  /* Pointer-events: отключаем всё кроме клика по галерее (lightbox ниже это переопределяет) */
  pointer-events: auto;
}
/* У родителя тоже снимаем выделение — на случай, если пользователь попытается
   выделить «карточку с фото» через Ctrl+A. */
.gallery-item,
.gallery-class-item,
.gallery-diploma-item,
.course-photos-item,
.lightbox-stage {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Юридическое уведомление под галереей — неброская серая строка.
   Без плашки/фона/подсветки — клиент просил тише визуально. */
.gallery-protected-notice {
  max-width: 780px;
  margin: 32px auto 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--c-ink-mute);
  text-align: center;
  opacity: 0.75;
}
.gallery-protected-notice strong { font-weight: 600; color: var(--c-ink-mute); }

/* ==========================================================================
   THEME TOGGLE — критические стили переключателя темы лежат в inline-стиле
   в <head> index.html (чтобы работали при закешированном styles.css).
   Здесь — только декоративные/тонкие правки, которые НЕ обязательны для
   корректной работы кнопки. Базовые стили (размер, фон, hover) — в head.
   ========================================================================== */
.theme-toggle { background: var(--c-line-soft); color: var(--c-ink-soft); }
.theme-toggle:hover { background: var(--c-line); color: var(--c-headline); }

/* ==========================================================================
   DARK THEME — финальная редакция.
   Применяется автоматически: inline-скрипт в <head> ставит
   html[data-theme-applied="dark"], когда пользователь выбрал dark в
   переключателе ИЛИ когда выбран auto и в системе тёмная тема.

   СТРАТЕГИЯ:
   1) Перекрашиваем переменные-поверхности (--c-white, --c-cream) в тёмные —
      это автоматически флипает все места с background: var(--c-white)
      (в т.ч. inline-стили в pages.js).
   2) --c-headline / --c-ink / --c-ink-soft / --c-line флипаются на светлые.
   3) Для элементов где var(--c-white) использовался как ТЕКСТ на
      акцентных/тёмных фонах (кнопки, footer, mobile-menu, аватары) —
      добавляем явные color: #fff, чтобы текст не стал тёмным вместе
      с переменной.
   4) Footer перекрашиваем с зелёного --c-dark в чисто-угольный, чтобы
      не диссонировал с остальным сайтом.
   ========================================================================== */
html[data-theme-applied="dark"] {
  /* Поверхности — флипаем переменные. Это автоматически перекрашивает все
     места с background: var(--c-white) и var(--c-cream), включая inline. */
  --c-white: #1B1F23;          /* был #fff — теперь основная dark-поверхность */
  --c-cream: #1B1F23;          /* был #F5F0E6 — оставляем единым тоном */

  /* Текст и линии */
  --c-ink: #E8EAED;
  --c-ink-soft: #B5B9BD;
  --c-ink-mute: #8A8E92;
  --c-line: #2C3338;
  --c-line-soft: #1F242A;
  --c-headline: #E8EAED;

  /* «Тёмные» зоны (футер, мобильное меню, .btn-dark) — делаем угольными,
     а не зелёными, чтобы не диссонировали с остальным сайтом. */
  --c-dark: #0E1114;
  --c-dark-soft: #181C20;

  /* Акценты слегка приглушаем */
  --c-orange: #F2A53A;
  --c-orange-deep: #D98E22;
  --c-lime: #9BCB3A;
  --c-lime-bg: #6FA02E;
  --c-green: #3F9B4D;
  --c-green-deep: #2E8138;
  --c-teal: #2EBDB7;
  --c-teal-deep: #229F9A;

  /* Тени делаем глубже */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --sh-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 20px 48px rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}

/* === Корневой фон страницы — самый тёмный === */
html[data-theme-applied="dark"] body { background: #14181B; color: #E8EAED; }

/* === Хедер — полупрозрачное тёмное стекло === */
html[data-theme-applied="dark"] .site-header {
  background: rgba(20, 24, 27, 0.92);
  border-bottom-color: var(--c-line-soft);
}

/* === ИСКЛЮЧЕНИЕ: hero-визуальный овал — у него ВСЕГДА класс bg-crosses
       (лаймовый паттерн). НЕ перекрашиваем — это бренд-элемент. === */
html[data-theme-applied="dark"] .hero-visual-bg.bg-crosses {
  /* Оставляем оригинальный лаймовый фон через обновлённую --c-lime-bg */
  background-color: #6FA02E;
}

/* === ТЕКСТ НА ТЁМНЫХ И АКЦЕНТНЫХ ФОНАХ ===
   Где var(--c-white) использовался как ЦВЕТ ТЕКСТА (не как фон), там в
   тёмной теме --c-white стал тёмным → вернуть явный белый. */
html[data-theme-applied="dark"] .btn-primary,
html[data-theme-applied="dark"] .btn-dark,
html[data-theme-applied="dark"] .btn-ghost,
html[data-theme-applied="dark"] .btn-outline:hover,
html[data-theme-applied="dark"] .chip.dark,
html[data-theme-applied="dark"] .main-nav a.active,
html[data-theme-applied="dark"] .mobile-menu,
html[data-theme-applied="dark"] .mobile-menu nav,
html[data-theme-applied="dark"] .mobile-menu nav a,
html[data-theme-applied="dark"] .mobile-menu-foot,
html[data-theme-applied="dark"] .lightbox-caption,
html[data-theme-applied="dark"] .lightbox-nav,
html[data-theme-applied="dark"] .cta-banner,
html[data-theme-applied="dark"] .cta-banner h2,
html[data-theme-applied="dark"] .cta-banner p,
html[data-theme-applied="dark"] .review-avatar,
html[data-theme-applied="dark"] .price-card.featured,
html[data-theme-applied="dark"] .price-card.featured h3,
html[data-theme-applied="dark"] .schedule-day-banner,
html[data-theme-applied="dark"] .site-footer,
html[data-theme-applied="dark"] .footer h4,
html[data-theme-applied="dark"] .footer-brand p,
html[data-theme-applied="dark"] .teacher-mini-avatar,
html[data-theme-applied="dark"] .sidebar-teacher-avatar,
html[data-theme-applied="dark"] .teacher-theme-orange .teacher-mini-avatar,
html[data-theme-applied="dark"] .pathway-step-arrow {
  color: #ffffff;
}

/* === Footer: вместо бренд-зелёного — чисто угольный === */
html[data-theme-applied="dark"] .site-footer {
  background: #0E1114;
  color: rgba(255, 255, 255, 0.85);
}
html[data-theme-applied="dark"] .footer-inner { border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme-applied="dark"] .footer-bottom { color: rgba(255, 255, 255, 0.55); }

/* === Course-card overlay (на главной/в каталоге) — заменяем зелёный
       полупрозрачный градиент на чёрный, иначе он почти невидим. === */
html[data-theme-applied="dark"] .course-card-overlay {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78) 100%);
  color: #ffffff;
}
html[data-theme-applied="dark"] .course-card-arrow {
  background: var(--c-orange);
  color: #14181B;
}

/* === Hero kicker — тёмная плашка с цветным текстом === */
html[data-theme-applied="dark"] .hero-kicker {
  background: #20262C;
  color: #E8EAED;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* === Advantage — белая иконка-плашка → приглушённая зелень === */
html[data-theme-applied="dark"] .advantage-icon {
  background: rgba(155, 203, 58, 0.16);
  color: #BFE07A;
}

/* === Pathway («лестница курсов» на главной) === */
html[data-theme-applied="dark"] .pathway-step-card {
  background: #1B1F23;
  border-color: rgba(242, 165, 58, 0.30);
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.6);
}
html[data-theme-applied="dark"] .pathway-step-card:hover {
  border-color: var(--c-orange);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
}
html[data-theme-applied="dark"] .pathway-step-arrow {
  background: var(--c-orange);
}
/* Заголовки групп («Малыши», «Школьники», «Подростки»):
   в светлой теме фон строится через color-mix(... , white) — в тёмной теме
   literal-white в этом color-mix остаётся белым, поэтому фон плашки
   почти не темнеет. Перекрашиваем фон явно с тёмной базой и делаем текст
   светлым, чтобы плашка точно читалась. */
html[data-theme-applied="dark"] .pathway-group-label span {
  background: #1B1F23;
  border-color: #2C3338;
  color: #E8EAED;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}
html[data-theme-applied="dark"] .pathway-group-kids   span { background: color-mix(in oklab, var(--c-lime)   30%, #14181B); border-color: rgba(155, 203, 58, 0.45); }
html[data-theme-applied="dark"] .pathway-group-school span { background: color-mix(in oklab, var(--c-orange) 25%, #14181B); border-color: rgba(242, 165, 58, 0.45); }
html[data-theme-applied="dark"] .pathway-group-teens  span { background: color-mix(in oklab, var(--c-teal)   25%, #14181B); border-color: rgba(46, 189, 183, 0.45); }

/* === Course cards-placeholder (на /courses, /home) — тёмные с
       акцентным верхом по теме, чтобы оставалась цветовая идентификация. === */
html[data-theme-applied="dark"] .course-card-placeholder {
  background: #1B1F23;
  border: 1px solid #2C3338;
}
html[data-theme-applied="dark"] .course-theme-lime   { background: linear-gradient(180deg, rgba(155, 203, 58, 0.18) 0%, #1B1F23 70%); }
html[data-theme-applied="dark"] .course-theme-green  { background: linear-gradient(180deg, rgba(63, 155, 77, 0.20)  0%, #1B1F23 70%); }
html[data-theme-applied="dark"] .course-theme-orange { background: linear-gradient(180deg, rgba(242, 165, 58, 0.20) 0%, #1B1F23 70%); }
html[data-theme-applied="dark"] .course-theme-teal   { background: linear-gradient(180deg, rgba(46, 189, 183, 0.20) 0%, #1B1F23 70%); }
html[data-theme-applied="dark"] .course-card-ph-title {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); /* убираем светлый halo */
}
html[data-theme-applied="dark"] .course-card-ph-age {
  background: var(--c-orange);
  color: #14181B;
}

/* === Чипы и бейджи === */
html[data-theme-applied="dark"] .chip.lime  { background: rgba(155, 203, 58, 0.18);  color: #C8E58A; }
html[data-theme-applied="dark"] .chip.green { background: rgba(63, 155, 77, 0.20);   color: #9DDCA6; }
html[data-theme-applied="dark"] .chip.orange{ background: rgba(242, 165, 58, 0.18);  color: #F4C78A; }
html[data-theme-applied="dark"] .chip.teal  { background: rgba(46, 189, 183, 0.18);  color: #7DDCD8; }
html[data-theme-applied="dark"] .chip.dark  { background: #0A0C0F; color: #E8EAED; }
html[data-theme-applied="dark"] .chip       { background: #232830; color: #B5B9BD; }
html[data-theme-applied="dark"] .review-course { background: #232830; color: #B5B9BD; }

/* Review-avatar — оранжевая плашка с тёмной буквой */
html[data-theme-applied="dark"] .review-avatar {
  background: var(--c-orange);
  color: #14181B;
}

/* Inline-стили в pages.js: review-card имеет style="background: var(--c-white);"
   которая теперь автоматически даст dark surface — это то, что нужно. */

/* Outline-кнопка: рамка и текст */
html[data-theme-applied="dark"] .btn-outline {
  box-shadow: inset 0 0 0 2px var(--c-ink);
  color: var(--c-ink);
}
html[data-theme-applied="dark"] .btn-outline:hover {
  background: var(--c-ink);
  color: #14181B;
}

/* Картинки — приглушаем яркость */
html[data-theme-applied="dark"] .gallery-item img,
html[data-theme-applied="dark"] .gallery-class-item img,
html[data-theme-applied="dark"] .gallery-diploma-item img,
html[data-theme-applied="dark"] .course-photos-item img,
html[data-theme-applied="dark"] .about-photo,
html[data-theme-applied="dark"] .review img,
html[data-theme-applied="dark"] .review-card img,
html[data-theme-applied="dark"] .hero-mascot img {
  filter: brightness(0.92);
}

/* === Логотип ===
   В шапке подменяется через JS (siteLogoImg.src) — это надёжнее, чем
   CSS content: url(), и не вызывает разной ширины из-за того, что у PNG
   (800×800) и SVG (841×595) разное соотношение сторон.
   В мобильном меню и футере оставляем белую плашку под лого — там лого
   лежит на тёмном фоне в обеих темах, плашка обеспечивает контраст. */
html[data-theme-applied="dark"] .mobile-menu .site-logo img,
html[data-theme-applied="dark"] .footer-brand img {
  background: #fff;
}

/* === Cookie-баннер === */
html[data-theme-applied="dark"] .cookie-banner {
  background: #1F252B;
  color: #E8EAED;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}
html[data-theme-applied="dark"] .cookie-banner button {
  background: var(--c-orange);
  color: #14181B;
}

/* === Форма === */
html[data-theme-applied="dark"] .form-error {
  background: rgba(220, 60, 60, 0.18);
  color: #FFB1B1;
  border-color: rgba(220, 60, 60, 0.4);
}
html[data-theme-applied="dark"] input,
html[data-theme-applied="dark"] select,
html[data-theme-applied="dark"] textarea {
  background-color: #1A1F24;
  color: #E8EAED;
  border-color: #2C3338;
}
html[data-theme-applied="dark"] input::placeholder,
html[data-theme-applied="dark"] textarea::placeholder { color: #8A8E92; }
html[data-theme-applied="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.72); }
html[data-theme-applied="dark"] .modal-close { color: #E8EAED; }

/* === Tweaks-панель === */
html[data-theme-applied="dark"] .tweaks-panel {
  background: #1C2126;
  color: #E8EAED;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* === Theme toggle в шапке === */
html[data-theme-applied="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  color: #E8EAED;
}
html[data-theme-applied="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* === Заголовки внутри ярких bg-crosses секций — тёмно-зелёные === */
html[data-theme-applied="dark"] .bg-crosses h2,
html[data-theme-applied="dark"] .bg-crosses h3,
html[data-theme-applied="dark"] .bg-crosses-orange h2,
html[data-theme-applied="dark"] .bg-crosses-orange h3,
html[data-theme-applied="dark"] .bg-crosses-teal h2,
html[data-theme-applied="dark"] .bg-crosses-teal h3,
html[data-theme-applied="dark"] .bg-crosses-green h2,
html[data-theme-applied="dark"] .bg-crosses-green h3 {
  color: #1C3B21;
}

/* === Course detail aside (карточка цены, sidebar-teachers) ===
   Эти элементы используют var(--c-white) как фон + .sidebar-teacher-avatar
   с акцентным цветом. Текст внутри уже флипнут через --c-headline. */
html[data-theme-applied="dark"] .course-detail-aside,
html[data-theme-applied="dark"] .course-info-card,
html[data-theme-applied="dark"] .course-price-card,
html[data-theme-applied="dark"] .course-program-step,
html[data-theme-applied="dark"] .sidebar-teachers-list,
html[data-theme-applied="dark"] .sidebar-teacher,
html[data-theme-applied="dark"] .related-courses {
  background: transparent;
}

/* === Founder card (карточка Светланы на /teachers) ===
   В светлой теме .founder-hero — это градиент lime→white, .founder-more
   summary имеет cream подложку, principles на cream, extras на cream.
   В тёмной теме перекрашиваем всё это явно. */

/* teacher-mini роли */
html[data-theme-applied="dark"] .teacher-mini-role,
html[data-theme-applied="dark"] .sidebar-teacher-role { color: #B5B9BD; }
html[data-theme-applied="dark"] .teacher-mini-name,
html[data-theme-applied="dark"] .sidebar-teacher-name,
html[data-theme-applied="dark"] .teacher-name-first,
html[data-theme-applied="dark"] .teacher-name-last { color: #E8EAED; }

/* В тёмной теме карточка Светланы должна выглядеть так же, как карточки
   остальных педагогов (Алёна, Андрей, Наталья). Убираем светлый градиент
   и подложку под ролью «Основатель центра» — берём тот же фон, что у
   обычных .teacher-mini. Лаймовая обводка остаётся как акцент. */
html[data-theme-applied="dark"] .teacher-mini-founder {
  background: #1B1F23;
  border-color: rgba(155, 203, 58, 0.45);
}
html[data-theme-applied="dark"] .teacher-mini-role-founder {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  color: #B5B9BD !important;
}
/* Кнопка «Читать полную историю»: на тёмном — outline-стиль с лаймом */
html[data-theme-applied="dark"] .teacher-mini-more-btn {
  box-shadow: inset 0 0 0 2px rgba(155, 203, 58, 0.6);
  color: #E8EAED;
  background: transparent;
}
html[data-theme-applied="dark"] .teacher-mini-more-btn:hover {
  background: var(--c-lime);
  color: #14181B;
  box-shadow: inset 0 0 0 2px var(--c-lime);
}

/* Сама карточка-обёртка */
html[data-theme-applied="dark"] .founder {
  background: #1B1F23;
  border-color: rgba(155, 203, 58, 0.45);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
}
/* Шапка с маскотом — БЕЗ градиента (исходный градиент завязан на literal
   white в color-mix и в тёмной теме давал странную светлую полосу).
   Делаем плоскую тёмную поверхность с лёгким лаймовым акцентом справа. */
html[data-theme-applied="dark"] .founder-hero {
  background:
    radial-gradient(ellipse at top right,
      rgba(155, 203, 58, 0.22) 0%,
      transparent 60%),
    #1B1F23;
}
/* Узор крестиков в шапке — на тёмном делаем менее ярким */
html[data-theme-applied="dark"] .founder-hero::before {
  opacity: 0.5;
}
html[data-theme-applied="dark"] .founder-name { color: #E8EAED; }
html[data-theme-applied="dark"] .founder-role { color: #B5B9BD; }
html[data-theme-applied="dark"] .founder-meta { color: #8A8E92; }
html[data-theme-applied="dark"] .founder-quote {
  border-top-color: rgba(155, 203, 58, 0.5);
  color: #E8EAED;
}
/* Раскрывающийся блок «Читать полную историю» */
html[data-theme-applied="dark"] .founder-more { border-top-color: #2C3338; }
html[data-theme-applied="dark"] .founder-more summary {
  background: #181C20;
  color: #E8EAED;
}
html[data-theme-applied="dark"] .founder-more summary:hover {
  background: color-mix(in oklab, var(--c-lime) 15%, #181C20);
}
html[data-theme-applied="dark"] .founder-more-icon {
  background: #232830;
  color: #E8EAED;
}
html[data-theme-applied="dark"] .founder-more[open] .founder-more-icon {
  background: var(--c-lime);
  color: #14181B;
}
/* Тело раскрывающегося блока — заголовки и параграфы */
html[data-theme-applied="dark"] .founder-block h3 { color: #E8EAED; }
html[data-theme-applied="dark"] .founder-block h3::before { background: var(--c-lime); }
html[data-theme-applied="dark"] .founder-block p { color: #C9CDD2; }
/* Жёлтая «выноска» с правилами/комментарием — тёмный фон с оранжевой полосой */
html[data-theme-applied="dark"] .founder-extra {
  background: #181C20 !important;
  color: #C9CDD2 !important;
  border-left-color: var(--c-orange);
}
/* Принципы (нумерованные карточки) */
html[data-theme-applied="dark"] .founder-principle {
  background: #181C20;
  border: 1px solid #2C3338;
}
html[data-theme-applied="dark"] .founder-principle-num {
  background: var(--c-lime);
  color: #14181B;
}
html[data-theme-applied="dark"] .founder-principle strong { color: #E8EAED; }
html[data-theme-applied="dark"] .founder-principle p { color: #B5B9BD; }

/* Founder modal (полная история — открывается из главной) */
html[data-theme-applied="dark"] .founder-modal { background: rgba(0, 0, 0, 0.78); }
html[data-theme-applied="dark"] .founder-modal-content {
  background: #1B1F23;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

/* Шапка модалки: исходно lime → white градиент. На тёмной теме literal
   white в color-mix остаётся почти белым → текст «Полной истории» под
   ним пропадает. Перекрашиваем явно. */
html[data-theme-applied="dark"] .founder-modal-header {
  background:
    radial-gradient(ellipse at top right,
      rgba(155, 203, 58, 0.22) 0%,
      transparent 60%),
    #1B1F23;
  border-bottom: 1px solid #2C3338;
}

/* Бейдж «Основатель» — оранжевый, светлый текст */
html[data-theme-applied="dark"] .founder-modal-badge {
  background: var(--c-orange);
  color: #14181B;
}

/* Имя/роль/цитата */
html[data-theme-applied="dark"] .founder-modal-name { color: #E8EAED; }
html[data-theme-applied="dark"] .founder-modal-role { color: #B5B9BD; }
html[data-theme-applied="dark"] .founder-modal-quote {
  color: #E8EAED;
  border-top-color: rgba(155, 203, 58, 0.5);
}

/* Тело модалки: фон уже задан через --c-white = #1B1F23, остаётся текст */
html[data-theme-applied="dark"] .founder-modal-body { color: #C9CDD2; }
html[data-theme-applied="dark"] .founder-modal-body h3 { color: #E8EAED; }
html[data-theme-applied="dark"] .founder-modal-body h3::before { background: var(--c-lime); }
html[data-theme-applied="dark"] .founder-modal-body p { color: #C9CDD2; }

/* Портрет: исходно lime gradient + crosses pattern. На тёмном тоже
   светло-лаймовый — нормально читается, но делаем его чуть приглушённее. */
html[data-theme-applied="dark"] .founder-modal-portrait {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23F39A1F' stroke-width='1.2' opacity='0.30'><path d='M20 14v12M14 20h12'/></g></svg>"),
    linear-gradient(135deg,
      color-mix(in oklab, var(--c-lime) 35%, #14181B) 0%,
      color-mix(in oklab, var(--c-lime) 18%, #14181B) 100%);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.6);
}

/* Принципы внутри модалки */
html[data-theme-applied="dark"] .founder-modal-principles li {
  background: #181C20;
  border: 1px solid #2C3338;
}
html[data-theme-applied="dark"] .founder-modal-principles li::before,
html[data-theme-applied="dark"] .founder-modal-pnum {
  background: var(--c-lime);
  color: #14181B;
}
html[data-theme-applied="dark"] .founder-modal-principles strong { color: #E8EAED; }
html[data-theme-applied="dark"] .founder-modal-principles p { color: #B5B9BD; }
html[data-theme-applied="dark"] .founder-modal-extra {
  background: #181C20 !important;
  color: #C9CDD2 !important;
  border-left-color: var(--c-orange);
}
html[data-theme-applied="dark"] .founder-modal-cta {
  background: #181C20;
  border-top-color: #2C3338;
}

/* Кнопка-крестик закрытия */
html[data-theme-applied="dark"] .founder-modal-close {
  background: #232830;
  color: #E8EAED;
}

/* === Ring-cards (статистика на /about) — фон-кольцо подкрашиваем === */
html[data-theme-applied="dark"] .ring-card { background: #1B1F23; }
html[data-theme-applied="dark"] .ring-track { stroke: #2C3338; }

/* === Stats блоки на /about — могут содержать var(--c-white) подложки === */
html[data-theme-applied="dark"] .stats-hero,
html[data-theme-applied="dark"] .stats-podium,
html[data-theme-applied="dark"] .stats-rings,
html[data-theme-applied="dark"] .podium-step,
html[data-theme-applied="dark"] .podium-block-bronze,
html[data-theme-applied="dark"] .podium-block-gold,
html[data-theme-applied="dark"] .stats-rings-grid { background: transparent; }
html[data-theme-applied="dark"] .stats-hero-eyebrow,
html[data-theme-applied="dark"] .stats-hero-label,
html[data-theme-applied="dark"] .podium-label,
html[data-theme-applied="dark"] .ring-label { color: #B5B9BD; }
html[data-theme-applied="dark"] .stats-hero-num,
html[data-theme-applied="dark"] .podium-value,
html[data-theme-applied="dark"] .ring-center { color: #E8EAED; }
html[data-theme-applied="dark"] .stats-hero-divider { background: #2C3338; }

/* === Why-parents (на /about и главной) === */
html[data-theme-applied="dark"] .why-parents-section { background: #181C20; }
html[data-theme-applied="dark"] .why-parents-card,
html[data-theme-applied="dark"] .why-parent-card { background: #1B1F23; border-color: #2C3338; }
html[data-theme-applied="dark"] .why-parents-num { color: #F2A53A; }
html[data-theme-applied="dark"] .why-parents-title { color: #E8EAED; }
html[data-theme-applied="dark"] .why-parents-text { color: #B5B9BD; }
html[data-theme-applied="dark"] .why-parents-outro { color: #B5B9BD; }

/* === Privacy: убрать визуальный «фон» секции (она была кремовой через
       var(--c-cream); сейчас секция дочерний элемент основной страницы,
       и не должна зрительно отличаться). === */
html[data-theme-applied="dark"] .privacy-section { background: transparent; }
html[data-theme-applied="dark"] .privacy-toc { background: #1B1F23; border-color: #2C3338; }
html[data-theme-applied="dark"] .privacy-contacts { background: #181C20; border: 1px solid #2C3338; }

/* Privacy footer-meta — приглушённый */
html[data-theme-applied="dark"] .privacy-footer-meta { color: #8A8E92; border-top-color: #2C3338; }

/* Бордеры и линии в шапке/футере секции */
html[data-theme-applied="dark"] .section-head-link {
  color: var(--c-ink);
  border-bottom-color: var(--c-ink);
}

/* Плавный переход цветов при смене темы */
html, body { transition: background-color .25s ease, color .25s ease; }
.course-card, .advantage, .review, .review-card, .price-card, .teacher,
.faq-item, .contact-card, .modal, .privacy-section, .privacy-toc,
.tg-toast-card, .why-parent-card, .pathway-step-card, .course-card-placeholder {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}