/* =============================================================================
   Колледж КАЗГАСА — стили лендинга
   -----------------------------------------------------------------------------
   Десктоп (≥1200px) повторяет макет Tilda 1:1: сетка 1200px, те же размеры
   шрифтов и отступы. Ниже 1200px всё масштабируется через --k, ниже 960px
   включается мобильная раскладка (макет Tilda для 343px, растянутый до 600px).

   Брейкпоинты: 1199 / 1099 / 959 / 479
   ============================================================================= */

:root {
  --dark: #232323;
  --light: #eeeeee;
  --paper: #f7f6f6;
  --gray: #f8f8f8;
  --blue: #638aed;
  --blue-text: #436dd7;
  --blue-link: #426cd6;
  --blue-soft: #84a7ff;
  --green: #4caf50;
  --ink: #000;

  --k: 1;                       /* масштаб десктопа: 1 при 1200px */
  --container: 1200px;
  --r: 40px;                    /* скругление карточек */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Jost', 'Jost KZ', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; width: 100%; height: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.section { position: relative; }

.h2 {
  font-size: calc(48px * var(--k));
  line-height: 1.14;
  font-weight: 500;
  color: var(--dark);
}
.h2--blue { color: var(--blue); }
.h2--blue-dark { color: var(--blue-text); }

.photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }

/* ---------------------------------------------------------------- кнопки */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn__circle {
  position: absolute; top: -1px; right: -1px; bottom: -1px;
  display: grid; place-items: center;
  border-radius: inherit;
}
.btn__circle svg { width: 29px; height: 28px; }

.btn--light {
  height: calc(67px * var(--k));
  padding: 0 calc(34px * var(--k));
  border-radius: 27px;
  background: var(--paper);
  color: var(--blue-link);
  font-size: calc(22px * var(--k));
}
.btn--light .btn__circle { display: none; }

.btn--outline {
  width: calc(433px * var(--k));
  height: calc(67px * var(--k));
  padding-left: calc(33px * var(--k));
  border: 1px solid var(--blue);
  border-radius: 27px;
  color: var(--light);
  font-size: calc(22px * var(--k));
}
.btn--outline .btn__circle { width: calc(70px * var(--k)); background: var(--blue); color: #fff; }
.btn--outline:hover { box-shadow: 0 0 0 4px rgba(99, 138, 237, .25); }

.btn--blue {
  justify-content: center;
  height: 62px;
  padding: 0 32px;
  border-radius: 26px;
  background: var(--blue);
  color: #fff;
  font-size: 18px;
}
.btn--blue:hover { background: #557de6; }

.icon-btn {
  flex: none;
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border: 1.1px solid #f8f7f7;
  border-radius: 23.5px;
  color: var(--light);
  transition: background-color .2s ease;
}
.icon-btn svg { width: 24px; height: 24px; }
a.icon-btn:hover { background: rgba(255, 255, 255, .08); }

/* =============================================================== ПЕРВЫЙ ЭКРАН */
.hero { background: var(--dark); color: var(--light); overflow: hidden; }
.hero__inner {
  position: relative;
  width: min(var(--container), 100% - 48px);
  height: calc(722px * var(--k));
  margin-inline: auto;
}

.hero__bar {
  position: absolute; z-index: 3;
  top: calc(43px * var(--k)); left: calc(65px * var(--k));
  display: flex; align-items: flex-start; gap: calc(32px * var(--k));
}
/* Логотип по регламенту 2026: файлы из img/logo/ как есть, без перерисовки.
   В SVG заложено охранное поле (~7% у вертикального, 3,5–11% у горизонтального) —
   отрицательные отступы ставят видимый знак по сетке макета. */
.hero__logo { display: block; }
.hero__logo img { width: calc(110px * var(--k)); height: auto; margin: calc(-7px * var(--k)) 0 0 calc(-8px * var(--k)); }
.hero__contacts { display: flex; margin-top: calc(18px * var(--k)); }
.hero__burger { display: none; }

.hero__hands {
  position: absolute; z-index: 1;
  top: 0; left: 56.08%;
  width: 28.5%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero__hands-m { display: none; }

.hero__body {
  position: absolute; z-index: 2;
  top: calc(203px * var(--k)); left: calc(65px * var(--k));
  width: calc(633px * var(--k));
}
.hero__title { font-size: calc(56px * var(--k)); line-height: 1.07; font-weight: 500; }
.hero__sub {
  max-width: calc(482px * var(--k));
  margin-top: calc(16px * var(--k));
  font-size: calc(24px * var(--k)); line-height: 1.5; font-weight: 300;
}
.hero__actions { display: flex; gap: calc(17px * var(--k)); margin-top: calc(65px * var(--k)); }

.hero__prep {
  position: absolute;
  top: calc(-173px * var(--k)); left: calc(886px * var(--k));
  display: grid; place-items: center;
  width: calc(219px * var(--k)); height: calc(124px * var(--k));
  padding: 0 calc(28px * var(--k));
  border: 1px solid var(--light);
  border-radius: 40px;
  font-size: calc(22px * var(--k)); line-height: 1.18; font-weight: 500;
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}
.hero__prep:hover { background: var(--light); color: var(--dark); }
.hero__ask-sq { display: none; }

.hero__ask {
  position: absolute; z-index: 2;
  top: calc(591px * var(--k)); right: calc(27px * var(--k));
  display: flex; align-items: center; gap: calc(13px * var(--k));
  font-size: calc(22px * var(--k)); line-height: 1.21;
  text-align: right;
}
.hero__ask-icon {
  display: grid; place-items: center;
  width: calc(72px * var(--k)); height: calc(72px * var(--k));
  border-radius: 27px;
  background: var(--paper);
  color: var(--blue-link);
  transition: transform .2s ease;
}
.hero__ask-icon svg { width: calc(20px * var(--k)); height: calc(32px * var(--k)); }
.hero__ask:hover .hero__ask-icon { transform: scale(1.06); }

/* ---------------------------------------------------------- мобильное меню */
.menu {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff;
  animation: fade .2s ease;
}
.menu a { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 4px 12px; }
.menu__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; padding: 10px; }
@keyframes fade { from { opacity: 0; } }

/* =============================================================== СПЕЦИАЛЬНОСТИ */
.specs { padding: calc(93px * var(--k)) 0 calc(10px * var(--k)); }
.specs__grid {
  display: flex; flex-wrap: wrap;
  gap: calc(16px * var(--k));
  margin-top: calc(48px * var(--k));
}
.spec {
  width: calc((100% - 32px * var(--k)) / 3);
  min-height: calc(423px * var(--k));
  padding: 0 calc(24px * var(--k));
}
/* второй ряд в макете сдвинут: карточки на 272px и 677px */
.spec:nth-child(4) { margin-left: 22.67%; }
.spec__img {
  width: calc(151px * var(--k)); height: auto;
  margin: calc(23px * var(--k)) 0 0 calc(-17px * var(--k));
}
.spec__img--tall { width: calc(145px * var(--k)); margin-top: 0; margin-left: calc(3px * var(--k)); margin-bottom: calc(-16px * var(--k)); }
.spec__img--build { width: calc(172px * var(--k)); margin-top: calc(32px * var(--k)); margin-bottom: calc(-21px * var(--k)); }
.spec__title {
  display: flex; align-items: flex-end;
  min-height: calc(68px * var(--k));
  margin-top: calc(1px * var(--k));
  font-size: calc(30px * var(--k)); line-height: 1.12; font-weight: 500;
}
.spec__role {
  display: flex; align-items: center; gap: calc(14px * var(--k));
  margin-top: calc(16px * var(--k));
  color: var(--blue);
  font-size: calc(24px * var(--k)); line-height: 1.4; font-weight: 500;
}
.spec__role svg { flex: none; width: calc(20px * var(--k)); height: calc(20px * var(--k)); }
.spec__text { max-width: calc(330px * var(--k)); font-size: calc(24px * var(--k)); line-height: 1.4; }

/* ---------------------------------------------------------------- карточки */
.card { border-radius: var(--r); padding: calc(56px * var(--k)) calc(28px * var(--k)) calc(56px * var(--k)) calc(56px * var(--k)); color: var(--light); }
.card--dark { background: var(--dark); }
.card--blue { background: var(--blue); }
.card__title { font-size: calc(32px * var(--k)); line-height: 1.05; font-weight: 500; }
.card__text { margin-top: calc(16px * var(--k)); font-size: calc(24px * var(--k)); line-height: 1.4; }
.card__text--light { font-weight: 300; }

/* ============================================================= ТРЕНИНГ-ЦЕНТР */
.training { padding-top: calc(72px * var(--k)); }
.training__grid { display: grid; grid-template-columns: 612fr 572fr; gap: calc(16px * var(--k)); }
.training__col { display: flex; flex-direction: column; gap: calc(16px * var(--k)); }
.training__lead { margin: calc(71px * var(--k)) 0 calc(16px * var(--k)); font-size: calc(28px * var(--k)); line-height: 1.43; }
.training__group { height: calc(194px * var(--k)); }
.training__row { display: flex; gap: calc(16px * var(--k)); align-items: center; }
.training__schedule { flex: 0 0 55.8%; min-height: calc(264px * var(--k)); padding-right: calc(40px * var(--k)); }
.training__photos { align-items: stretch; height: calc(303px * var(--k)); }
.training__boy { flex: 199; min-width: 0; }
.training__class { flex: 357; min-width: 0; }

.wa-badge {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  flex: 1;
  height: calc(127px * var(--k));
  margin-top: calc(10px * var(--k));
}
.wa-badge__ring {
  display: grid; place-items: center;
  width: calc(127px * var(--k)); height: calc(127px * var(--k));
  border: 1.5px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  transition: transform .2s ease;
}
.wa-badge__ring svg { width: calc(55px * var(--k)); height: calc(55px * var(--k)); }
.wa-badge__label {
  position: absolute; z-index: 1;
  top: calc(9px * var(--k)); right: calc(73px * var(--k));
  padding: calc(5px * var(--k)) calc(22px * var(--k)) calc(9px * var(--k)) calc(4px * var(--k));
  background: var(--gray);
  color: var(--dark);
  font-size: calc(21px * var(--k)); line-height: 1.14; font-weight: 500;
  text-align: right;
}
.wa-badge:hover .wa-badge__ring { transform: scale(1.05); }

/* ============================================================= КАК ПОСТУПИТЬ */
.admission { padding: calc(92px * var(--k)) 0 calc(12px * var(--k)); }
.admission__grid {
  display: grid;
  grid-template-columns: 400fr 453fr 315fr;
  grid-template-rows: calc(235px * var(--k)) calc(205px * var(--k));
  gap: calc(16px * var(--k));
  margin-top: calc(56px * var(--k));
}
.step { display: flex; align-items: flex-start; gap: calc(16px * var(--k)); padding: calc(52px * var(--k)) calc(24px * var(--k)) 0; }
.step img { flex: none; width: calc(46px * var(--k)); height: auto; }
.step__title { margin-top: calc(4px * var(--k)); font-size: calc(32px * var(--k)); line-height: 1.15; font-weight: 500; }
.step__date { margin-top: calc(12px * var(--k)); font-size: calc(32px * var(--k)); line-height: 1.15; }
.step:nth-child(3), .step:nth-child(4) { padding-top: calc(59px * var(--k)); }

.docs {
  grid-column: 3; grid-row: 1 / 3;
  height: calc(456px * var(--k));
  padding: calc(96px * var(--k)) calc(24px * var(--k)) 0;
  border-radius: var(--r);
  background: var(--blue);
  color: var(--light);
}
.docs__title { display: flex; align-items: center; gap: calc(8px * var(--k)); font-size: calc(32px * var(--k)); line-height: 1.12; font-weight: 500; }
.docs__title img { width: calc(51px * var(--k)); height: auto; }
.docs__list { margin: calc(20px * var(--k)) 0 0 calc(9px * var(--k)); font-size: calc(24px * var(--k)); line-height: 1.08; }
.docs__list li { margin-top: calc(16px * var(--k)); }
.docs__list li::before { content: '• '; }

/* ===================================================== СТОИМОСТЬ И ОБЩЕЖИТИЕ */
.cost { padding: calc(96px * var(--k)) 0 0; }
.cost__grid { display: grid; grid-template-columns: 612fr 580fr; gap: calc(8px * var(--k)); margin-top: calc(64px * var(--k)); }
.cost__study { padding: 0 0 0 calc(7px * var(--k)); min-height: calc(596px * var(--k)); }
.cost__heading { font-size: calc(40px * var(--k)); line-height: 1; font-weight: 500; color: var(--blue-text); }
.cost__heading--light { color: var(--light); }
.cost__price { max-width: calc(470px * var(--k)); margin-top: calc(20px * var(--k)); font-size: calc(34px * var(--k)); line-height: .96; font-weight: 500; }
.cost__price + .cost__price { margin-top: calc(34px * var(--k)); }
.cost__note { margin-left: calc(41px * var(--k)); font-size: calc(32px * var(--k)); line-height: 1.2; }
.cost__note--blue { margin: calc(18px * var(--k)) 0 0 calc(27px * var(--k)); color: var(--blue-text); }
.cost__steps { display: flex; margin: calc(14px * var(--k)) 0 0 calc(41px * var(--k)); }
.cost__steps li {
  display: grid; place-items: center;
  width: calc(72px * var(--k)); height: calc(72px * var(--k));
  margin-right: calc(-35px * var(--k));
  border: calc(4px * var(--k)) solid var(--blue-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  color: var(--blue-soft);
  font-size: calc(40px * var(--k)); line-height: 1; font-weight: 500;
}
.cost__dorm { margin-right: calc(9px * var(--k)); padding: calc(82px * var(--k)) calc(57px * var(--k)) calc(50px * var(--k)); }
.cost__rooms { margin-top: calc(48px * var(--k)); color: var(--blue-text); font-size: calc(32px * var(--k)); line-height: 1.2; }
.cost__rooms li + li { margin-top: calc(9px * var(--k)); }
.cost__pay { margin-top: calc(52px * var(--k)); font-size: calc(32px * var(--k)); line-height: 1.2; }
.cost__banks { display: flex; align-items: center; gap: calc(38px * var(--k)); margin-top: calc(41px * var(--k)); }
.cost__banks img:first-child { width: calc(218px * var(--k)); }
.cost__banks img:last-child { width: calc(190px * var(--k)); }

/* =================================================== ОБРАЗОВАТЕЛЬНАЯ ПРОГРАММА */
.program { padding-top: calc(96px * var(--k)); }
.program__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16px * var(--k)); margin-top: calc(57px * var(--k)); }
.course { position: relative; height: calc(518px * var(--k)); overflow: hidden; border-radius: 30px; }
.course > img { width: 100%; height: 100%; object-fit: cover; }
.course__glass {
  position: absolute; left: 8px; right: 8px; bottom: 7px;
  min-height: calc(123px * var(--k));
  padding: calc(20px * var(--k)) calc(30px * var(--k)) calc(18px * var(--k));
  border-radius: 30px;
  background: rgba(190, 190, 190, .28);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  color: #fff;
  font-size: calc(24px * var(--k)); line-height: 1.13;
}
.course__glass b { display: block; margin-bottom: calc(6px * var(--k)); font-size: calc(32px * var(--k)); line-height: 1.2; font-weight: 500; }

/* =========================================================== БЛОГ ДИРЕКТОРА */
.director { padding: calc(93px * var(--k)) 0 calc(33px * var(--k)); }
.director__grid { display: grid; grid-template-columns: 330fr 428fr 409fr; column-gap: calc(16.5px * var(--k)); }
.director__col { display: flex; flex-direction: column; gap: calc(16px * var(--k)); min-width: 0; }
.director__badge {
  position: relative;
  height: calc(425px * var(--k));
  padding: calc(258px * var(--k)) calc(40px * var(--k)) 0;
  border-radius: var(--r);
  background: #ececec;
}
.director__title { position: relative; z-index: 1; font-size: calc(48px * var(--k)); line-height: 1.14; font-weight: 700; color: var(--dark); }
.emoji {
  position: absolute;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
}
.emoji img { width: 51%; }
.emoji--pc   { top: calc(55px * var(--k));  left: calc(136px * var(--k)); width: calc(84px * var(--k));  height: calc(84px * var(--k));  box-shadow: 2px 2.7px 2px -.7px rgba(0, 0, 0, .1); }
.emoji--love { top: calc(114px * var(--k)); left: calc(43px * var(--k));  width: calc(96px * var(--k));  height: calc(96px * var(--k));  box-shadow: 2.3px 3px 2px -.8px rgba(0, 0, 0, .1); }
.emoji--fire { top: calc(167px * var(--k)); left: calc(157px * var(--k)); width: calc(127px * var(--k)); height: calc(127px * var(--k)); box-shadow: 3px 4px 3px -1px rgba(0, 0, 0, .1); }
.emoji--love img { width: 61%; }
.emoji--pc img { width: 63%; }
.director__rose { height: calc(501px * var(--k)); }
.director__main { height: calc(463px * var(--k)); }
.director__text { font-size: calc(18px * var(--k)); line-height: 1.55; color: var(--dark); }
.director__text--a { padding: calc(49px * var(--k)) calc(30px * var(--k)) calc(13px * var(--k)) calc(32px * var(--k)); min-height: calc(263px * var(--k)); }
.director__text--b { padding: calc(47px * var(--k)) calc(18px * var(--k)) 0 calc(29px * var(--k)); line-height: 1.44; }
.director__text--b p + p { margin-top: calc(26px * var(--k)); }
.director__text--c { padding: calc(40px * var(--k)) calc(25px * var(--k)) 0 calc(32px * var(--k)); }
.director__name-row { display: flex; gap: calc(16px * var(--k)); height: calc(260px * var(--k)); }
.director__portrait { flex: 205; min-width: 0; }
.director__name {
  flex: 189; min-width: 0;
  display: flex; justify-content: flex-end; align-items: flex-end;
  padding: 0 calc(20px * var(--k)) calc(32px * var(--k)) 0;
  border-radius: var(--r);
  background: var(--blue);
  color: #fff;
  font-size: calc(32px * var(--k)); line-height: 1.25; font-weight: 500;
}
.director__name span { writing-mode: vertical-rl; transform: rotate(180deg); }

/* ================================================================= ЛИЦЕНЗИЯ */
.license { padding: calc(72px * var(--k)) 0 calc(70px * var(--k)); }
.license__title { line-height: 1; }
.license__sub { margin-top: calc(15px * var(--k)); font-size: calc(34px * var(--k)); line-height: 1.12; }
.btn--license {
  width: calc(579px * var(--k)); height: calc(89px * var(--k));
  margin-top: calc(42px * var(--k));
  padding-left: calc(45px * var(--k));
  border: 1px solid var(--blue);
  border-radius: 37px;
  background: var(--light);
  color: #282828;
  font-size: calc(29px * var(--k));
}
.btn--license .btn__circle { width: calc(93px * var(--k)); background: var(--blue); color: #fff; }
.btn--license .btn__circle svg { width: calc(39px * var(--k)); height: calc(38px * var(--k)); }
.btn--license:hover { box-shadow: 0 6px 18px rgba(99, 138, 237, .25); }

/* ====================================================================== FAQ */
.faq { padding: calc(28px * var(--k)) 0 calc(68px * var(--k)); background: var(--gray); }
.faq .h2 { line-height: 1; }
.faq__grid { display: grid; grid-template-columns: 486fr 690fr; gap: calc(24px * var(--k)); margin-top: calc(59px * var(--k)); }
.faq__photos { display: flex; flex-direction: column; gap: calc(16px * var(--k)); }
.faq__photos img:first-child { height: calc(597px * var(--k)); }
.faq__photos img:last-child { height: calc(352px * var(--k)); }
.faq__list { padding-top: calc(25px * var(--k)); }
.faq__list > div + div { margin-top: calc(21px * var(--k)); }
.faq__list dt { font-size: calc(32px * var(--k)); line-height: 1.5; font-weight: 500; }
.faq__list dd { font-size: calc(22px * var(--k)); line-height: 2.18; }
/* в макете у длинного вопроса ответ отбит пустой строкой */
.faq__list > div:nth-child(5) dt { line-height: 1.25; }
.faq__list > div:nth-child(5) dd { margin: calc(25px * var(--k)) 0 calc(23px * var(--k)); }

/* =================================================================== ПОДВАЛ */
.footer { padding: calc(120px * var(--k)) 0 calc(104px * var(--k)); background: var(--dark); color: var(--light); }
.footer__grid { display: grid; grid-template-columns: 1fr calc(514px * var(--k)); gap: calc(40px * var(--k)); }
.footer__brand { width: calc(560px * var(--k)); height: auto; margin: calc(-20px * var(--k)) 0 calc(21px * var(--k)) calc(-20px * var(--k)); }
.footer__row {
  display: flex; align-items: center; gap: calc(32px * var(--k));
  font-size: calc(32px * var(--k)); line-height: 1.5;
}
.footer__row:first-of-type { margin-top: calc(65px * var(--k)); }
.footer__row + .footer__row { margin-top: calc(28px * var(--k)); }
.footer__row:hover { color: #fff; }
.footer__social { display: flex; align-items: center; gap: calc(56px * var(--k)); margin-top: calc(53px * var(--k)); }
.footer__icons { display: flex; }
.footer__ask { display: flex; align-items: center; gap: calc(16px * var(--k)); max-width: calc(360px * var(--k)); font-size: calc(32px * var(--k)); line-height: 1; }
.footer__ask-icon {
  flex: none; display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 24px;
  background: var(--paper);
  color: var(--blue-link);
}
.footer__ask-icon svg { width: 17px; height: 27px; }
.footer__links { margin-top: calc(96px * var(--k)); font-size: calc(32px * var(--k)); line-height: 1.5; }
.footer__links li + li { margin-top: calc(31px * var(--k)); }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__map { align-self: start; }
.footer__map > a:first-child { display: block; }
.footer__map .photo { height: auto; aspect-ratio: 1; }
.btn--route {
  justify-content: center;
  width: 100%; height: calc(88px * var(--k));
  margin-top: 16px;
  border-radius: 27px;
  background: var(--paper);
  color: var(--blue-link);
  font-size: calc(32px * var(--k));
}

/* ==================================================================== ПОПАП */
.popup { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.popup__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s ease; }
.popup__box {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 32px); overflow: auto;
  padding: 48px 44px 40px;
  border-radius: var(--r);
  background: #fff;
  animation: pop .25s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.popup__close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; padding: 9px; color: var(--dark); border-radius: 50%; }
.popup__close:hover { background: #f0f0f0; }

.lead__title { font-size: 34px; line-height: 1.1; font-weight: 500; color: var(--dark); padding-right: 30px; }
.lead__sub { margin-top: 12px; font-size: 18px; line-height: 1.4; color: #555; }
.lead__field { display: block; margin-top: 22px; }
.lead__field span { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 500; }
.lead__field input {
  width: 100%; height: 60px;
  padding: 0 22px;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  background: var(--paper);
  font: inherit; font-size: 18px;
  transition: border-color .2s ease, background-color .2s ease;
}
.lead__field input:focus { outline: none; border-color: var(--blue); background: #fff; }
.lead__field input[aria-invalid="true"] { border-color: #e5484d; }
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead__submit { width: 100%; margin-top: 28px; }
.lead__submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.lead__status { min-height: 22px; margin-top: 10px; font-size: 15px; color: #e5484d; }
.lead__legal { font-size: 13px; line-height: 1.4; color: #888; }
.lead__legal a { text-decoration: underline; }
.lead__done .btn { margin-top: 28px; }

/* ========================================================================
   Узкий десктоп: всё пропорционально уменьшается
   ======================================================================== */
@media (max-width: 1199px) {
  :root { --k: .9; --r: 36px; }
}
@media (max-width: 1099px) {
  :root { --k: .8; --r: 32px; }
  .hero__title { font-size: 42px; }
}

/* ========================================================================
   Мобильная раскладка (< 960px). Макет Tilda для 343px, ширина колонки
   растягивается до 600px.
   ======================================================================== */
@media (max-width: 959px) {
  :root { --k: 1; --r: 23px; --container: 600px; }
  .container { width: min(var(--container), 100% - 32px); }
  .h2 { font-size: 32px; line-height: 1.1; }

  /* --- первый экран */
  .hero { padding: 8px 0 12px; }
  .hero__inner { width: min(var(--container), 100% - 32px); height: auto; display: flex; flex-direction: column; gap: 10px; }
  .hero__bar {
    position: static;
    align-items: center; justify-content: space-between;
    height: 55px; padding: 0 16px;
    border: 1px solid #000; border-radius: 20px;
  }
  .hero__logo img { width: 142px; margin: 0 0 0 -5px; }
  .hero__contacts { display: none; }
  .hero__burger { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; width: 44px; height: 44px; justify-content: center; }
  .hero__burger span { display: block; width: 29px; height: 4px; border-radius: 2px; background: #fff; }
  .hero__burger span:nth-child(2) { width: 23px; }

  .hero__hands { display: none; }
  .hero__body {
    position: relative; top: auto; left: auto; width: auto;
    display: grid; grid-template-columns: 1fr 61px; gap: 0 10px;
    padding: 18px 16px 28px;
    border: 1px solid #000; border-radius: 30px;
  }
  .hero__prep {
    position: static;
    width: auto; height: 61px;
    padding: 0 20px;
    justify-items: start;
    border-radius: 30px;
    font-size: 15px; line-height: 1.2; text-align: left;
  }
  .hero__ask-sq {
    display: grid; place-items: center;
    width: 61px; height: 61px;
    border-radius: 23px;
    background: var(--paper);
    color: var(--blue-link);
  }
  .hero__ask-sq svg { width: 17px; height: 27px; }
  .hero__hands-m { display: block; grid-column: 1 / -1; width: calc(100% + 32px); max-width: none; margin: 24px -16px 0; }
  .hero__title, .hero__sub, .hero__actions { grid-column: 1 / -1; }
  .hero__title { margin-top: 12px; font-size: clamp(24px, 6.2vw, 34px); line-height: 1.33; }
  .hero__sub { margin-top: 10px; font-size: 14px; line-height: 1.29; }
  .hero__actions { flex-direction: column-reverse; gap: 11px; margin-top: 22px; }
  .hero__actions .btn {
    width: 100%; height: 62px;
    padding-left: 20px;
    border-radius: 26px;
    font-size: 15px;
  }
  .btn--light { background: var(--blue); color: var(--light); }
  .btn--light .btn__circle { display: grid; width: 66px; background: var(--light); color: var(--blue); }
  .btn--outline .btn__circle { width: 66px; }
  .btn__circle svg { width: 25px; height: 24px; }
  .hero__ask { display: none; }

  /* --- специальности */
  .specs { padding: 48px 0 40px; }
  .specs__grid { flex-direction: column; gap: 44px; margin-top: 40px; padding-left: 20px; }
  .spec:nth-child(3) { order: -1; }
  .spec:first-child { order: -2; }
  .spec, .spec:nth-child(4) { width: auto; min-height: 0; margin: 0; padding: 0; }
  .spec__img, .spec__img--tall, .spec__img--build { width: 100px; margin: 0 0 26px -10px; }
  .spec__img--tall { width: 86px; margin-left: 0; }
  .spec__img--build { width: 112px; }
  .spec__title { min-height: 0; max-width: 240px; font-size: 18px; line-height: 1.2; }
  .spec__role { margin-top: 8px; gap: 6px; font-size: 15px; }
  .spec__role svg { width: 14px; height: 14px; }
  .spec__text { max-width: 240px; font-size: 15px; line-height: 1.4; }

  /* --- карточки */
  .card, .training__schedule { padding: 24px; }
  .card__title { font-size: 17px; line-height: 1.15; }
  .card__text { margin-top: 12px; font-size: 13px; }

  /* --- тренинг-центр */
  .training { padding-top: 56px; }
  .training__grid { grid-template-columns: 1fr; gap: 10px; }
  .training__col { gap: 10px; }
  .training .h2 { font-size: 24px; line-height: 1.2; }
  .training__lead { margin: 14px 0 14px; font-size: 14px; line-height: 1.4; }
  .training__group { height: auto; aspect-ratio: 343 / 149; }
  .training__row { gap: 10px; }
  .training__schedule { flex: 0 0 48%; min-height: 150px; }
  .training__photos { height: auto; aspect-ratio: 343 / 183; }
  .training__price .card__text:not(.card__text--light) { color: var(--blue-soft); }
  .training__price .card__text--light { font-weight: 400; }
  .wa-badge { height: 102px; margin: 0; }
  .wa-badge__ring { width: 102px; height: 102px; }
  .wa-badge__ring svg { width: 45px; height: 45px; }
  .wa-badge__label { top: 8px; right: 58px; padding: 4px 14px 6px 4px; font-size: 14px; line-height: 1.2; }

  /* --- как поступить */
  .admission { padding: 56px 0 0; }
  .admission__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 64px; margin-top: 44px; padding-left: 8px; }
  .admission .docs { margin-left: -8px; }
  .step, .step:nth-child(3), .step:nth-child(4) { padding: 0; gap: 10px; }
  .step:nth-child(2) { order: 3; }
  .step:nth-child(4) { order: 4; }
  .step img { width: 28px; }
  .step__title { margin-top: 2px; font-size: 18px; line-height: 1.09; }
  .step__date { margin-top: 10px; font-size: 16px; line-height: 1; }
  .docs { grid-column: auto; grid-row: auto; order: 5; height: auto; padding: 24px 16px 28px; }
  .docs__title { font-size: 18px; }
  .docs__title img { width: 28px; }
  .docs__list { margin: 4px 0 0 36px; font-size: 16px; line-height: 1; }
  .docs__list li { margin-top: 8px; }

  /* --- стоимость */
  .cost { padding-top: 64px; }
  .cost__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .cost__dorm { margin-right: 0; }
  .cost__study { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: 0 0 0 8px; }
  .cost__steps { order: 3; }
  .cost__heading { font-size: 20px; }
  .cost__price { max-width: 300px; margin-top: 14px; font-size: 15px; line-height: 1; }
  .cost__price + .cost__price { margin-top: 14px; }
  .cost__note, .cost__note--blue { margin: 12px 0 0; font-size: 15px; line-height: 1.3; }
  .cost__note--blue { order: 2; }
  .cost__steps { margin: 14px 0 0; }
  .cost__steps li { width: 44px; height: 44px; margin-right: -15px; border-width: 2.5px; font-size: 28px; }
  .cost__dorm { padding: 32px 24px 36px; }
  .cost__rooms { margin-top: 26px; font-size: 15px; }
  .cost__rooms li + li { margin-top: 6px; }
  .cost__pay { margin-top: 24px; font-size: 15px; }
  .cost__banks { gap: 24px; margin-top: 22px; }
  .cost__banks img:first-child { width: 136px; }
  .cost__banks img:last-child { width: 118px; }

  /* --- программа */
  .program { padding-top: 64px; }
  .program__grid { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .course { height: auto; aspect-ratio: 343 / 455; border-radius: var(--r); }
  .course__glass { min-height: 0; padding: 16px 22px 18px; border-radius: var(--r); font-size: 16px; line-height: 1.2; }
  .course__glass b { margin-bottom: 4px; font-size: 24px; line-height: 1; }

  /* --- блог директора */
  .director { padding: 32px 0 0; }
  .director__grid { grid-template-columns: 1fr; }
  .director__col { display: contents; }
  .director__badge { order: 1; height: auto; aspect-ratio: 343 / 375; padding: 0 32px 40px; display: flex; align-items: flex-end; }
  .director__title { font-size: clamp(40px, 12vw, 56px); line-height: 1.18; }
  .emoji--pc   { top: 7%;  left: 51%; width: 26%; height: auto; aspect-ratio: 1; }
  .emoji--love { top: 25%; left: 8%;  width: 29%; height: auto; aspect-ratio: 1; }
  .emoji--fire { top: 35%; left: 44%; width: 38%; height: auto; aspect-ratio: 1; }
  .director__text { font-size: 14px; line-height: 1.43; }
  .director__text--b { order: 2; padding: 40px 32px 32px; }
  .director__text--b p + p { margin-top: 20px; }
  .director__rose { display: none; }
  .director__main { order: 3; height: auto; aspect-ratio: 343 / 415; }
  .director__text--a { order: 4; min-height: 0; padding: 40px 32px; }
  .director__name-row { order: 5; height: auto; aspect-ratio: 343 / 260; gap: 8px; }
  .director__portrait { flex: 184; }
  .director__name { flex: 151; padding: 0 22px 32px 0; }
  .director__text--c { order: 6; padding: 40px 32px 0; }

  /* --- лицензия */
  .license { padding: 64px 0 56px; }
  .license__title { font-size: 32px; line-height: 1.1; }
  .license__sub { margin-top: 18px; font-size: 15px; line-height: 1.3; max-width: 330px; }
  .btn--license {
    width: 100%; height: 69px;
    margin-top: 32px; padding-left: 27px;
    border-color: var(--blue); border-radius: 30px;
    background: var(--blue); color: var(--light);
    font-size: 16px;
  }
  .btn--license .btn__circle { width: 73px; background: var(--light); color: var(--blue); }
  .btn--license .btn__circle svg { width: 30px; height: 29px; }

  /* --- FAQ */
  .faq { padding: 40px 0 32px; }
  .faq .h2 { font-size: 32px; line-height: 1.1; }
  .faq__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .faq__photos { order: 2; }
  .faq__photos img:first-child { height: auto; aspect-ratio: 343 / 369; }
  .faq__photos img:last-child { display: none; }
  .faq__list { padding: 0; }
  .faq__list > div + div { margin-top: 26px; }
  .faq__list dt { font-size: 18px; line-height: 1.3; }
  .faq__list dd, .faq__list > div:nth-child(5) dd { margin: 12px 0 0; font-size: 15px; line-height: 1.3; }
  .faq__list > div:nth-child(5) dt { line-height: 1.3; }

  /* --- подвал */
  .footer { padding: 56px 0 40px; }
  .footer__grid { grid-template-columns: 1fr; gap: 0; }
  .footer__info { display: contents; }
  .footer__brand { order: 1; width: min(330px, 100%); margin: -10px 0 0 -11px; }
  .footer__row { order: 2; gap: 18px; font-size: 18px; line-height: 1.55; }
  .footer__row:first-of-type { margin-top: 52px; }
  .footer__row + .footer__row { margin-top: 12px; }
  .footer__row .icon-btn { width: 36px; height: 36px; border-radius: 13.6px; }
  .footer__row .icon-btn svg { width: 15px; height: 15px; }
  .footer__map { order: 3; margin-top: 28px; }
  .btn--route { height: 58px; margin-top: 10px; font-size: 21px; }
  .footer__social { order: 4; gap: 22px; margin-top: 44px; }
  .footer__icons .icon-btn { width: 45px; height: 45px; border-radius: 17px; }
  .footer__icons .icon-btn svg { width: 18px; height: 18px; }
  .footer__ask { gap: 12px; font-size: 18px; }
  .footer__ask-icon { width: 44px; height: 44px; border-radius: 17px; }
  .footer__ask-icon svg { width: 12px; height: 19px; }
  .footer__links { order: 5; margin-top: 44px; font-size: 18px; line-height: 1.76; }
  .footer__links li + li { margin-top: 6px; }

  /* --- попап */
  .popup__box { padding: 40px 24px 28px; }
  .lead__title { font-size: 28px; }
  .lead__sub { font-size: 16px; }
}

@media (max-width: 479px) {
  .specs__grid { padding-left: 20px; }
}

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