:root {
  --ink:  #0F1E2B;
  --mut:  #5C6B78;
  --pale: #8B98A4;
  --bg:   #F7F5F1;
  --sky:  #1F86C4;
  --amb:  #E0832A;
  --wing: #C8D64A;
  /* Ширина контента секций под шапкой (задачи 6+). Медиа-запросы не умеют брать
     число из custom property, поэтому точка перестроения 640px по-прежнему
     захардкожена в @media ниже, а не здесь — но обе величины объявлены рядом
     (см. комментарий над @media), чтобы новые секции не заводили своих чисел. */
  --sec-max: 1200px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;
  /* якорь для абсолютно спозиционированных трека и крыла полёта (ниже) */
  position: relative;
}
/* height: auto — у картинок проставлены width/height (браузер заранее резервирует
   место и страница не прыгает при загрузке); без auto высота из атрибута
   растянула бы картинки, которым стили задают только ширину. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Движение отключено — показываем всё статично. Не благотворительность:
   при укачивании и мигрени анимации делают страницу непригодной. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ——— ШАПКА ——— */
.hero { position: relative; height: 570px; overflow: hidden; }
.hero-shot { position: absolute; inset: 0; }
.hero-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* медленный наезд смягчает мягковатость фото 1920px на больших экранах (спецификация,
     раздел «Риски») — вместе с растворением внизу, не вместо него. 28с специально медленно,
     глаз не должен зацепиться за движение. Гасится глобальным prefers-reduced-motion. */
  animation: hero-kb 28s ease-in-out infinite alternate;
}
@keyframes hero-kb {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}

/* растворение фото в фоне страницы */
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: linear-gradient(180deg, rgba(247,245,241,0) 0%, rgba(247,245,241,.55) 52%,
              var(--bg) 100%);
}
.hero-scrim {
  position: absolute; left: 0; bottom: 0; width: 72%; height: 78%;
  background: linear-gradient(28deg, rgba(10,22,32,.78) 0%, rgba(10,22,32,.34) 46%,
              rgba(10,22,32,0) 78%);
}
.hero-topfade {
  position: absolute; left: 0; right: 0; top: 0; height: 130px;
  background: linear-gradient(180deg, rgba(10,22,32,.5), rgba(10,22,32,0));
}

.hero-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7; display: flex;
  justify-content: space-between; align-items: center; padding: 18px 28px;
}
.hero-top b { color: #fff; font-size: 13px; letter-spacing: .12em; }
.hero-langs { display: flex; align-items: center; gap: 16px; }
/* :not(.hero-wa), а не просто .hero-langs a — иначе специфичность этого правила
   (два класса) выше специфичности .hero-wa (один класс) и перебивает её цвет
   независимо от порядка в файле: белый текст на белой кнопке, кнопка пустая на вид. */
.hero-langs a:not(.hero-wa) { color: rgba(255,255,255,.8); font-size: 11.5px; }
.hero-langs a[aria-current] { color: #fff; font-weight: 700; }
.hero-wa {
  background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 16px;
  font-size: 11.5px; font-weight: 700;
}

.hero-body { position: absolute; left: 30px; right: 30px; bottom: 112px; z-index: 6; }
.hero-kicker {
  font: 700 10px Helvetica, Arial, sans-serif; letter-spacing: .28em; color: #FFC078;
  margin-bottom: 15px;
  /* Заголовок рядом несёт такую же подсветку. Надпись мелкая и разрежена
     межбуквенным интервалом, поэтому на светлом небе без неё тонет. */
  text-shadow: 0 1px 2px rgba(10, 22, 32, .95), 0 0 6px rgba(10, 22, 32, .85),
               0 0 18px rgba(10, 22, 32, .6);
}
/* Одна строка жирным — заказчик убрал двухстрочный слоган и подзаголовок.
   max-width держит перенос по смыслу, а не по краю экрана. */
.hero h1 {
  margin: 0 0 24px; max-width: 880px; font: 700 56px/1.04 Helvetica, Arial, sans-serif; color: #fff;
  letter-spacing: -.03em; text-shadow: 0 2px 30px rgba(0,0,0,.4);
}

.btn-amber {
  display: inline-block; background: var(--amb); color: #fff; border-radius: 999px;
  padding: 14px 30px; font-size: 13.5px; font-weight: 700;
}
.btn-ghost {
  display: inline-block; border: 1px solid rgba(255,255,255,.55); color: #fff; border-radius: 999px;
  padding: 14px 26px; font-size: 13.5px; font-weight: 600; margin-left: 9px;
}

/* ——— ОБЩЕЕ ДЛЯ СЕКЦИЙ ПОД ШАПКОЙ (задачи 6+) ——— */
.sec {
  padding: 46px 30px; border-top: 1px solid rgba(15,30,43,.09);
  max-width: var(--sec-max); margin: 0 auto; position: relative;
}
#tariffs { border-top: 0; padding-top: 34px; }
.wp { display: flex; align-items: baseline; gap: 13px; margin: 0 0 14px; }
.wp-h { font: 700 11px Helvetica, Arial, sans-serif; letter-spacing: .18em; color: var(--amb); min-width: 76px; white-space: nowrap; }
/* h2: заголовки разделов — настоящие заголовки для поисковиков, вид прежний. */
.wp-t { margin: 0; font: 300 28px Helvetica, Arial, sans-serif; color: var(--ink); letter-spacing: -.015em; }
.lead { margin: -4px 0 24px; font-size: 13.5px; line-height: 1.6; color: var(--mut); max-width: 520px; }

/* ——— ТАРИФЫ ——— */
.tf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tf-card {
  background: #fff; border-radius: 18px; box-shadow: 0 2px 12px rgba(15,30,43,.07);
  padding: 46px 22px 24px; position: relative; display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.tf-card:hover { transform: translateY(-7px); box-shadow: 0 16px 34px rgba(15,30,43,.15); }
.tf-tag {
  position: absolute; top: 16px; left: 22px; background: var(--amb); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; padding: 6px 13px;
  border-radius: 999px; box-shadow: 0 3px 10px rgba(224,131,42,.4);
}
.tf-dur { font-size: 10px; letter-spacing: .16em; color: var(--pale); text-transform: uppercase; }
.tf-price { font: 200 35px Helvetica, Arial, sans-serif; margin: 9px 0 3px; color: var(--ink); }
.tf-list { list-style: none; margin: 16px 0 20px; padding: 0; }
.tf-list li {
  font-size: 13px; line-height: 1.5; color: var(--mut); padding-left: 21px; position: relative;
  margin-bottom: 10px;
}
.tf-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 2px; background: var(--amb);
}
.tf-list li small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--pale); margin-top: 3px; }
.tf-note {
  margin: 0 0 20px; padding: 11px 13px; border-radius: 11px; background: #FDF1E2;
  font-size: 12px; line-height: 1.45; color: #7A5526;
}
.tf-go {
  display: block; text-align: center; border: 1px solid rgba(15,30,43,.18); color: var(--ink);
  border-radius: 999px; padding: 12px; font-size: 12.5px; font-weight: 600; margin-top: auto;
}
.tf-hot { background: var(--ink); }
.tf-hot .tf-dur { color: #8FA3B2; }
.tf-hot .tf-price { color: #fff; }
.tf-hot .tf-list li { color: #C2CFD9; }
.tf-hot .tf-list li::before { background: #FFC178; }
.tf-hot .tf-list li small { color: #8FA3B2; }
.tf-hot .tf-go { background: var(--amb); color: #fff; border-color: var(--amb); }

/* ——— СЕРТИФИКАТ ——— */
.cert {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 0; border-radius: 20px;
  overflow: hidden; background: #fff; box-shadow: 0 2px 16px rgba(15,30,43,.09);
}
.cert-art { background: linear-gradient(160deg,#E8F1F7 0%,#DCE9F2 100%); padding: 22px 22px 18px; }
.cert-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.cert-tab {
  font: 600 12px Helvetica, Arial, sans-serif; border: 1px solid rgba(15,30,43,.15);
  background: rgba(255,255,255,.65); color: var(--mut); border-radius: 999px;
  padding: 8px 18px; cursor: pointer; transition: all .2s ease;
}
.cert-tab.is-sel { background: var(--ink); color: #fff; border-color: var(--ink); }

/* .cert-back лежит вторым слоем открытки и грузится лениво (loading="lazy") —
   это декоративный сдвинутый снимок под первым фото, отдельный текст ему не нужен. */
.cert-stack { position: relative; padding-bottom: 4px; }
.cert-stack img { width: 100%; display: block; border-radius: 10px; }
.cert-back {
  position: absolute; left: 4%; top: 14px; width: 92%;
  transform: rotate(-2.4deg); filter: brightness(.9);
  box-shadow: 0 6px 18px rgba(15,30,43,.2); transition: all .45s cubic-bezier(.2,.7,.3,1);
}
.cert-front { position: relative; box-shadow: 0 14px 34px rgba(15,30,43,.28); transition: all .45s cubic-bezier(.2,.7,.3,1); }

.cert-info { padding: 30px 30px 28px; display: flex; flex-direction: column; }
.cert-kicker { font: 700 10px Helvetica, Arial, sans-serif; letter-spacing: .28em; color: var(--amb); }
.cert-title { margin: 10px 0 10px; font: 200 30px Helvetica, Arial, sans-serif; color: var(--ink); }
.cert-lead { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--mut); }
.cert-banner {
  margin: 0 0 16px; padding: 11px 13px; border-radius: 11px; background: #FDF1E2;
  font-size: 12px; line-height: 1.45; color: #7A5526; font-weight: 600;
}
.cert-season { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 20px; }
.cert-season-tile { background: #F4F7F9; border-radius: 12px; padding: 12px 14px; }
.cert-season-label {
  display: block; font-size: 11px; letter-spacing: .06em; color: var(--sky);
  text-transform: uppercase; margin-bottom: 4px;
}
.cert-season-value { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.cert-list { list-style: none; margin: 0 0 22px; padding: 0; }
.cert-list li {
  font-size: 13px; line-height: 1.5; color: var(--mut); padding-left: 21px;
  position: relative; margin-bottom: 8px;
}
.cert-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 2px; background: var(--amb);
}
.cert-list li small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--pale); margin-top: 3px; }
.cert-buy {
  margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(15,30,43,.1);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.cert-price { font: 200 33px Helvetica, Arial, sans-serif; color: var(--ink); }
.cert-term { font-size: 11.5px; color: var(--pale); margin-top: 3px; max-width: 210px; line-height: 1.4; }

/* ——— ВЫСОТОМЕР (прилипающий блок слева) ——— */
.hud-wrap { position: sticky; top: 16px; z-index: 20; height: 0; }
.hud {
  position: absolute; top: 62px; left: 28px; text-align: left;
  transition: padding .3s ease, background .3s ease;
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 14px; padding: 11px 15px;
  box-shadow: 0 6px 24px rgba(10,30,45,.18);
}
.hud-l { font: 700 8.5px Helvetica, Arial, sans-serif; letter-spacing: .2em; color: var(--pale); }
.hud-v { font: 200 25px Helvetica, Arial, sans-serif; color: var(--ink); margin-top: 3px; }
.hud-v u { text-decoration: none; font-size: 11px; color: var(--amb); }
.hud-vs { font: 700 10px Helvetica, Arial, sans-serif; color: var(--sky); margin-top: 3px; }

/* ——— ТРЕК И КРЫЛО ПОЛЁТА (задача 8 оживит через JS) ——— */
.rail { position: absolute; left: 24px; top: 570px; bottom: 300px; width: 56px; z-index: 4; }
.rail svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wing {
  position: absolute; left: 0; top: 0; width: 40px; margin-left: -20px; margin-top: -13px;
  z-index: 6; will-change: transform;
  /* Левый край нулевой позиции (0 - половина ширины) уходил за экран, пока JS не
     успевал написать свой translate — а без JS (задача 8, п.8) или при
     prefers-reduced-motion он и не напишет никогда. Задаём базовый transform тем же
     приёмом, что и flight.js: центр крыла ставим туда, где начинается трек
     (левый край рельса + начало flight-path), так что крыло всегда внутри экрана. */
  transform: translate(52px, 590px);
}
.wing-in { display: block; animation: wing-bank 5.5s ease-in-out infinite; transform-origin: 50% 82%; }
.wing svg { position: static; width: 100%; height: auto; filter: drop-shadow(0 4px 9px rgba(15,30,43,.3)); }
@keyframes wing-bank { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
/* над тёмным подвалом крыло перекрашивается в задаче 8, иначе сливается с фоном */
.wing .pilot ellipse, .wing .legs, .wing .wing-fly path, .wing .wing-down path {
  transition: fill .3s ease, stroke .3s ease;
}
.wing.overdark .pilot ellipse { fill: #fff; }
.wing.overdark .legs { stroke: #fff; }
.wing.overdark .wing-fly path:first-child { fill: var(--amb); }
.wing.overdark .wing-down path { fill: var(--amb); }
.wing.landed .wing-fly { opacity: 0; }
.wing.landed .wing-down { opacity: 1; }
.wing.landed .legs { opacity: 1; }
.wing.landed .wing-in { animation: none; transform: none; }
.wing-down { opacity: 0; transition: opacity .5s ease .2s; }
.legs { opacity: 0; transition: opacity .3s ease .3s; }

/* содержимое под шапкой сдвинуто вправо, чтобы не наезжать на трек */
.lf-body { padding-left: 96px; }

/* ——— КАК ЭТО ПРОИСХОДИТ: профиль высоты и шаги ——— */
.profile {
  background: #fff; border-radius: 18px; padding: 14px 10px 6px; margin-bottom: 14px;
  box-shadow: 0 2px 12px rgba(15,30,43,.07);
}
.profile svg { width: 100%; height: auto; display: block; overflow: visible; }
.profile-dots circle { fill: #fff; stroke: #1F86C4; stroke-width: 2.4; }
.profile-wing { filter: drop-shadow(0 2px 4px rgba(15,30,43,.35)); }

.steps5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.stp {
  background: #fff; border-radius: 16px; padding: 18px 16px 16px; position: relative;
  box-shadow: 0 2px 12px rgba(15,30,43,.07);
}
.stp i {
  display: inline-block; font: 700 10px Helvetica, Arial, sans-serif; font-style: normal;
  letter-spacing: .12em; color: var(--sky); background: #EAF4FA; border-radius: 999px;
  padding: 4px 9px; margin-bottom: 11px;
}
.stp b { display: block; font-size: 13.5px; margin-bottom: 6px; line-height: 1.3; }
.stp p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.stp em {
  display: inline-block; font-style: normal; margin-top: 10px; font-size: 10.5px;
  font-weight: 700; letter-spacing: .08em; color: var(--amb); background: #FDF1E2;
  border-radius: 999px; padding: 4px 10px;
}

/* ——— КОМАНДА ——— */
/* Три пилота: на компьютере в ряд, фото над текстом — рядом с текстом при трёх
   колонках оно сжалось бы в марку. На планшете (641–960px) три колонки слишком
   узки, там карточки идут друг под другом в прежнем виде: фото слева.
   На телефоне — друг под другом, фото сверху (см. @media 640px). */
.team-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.team-card {
  background: #fff; border-radius: 20px; box-shadow: 0 2px 14px rgba(15,30,43,.08);
  display: grid; grid-template-columns: 1fr; align-content: start; gap: 18px; padding: 18px;
}
.team-photo {
  position: relative; background: #DDE6EC; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 14px; align-self: start;
}
@media (min-width: 641px) and (max-width: 960px) {
  .team-row { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 200px 1fr; }
  .team-photo { aspect-ratio: 3 / 4; }
}
/* Сдвиг вверх: на вертикальных портретах голова в верхней трети кадра. */
.team-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.team-body { padding: 0; min-width: 0; }
.team-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 13px; }
.team-name { font-size: 16px; font-weight: 600; }
.team-role { font-size: 11.5px; color: var(--pale); margin-top: 3px; }
.team-badge {
  font: 700 9.5px Helvetica, Arial, sans-serif; letter-spacing: .06em; color: var(--sky);
  background: #EAF4FA; border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.team-stats {
  display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 0 13px;
  border-top: 1px solid rgba(15,30,43,.09); border-bottom: 1px solid rgba(15,30,43,.09); margin-bottom: 13px;
}
.team-stats span { font-size: 10.5px; line-height: 1.35; color: var(--pale); }
.team-stats u {
  display: block; text-decoration: none; font: 200 21px Helvetica, Arial, sans-serif;
  color: var(--ink); margin-bottom: 3px;
}
.team-list { list-style: none; margin: 0 0 13px; padding: 0; }
.team-list li {
  font-size: 12.5px; line-height: 1.5; color: var(--mut); padding-left: 19px;
  position: relative; margin-bottom: 7px;
}
.team-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 2px; background: var(--amb);
}
.team-link { font-size: 11.5px; font-weight: 600; color: var(--sky); }
.team-link:hover, .team-link:focus-visible { text-decoration: underline; }

/* ——— ПОЧЕМУ БЕЗОПАСНО ——— */
.therm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.therm-col {
  position: absolute; bottom: -14px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(224,131,42,.32); animation: therm-rise linear infinite;
}
@keyframes therm-rise {
  0% { transform: translateY(0) scale(.4); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-320px) scale(2); opacity: 0; }
}
.sec > *:not(.therm) { position: relative; z-index: 1; }

.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.bigproof {
  position: relative; border-radius: 20px; overflow: hidden; height: 330px;
  margin-bottom: 14px; background: #DDE6EC;
}
.bigproof img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.bp-grad {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,18,28,.88) 0%, rgba(8,18,28,.62) 38%,
              rgba(8,18,28,.12) 66%, rgba(8,18,28,0) 100%);
}
.bp-tx { left: 32px; right: 32px; bottom: 28px; max-width: 470px; }
.bp-tx b { font-size: 24px; margin-bottom: 10px; }
.bp-tx p { font-size: 13.5px; }

.pcard {
  position: relative; border-radius: 18px; overflow: hidden; height: 330px;
  background: #DDE6EC; box-shadow: 0 2px 12px rgba(15,30,43,.09);
}
.pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,18,28,0) 34%, rgba(8,18,28,.62) 62%, rgba(8,18,28,.93) 100%);
}
.pc-body { position: absolute; left: 20px; right: 20px; bottom: 19px; color: #fff; }
.pc-body b { display: block; font-size: 15px; margin-bottom: 8px; line-height: 1.25; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.pc-body p {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.84);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.pc-link { display: inline-block; margin-top: 11px; font-size: 11.5px; font-weight: 600; color: #7FC8E8; }
.pc-link:hover, .pc-link:focus-visible { text-decoration: underline; }

/* ——— ОТЗЫВЫ ——— */
.rv-row { display: flex; flex-wrap: wrap; gap: 14px; }
.rv-card {
  flex: 1 1 260px; min-width: 0; margin: 0; background: #fff; border-radius: 18px;
  padding: 20px 20px 22px; box-shadow: 0 2px 12px rgba(15,30,43,.07);
}
.rv-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.rv-text { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.rv-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rv-name span { display: block; font-size: 11px; font-weight: 400; color: var(--pale); margin-top: 2px; }

/* ——— ОГРАНИЧЕНИЯ (flexbox — не grid, чтобы min-width: auto не выдавливал содержимое) ——— */
.lim-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.lim-card {
  flex: 1 1 210px; min-width: 0; background: #fff; border-radius: 18px;
  padding: 20px 20px 22px; box-shadow: 0 2px 12px rgba(15,30,43,.07);
}
.lim-health {
  flex: 2 1 380px; min-width: 0; background: #FDF6EC;
  border: 1px solid rgba(224,131,42,.3); border-radius: 18px; padding: 20px 22px 22px;
}
.lim-lbl { font: 700 9.5px Helvetica, Arial, sans-serif; letter-spacing: .2em; color: var(--pale); }
.lim-num {
  font: 200 30px/1.1 Helvetica, Arial, sans-serif; color: var(--ink); margin: 10px 0 2px; min-width: 0;
}
.lim-dash { color: var(--pale); margin: 0 1px; }
.lim-unit { font-size: 15px; color: var(--amb); }
.lim-card p { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.lim-scale { margin-top: 14px; }
.lim-track { position: relative; height: 7px; border-radius: 999px; background: #EDE9E2; overflow: hidden; }
.lim-fill {
  position: absolute; top: 0; bottom: 0; left: 37.5%; right: 16.7%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amb), #F0A85A);
}
.lim-ticks { display: flex; justify-content: space-between; margin-top: 7px; }
.lim-ticks span { font-size: 9.5px; color: var(--pale); }
.lim-health b { display: block; font-size: 14px; margin: 0 0 14px; color: #5E4A33; }
.lim-health ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.lim-health li {
  flex: 1 1 250px; min-width: 0; font-size: 12.5px; color: #6B5540;
  padding-left: 20px; position: relative; line-height: 1.5;
}
.lim-health li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px;
  border-radius: 50%; border: 2px solid var(--amb);
}

/* ——— ВИДЕО — фасад, iframe подключается по клику (задача 9/страница.js) ——— */
.vid-row { display: flex; flex-wrap: wrap; gap: 16px; }
.vid-item { flex: 1 1 320px; min-width: 0; }
.vid-frame {
  display: block; width: 100%; margin: 0; border: 0; padding: 0; font: inherit; text-align: left;
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: #0F1E2B; cursor: pointer; box-shadow: 0 2px 14px rgba(15,30,43,.12);
}
.vid-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s ease; }
.vid-frame:hover img { transform: scale(1.04); opacity: .88; }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-play {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; background: rgba(255,255,255,.94);
  box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: transform .3s ease;
}
.vid-play::after {
  content: ""; position: absolute; left: 24px; top: 19px;
  border-left: 17px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.vid-frame:hover .vid-play { transform: translate(-50%,-50%) scale(1.08); margin: 0; left: 50%; top: 50%; }
.vid-cap { margin-top: 11px; font-size: 13px; line-height: 1.45; color: var(--mut); }

/* ——— ГДЕ ЛЕТАЕМ ——— */
.wrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.wmap-col { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wmap {
  flex: 1 0 auto; position: relative; border-radius: 18px; overflow: hidden;
  background: #E9EDE6; min-height: 280px; box-shadow: 0 2px 12px rgba(15,30,43,.07);
}
.wmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Кнопки под схемой, а не поверх неё: три штуки на схеме закрыли бы и метку
   старта, и подпись «Алматы». */
.wmap-links { display: flex; flex-wrap: wrap; gap: 8px; }
.wmap-btn {
  background: #fff; color: var(--ink); border-radius: 999px; padding: 11px 20px;
  font-size: 12.5px; font-weight: 700; box-shadow: 0 2px 10px rgba(15,30,43,.1);
  text-decoration: none; display: inline-block;
}
.wmap-btn:hover, .wmap-btn:focus-visible { box-shadow: 0 4px 14px rgba(15,30,43,.2); }
.wmap-tag {
  position: absolute; right: 14px; top: 14px; z-index: 1; background: rgba(255,255,255,.88);
  border-radius: 8px; padding: 5px 10px; font-size: 10px; color: var(--mut);
}
.winfo { flex: 1 1 300px; min-width: 0; background: #fff; border-radius: 18px; padding: 8px 22px; box-shadow: 0 2px 12px rgba(15,30,43,.07); }
.wline { padding: 17px 0; border-bottom: 1px solid rgba(15,30,43,.08); }
.wline:last-child { border-bottom: 0; }
.wl-k { font: 700 9.5px Helvetica, Arial, sans-serif; letter-spacing: .2em; color: var(--pale); margin-bottom: 7px; }
.wl-v { font-size: 14.5px; color: var(--ink); line-height: 1.35; }
.wl-v span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--mut); line-height: 1.5; }
.wcta { padding-bottom: 20px; }

/* ——— ЧАСТЫЕ ВОПРОСЫ (нативный details — работает без JavaScript) ——— */
.faq { background: #fff; border-radius: 14px; margin-bottom: 9px; box-shadow: 0 1px 8px rgba(15,30,43,.06); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; padding: 17px 52px 17px 20px; position: relative;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 11px; height: 11px;
  margin-top: -7px; border-right: 2px solid var(--amb); border-bottom: 2px solid var(--amb);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--amb); }
.faq-a { padding: 0 20px 18px; font-size: 13px; line-height: 1.6; color: var(--mut); }

/* ——— ПОДВАЛ: призыв и сцена приземления ——— */
.land {
  position: relative; overflow: hidden; background: var(--ink); border-radius: 22px;
  /* Отступ снизу — исходные 36px. Раньше был временно увеличен, чтобы верх
     сцены посадки успевал физически подняться до ANCHOR высоты экрана на
     высоком окне, но у этого пути нет предела: порог отодвигается вместе с
     отступом, а не исчезает (на окне высотой ~1300px+ снова не хватило бы).
     Правильная страховка — в flight.js: посадка запускается и по достижении
     низа страницы, независимо от высоты окна. Отступ вернули к исходному —
     с новым условием он для работоспособности посадки больше не нужен, а
     120px внизу тёмной карточки читались как случайная пустота. */
  padding: 0; margin: 34px auto 20px; max-width: var(--sec-max); color: #fff;
}
.land-scene { position: relative; height: 190px; }
.land-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dust circle { fill: rgba(255,255,255,.55); opacity: 0; transform-box: fill-box; transform-origin: center; }
.land-scene.touched .dust circle { animation: land-puff 1.1s ease-out forwards; }
.land-scene.touched .dust circle:nth-child(2) { animation-delay: .07s; }
.land-scene.touched .dust circle:nth-child(3) { animation-delay: .14s; }
.land-scene.touched .dust circle:nth-child(4) { animation-delay: .04s; }
@keyframes land-puff {
  0%   { opacity: .55; transform: translate(0,0) scale(.4); }
  100% { opacity: 0;   transform: translate(14px,-16px) scale(2.2); }
}
.land-body { padding: 4px 32px 0; }
.land-lb { font: 700 11px Helvetica, Arial, sans-serif; letter-spacing: .2em; color: #FFC178; }
.land h3 { margin: 10px 0 20px; font: 200 31px Helvetica, Arial, sans-serif; }
.land-cols {
  display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; margin-top: 26px;
}
.land p { margin: 0; font-size: 12.5px; line-height: 1.8; color: rgba(255,255,255,.5); }
.land-social { color: #7FC8E8; font-size: 12.5px; }
/* Ссылки в подвале наследуют цвет своей строки: голубыми выглядят только соцсети,
   потому что цвет задан их абзацу. Подчёркивание по наведению — чтобы было видно,
   что строка кликабельная. */
.land-link { color: inherit; text-decoration: none; }
/* Подпись разработчика: узкая полоса грунта под контактами. Логотип и ветроуказатель
   в одной строке с текстом; без JS и без движения конус просто стоит расправленным. */
.under {
  position: relative; display: flex; align-items: center;
  gap: 6px 8px; flex-wrap: wrap; margin-top: 28px; padding: 26px 32px 18px;
  background: #0F1E2B; color: #F2F0E9; overflow: hidden;
}
.under-strata { position: absolute; inset: 0; width: 100%; height: 100%; }
.under-tx, .under-brand { position: relative; }
.under-tx { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.6); }
.under-brand { display: flex; align-items: center; gap: 7px; }
.under-word { display: block; height: 17px; aspect-ratio: 600 / 80; }
.under-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #D9411E; }
.under-sock { position: relative; flex: none; width: 34px; height: 26px; margin-left: 14px; }
.under-sock-cone { transform-box: view-box; transform-origin: 3px 8.5px; }
@media (prefers-reduced-motion: no-preference) {
  .under.in-view .under-sock-cone { animation: sock-fill 1.3s ease-out both, sock-sway 9s ease-in-out 1.3s infinite; }
}
@keyframes sock-fill {
  0%   { transform: rotate(68deg) scaleX(.72); }
  70%  { transform: rotate(-7deg) scaleX(1); }
  100% { transform: rotate(0) scaleX(1); }
}
/* Неровные порывы: равномерное качание читалось бы как маятник, а не как ветер. */
@keyframes sock-sway {
  0%, 100% { transform: rotate(0); }
  14% { transform: rotate(8deg); }
  27% { transform: rotate(-4deg); }
  43% { transform: rotate(11deg); }
  58% { transform: rotate(3deg); }
  72% { transform: rotate(14deg); }
  86% { transform: rotate(-2deg); }
}
.under:focus-visible { outline: 2px solid #FFC178; outline-offset: -4px; border-radius: 0 0 22px 22px; }
.land-link:hover, .land-link:focus-visible { text-decoration: underline; }

/* ——— МИКРОТЕКСТ ПОД КНОПКОЙ (cta.note — заполняется после ответа заказчика) ——— */
.cta-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--mut); max-width: 320px; }
.cta-note-dark { color: rgba(255,255,255,.5); }

/* 640px — единая точка перестроения на мобильные стили для всего сайта.
   Остальные секции (задачи 6+) должны использовать то же число, а не заводить своё. */
@media (max-width: 640px) {
  .hero { height: 610px; }
  .hero-shot img { object-position: 56% 42%; }
  .hero-top { padding: 16px 16px; }
  /* Переключатель языков виден на всех размерах экрана — второго способа сменить
     язык на сайте нет, а иностранные туристы (старшие тарифы) чаще смотрят с телефона.
     Ужимаем и переключатель, и кнопку WhatsApp — вместе они помещаются даже на 320 px
     (проверено); если в будущих правках станет теснее, в приоритете переключатель —
     кнопку WhatsApp в шапке можно спрятать первой, она остаётся в подвале и в тарифах. */
  .hero-langs { gap: 9px; }
  .hero-langs a:not(.hero-wa) { font-size: 10px; }
  .hero-wa { padding: 7px 12px; font-size: 10px; }
  /* Наклонное затемнение занимает 72% ширины: на узком экране текст выходит
     за его светлый край. Здесь оно распрямляется на всю ширину. */
  .hero-scrim { width: 100%; height: 88%;
    background: linear-gradient(8deg, rgba(10,22,32,.80) 0%, rgba(10,22,32,.40) 52%,
                rgba(10,22,32,0) 84%); }
  .hero-body { left: 20px; right: 20px; bottom: 116px; }
  .hero h1 { font-size: 33px; }
  .btn-ghost { margin: 9px 0 0; }

  /* секции под шапкой */
  .sec { padding: 34px 16px; }
  #tariffs { padding-top: 26px; }
  .wp-t { font-size: 21px; }
  .tf-row { grid-template-columns: 1fr; }
  .cert { grid-template-columns: 1fr; }
  .cert-title { font-size: 24px; }

  /* трек и крыло остаются видимыми и на телефоне — «страница как один полёт»
     сквозная идея сайта, а больше половины посетителей смотрят с телефона.
     Колонка и крыло у́же, как в прототипе (.lf.phone), содержимому оставляем
     соразмерно меньший отступ слева. */
  .rail { left: 6px; top: 610px; bottom: 330px; width: 44px; }
  .wing { width: 30px; margin-left: -15px; transform: translate(28px, 630px); }
  .lf-body { padding-left: 54px; }

  .hud { top: 54px; left: 14px; padding: 8px 11px; }
  .hud-v { font-size: 19px; }

  .steps5 { grid-template-columns: 1fr; }
  .team-row { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: 1fr; }
  .bigproof { height: 420px; }
  .bp-tx { left: 20px; right: 20px; bottom: 22px; }
  .bp-tx b { font-size: 19px; }
  .pcard { height: 300px; }

  .land { margin: 34px 16px 20px; }
  .land-body { padding: 4px 20px 0; }
  .under { padding: 24px 20px 16px; }
  .under-word { height: 14px; }
  .under-dot { width: 10px; height: 10px; }
  .under-sock { position: absolute; right: 12px; top: 6px; width: 24px; height: 19px; margin: 0; }
  .land h3 { font-size: 24px; }
}