/* ==========================================================================
   «Династия» — частная школа. Ориентир дизайна: Skysmart.
   Стек: чистый CSS. Палитра — на переменных (подмена под бренд в одном месте).
   ========================================================================== */

:root{
  /* нейтральные */
  --ink:#1A1712;          /* основной текст, почти чёрный тёплый */
  --ink-soft:#6E685F;     /* вторичный текст */
  --white:#FFFFFF;
  --surface:#F2F4F4;      /* нейтрально-серые карточки */
  --surface-2:#FAFBFB;
  --line:#E6E9E9;

  /* ===== ФИРМЕННАЯ ПАЛИТРА «Династии» (по брендбуку) ===== */
  --brand-orange:#FF4F00;   /* основной — из логотипа (грудка совы) */
  --brand-teal:#08A5BA;     /* бирюза — крылья совы */
  --brand-green:#9DB540;    /* оливково-зелёный */
  --brand-gray:#A6A6A6;     /* нейтральный акцент */
  --brand-teal-dk:#077E8E;  /* тёмная бирюза — текст/ссылки на белом (AA) */
  --brand-green-dk:#5F7A1E; /* тёмно-зелёный — текст на белом (AA) */

  /* CTA — фирменный оранжевый, тёмный текст (контраст 5.4:1) */
  --cta:#FF4F00;
  --cta-hover:#E84600;
  --cta-ink:#1A1712;

  /* акцентные «пятна» карточек/секций — сопоставлены с брендом.
     Легаси-имена сохранены, чтобы разом перекрасить всю вёрстку. */
  --violet:#077E8E;   /* глубокая бирюза */
  --coral:#FF4F00;    /* оранжевый */
  --sky:#08A5BA;      /* бирюза */
  --amber:#F5871F;    /* тёплый оранж (семья orange) */
  --green:#9DB540;    /* зелёный */
  --link:#077E8E;     /* ссылки на белом */

  /* радиусы — крупные, как у Skysmart */
  --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:40px; --r-pill:999px;

  /* тени — мягкие, чуть тёплые */
  --sh-sm:0 2px 10px rgba(26,23,18,.06);
  --sh-md:0 10px 30px rgba(26,23,18,.09);
  --sh-lg:0 24px 60px rgba(26,23,18,.13);

  --wrap:1200px;
  --gap:clamp(16px,3vw,28px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
/* убираем 300ms задержку тапа на интерактивных элементах */
a,button,input,textarea,select,.btn,.promo-frame{touch-action:manipulation}
/* якорные переходы из меню не прячут секцию под фикс-шапку */
[id]{scroll-margin-top:92px}
/* выделение текста — в бренд */
::selection{background:color-mix(in srgb, var(--brand-teal) 30%, white); color:var(--ink)}
/* skip-link для клавиатуры — виден только при фокусе */
.skip-link{position:absolute; left:12px; top:-60px; z-index:1000; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:8px; font-weight:700; transition:top .18s ease}
.skip-link:focus{top:12px}
/* видимый фокус для клавиатурной навигации (WCAG) — только при табе, не по клику мышью */
:focus-visible{outline:3px solid var(--brand-teal-dk); outline-offset:3px; border-radius:6px}
.btn-cta:focus-visible{outline-color:var(--ink)}
h1,h2,h3{margin:0; line-height:1.08; letter-spacing:-.02em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(16px,4vw,32px)}

/* ---- кнопки ---- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:700; font-size:16px; border:none; border-radius:var(--r-pill);
  padding:13px 24px; transition:background .18s ease, box-shadow .2s ease, transform .18s ease;
  white-space:nowrap;
}
/* простой ховер всех кнопок: лёгкий подъём + чуть глубже тень */
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-cta{background:var(--cta); color:var(--cta-ink); box-shadow:0 8px 20px rgba(255,79,0,.22)}
.btn-cta:hover{background:var(--cta-hover); box-shadow:0 12px 26px rgba(255,79,0,.32)}
.btn-lg{padding:17px 30px; font-size:17px}

.eyebrow{--_c:var(--violet)}
.eyebrow{
  display:inline-block; font-weight:700; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--violet); margin-bottom:14px;
}

/* ==============================  ШАПКА  ============================== */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.hdr.is-stuck{border-color:var(--line); box-shadow:var(--sh-sm)}
.hdr-in{display:flex; align-items:center; gap:24px; height:72px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; letter-spacing:-.02em}
.logo-mark{
  height:42px; width:auto; display:block; object-fit:contain;
}
/* логотип подвала — на светлой скруглённой подложке, иначе тёмные части сов сливаются с фоном */
.logo--ftr .logo-mark{height:36px; box-sizing:content-box; padding:7px 9px; background:#fff; border-radius:12px}
.nav{display:flex; gap:6px; margin-left:8px}
.nav a{
  padding:9px 14px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
  color:var(--ink); transition:background .15s,color .15s;
}
.nav a:hover{background:var(--surface)}
.hdr-actions{display:flex; align-items:center; gap:16px; margin-left:auto}
.hdr-phone{font-weight:700; font-size:16px; white-space:nowrap}
.hdr-phone:hover{color:var(--violet)}
.burger{display:none; width:44px; height:44px; border:none; background:transparent; flex-direction:column; gap:5px; align-items:center; justify-content:center; margin-left:auto}
.burger span{width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* мобильное меню (дропдаун под шапкой) */
.mmenu{
  position:fixed; top:72px; left:0; right:0; z-index:99; background:var(--white);
  border-bottom:1px solid var(--line); box-shadow:var(--sh-md);
  padding:20px clamp(16px,4vw,32px) 28px;
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.mmenu.is-open{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto}
.mmenu-links{display:flex; flex-direction:column}
.mmenu-links a{padding:14px 2px; font-weight:700; font-size:19px; color:var(--ink); border-bottom:1px solid var(--line)}
.mmenu-actions{display:flex; flex-direction:column; gap:14px; margin-top:22px}
.mmenu-phone{font-weight:700; font-size:17px; text-align:center}
@media(min-width:721px){ .mmenu{display:none} }

/* ==============================  ГЕРОЙ (экран целиком)  ============================== */
.hero{position:relative; overflow:visible}
.hero-vp{
  position:relative; z-index:1; display:flex; flex-direction:column; height:calc(100svh - 84px);
  padding:clamp(18px,3.4vh,34px) max((100vw - var(--wrap)) / 2, clamp(16px,4vw,32px)) clamp(22px,3vh,34px);
}

/* warp-фон: ЕДИНЫЙ перспективный коридор. 4 стены (пол/потолок/лево/право) отогнуты
   на 90° от краёв вьюпорта и уходят вглубь на 100cqmax — родитель с perspective смотрит
   внутрь коробки, поэтому сетка стыкуется в углах и сходится к общей точке схода в центре.
   Геометрия — как в оригинальном shadcn WarpBackground, но нативно и приглушённо. */
.hero-warp{position:absolute; top:0; left:0; right:0; bottom:-170px; z-index:0; pointer-events:none; overflow:hidden;
  perspective:150px; transform-style:preserve-3d; container-type:size; clip-path:inset(0);
  --warp-grid:color-mix(in srgb, var(--brand-teal) 50%, transparent); --cell:6%;
  /* центр (за заголовком) гасим радиально; низ — плавно растворяем: коробка warp'а выходит
     на 170px ниже секции (следующая секция прозрачна сверху), и линии-«пол» уходят за край
     и размываются, а не обрываются ровной чертой */
  -webkit-mask-image:radial-gradient(125% 125% at 50% 50%, transparent 0 20%, #000 62%), linear-gradient(to bottom, #000 64%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:radial-gradient(125% 125% at 50% 50%, transparent 0 20%, #000 62%), linear-gradient(to bottom, #000 64%, transparent 100%);
          mask-composite:intersect;}
.warp-plane{position:absolute; transform-style:preserve-3d; container-type:inline-size;
  /* только продольные линии (вдоль глубины) — они сходятся к центру и образуют коридор;
     поперечных линий-«колец» нет, поэтому прямоугольников не возникает.
     background-position:0 0 → серые линии стоят на кратных --cell (6%); цветные лучи шириной
     в 1 ячейку с --x = кратное 6% + 3% (центр дорожки) заполняют промежуток МЕЖДУ линиями */
  background:linear-gradient(90deg, var(--warp-grid) 0 1px, transparent 1px var(--cell)) 0 0/var(--cell) var(--cell);}
.warp-plane--top{top:0; left:0; height:100cqmax; width:100cqi; transform-origin:50% 0%; transform:rotateX(-90deg);}
.warp-plane--bottom{top:100%; left:0; height:100cqmax; width:100cqi; transform-origin:50% 0%; transform:rotateX(-90deg);}
.warp-plane--left{top:0; left:0; height:100cqmax; width:100cqh; transform-origin:0% 0%; transform:rotate(90deg) rotateX(-90deg);}
.warp-plane--right{top:0; right:0; height:100cqmax; width:100cqh; transform-origin:100% 0%; transform:rotate(-90deg) rotateX(-90deg);}
/* лучи — тонкие светящиеся полосы, летят из глубины коридора к зрителю */
.warp-beam{position:absolute; top:0; left:var(--x); width:var(--cell); aspect-ratio:1/7;
  background:linear-gradient(var(--bc), transparent); opacity:.72;
  transform:translate(-50%,100cqmax);
  animation:warp-beam var(--d,10s) linear var(--dl,0s) infinite;}
@keyframes warp-beam{
  from{transform:translate(-50%,100cqmax)}
  to{transform:translate(-50%,-100%)}
}

/* бейдж набора — сверху по центру, стильный, без точки */
.hero-badge{
  align-self:center; margin-bottom:clamp(20px,3.2vh,36px);
  display:inline-flex; align-items:center; padding:11px 26px; border-radius:var(--r-pill);
  font-family:'Unbounded',sans-serif; font-weight:600; font-size:clamp(12px,1.15vw,14px); letter-spacing:.02em;
  color:var(--brand-teal-dk);
  background:linear-gradient(120deg,rgba(8,165,186,.12),rgba(255,79,0,.10));
  border:1px solid rgba(8,165,186,.30); box-shadow:0 8px 24px rgba(8,165,186,.14);
}

/* центрированный герой: заголовок → лид → форма */
.hero-copy{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; max-width:960px; margin:0 auto;
}
.hero-h1{
  margin:0 0 clamp(18px,2.6vh,26px); font-family:'Unbounded',sans-serif; font-weight:800;
  font-size:clamp(30px,4.2vw,56px); line-height:1.1; letter-spacing:-.02em; color:var(--ink);
}
.hero-h1-accent{color:var(--cta)}
.hero-lead{margin:0 0 clamp(26px,3.6vh,38px); max-width:52ch; color:var(--ink-soft); font-size:clamp(16px,1.3vw,20px); line-height:1.55}

/* подпись школы — по центру снизу */
.hero-place{align-self:center; margin-top:clamp(18px,2.6vh,28px); text-align:center; font-weight:800; font-size:clamp(15px,1.5vw,20px); letter-spacing:-.01em; color:var(--ink)}

/* ==========================  ХАБ ПРОДУКТОВ  ========================== */
.picker{padding:clamp(48px,7vw,90px) 0}
.sec-title{
  font-family:'Unbounded',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(22px,2.9vw,33px); line-height:1.16;
}
.picker > .wrap > .sec-title{text-align:center; max-width:16em; margin:0 auto}

.tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px 0 40px}
.tab{
  padding:11px 22px; border-radius:var(--r-pill); border:1.5px solid var(--line);
  background:var(--white); font-weight:600; font-size:15px; color:var(--ink);
  transition:.15s;
}
.tab:hover{border-color:var(--ink)}
.tab.is-active{background:var(--ink); border-color:var(--ink); color:var(--white)}

/* ======================  О ДИНАСТИИ + ЦИФРЫ  ====================== */
.about{padding:clamp(48px,7vw,90px) 0}
.about--accent{background:linear-gradient(120deg, color-mix(in srgb, var(--brand-teal) 10%, var(--white)), color-mix(in srgb, var(--brand-orange) 7%, var(--white)))}

/* акцентная плашка «пробная неделя» — контейнер-карточка вместо полосы во всю секцию */
.trial-week{position:relative; overflow:hidden; display:grid; grid-template-columns:1.5fr .5fr; align-items:center;
  gap:clamp(22px,3vw,44px); padding:clamp(30px,4vw,52px); border-radius:var(--r-xl);
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand-teal) 13%, var(--white)), color-mix(in srgb, var(--brand-orange) 9%, var(--white)));
  border:1px solid color-mix(in srgb, var(--brand-teal) 26%, var(--line))}
.trial-week-badge{display:inline-block; margin-bottom:16px; padding:6px 14px; border-radius:var(--r-pill);
  background:var(--white); color:var(--brand-teal-dk); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid color-mix(in srgb, var(--brand-teal) 24%, var(--line))}
.trial-week-title{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(21px,2.5vw,31px); line-height:1.16; letter-spacing:-.02em; color:var(--ink); margin-bottom:14px}
.trial-week-text{color:var(--ink-soft); font-size:clamp(15px,1.3vw,17px); line-height:1.55; margin-bottom:16px; max-width:62ch}
.trial-week-cta{display:flex; justify-content:flex-end}
@media(max-width:760px){ .trial-week{grid-template-columns:1fr} .trial-week-cta{justify-content:flex-start} }

/* вариант с фоновым фото: снимок на всю плашку + тёмный градиент-скрим слева, текст белым */
.trial-week--photo{display:block; position:relative; overflow:hidden; padding:0; border:none; min-height:360px;
  background:var(--ink)}
.trial-week-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:75% 35%; z-index:0}
.trial-week--photo::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--ink) 93%, transparent) 0%,
    color-mix(in srgb, var(--ink) 80%, transparent) 44%,
    color-mix(in srgb, var(--ink) 22%, transparent) 100%)}
.trial-week--photo .trial-week-body{position:relative; z-index:2; max-width:60ch; padding:clamp(34px,4.6vw,60px)}
.trial-week--photo .trial-week-badge{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.30)}
.trial-week--photo .trial-week-title{color:#fff}
.trial-week--photo .trial-week-text{color:rgba(255,255,255,.86); margin-bottom:24px}
@media(max-width:640px){
  .trial-week-bg{object-position:70% 30%}
  .trial-week--photo::after{background:linear-gradient(175deg,
    color-mix(in srgb, var(--ink) 62%, transparent) 0%,
    color-mix(in srgb, var(--ink) 92%, transparent) 78%)}
}

/* заготовка под логотипы партнёров — пусто, ждём контент от клиента */
.partners-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px)}
.partner-slot{min-height:88px; border-radius:var(--r-md); border:1.5px dashed var(--line); background:var(--surface-2)}
@media (max-width:720px){.partners-grid{grid-template-columns:repeat(2,1fr)}}
.about .sec-head{max-width:52ch; margin:0 auto clamp(30px,4.5vw,46px)}

/* яркие цветные плитки-цифры — броские, брендовые */
.about-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); margin-top:clamp(30px,4.5vw,46px); margin-bottom:clamp(36px,5vw,56px)}
.astat{
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  min-height:clamp(148px,14vw,178px); padding:clamp(22px,2.4vw,28px);
  border-radius:var(--r-lg); color:var(--white); box-shadow:var(--sh-sm); overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.astat:hover{box-shadow:var(--sh-md); transform:translateY(-6px)}
.astat b{
  display:block; font-family:'Unbounded',sans-serif; font-weight:800;
  font-size:clamp(40px,4.6vw,60px); line-height:.92; letter-spacing:-.04em; color:#fff;
}
.astat span{font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.32; font-weight:600; opacity:.95; max-width:17ch}
.astat--orange{background:linear-gradient(155deg,#FF7A3D,var(--brand-orange))}
.astat--teal{background:linear-gradient(155deg,#17BDD2,var(--brand-teal))}
.astat--green{background:linear-gradient(155deg,var(--brand-green),var(--brand-green-dk))}
.astat--dark{background:linear-gradient(155deg,#3A3226,var(--ink))}

/* цифры без карточек — текстовая полоса с разделителями, для «О Династии: история» */
.about-stats-plain{display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,0px); margin-top:clamp(30px,4.5vw,46px); margin-bottom:clamp(36px,5vw,56px)}
.astat-plain{flex:1 1 200px; padding:0 clamp(18px,2.2vw,30px); border-left:1px solid var(--line)}
.astat-plain:first-child{border-left:none; padding-left:0}
.astat-plain b{display:block; font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(34px,3.8vw,50px); line-height:.95; letter-spacing:-.03em}
.astat-plain span{display:block; margin-top:8px; font-size:clamp(14px,1.1vw,16px); line-height:1.32; color:var(--ink-soft); max-width:20ch}
.astat-plain--orange b{color:var(--brand-orange)}
.astat-plain--teal b{color:var(--brand-teal-dk)}
.astat-plain--green b{color:var(--brand-green-dk)}
.astat-plain--dark b{color:var(--ink)}
@media (max-width:720px){
  .astat-plain{flex:1 1 45%; border-left:none; border-top:1px solid var(--line); padding:16px 0 0}
  .astat-plain:first-child{border-top:none; padding-top:0}
}

/* ============================  АНИМАЦИИ  ============================ */
/* reveal-каскад (приём Мануфактуры) — без JS контент виден */
.reveal-on .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-on .reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1 !important; transform:none !important}
}

/* ============================  АДАПТИВ  ============================ */
@media (max-width:960px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .about-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav,.hdr-actions{display:none}
  .burger{display:flex}
  .cards{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr; gap:12px}
  .astat{min-height:148px; padding:20px}
}

/* ======================================================================
   ДОП. СЕКЦИИ (чередование форматов — принцип 21-school)
   ====================================================================== */

/* общий заголовок секции */
.sec-head{max-width:640px; margin:0 auto 40px; text-align:center}
.sec-head .eyebrow{color:var(--violet)}
.sec-sub{margin-top:14px; color:var(--ink-soft); font-size:clamp(15px,1.5vw,17px)}

/* ---- бегущая строка ---- */
.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink); padding:16px 0}
.marquee-track{display:inline-flex; align-items:center; gap:20px; white-space:nowrap; will-change:transform; animation:marquee 26s linear infinite}
.marquee-track span{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(15px,1.6vw,19px); color:var(--white); letter-spacing:-.01em}
.marquee-track .m-dot{color:var(--cta)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- манифест (отдельный тёмный раздел) ---- */
.manifesto{background:var(--ink); color:var(--white); padding:clamp(56px,8vw,110px) 0}
.manifesto-in{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,5vw,64px); align-items:center}
.mf-quote{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(24px,3.4vw,42px); line-height:1.18; letter-spacing:-.02em}
.mf-quote mark{background:linear-gradient(120deg,var(--cta),var(--amber)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.mf-list{display:grid; gap:22px}
.mf-list b{display:flex; align-items:center; gap:11px; font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(19px,1.7vw,23px); letter-spacing:-.01em; line-height:1.15; margin-bottom:8px}
.mf-list b::before{content:""; width:12px; height:12px; border-radius:50%; background:currentColor; box-shadow:0 0 13px currentColor; flex:0 0 auto}
.mf-list span{display:block; color:rgba(255,255,255,.82); font-size:clamp(16px,1.3vw,18px); line-height:1.5}
.mf-list li:nth-child(1) b{color:var(--brand-orange)}
.mf-list li:nth-child(2) b{color:var(--brand-teal)}
.mf-list li:nth-child(3) b{color:var(--brand-green)}
.mf-list li:nth-child(4) b{color:var(--brand-orange)}
.mf-list li:nth-child(5) b{color:var(--brand-teal)}
.mf-list li:nth-child(6) b{color:var(--brand-green)}

/* ---- фича английский ---- */
.feature{padding:clamp(56px,7vw,96px) 0}
.feature-in{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px); align-items:center}
.feature-copy .sec-title{margin:8px 0 18px; text-align:left}
.feature-lead{margin:0 0 clamp(24px,3vw,32px); max-width:34em; color:var(--ink-soft); font-weight:400; font-size:clamp(15px,1.5vw,17px); line-height:1.6}
.link-arrow{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--link)}
.link-arrow i{font-style:normal; transition:transform .2s}
.link-arrow:hover i{transform:translateX(5px)}
.feature-copy .link-arrow{font-size:clamp(18px,1.6vw,21px)}
.feature-copy .link-arrow i{font-size:1.1em}
.feature-media{position:relative}
.feature-photo{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); border:8px solid var(--white); aspect-ratio:4/3; background:var(--surface); margin:0}
.feature-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 32%; display:block}
.fstat-card{position:absolute; background:var(--white); border-radius:var(--r-md); padding:16px 20px; box-shadow:var(--sh-lg); max-width:200px}
.fstat-card{background:linear-gradient(150deg,#E4F5F8,#EFFAFB)}
.fstat-card.alt{background:linear-gradient(150deg,#FFEBE1,#FFF2EC)}
.fstat-card:not(.alt){left:-22px; bottom:-26px}
.fstat-card.alt{right:-18px; bottom:-26px}
.fstat-card b{display:block; font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(30px,4vw,42px); line-height:1; letter-spacing:-.03em; color:var(--ink); margin-bottom:6px}
.fstat-card span{color:var(--ink-soft); font-size:13px; line-height:1.35}
@media(max-width:900px){
  .fstat-card{position:static; max-width:none; box-shadow:var(--sh-md)}
  .feature-media{display:grid; gap:16px}
  .feature-media .fstat-card:not(.alt),.feature-media .fstat-card.alt{margin:0}
}

/* ---- таймлайн ---- */
.timeline-sec{padding:clamp(48px,6vw,80px) 0}
.tl-scroll{overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; position:relative}
.tl{list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(140px,1fr); gap:0; min-width:720px; position:relative}
/* линия дня: одинаково размыта на обоих концах через симметричную маску */
.tl::before{content:""; position:absolute; left:0; right:0; top:38px; height:3px; background:var(--line);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%)}
.tl li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:0 8px; position:relative}
.tl-time{font-family:'Unbounded',sans-serif; font-weight:700; font-size:18px; line-height:1; color:var(--ink)}
.tl-dot{width:16px; height:16px; border-radius:50%; background:var(--cta); border:4px solid var(--surface-2); box-shadow:0 0 0 2px var(--cta); position:relative; z-index:1}
.tl-name{font-size:14px; color:var(--ink-soft); max-width:14ch}

.tl-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(34px,4.5vw,50px); padding-top:clamp(30px,4vw,42px); border-top:1px solid var(--line)}
.tl-facts li{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; padding:clamp(22px,2.6vw,30px); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
/* оранжевый оверлей — плавно проявляется на наведении */
.tl-facts li::after{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(155deg,#FF7A3D,var(--brand-orange)); opacity:0; transition:opacity .25s ease; pointer-events:none}
.tl-facts li:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:transparent}
.tl-facts li:hover::after{opacity:1}
.tl-facts li::before{content:""; position:relative; z-index:1; width:38px; height:4px; border-radius:2px; background:var(--brand-orange); margin-bottom:4px; transition:background .25s ease}
.tl-facts li:hover::before{background:#fff}
.tl-facts b{position:relative; z-index:1; display:block; font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(18px,1.7vw,22px); letter-spacing:-.02em; line-height:1.2; color:var(--ink); transition:color .2s ease}
.tl-facts span{position:relative; z-index:1; color:var(--ink-soft); font-size:clamp(15px,1.2vw,16.5px); line-height:1.45; max-width:24ch; transition:color .2s ease}
.tl-facts li:hover b, .tl-facts li:hover span{color:#fff}
@media(max-width:640px){ .tl-facts{grid-template-columns:1fr} }

/* ---- прозрачный прогресс: траектория из 4 шагов ---- */
.track-sec{padding:clamp(48px,6vw,84px) 0}
.track{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px)}
.track-node{display:flex; flex-direction:column; align-items:flex-start; gap:11px; padding:clamp(22px,2.4vw,30px); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
/* .reveal.in ставит transform:none — ховер задаём со специфичностью выше reveal-сброса */
.reveal-on .track-node.in:hover{transform:translateY(-6px); box-shadow:var(--sh-md); border-color:transparent}
.tn-num{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:'Unbounded',sans-serif; font-weight:800; font-size:20px; color:#fff; background:linear-gradient(155deg, color-mix(in srgb, var(--tc) 72%, white), var(--tc)); box-shadow:0 10px 22px color-mix(in srgb, var(--tc) 34%, transparent)}
.tn-title{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(17px,1.5vw,20px); letter-spacing:-.01em; line-height:1.16; color:var(--ink)}
.tn-text{color:var(--ink-soft); font-size:clamp(14.5px,1.15vw,16px); line-height:1.45}
@media(max-width:860px){ .track{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .track{grid-template-columns:1fr} }

/* ---- подблоки под ценами: оплата / лицензия ---- */
.cost-sub{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,4vw,44px); margin-top:clamp(40px,6vw,56px); padding-top:clamp(32px,5vw,44px); border-top:1px solid var(--line)}
.cost-block-title{font-size:14px; font-weight:800; letter-spacing:-.01em; margin-bottom:16px}

.pay-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
/* способы оплаты — сочные градиентные плитки (язык .astat/.branch), а не бледные белые */
.pay{position:relative; overflow:hidden; border-radius:var(--r-md); padding:18px 18px 20px; color:#fff; box-shadow:var(--sh-sm); transition:box-shadow .2s ease, transform .2s ease; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center}
.pay:hover{box-shadow:var(--sh-md); transform:translateY(-3px)}
.pay b{display:block; font-family:'Unbounded',sans-serif; font-weight:800; font-size:20px; letter-spacing:-.02em; color:#fff; margin-bottom:5px}
.pay b:last-child{margin-bottom:0}
.pay span{display:block; color:#fff; opacity:.96; font-size:15px; font-weight:500; line-height:1.45}
.pay--teal{background:linear-gradient(155deg,#17BDD2,var(--brand-teal))}
.pay--green{background:linear-gradient(155deg,var(--brand-green),var(--brand-green-dk))}
.pay--orange{background:linear-gradient(155deg,#FF7A3D,var(--brand-orange))}
.pay--dark{background:linear-gradient(155deg,#3A3226,var(--ink))}
/* способы оплаты как подблок раздела «Стоимость» — под ценовой полосой */
.pay-sub{margin-top:clamp(30px,4vw,46px)}
.pay-sub-label{display:block; text-align:center; font-family:'Unbounded',sans-serif; font-weight:700; font-size:14px; letter-spacing:-.01em; color:var(--ink); margin-bottom:16px}

.cost-license{display:flex; gap:34px; align-items:center; background:var(--surface); border-radius:var(--r-lg); padding:24px 30px; height:100%}
.license-doc{display:flex; flex:none; min-height:150px}
.license-scan{display:block; flex:0 0 auto; width:92px; aspect-ratio:905/1280;
  border-radius:10px; border:3px solid var(--white); box-shadow:var(--sh-md);
  background:var(--white); overflow:hidden}
.license-scan img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.license-scan-1{transform:rotate(-3deg); z-index:2; margin-right:-16px; margin-top:12px}
.license-scan-2{transform:rotate(3deg); z-index:1}
.license-copy .cost-block-title{font-size:16.5px; margin-bottom:6px}
.license-copy p{color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin-top:6px; max-width:26em}

@media(max-width:900px){
  .cost-sub{grid-template-columns:1fr; gap:28px}
}
@media(max-width:560px){
  .cost-license{flex-direction:column; align-items:flex-start; text-align:left}
  .license-doc{align-self:center; width:min(260px,70vw)}
}

/* ---- филиалы (отдельный раздел) ---- */
.branches-sec{padding:clamp(48px,6vw,80px) 0}
.branch-grid{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
/* сочные градиентные плитки-филиалы (язык .astat) — броские, а не бледные белые карточки */
.branch{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  min-height:clamp(190px,18vw,220px); padding:clamp(24px,2.4vw,32px);
  border-radius:var(--r-lg); color:#fff; box-shadow:var(--sh-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
/* .reveal.in ставит transform:none и перебивает подъём — поэтому ховер задаём со специфичностью выше reveal-сброса */
.branch:hover,
.reveal-on .branch.in:hover{box-shadow:var(--sh-md); transform:translateY(-6px)}
.branch--orange{background:linear-gradient(155deg,#FF7A3D,var(--brand-orange))}
.branch--teal{background:linear-gradient(155deg,#17BDD2,var(--brand-teal))}
.branch--green{background:linear-gradient(155deg,var(--brand-green),var(--brand-green-dk))}
/* крупный пин-водяной знак в углу — тематический штрих «локация» */
.branch::after{
  content:""; position:absolute; right:-26px; bottom:-32px; width:158px; height:158px; z-index:-1;
  background:#fff; opacity:.13; pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 4.92 7 13 7 13s7-8.08 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 4.92 7 13 7 13s7-8.08 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.branch-pin{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; margin-bottom:4px}
.branch b{display:block; font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(19px,1.7vw,23px); letter-spacing:-.02em; color:#fff}
.branch-addr{display:block; color:#fff; opacity:.92; font-size:14.5px; line-height:1.35}
.branch-age{margin-top:auto; font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.2); padding:6px 13px; border-radius:var(--r-pill)}
@media(max-width:760px){ .branch-grid{grid-template-columns:1fr} }

/* ---- отзывы ---- */
.reviews{padding:clamp(56px,7vw,96px) 0; overflow:hidden}
.rev-cols{display:flex; justify-content:center; gap:24px; margin-top:clamp(32px,4vw,48px); height:clamp(520px,62vh,720px); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
.rev-col{flex:0 0 340px; max-width:340px}
/* прокрутка колонок ведётся из main.js через requestAnimationFrame (точная бесшовная петля,
   без скачков при догрузке шрифтов и троттлинге вкладки) */
.rev-track{display:flex; flex-direction:column; gap:24px; padding-bottom:24px;
  will-change:transform; backface-visibility:hidden; transform:translateZ(0)}
@media (prefers-reduced-motion:reduce){ .rev-track{transform:none} }
.rev{margin:0; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-md)}
.rev p{font-size:15.5px; line-height:1.55; margin:0; color:var(--ink)}
.rev footer{display:flex; align-items:center; gap:12px; margin-top:18px}
.rev-ava{width:44px; height:44px; border-radius:50%; background:var(--c,var(--brand-orange)); color:var(--ink); display:grid; place-items:center; font-family:'Unbounded',sans-serif; font-weight:700; font-size:17px; flex:0 0 auto}
.rev-who{display:flex; flex-direction:column; line-height:1.25}
.rev-who b{font-weight:700; font-size:15px; color:var(--ink)}
.rev-who i{font-style:normal; font-size:13px; color:var(--ink-soft)}

/* ---- цены ---- */
.pricing{padding:clamp(56px,7vw,96px) 0}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:stretch}
.price{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; position:relative; display:flex; flex-direction:column}
.price-hot{background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:var(--sh-lg)}
.price-badge{position:absolute; top:-13px; left:32px; background:var(--cta); color:var(--cta-ink); font-weight:700; font-size:12px; padding:6px 14px; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.04em}
.price-lvl{display:block; font-weight:700; font-size:14px; color:var(--ink-soft); margin-bottom:14px}
.price-hot .price-lvl{color:rgba(255,255,255,.65)}
.price-num{font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(30px,4vw,42px); letter-spacing:-.03em; line-height:1}
.price-num i{font-style:normal; font-size:16px; font-weight:600; color:var(--ink-soft)}
.price-hot .price-num i{color:rgba(255,255,255,.6)}
.price-year{color:var(--ink-soft); margin:10px 0 22px; font-size:15px}
.price-hot .price-year{color:rgba(255,255,255,.6)}
.price-btn{width:100%; margin-top:auto}
.price-soft{background:var(--surface)}
.price-soft .link-arrow{margin-top:auto}
.price-list{display:grid; gap:12px; margin:6px 0 22px}
.price-list li{padding-left:22px; position:relative; font-size:15px; color:var(--ink)}
.price-list li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--violet)}

/* ---- пять шагов «Step to Step»: стэппер с линией-трек + поочерёдное появление ---- */
.mini-steps{list-style:none; position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:0 0 clamp(36px,5vw,52px); padding:0}
/* соединительная линия через центры кружков (серый трек + цветная «прочерченная» линия поверх) */
.mini-steps::before,.mini-steps::after{content:""; position:absolute; top:26px; height:3px; border-radius:2px}
/* концы линии выровнены по ЦЕНТРАМ крайних кружков (поправка на gap: 4*14px/10 = 5.6px) */
.mini-steps::before{left:calc(10% - 5.6px); right:calc(10% - 5.6px); background:var(--line); z-index:0}
.mini-steps::after{left:calc(10% - 5.6px); width:calc(80% + 11.2px); z-index:1; background:linear-gradient(90deg,var(--brand-orange),var(--brand-teal),var(--brand-green))}
.mini-steps li{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; font-weight:700; font-size:15.5px; color:var(--ink)}
.ms-dot{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--white); border:3px solid var(--line); box-shadow:0 4px 12px rgba(26,23,18,.06); font-family:'Unbounded',sans-serif; font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.02em}
.mini-steps li:nth-child(1) .ms-dot{background:var(--brand-orange); border-color:var(--brand-orange)}
.mini-steps li:nth-child(2) .ms-dot{background:var(--brand-teal);   border-color:var(--brand-teal)}
.mini-steps li:nth-child(3) .ms-dot{background:var(--brand-green);  border-color:var(--brand-green)}
.mini-steps li:nth-child(4) .ms-dot{background:var(--brand-orange); border-color:var(--brand-orange)}
.mini-steps li:nth-child(5) .ms-dot{background:var(--brand-teal);   border-color:var(--brand-teal)}
.ms-label{max-width:14ch; line-height:1.3; font-size:17px}

/* поочерёдное появление (каскад): блок сам не гаснет — анимируем кружки и линию */
.reveal-on .mini-steps.reveal{opacity:1; transform:none}
.reveal-on .mini-steps li{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0)*.14s)}
.reveal-on .mini-steps.in li{opacity:1; transform:none}
.reveal-on .mini-steps::after{width:0; transition:width 1.3s cubic-bezier(.4,.6,.2,1) .25s}
.reveal-on .mini-steps.in::after{width:calc(80% + 11.2px)}
/* последний шаг «Занятия» = цель: мягкая пульсация после появления */
.mini-steps.in li:last-child .ms-dot{animation:ms-pulse 2.2s ease-out 1.1s infinite}
@keyframes ms-pulse{0%{box-shadow:0 0 0 0 rgba(8,165,186,.5)}70%{box-shadow:0 0 0 14px rgba(8,165,186,0)}100%{box-shadow:0 0 0 0 rgba(8,165,186,0)}}

@media(max-width:760px){
  .mini-steps{grid-template-columns:repeat(3,1fr); gap:22px 14px}
  .mini-steps::before,.mini-steps::after{display:none}
}
@media(max-width:480px){ .mini-steps{grid-template-columns:repeat(2,1fr)} }

/* ---- промо-видео: сплит «текст + плеер» ---- */
.promo{padding:clamp(48px,6vw,84px) 0}
.promo-grid{display:block; text-align:center}
.promo-copy{max-width:640px; margin:0 auto clamp(30px,4vw,46px)}
.promo-copy .sec-title{margin:10px 0 14px}
.promo-copy .sec-sub{max-width:52ch; margin-left:auto; margin-right:auto}

.promo-player{position:relative; aspect-ratio:16/10; max-width:740px; margin:0 auto}
/* мягкое цветное свечение под видео */
.promo-player::before{content:""; position:absolute; inset:8% 6% -6%;
  border-radius:var(--r-xl); background:linear-gradient(130deg,var(--brand-teal),var(--brand-orange));
  filter:blur(48px); opacity:.30; z-index:0}
.promo-frame{position:absolute; inset:0; border-radius:var(--r-xl); overflow:hidden;
  background:var(--ink); z-index:1;
  box-shadow:0 34px 70px -26px rgba(8,54,60,.55), 0 10px 26px rgba(26,23,18,.14),
    inset 0 0 0 1px rgba(255,255,255,.12);}
.promo-video{width:100%; height:100%; object-fit:cover; display:block}
/* затемняющий градиент снизу — под пилюлю хронометража */
.promo-scrim{position:absolute; inset:auto 0 0; height:42%; z-index:2; pointer-events:none;
  background:linear-gradient(to top,rgba(8,20,22,.62),transparent); transition:opacity .3s ease}
/* стеклянная кнопка play */
.promo-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
  width:clamp(66px,7vw,84px); height:clamp(66px,7vw,84px); border-radius:50%;
  border:1px solid rgba(255,255,255,.5); cursor:pointer;
  background:rgba(255,255,255,.16); color:var(--white);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  display:grid; place-items:center;
  box-shadow:0 14px 40px rgba(8,20,22,.42), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease, box-shadow .25s ease}
.promo-play svg{margin-left:0; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.promo-play::after{content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5); animation:promoPulse 2.8s ease-out infinite}
@keyframes promoPulse{0%{transform:scale(.9); opacity:.6} 100%{transform:scale(1.4); opacity:0}}
.promo-play:hover{transform:translate(-50%,-50%) scale(1.08);
  background:var(--cta); color:var(--cta-ink); border-color:transparent;
  box-shadow:0 18px 46px rgba(255,79,0,.5)}
.promo-player.is-playing .promo-play,
.promo-player.is-playing .promo-scrim{opacity:0; pointer-events:none}
@media (prefers-reduced-motion:reduce){ .promo-play::after{animation:none} }

@media (max-width:860px){
  .promo-grid{grid-template-columns:1fr; gap:clamp(22px,5vw,34px); text-align:center}
  .promo-copy{max-width:560px; margin:0 auto}
  .promo-copy .sec-sub{max-width:none}
}

/* ---- закреплённая витрина (приём Мануфактуры) ---- */
.gallery{position:relative; height:200vh; background:var(--ink)}
.gallery-sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px}
/* мягкое затемнение по центру, чтобы заголовок читался поверх фото */
.gallery-sticky::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 60% 42% at 50% 50%, rgba(26,23,18,.72), transparent 72%)}
.gallery-title{position:relative; color:#fff; font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(22px,3vw,40px); text-align:center; max-width:16em; z-index:3; padding:0 24px; text-shadow:0 2px 24px rgba(0,0,0,.5)}
.gcols{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; width:min(940px,92vw); position:absolute; inset:0; margin:auto; align-content:center}
.gcol{display:grid; gap:22px; will-change:transform}
.gcell{aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:#2a2621; box-shadow:0 30px 60px rgba(0,0,0,.5); display:block}
.gcell img{width:100%; height:100%; object-fit:cover; object-position:50% 38%; display:block}

/* ---- финальная форма ---- */
.cta-final{padding:clamp(56px,7vw,96px) 0}
.cta-in{background:linear-gradient(135deg,#E4F5F8,#FFEBE1); border-radius:var(--r-xl); padding:clamp(28px,4vw,56px); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center}
.cta-copy .sec-title{text-align:left; margin-bottom:16px; line-height:1.3}
.cta-copy p{color:var(--ink-soft); margin-bottom:20px; max-width:32em}
.cta-facts{display:grid; gap:10px}
.cta-facts li{padding-left:26px; position:relative; font-weight:600}
.cta-facts li::before{content:"✓"; position:absolute; left:0; color:var(--brand-green-dk); font-weight:800}
.cta-form{background:var(--white); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-md); display:grid; gap:14px}
.cta-form label{display:grid; gap:7px; font-weight:600; font-size:14px}
.cta-form input{height:54px; padding:0 18px; border:1.5px solid var(--line); border-radius:14px; font-size:16px; transition:border-color .15s,box-shadow .15s}
.cta-form input:focus{outline:none; border-color:var(--brand-teal); box-shadow:0 0 0 4px rgba(8,165,186,.18)}
.cta-form .btn{margin-top:6px}
.cta-consent{font-size:12px; color:var(--ink-soft); text-align:center; margin-top:2px}
/* согласие на обработку данных (152-ФЗ): галочка обязательна для отправки формы.
   Стили — только через классы: правило вида `.cta-agree span` перебило бы их по специфичности */
.cta-form .cta-agree{display:flex; align-items:flex-start; gap:10px; margin-top:2px; cursor:pointer;
  font-size:12.5px; line-height:1.45; color:var(--ink-soft); font-weight:400}
.cta-form .cta-agree-box{flex:0 0 auto; width:20px; height:20px; min-width:20px; padding:0;
  margin:1px 0 0; border-radius:5px; accent-color:var(--brand-teal); cursor:pointer}
.cta-agree-txt{flex:1}
.cta-agree-txt a{color:var(--link); text-decoration:underline; text-underline-offset:2px}
.cta-form .cta-agree-box[aria-invalid="true"]{outline:2px solid #C0341A; outline-offset:2px; box-shadow:none}
.form-status{font-weight:700; font-size:14px; text-align:center; min-height:1em}

/* ---- футер ---- */
.ftr{background:var(--ink); color:#fff; padding:clamp(48px,6vw,72px) 0 28px}
.ftr-in{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12)}
.logo--ftr{color:#fff}
.ftr-brand p{color:rgba(255,255,255,.6); margin-top:16px; max-width:24em; font-size:15px}
.ftr-col h4{font-size:14px; margin:0 0 14px; color:rgba(255,255,255,.5); font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.ftr-col a,.ftr-col span{display:block; color:rgba(255,255,255,.82); margin-bottom:9px; font-size:15px}
.ftr-col a:hover{color:var(--cta)}
.ftr-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding-top:22px; color:rgba(255,255,255,.55); font-size:14px}
.ftr-legal{color:rgba(255,255,255,.62); text-decoration:underline; text-underline-offset:3px; font-size:14px; margin-right:auto; margin-left:22px; transition:color .2s ease}
.ftr-legal:hover{color:#fff}
.ftr-franchise{color:var(--cta); font-weight:700}

/* ====================== АДАПТИВ ДОП. СЕКЦИЙ ====================== */
@media (max-width:960px){
  .manifesto-in,.feature-in,.cta-in{grid-template-columns:1fr}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .rev-col--c{display:none}
  .gcol-hide{display:none}
  .gcols{grid-template-columns:repeat(3,1fr)}
  .ftr-in{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .price-grid{grid-template-columns:1fr}
  .rev-col--b{display:none}
  .rev-col{flex-basis:min(88vw,360px); max-width:min(88vw,360px)}
  /* галерея на мобиле: раскрепляем секцию, плитки в ровную сетку 2×N */
  .gallery{height:auto}
  .gallery-sticky{position:static; height:auto; overflow:visible; padding:clamp(40px,9vw,64px) 0; gap:24px}
  .gallery-sticky::before{display:none}
  .gcols{position:static; inset:auto; grid-template-columns:repeat(2,1fr); gap:14px; width:min(560px,92vw)}
  .gcol{display:contents}
  .gcell{transform:none !important}
  .ftr-in{grid-template-columns:1fr 1fr}
  .ftr-bottom{flex-direction:column; align-items:flex-start}
  .ftr-legal{margin:0}
  .cta-form{padding:22px}
}

/* ======================================================================
   ХАБ ПРОГРАММ — редакционная сетка: фото вместо цветных плашек,
   3 крупные «якорные» программы (школьный путь) + 4 компактные (вокруг).
   Появление — простой fade+сдвиг через общий .reveal, без 3D.
   ====================================================================== */
.fly-sec{padding:clamp(48px,7vw,90px) 0}
.fly-intro{max-width:680px; margin:0 auto 44px; text-align:center}
.fly-intro .eyebrow{color:var(--violet)}
.fly-intro .sec-sub{margin-top:14px}

.pg-grid{
  max-width:1160px; margin:0 auto; padding:0 clamp(16px,4vw,32px);
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);
}
.pgc{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--pgc-c) 11%, var(--white));
  border:1px solid color-mix(in srgb, var(--pgc-c) 34%, var(--line));
  box-shadow:var(--sh-sm);
  transition:transform .2s ease, box-shadow .2s ease;
  grid-column:span 3;
}
.pgc:hover{transform:translateY(-5px); box-shadow:0 18px 38px color-mix(in srgb, var(--pgc-c) 26%, transparent)}
.pgc--lg{grid-column:span 4}
/* мультистраничный хаб: три раздела, «Школа»-флагман чуть крупнее соседей (4·5·4 из 13) */
.pg-grid--3{grid-template-columns:repeat(13,1fr)}
.pg-grid--3 .pgc--wide{grid-column:span 5}

/* крупный призрачный номер-якорь — держит глаз и задаёт ритм 01→07 */
.pgc::before{
  content:attr(data-num);
  position:absolute; top:-.16em; right:.06em; z-index:1;
  font-family:'Unbounded',sans-serif; font-weight:800; line-height:1;
  font-size:78px; letter-spacing:-.05em;
  color:var(--pgc-c); opacity:.22; pointer-events:none;
  transition:color .25s ease, opacity .25s ease;
}
.pgc--lg::before{font-size:118px}
/* яркая заливка в СОБСТВЕННЫЙ цвет карточки — плавно на наведении */
.pgc::after{content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  background:linear-gradient(155deg, var(--pgc-c), color-mix(in srgb, var(--pgc-c) 72%, #000));
  transition:opacity .25s ease}
.pgc:hover::after{opacity:1}
.pgc:hover::before{color:#fff; opacity:.26}

/* фото-обложка карточки-ступени: единый формат, object-fit без растяжения */
.pgc-media{position:relative; z-index:2; aspect-ratio:16/10; overflow:hidden;
  background:color-mix(in srgb, var(--pgc-c) 18%, var(--white));}
.pgc-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; transition:transform .45s ease}
.pgc:hover .pgc-media img{transform:scale(1.05)}

.pgc-body{position:relative; z-index:2; flex:1; display:flex; flex-direction:column; gap:8px; padding:22px 22px 22px}
.pgc--lg .pgc-body{padding:26px 26px 26px; gap:10px}
.pgc-age{
  align-self:flex-start; font-weight:700; font-size:11px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--pgc-c); background:color-mix(in srgb, var(--pgc-c) 16%, white); padding:4px 10px; border-radius:var(--r-pill);
}
/* метка «продукт на отдельной странице» (мультистраничный вариант) */
.pgc-tag{
  align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
  font-weight:700; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--pgc-c); background:color-mix(in srgb, var(--pgc-c) 15%, white);
  padding:4px 10px; border-radius:var(--r-pill); transition:color .25s ease, background .25s ease;
}
.pgc-tag::before{content:"↗"; font-size:12px; line-height:1}
.pgc:hover .pgc-tag{color:#fff; background:color-mix(in srgb, #fff 24%, transparent)}
.pgc-title{font-family:'Unbounded',sans-serif; font-weight:700; font-size:17px; letter-spacing:-.01em; margin-top:2px; transition:color .25s ease}
.pgc--lg .pgc-title{font-size:21px}
.pgc-desc{font-size:13.5px; color:var(--ink-soft); line-height:1.45; transition:color .25s ease}
.pgc--lg .pgc-desc{font-size:14.5px}
/* список «что входит» в укрупнённой карточке-разделе (мультистраничный вариант) */
.pgc-inc{list-style:none; display:flex; flex-direction:column; gap:7px; margin:4px 0 2px}
.pgc-inc li{position:relative; padding-left:18px; font-size:13.5px; color:var(--ink-soft); line-height:1.4; transition:color .25s ease}
.pgc--lg .pgc-inc li{font-size:14px}
.pgc-inc li::before{content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--pgc-c); transition:background .25s ease}
.pgc:hover .pgc-inc li{color:#fff}
.pgc:hover .pgc-inc li::before{background:#fff}
.pgc:hover .pgc-age{background:color-mix(in srgb, #fff 24%, transparent); color:#fff}
.pgc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px}
.pgc-price{font-family:'Unbounded',sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em; transition:color .25s ease}
.pgc--lg .pgc-price{font-size:17px}
.pgc-btn{font-weight:700; font-size:13px; color:var(--ink); white-space:nowrap; transition:color .25s ease}
.pgc-btn:hover{color:var(--link)}
/* на наведении весь текст карточки → белый (читается на яркой заливке) */
.pgc:hover .pgc-title, .pgc:hover .pgc-desc, .pgc:hover .pgc-price, .pgc:hover .pgc-btn{color:#fff}

@media(max-width:900px){
  .pg-grid{grid-template-columns:repeat(2,1fr)}
  .pgc{grid-column:span 1}
  /* якорные карточки остаются на всю ширину строки — сохраняем иерархию «крупное/компактное» */
  .pgc--lg{grid-column:1/-1}
  .pg-grid--3 .pgc--wide{grid-column:1/-1}
}
@media(max-width:560px){
  .pg-grid{grid-template-columns:1fr}
}

/* ===== Патч мультистраничной главной (2026-07-30): герой-CTA, оплата, «познакомиться» ===== */
/* Ряд призывов в герое: экскурсия (кнопка) + позвонить + вопрос */
.hero-cta{display:flex; flex-wrap:wrap; gap:14px 20px; justify-content:center; align-items:center; margin-top:clamp(4px,2vh,16px)}
.hero-ask{font-weight:700; font-size:15px; color:var(--ink); text-decoration:none; border-bottom:2px solid color-mix(in srgb, var(--brand-teal) 42%, transparent); padding-bottom:1px; transition:color .2s ease, border-color .2s ease}
.hero-ask:hover{color:var(--brand-teal-dk); border-color:var(--brand-teal)}

/* Лицензия отдельным блоком (в «О Династии») — одна колонка вместо cost-sub 1fr/1.15fr */
.cost-sub--solo{grid-template-columns:1fr}

/* Способы оплаты в ряд (4 в строку) на отдельной секции #oplata */
.pay-grid--row{grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){ .pay-grid--row{grid-template-columns:1fr 1fr} }

/* ===== Оплата v2: чистая панель-полоса (без градиентных плиток) ===== */
.pay2{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; max-width:940px; margin:0 auto;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.pay2-item{background:var(--white); padding:clamp(22px,3vw,30px) 18px; text-align:center;
  display:flex; flex-direction:column; justify-content:center; gap:6px; transition:background .2s ease}
.pay2-item:hover{background:var(--surface)}
.pay2-item b{font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(20px,2.4vw,27px); letter-spacing:-.02em; line-height:1.05}
.pay2-item span{font-size:16px; font-weight:600; color:var(--ink); line-height:1.4}
.pay2-item:nth-child(1) b{color:var(--brand-teal-dk)}
.pay2-item:nth-child(2) b{color:var(--brand-green-dk)}
.pay2-item:nth-child(3) b{color:var(--brand-orange)}
.pay2-item:nth-child(4) b{color:var(--ink)}
@media(max-width:760px){ .pay2{grid-template-columns:1fr 1fr} }
@media(max-width:420px){ .pay2{grid-template-columns:1fr} }

/* ===== Лицензия v2: цельная панель, крупные сканы документов, читаемый текст ===== */
.license2{display:flex; align-items:center; gap:clamp(34px,5vw,68px);
  max-width:1120px; margin:0 auto; padding:clamp(30px,4vw,56px); border-radius:var(--r-xl);
  background:linear-gradient(150deg, color-mix(in srgb, var(--brand-green) 10%, var(--white)), color-mix(in srgb, var(--brand-teal) 7%, var(--white)));
  border:1px solid color-mix(in srgb, var(--brand-green) 22%, var(--line))}
.license2-docs{position:relative; flex:none; display:flex; padding:10px}
.license2-scan{display:block; flex:0 0 auto; width:clamp(158px,16vw,216px); aspect-ratio:905/1280;
  border-radius:14px; overflow:hidden; background:var(--white); border:1px solid var(--line);
  box-shadow:0 24px 54px rgba(20,30,40,.22)}
.license2-scan img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.license2-scan--a{transform:rotate(-4deg); z-index:2; margin-right:-42px; margin-top:24px}
.license2-scan--b{transform:rotate(4deg); z-index:1}
.license2-info{flex:1}
.license2-badge{display:inline-flex; align-items:center; gap:6px; padding:6px 14px 6px 11px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--brand-green) 10%, var(--white)); color:#4C6216;
  font-weight:700; font-size:13.5px; letter-spacing:.01em}
.license2-title{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(22px,2.6vw,30px); letter-spacing:-.02em; line-height:1.16; margin:16px 0 12px}
.license2-text{color:var(--ink); font-size:clamp(16px,1.35vw,18px); line-height:1.55; max-width:52ch; margin-bottom:18px}
.license2-points{list-style:none; display:grid; gap:12px; max-width:56ch}
.license2-points li{position:relative; padding-left:30px; color:var(--ink-soft); font-size:clamp(15px,1.3vw,16.5px); line-height:1.45}
.license2-points li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--brand-green-dk); font-weight:800; font-size:17px}
@media(max-width:760px){
  .license2{flex-direction:column; text-align:center; gap:32px; padding:clamp(24px,6vw,40px)}
  .license2-info{display:flex; flex-direction:column; align-items:center}
  .license2-text, .license2-points{max-width:100%}
  .license2-points li{text-align:left}
}

/* ===== КОМАНДА: лента-марки (нативная адаптация shadcn team) ===== */
.team{padding:clamp(56px,8vw,96px) 0; overflow:hidden}
.team-head{max-width:720px; margin:0 auto clamp(30px,5vw,52px); display:flex; flex-direction:column; align-items:center; text-align:center}
.team-badge{width:48px; height:48px; border-radius:14px; background:var(--brand-teal); color:#fff; display:grid; place-items:center; margin-bottom:18px; box-shadow:var(--sh-sm)}
.team-head .sec-sub{margin-top:12px}
/* дорожка: 2 одинаковые группы, едет влево на -50% (шов совпадает за счёт padding-right=gap) */
.team-marquee{position:relative; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.team-track{display:flex; width:max-content; animation:team-scroll 46s linear infinite}
.team-marquee:hover .team-track{animation-play-state:paused}
.team-group{display:flex; gap:22px; padding-right:22px}
.team-card{width:264px; flex:none}
.team-photo{position:relative; display:block; height:344px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--tc) 72%, #fff), var(--tc));
  filter:grayscale(1); transition:filter .35s ease}
.team-card:hover .team-photo{filter:grayscale(0)}
/* инициал-заглушка (заменится на <img> с фото сотрудника) */
.team-ini{position:absolute; inset:0; display:grid; place-items:center;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:88px; color:rgba(255,255,255,.85); font-style:normal}
.team-cap{position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(4px)}
.team-cap b{display:block; font-weight:700; font-size:15px; color:var(--ink)}
.team-cap span{font-size:12.5px; color:var(--ink-soft)}
/* цитата основателя под лентой */
.team-quote{max-width:760px; margin:clamp(40px,6vw,64px) auto 0; padding:0 clamp(16px,4vw,24px); text-align:center}
.team-quote>p{font-family:'Onest',sans-serif; font-size:clamp(17px,1.7vw,20px); line-height:1.6; font-weight:400; color:var(--ink-soft)}
@keyframes team-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .team-track{animation:none} }

/* ===== КОМАНДА вариант 2: сетка фото + список имён (нативная адаптация TeamShowcase) ===== */
.team2{padding:clamp(56px,8vw,96px) 0}
.team2 .sec-head{margin-bottom:clamp(30px,4vw,46px)}
.team2-in{display:flex; flex-direction:column; gap:34px; align-items:flex-start; max-width:1160px; margin:0 auto}
.team2-photos{display:flex; gap:14px; flex:none; max-width:100%; overflow-x:auto; padding-bottom:4px}
.team2-col{display:flex; flex-direction:column; gap:14px}
.team2-col--2{margin-top:66px}
.team2-col--3{margin-top:36px}
.team2-ph{position:relative; flex:none; overflow:hidden; border-radius:16px; cursor:pointer; transition:opacity .4s ease}
.team2-col--1 .team2-ph{width:184px; height:196px}
.team2-col--2 .team2-ph{width:202px; height:214px}
.team2-col--3 .team2-ph{width:192px; height:204px}
.team2-media{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(160deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc));
  filter:grayscale(1) brightness(.77); transition:filter .5s ease}
.team2-ini{font-family:'Unbounded',sans-serif; font-weight:800; font-size:76px; color:rgba(255,255,255,.9); font-style:normal}
.team2.has-active .team2-ph.is-dim{opacity:.55}
.team2-ph.is-active .team2-media{filter:grayscale(0) brightness(1)}
/* список имён */
.team2-list{display:flex; flex-direction:column; gap:18px; flex:1; width:100%; padding-top:4px}
.team2-row{cursor:pointer; border-radius:8px; outline-offset:4px; transition:opacity .3s ease}
.team2.has-active .team2-row.is-dim{opacity:.5}
.team2-name{display:flex; align-items:center; gap:13px}
.team2-bar{width:20px; height:13px; flex:none; border-radius:6px; background:color-mix(in srgb, var(--ink) 22%, transparent); transition:width .25s ease, background .25s ease}
.team2-row.is-active .team2-bar{width:28px; background:var(--ink)}
.team2-nm{font-weight:700; font-size:clamp(19px,2.1vw,25px); letter-spacing:-.01em; color:color-mix(in srgb, var(--ink) 76%, transparent); transition:color .25s ease}
.team2-row.is-active .team2-nm{color:var(--ink)}
.team2-role{margin:8px 0 0 33px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-soft)}
@media(min-width:860px){
  .team2-in{flex-direction:row; gap:40px; align-items:center}
  .team2-list{flex:none; width:360px; margin-left:auto; gap:22px}
}

/* Три действия в финальном блоке «Давайте познакомимся» */
.cta-ways{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.cta-way{display:flex; flex-direction:column; gap:2px; padding:12px 16px; min-width:150px; border-radius:var(--r-lg); background:var(--white); border:1px solid var(--line); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.cta-way:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:color-mix(in srgb, var(--brand-teal) 42%, var(--line))}
.cta-way b{font-family:'Unbounded',sans-serif; font-weight:700; font-size:14px; color:var(--ink)}
.cta-way span{font-size:12.5px; color:var(--ink-soft)}

/* ==============================  ИНТРО ПОДСТРАНИЦЫ (shkola/dop/english)  ==============================
   Простой заголовок вместо полноценного анимированного .hero — только текст, без warp-фона/GSAP-stagger. */
/* ссылка "← Главная" — используется внутри .hero-vp на подстраницах (shkola/dop/english),
   те же герои, что на главной, см. .hero/.hero-vp/.hero-warp */
.page-back{display:inline-flex; align-items:center; gap:6px; align-self:center; margin-bottom:clamp(14px,2.2vh,22px); font-weight:600; font-size:14px; color:var(--ink-soft); text-decoration:none; transition:color .2s ease}
.page-back:hover{color:var(--brand-teal-dk)}

/* ==============================  FAQ (details/summary)  ============================== */
.faq{padding:clamp(48px,7vw,90px) 0}
.faq .sec-head{margin-bottom:clamp(24px,3vw,32px)}
.faq-list{max-width:760px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 4px; font-family:'Unbounded',sans-serif; font-weight:600; font-size:15.5px; color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; flex:none; font-size:20px; font-weight:400; color:var(--brand-teal-dk); transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0 0 18px; padding-right:32px; color:var(--ink-soft); font-size:14.5px; line-height:1.55}

/* заглушка "уточняется" — используется вместо ещё не подтверждённых клиентом фактов (напр. летний лагерь) */
.tbd{display:inline-block; padding:3px 10px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink-soft); font-size:12.5px; font-weight:600}

/* ==============================  dop.html: свой раздел на каждую программу  ============================== */
.quick-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:clamp(18px,3vw,26px)}
.quick-nav a{font-weight:600; font-size:16px; color:var(--brand-teal-dk); text-underline-offset:3px; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--brand-teal) 40%, transparent)}
.quick-nav a:hover{color:var(--ink)}

/* каждая программа — раздел на весь экран (под будущее фото-фон, см. .prog-sec--photo ниже) */
.prog-sec{position:relative; min-height:78svh; display:flex; align-items:center; padding:clamp(40px,6vw,72px) 0}
.prog-sec--alt{background:var(--surface-2)}
.prog-row{display:flex; flex-wrap:wrap-reverse; align-items:flex-end; justify-content:space-between; gap:20px 32px; margin-top:clamp(18px,2.6vw,24px)}
.prog-price{flex:none}
.prog-price b{display:block; font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(24px,2.8vw,32px); letter-spacing:-.02em; color:var(--ink)}
.prog-price b i{font-style:normal; font-weight:500; font-size:.5em; color:var(--ink-soft)}
.prog-price span{display:block; margin-top:2px; font-size:13px; color:var(--ink-soft)}
.prog-price .btn{margin-top:14px}

/* Программа = экран с двумя колонками: текст и фото-плитка на фирменной подложке.
   Полноэкранное фото-фоном под затемнением пробовали — документальные кадры под
   градиентом становятся грязными, а текст поверх них плохо читается. */
.prog-grid{display:grid; grid-template-columns:1.02fr .98fr; align-items:center;
  gap:clamp(28px,5vw,72px); width:100%}
.prog-grid--flip .prog-copy{order:2}
.prog-copy .sec-head{text-align:left; margin-bottom:0; max-width:none}
.prog-copy .sec-sub{margin-left:0; margin-right:0}

.prog-media{position:relative; margin:0}
/* подложка-смещение фирменного цвета: она объединяет разные по свету кадры */
.prog-media::before{content:""; position:absolute; z-index:0; inset:auto auto -18px -18px;
  width:72%; height:72%; border-radius:var(--r-lg); background:var(--spot)}
.prog-grid--flip .prog-media::before{inset:-18px -18px auto auto}
.prog-media img{position:relative; z-index:1; display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--sh-md)}
.prog-media--teal{--spot:var(--brand-teal)}
.prog-media--orange{--spot:var(--brand-orange)}
.prog-media--green{--spot:var(--brand-green)}

@media(max-width:860px){
  .prog-sec{min-height:0; padding:clamp(40px,9vw,64px) 0}
  .prog-grid{grid-template-columns:1fr; gap:26px}
  .prog-grid--flip .prog-copy{order:0}
  .prog-media::before, .prog-grid--flip .prog-media::before{inset:auto auto -12px -12px; width:60%; height:60%}
  .prog-media img{aspect-ratio:3/2}
}

/* ==============================  единичная цена-баннер (english.html)  ==============================
   для одного числа .price/.price-grid (рассчитан на 3 колонки) смотрелся сиротливо — плашка вместо карточки */
.price-band{max-width:640px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px;
  padding:clamp(26px,3.6vw,36px) clamp(28px,4vw,42px); border-radius:var(--r-xl);
  background:linear-gradient(120deg, color-mix(in srgb, var(--brand-teal) 13%, var(--white)), color-mix(in srgb, var(--brand-orange) 9%, var(--white)));
  border:1px solid color-mix(in srgb, var(--brand-teal) 30%, var(--line))}
.price-band-label{display:block; margin-bottom:6px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-teal-dk)}
.price-band-num{font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(28px,3.4vw,38px); letter-spacing:-.02em; color:var(--ink)}
.price-band-num i{font-style:normal; font-weight:500; font-size:.5em; color:var(--ink-soft); margin-left:2px}

/* ==============================  широкая ценовая полоса (shkola.html)  ==============================
   одна цена на все ступени → вместо трёх одинаковых карточек единая полоса во всю ширину:
   слева цена+CTA на светлой тон-подложке, справа тёмная панель «что входит» */
.price-wide{display:grid; grid-template-columns:1.15fr .85fr; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-md)}
.price-wide-main{padding:clamp(30px,4vw,52px);
  background:linear-gradient(150deg, color-mix(in srgb, var(--brand-teal) 12%, var(--white)), color-mix(in srgb, var(--brand-orange) 9%, var(--white)));
  display:flex; flex-direction:column; align-items:flex-start}
.price-wide-label{display:block; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-teal-dk); margin-bottom:14px}
.price-wide-num{font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(40px,6vw,68px); letter-spacing:-.03em; line-height:1; color:var(--ink)}
.price-wide-num i{font-style:normal; font-weight:500; font-size:.3em; color:var(--ink-soft); margin-left:8px}
.price-wide-year{color:var(--ink-soft); font-size:clamp(15px,1.3vw,17px); line-height:1.5; margin:16px 0 28px; max-width:36ch}
.price-wide-inc{padding:clamp(30px,4vw,52px); background:var(--ink); color:#fff; display:flex; flex-direction:column; justify-content:center}
.price-wide-inc-h{font-family:'Unbounded',sans-serif; font-weight:700; font-size:15px; margin-bottom:20px}
.price-wide-inc ul{list-style:none; display:grid; gap:14px}
.price-wide-inc li{position:relative; padding-left:30px; font-size:clamp(15px,1.3vw,17px); line-height:1.35; color:rgba(255,255,255,.9)}
.price-wide-inc li::before{content:"✓"; position:absolute; left:0; top:-1px; color:var(--brand-orange); font-weight:800; font-size:18px}
@media(max-width:760px){ .price-wide{grid-template-columns:1fr} }

/* ==============================  мини-отзывы на подстраницах (без бесконечной прокрутки)  ==============================
   .rev/.rev-ava/.rev-who уже стилизованы для главной (см. .reviews) — здесь просто статичная раскладка 1-2 карточек */
.rev-mini{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:760px; margin:0 auto}
.rev-mini--single{grid-template-columns:1fr; max-width:460px}
@media(max-width:640px){ .rev-mini{grid-template-columns:1fr} }

/* ==============================  видео-отзывы (skysmart-стиль)  ==============================
   карточки в органических формах (круг / блоб) + маленькая стеклянная кнопка play → инлайн-видео (JS в main.js) */
.vrev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); max-width:1000px; margin:0 auto}
.vrev{margin:0; display:flex; flex-direction:column; align-items:center}
.vrev-media{position:relative; display:block; width:100%; aspect-ratio:1/1; padding:0; border:none; cursor:pointer;
  overflow:hidden; background:var(--ink); box-shadow:var(--sh-md);
  transition:transform .35s ease, box-shadow .35s ease, border-radius .55s cubic-bezier(.6,.2,.1,1)}
/* все карточки — кружки */
.vrev-media{border-radius:50%}
.vrev-media:hover{transform:translateY(-6px)}
.vrev-media img, .vrev-video{width:100%; height:100%; object-fit:cover; display:block}
.vrev-media::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,17,20,.02) 0%, transparent 40%, rgba(15,17,20,.34) 100%)}
.vrev.is-playing .vrev-media{cursor:default; border-radius:var(--r-lg)}
.vrev.is-playing .vrev-media::after{display:none}
/* маленькая стеклянная кнопка play */
.vrev-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 6px 20px rgba(15,17,20,.22), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .25s ease, background .25s ease}
.vrev-play svg{width:20px; height:20px; margin-left:2px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.vrev-media:hover .vrev-play{transform:translate(-50%,-50%) scale(1.1); background:rgba(255,255,255,.28)}
.vrev.is-playing .vrev-play{display:none}
.vrev-cap{display:flex; flex-direction:column; gap:2px; margin-top:16px; text-align:center}
.vrev-cap b{font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ink)}
.vrev-cap span{font-size:14px; color:var(--ink-soft)}
@media(max-width:760px){ .vrev-grid{grid-template-columns:1fr 1fr; gap:22px} .vrev--s3{display:none} }
@media(max-width:480px){ .vrev-grid{grid-template-columns:1fr; max-width:300px} .vrev--s3{display:flex} }
@media(prefers-reduced-motion:reduce){ .vrev-media{transition:box-shadow .2s ease} }

/* маленький бейдж лицензии для страниц без полной секции (dop/english) — .license2-badge уже стилизован */
.trust-line{display:flex; justify-content:center; margin:0 auto clamp(28px,4vw,40px)}

/* ==================== CTA под видео (.promo-cta) — экскурсия как часть блока «видео», единым целым ==================== */
.promo-cta{margin-top:clamp(28px,3.6vw,42px); display:flex; flex-wrap:wrap; gap:14px 22px;
  align-items:center; justify-content:center}

/* ==================== Чек-лист в фича-блоке (страница «Английский») ==================== */
.feature-points{list-style:none; display:grid; gap:14px; margin:0}
.feature-points li{display:flex; align-items:flex-start; gap:12px;
  font-size:clamp(15.5px,1.35vw,17.5px); line-height:1.45; font-weight:500; color:var(--ink)}
.fp-ic{flex:0 0 auto; width:26px; height:26px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  background:linear-gradient(155deg,#FF7A3D,var(--brand-orange));
  box-shadow:0 6px 14px rgba(255,79,0,.26)}
.fp-ic svg{stroke:var(--ink)}

/* Две кнопки в фото-карточке «попробовать» (.trial-week--photo) */
.trial-actions{display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center}
.btn-glass{color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 6px 20px rgba(15,17,20,.18)}
.btn-glass:hover{background:rgba(255,255,255,.24)}
.trial-actions .btn{max-width:100%; white-space:normal; text-align:center; line-height:1.25}
@media(max-width:640px){ .trial-actions{flex-direction:column; align-items:stretch} }

/* ==================== Шесть направлений занятия (страница «Английский») ==================== */
.skills-grid{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); margin:0}
.skill{position:relative; padding:clamp(22px,2.4vw,28px); border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--sc) 9%, var(--white));
  border:1px solid color-mix(in srgb, var(--sc) 30%, var(--line));
  transition:transform .2s ease, box-shadow .2s ease}
.skill:hover{transform:translateY(-4px); box-shadow:0 16px 32px color-mix(in srgb, var(--sc) 22%, transparent)}
.skill b{display:flex; align-items:center; gap:10px; margin-bottom:9px;
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(17px,1.5vw,20px);
  letter-spacing:-.01em; line-height:1.15; color:var(--ink)}
.skill b::before{content:""; width:11px; height:11px; border-radius:50%; background:var(--sc); flex:0 0 auto}
.skill span{display:block; color:var(--ink-soft); font-size:clamp(14.5px,1.15vw,16px); line-height:1.45}
@media(max-width:900px){ .skills-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .skills-grid{grid-template-columns:1fr} }

/* три отзыва в ряд */
.rev-mini--3{grid-template-columns:repeat(3,1fr); max-width:1120px}
@media(max-width:900px){ .rev-mini--3{grid-template-columns:1fr; max-width:560px} }

/* ==================== Курсы по возрасту: табы + одна крупная панель ==================== */
.ages{margin-top:clamp(28px,3.4vw,40px)}
.agetabs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:clamp(22px,2.6vw,32px)}
.agetab{display:flex; flex-direction:column; align-items:flex-start; gap:2px; cursor:pointer;
  padding:12px 20px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--white);
  text-align:left; transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.agetab b{font-family:'Unbounded',sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink); line-height:1.1}
.agetab b i{font-style:normal}
.agetab span{font-size:13px; color:var(--ink-soft); line-height:1.2}
.agetab:hover{border-color:color-mix(in srgb, var(--ac) 55%, var(--line)); transform:translateY(-2px)}
.agetab.is-active{background:var(--ac); border-color:var(--ac); box-shadow:0 10px 24px color-mix(in srgb, var(--ac) 32%, transparent)}
.agetab.is-active b{color:var(--ink)}
.agetab.is-active span{color:color-mix(in srgb, var(--ink) 78%, transparent)}
.agetab:focus-visible{outline:3px solid var(--ink); outline-offset:2px}

.agepanel{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,42px); align-items:center;
  padding:clamp(22px,2.6vw,32px); border-radius:var(--r-xl);
  background:color-mix(in srgb, var(--ac) 9%, var(--white));
  border:1px solid color-mix(in srgb, var(--ac) 28%, var(--line));
  animation:agefade .35s ease both}
.agepanel[hidden]{display:none}
@keyframes agefade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.agepanel-media{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:color-mix(in srgb, var(--ac) 16%, var(--white))}
.agepanel-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block}
.agepanel-age{display:inline-block; margin-bottom:12px; padding:6px 14px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--ac) 22%, var(--white)); color:var(--ink);
  font-size:13px; font-weight:700; letter-spacing:-.01em}
.agepanel-title{font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(24px,2.8vw,34px);
  letter-spacing:-.02em; line-height:1.12; color:var(--ink); margin-bottom:12px}
.agepanel-lead{color:var(--ink-soft); font-size:clamp(15px,1.35vw,17px); line-height:1.55; margin-bottom:18px; max-width:44ch}
.agepanel-list{list-style:none; display:grid; gap:10px; margin:0 0 clamp(20px,2.4vw,28px)}
.agepanel-list li{position:relative; padding-left:24px; font-size:clamp(15px,1.25vw,16.5px); line-height:1.45; color:var(--ink)}
.agepanel-list li::before{content:""; position:absolute; left:4px; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--ac)}
@media(max-width:900px){
  .agepanel{grid-template-columns:1fr}
  .agepanel-media{aspect-ratio:16/10}
  .agetabs{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px;
    scrollbar-width:none; -ms-overflow-style:none}
  .agetabs::-webkit-scrollbar{display:none}
  .agetab{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){ .agepanel{animation:none} .agetab:hover{transform:none} }
/* на узком экране в табах остаётся только возраст — иначе 4 таба не помещаются и режутся */
@media(max-width:560px){
  .agetab{padding:9px 11px}
  .agetab b{font-size:14px}
  .agetab b i{display:none}
  .agetab span{display:none}
  .agetabs{gap:6px; justify-content:space-between; overflow-x:visible}
}

/* ==================== Подготовка к ОГЭ/ЕГЭ: плашка условий + лестница этапов ==================== */
.exam-sec{padding:clamp(48px,6vw,84px) 0}
.exam-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px;
  max-width:900px; margin:0 auto clamp(34px,4.4vw,52px); padding:20px clamp(20px,2.4vw,30px);
  border-radius:var(--r-lg); border:1px solid color-mix(in srgb, var(--brand-teal) 26%, var(--line));
  background:linear-gradient(120deg, color-mix(in srgb, var(--brand-teal) 12%, var(--white)), color-mix(in srgb, var(--brand-green) 10%, var(--white)))}
.exam-bar-facts{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center}
.exam-fact{font-size:15px; color:var(--ink-soft); line-height:1.3}
.exam-fact b{display:block; font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.02em; color:var(--ink); line-height:1.1}

.steps-v{list-style:none; max-width:900px; margin:0 auto clamp(34px,4.4vw,52px); padding:0; display:grid; gap:0}
.stepv{position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2.2vw,28px);
  padding:0 0 clamp(26px,3vw,34px)}
.stepv:last-child{padding-bottom:0}
/* вертикальная линия между номерами */
.stepv::before{content:""; position:absolute; left:27px; top:60px; bottom:0; width:2px;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--sv) 45%, transparent), color-mix(in srgb, var(--sv) 8%, transparent))}
.stepv:last-child::before{display:none}
.stepv-num{width:56px; height:56px; border-radius:var(--r-md); display:grid; place-items:center;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:24px; color:#fff;
  background:linear-gradient(155deg, color-mix(in srgb, var(--sv) 74%, white), var(--sv));
  box-shadow:0 12px 26px color-mix(in srgb, var(--sv) 32%, transparent)}
.stepv-body{padding-top:4px}
.stepv-title{display:block; font-family:'Unbounded',sans-serif; font-weight:700;
  font-size:clamp(19px,1.9vw,24px); letter-spacing:-.015em; line-height:1.2; color:var(--ink); margin-bottom:8px}
.stepv-text{display:block; color:var(--ink-soft); font-size:clamp(15px,1.35vw,17.5px); line-height:1.55; max-width:60ch}
@media(max-width:560px){
  .stepv{gap:16px}
  .stepv-num{width:46px; height:46px; font-size:20px}
  .stepv::before{left:22px; top:50px}
  .exam-bar{justify-content:flex-start}
  .exam-bar .btn{width:100%; text-align:center}
}

/* ==================== Фича-блок: нумерованная лестница 01–03 ==================== */
.fsteps{list-style:none; display:grid; gap:clamp(18px,2.2vw,26px); margin:0; padding:0; counter-reset:none}
.fstep{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding-bottom:clamp(18px,2.2vw,26px); border-bottom:1px solid var(--line)}
.fstep:last-child{padding-bottom:0; border-bottom:none}
.fstep-num{font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.03em; line-height:1; color:var(--brand-orange); min-width:2.2em}
.fstep > div b{display:block; font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(17px,1.6vw,20px);
  letter-spacing:-.01em; line-height:1.2; color:var(--ink); margin-bottom:6px}
.fstep > div span{display:block; color:var(--ink-soft); font-size:clamp(14.5px,1.25vw,16.5px); line-height:1.5}
.fstep:nth-child(2) .fstep-num{color:var(--brand-teal-dk)}
.fstep:nth-child(3) .fstep-num{color:var(--green-dk,var(--brand-green-dk))}

/* ==================== Правки по UX-аудиту (2026-08-02) ==================== */
/* 1. Длинные CTA не помещались в 390px и распирали страницу вбок (был горизонтальный скролл). */
@media(max-width:600px){
  .btn{white-space:normal; text-align:center; max-width:100%; line-height:1.25}
}
/* 2. Тач-таргеты: минимум 44px по правилу мобильной доступности. */
.nav a, .mmenu-links a{display:inline-flex; align-items:center; min-height:44px}
.hdr-phone, .mmenu-phone{display:inline-flex; align-items:center; min-height:44px}
.page-back{display:inline-flex; align-items:center; min-height:44px}
/* ссылки футера — блочные, иначе колонка ломается в строку */
.ftr-col a, .ftr-col span{display:flex; align-items:center; min-height:44px}
.ftr-franchise{display:inline-flex; align-items:center; min-height:44px}
.ftr-col{gap:0}
@media(max-width:560px){
  .agetab{min-height:44px; justify-content:center}
}
/* 3. Ошибка формы читается, а не только «прыгает» фокус. */
.cta-form input[aria-invalid="true"]{border-color:#C0341A; box-shadow:0 0 0 3px rgba(192,52,26,.12)}
.form-status[data-state="error"]{color:#C0341A; font-weight:600}
/* 4. Продолжение аудита: блок цены программы распирал мобильный экран (кнопка + flex:none). */
.prog-price{max-width:100%}
.prog-price .btn{max-width:100%}
/* 5. Остальные мелкие тач-таргеты до 44px. */
.logo{min-height:44px}
.quick-nav a, .pgc-btn, .hero-ask{display:inline-flex; align-items:center; min-height:44px}
.pgc-foot{margin-top:auto}

/* ==================== БЛОГ (демо-раздел, 2026-08-02) ==================== */
/* полоса-предупреждение для показа клиенту — удалить перед запуском */
.demo-note{background:var(--ink); color:rgba(255,255,255,.9); text-align:center;
  padding:9px 16px; font-size:13.5px; line-height:1.35}

/* короткий герой для внутренних страниц блога */
.hero--short .hero-vp{height:auto; min-height:0; justify-content:center; padding-top:clamp(26px,4vw,48px); padding-bottom:clamp(40px,5vw,72px)}
.hero--short .hero-h1{font-size:clamp(34px,5.4vw,62px)}

.blog-sec{padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,84px)}
.bfilter{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:clamp(28px,3.6vw,44px)}
.bchip{cursor:pointer; min-height:44px; padding:10px 20px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--white); font-weight:600; font-size:15px; color:var(--ink);
  transition:background .2s ease, border-color .2s ease, transform .2s ease}
.bchip:hover{border-color:color-mix(in srgb, var(--brand-teal) 50%, var(--line)); transform:translateY(-2px)}
.bchip.is-active{background:var(--brand-orange); border-color:var(--brand-orange); color:var(--ink)}

.bgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px)}
/* карточка статьи — без обложки: цвет по теме + крупный заголовок (реальных фото под статьи нет) */
.bcard{position:relative; display:flex; flex-direction:column; gap:10px;
  min-height:250px; padding:clamp(22px,2.4vw,30px); padding-right:clamp(46px,4vw,58px);
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--bc, var(--brand-teal)) 8%, var(--white));
  border:1px solid color-mix(in srgb, var(--bc, var(--brand-teal)) 26%, var(--line));
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.bcard[hidden]{display:none}   /* без этого display:flex перебивает атрибут hidden */
.bcard:hover{transform:translateY(-5px);
  box-shadow:0 18px 38px color-mix(in srgb, var(--bc, var(--brand-teal)) 24%, transparent);
  border-color:color-mix(in srgb, var(--bc, var(--brand-teal)) 46%, var(--line))}
/* цветная полоса-акцент сверху */
.bcard::before{content:""; position:absolute; left:clamp(22px,2.4vw,30px); top:0; width:46px; height:4px;
  border-radius:0 0 4px 4px; background:var(--bc, var(--brand-teal))}
.bcard-cat{align-self:flex-start; padding:5px 12px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--bc, var(--brand-teal)) 20%, var(--white)); color:var(--ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em}
.bcard-title{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(18px,1.8vw,22px);
  letter-spacing:-.015em; line-height:1.22; color:var(--ink)}
.bcard-lead{color:var(--ink-soft); font-size:15px; line-height:1.5}
.bcard-meta{margin-top:auto; padding-top:6px; color:var(--ink-soft); font-size:13.5px}
.bcard-go{position:absolute; right:clamp(18px,2vw,24px); bottom:clamp(18px,2vw,24px);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--bc, var(--brand-teal)); color:var(--ink); font-size:16px; font-weight:700;
  transition:transform .2s ease}
.bcard:hover .bcard-go{transform:translateX(3px)}

/* главная статья — тёмная панель на всю ширину */
.bcard--lead{min-height:0; margin-bottom:clamp(18px,2.4vw,28px);
  padding:clamp(30px,3.6vw,52px); padding-right:clamp(60px,6vw,90px);
  background:var(--ink); border-color:var(--ink)}
.bcard--lead:hover{border-color:var(--ink)}
.bcard--lead::before{width:64px; height:5px; background:var(--brand-orange)}
.bcard--lead .bcard-cat{background:color-mix(in srgb, var(--brand-orange) 88%, var(--white)); color:var(--ink)}
.bcard--lead .bcard-title{color:#fff; font-size:clamp(24px,3vw,38px); line-height:1.14; max-width:22ch}
.bcard--lead .bcard-lead{color:rgba(255,255,255,.82); font-size:clamp(15px,1.35vw,17px); max-width:62ch}
.bcard--lead .bcard-meta{color:rgba(255,255,255,.6)}
.bcard--lead .bcard-go{background:var(--brand-orange); width:42px; height:42px; font-size:18px}

.bempty{text-align:center; color:var(--ink-soft); padding:clamp(28px,4vw,48px) 0; font-size:16px}

@media(max-width:900px){ .bgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .bgrid{grid-template-columns:1fr} .bcard{min-height:0} }

/* ---------- страница статьи ---------- */
.post{padding-bottom:clamp(48px,6vw,84px)}
.post-head{max-width:820px; padding-top:clamp(28px,4vw,52px); display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.post-title{font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(28px,4vw,48px);
  letter-spacing:-.025em; line-height:1.12; color:var(--ink)}
.post-lead{color:var(--ink-soft); font-size:clamp(16px,1.5vw,19px); line-height:1.55; max-width:62ch}
.post-meta{display:flex; align-items:center; gap:12px; margin-top:6px}
.post-ava{width:46px; height:46px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-teal); color:var(--ink); font-family:'Unbounded',sans-serif; font-weight:700; font-size:18px}
.post-ava--lg{width:64px; height:64px; font-size:24px}
.post-meta-txt{display:flex; flex-direction:column; line-height:1.3}
.post-meta-txt b{font-weight:700; font-size:15.5px; color:var(--ink)}
.post-meta-txt i{font-style:normal; font-size:13.5px; color:var(--ink-soft)}

.post-cover{margin:clamp(24px,3.4vw,44px) auto 0; max-width:1100px; padding:0 clamp(16px,4vw,32px)}
.post-cover img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center 40%;
  border-radius:var(--r-xl); display:block}

.post-body{max-width:760px; padding-top:clamp(28px,3.6vw,44px)}
.post-body p{font-size:clamp(16.5px,1.4vw,18.5px); line-height:1.7; color:var(--ink); margin-bottom:1.15em}
.post-body h2{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(21px,2.4vw,29px);
  letter-spacing:-.02em; line-height:1.2; color:var(--ink); margin:clamp(30px,3.6vw,46px) 0 14px}
.post-body a{color:var(--brand-teal-dk); text-decoration:underline; text-underline-offset:3px}
.post-list{margin:0 0 1.3em; padding-left:0; list-style:none; display:grid; gap:10px}
.post-list li{position:relative; padding-left:26px; font-size:clamp(16px,1.35vw,18px); line-height:1.6; color:var(--ink)}
.post-list li::before{content:""; position:absolute; left:6px; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--brand-orange)}
.post-list--num{counter-reset:pl}
.post-list--num li{counter-increment:pl; padding-left:34px}
.post-list--num li::before{content:counter(pl); width:auto; height:auto; top:0; left:0; border-radius:0;
  background:none; color:var(--brand-orange); font-family:'Unbounded',sans-serif; font-weight:800; font-size:16px}
.post-quote{margin:clamp(26px,3.2vw,40px) 0; padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  border-left:4px solid var(--brand-orange); border-radius:0 var(--r-lg) var(--r-lg) 0;
  background:color-mix(in srgb, var(--brand-orange) 8%, var(--white));
  font-family:'Unbounded',sans-serif; font-weight:600; font-size:clamp(17px,1.7vw,21px); line-height:1.4; color:var(--ink)}
.post-fig{margin:clamp(26px,3.2vw,40px) 0}
.post-fig img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg); display:block}
.post-fig figcaption{margin-top:10px; font-size:14px; color:var(--ink-soft); line-height:1.45}

.post-author{display:flex; gap:18px; align-items:flex-start; max-width:760px; margin:clamp(32px,4vw,52px) auto 0;
  padding:clamp(20px,2.4vw,28px); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line)}
.post-author > div b{display:block; font-family:'Unbounded',sans-serif; font-weight:700; font-size:17px; color:var(--ink); margin-bottom:6px}
.post-author > div span{display:block; color:var(--ink-soft); font-size:15px; line-height:1.55}

.post-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px;
  margin-top:clamp(40px,5vw,64px); padding:clamp(26px,3.2vw,42px);
  border-radius:var(--r-xl); border:1px solid color-mix(in srgb, var(--brand-teal) 26%, var(--line));
  background:linear-gradient(120deg, color-mix(in srgb, var(--brand-teal) 12%, var(--white)), color-mix(in srgb, var(--brand-orange) 9%, var(--white)))}
.post-cta-title{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(20px,2.2vw,27px);
  letter-spacing:-.02em; line-height:1.2; color:var(--ink); margin-bottom:8px}
.post-cta p{color:var(--ink-soft); font-size:16px; line-height:1.5; max-width:52ch}
/* витрина блога на главной */
.blog-teaser{padding:clamp(44px,5.5vw,80px) 0}
.blog-teaser-more{display:flex; justify-content:center; margin-top:clamp(24px,3vw,36px)}
/* второстепенная, но заметная кнопка — бирюзовая заливка + тёмный текст (контраст 6:1) */
.btn-teal{background:var(--brand-teal); color:var(--ink); box-shadow:0 8px 20px rgba(8,165,186,.24)}
.btn-teal:hover{background:color-mix(in srgb, var(--brand-teal) 86%, #000); box-shadow:0 12px 26px rgba(8,165,186,.32)}

/* ==================== Карта филиалов ==================== */
.map-embed{position:relative; margin-top:clamp(24px,3vw,38px); border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-md); background:var(--surface); aspect-ratio:21/9}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
@media(max-width:900px){ .map-embed{aspect-ratio:4/3} }
/* ссылка на маршрут в карточке филиала — аккуратная пилюля без подчёркивания */
.branch-route{display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  min-height:44px; padding:0 18px; margin-top:4px; border-radius:var(--r-pill);
  border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; font-weight:700; font-size:14.5px; text-decoration:none; letter-spacing:.01em;
  transition:background .2s ease, border-color .2s ease, color .2s ease}
.branch-route::after{content:"→"; font-size:15px; transition:transform .2s ease}
.branch-route:hover{background:#fff; border-color:#fff; color:var(--ink)}
.branch-route:hover::after{transform:translateX(3px)}

/* ==================== СТРАНИЦА 404 ==================== */
.e404{padding:clamp(70px,11vw,150px) 0; text-align:center}
.e404-code{font-family:'Unbounded',sans-serif; font-weight:800; line-height:1;
  font-size:clamp(84px,18vw,190px); letter-spacing:-.04em; margin:0 0 6px;
  color:var(--ink)}
/* каждая цифра — свой фирменный цвет (классами, не голым span: `.block b` перебил бы их по специфичности) */
.e404-d1{color:var(--brand-orange)}
.e404-d2{color:var(--brand-teal)}
.e404-d3{color:var(--brand-green)}
.e404-title{font-family:'Unbounded',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(24px,3.4vw,38px); margin:0 0 12px}
.e404-lead{max-width:520px; margin:0 auto 26px; color:var(--ink-soft); font-size:17px; line-height:1.55}
.e404-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:26px 0 0}
.e404-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border:1px solid var(--line); border-radius:999px; background:var(--white);
  font-weight:600; font-size:14.5px; color:var(--ink); text-decoration:none;
  transition:border-color .2s ease, background .2s ease, transform .2s ease}
.e404-nav a:hover{border-color:var(--brand-teal); background:color-mix(in srgb, var(--brand-teal) 8%, #fff); transform:translateY(-2px)}
.e404-ask{margin:26px 0 0; color:var(--ink-soft); font-size:15.5px}
.e404-ask a{color:var(--link); font-weight:700; white-space:nowrap}

/* ==================== ПРАВОВЫЕ СТРАНИЦЫ (политика и т.п.) ==================== */
.legal{padding:clamp(34px,5vw,64px) 0 clamp(56px,7vw,96px)}
.legal-wrap{max-width:820px}
.legal-title{font-family:'Unbounded',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(24px,3.2vw,36px); line-height:1.2; margin:18px 0 8px}
.legal-date{color:var(--ink-soft); font-size:14.5px; margin:0 0 28px}
.legal-note{padding:16px 18px; margin:0 0 30px; border-radius:var(--r-md);
  background:color-mix(in srgb, var(--brand-orange) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--brand-orange) 32%, #fff);
  font-size:14.5px; line-height:1.55; color:var(--ink)}
.legal-body h2{font-family:'Unbounded',sans-serif; font-weight:700; letter-spacing:-.01em;
  font-size:clamp(17px,1.9vw,21px); line-height:1.3; margin:34px 0 12px}
.legal-body p{font-size:16px; line-height:1.7; color:var(--ink-soft); margin:0 0 14px}
.legal-body a{color:var(--link); text-decoration:underline; text-underline-offset:2px}
.legal-list{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:10px}
.legal-list li{position:relative; padding-left:20px; font-size:16px; line-height:1.65; color:var(--ink-soft)}
.legal-list li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--brand-teal)}
.legal-body b{color:var(--ink); font-weight:700}
@media (max-width:560px){
  .legal-body p, .legal-list li{font-size:15.5px}
}