html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); }
.iso { transform-style: preserve-3d; animation: tilt 30s linear infinite; }
.iso > i { position: absolute; inset: 0; display: block; border: 1px solid color-mix(in srgb, #ffffff 45%, transparent); }
@keyframes tilt { from { transform: rotateX(58deg) rotateZ(0deg); } to { transform: rotateX(58deg) rotateZ(360deg); } }
.rise { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rise.armed { opacity: 0; transform: translateY(22px); }
.rise.armed.in { opacity: 1; transform: none; }
.duotone img { filter: saturate(.25) contrast(1.05); }
.mobmenu { display: none; border-top: 1px solid var(--color-divider); background: var(--color-bg); }
.mobmenu.open { display: block; }
.burger { display: none !important; }

/* Посадочная «деталь по образцу»: доказательство результата видно сразу,
   а быстрый запрос не требует прокручивать всю страницу. */
.detail-hero { position: relative; overflow: hidden; background: var(--color-accent-900); color: #fff; }
.detail-hero__grid { max-width: 1440px; margin: 0 auto; padding: 72px 34px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 64px; align-items: center; }
.detail-hero__kicker { font-family: var(--font-heading); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent-300); margin-bottom: 18px; }
.detail-hero h1 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(58px, 6.4vw, 108px); line-height: .88; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 26px; }
.detail-hero__copy > p { font-size: 22px; line-height: 1.45; max-width: 39ch; color: color-mix(in srgb, #ffffff 88%, transparent); text-wrap: pretty; margin: 0 0 30px; }
.detail-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.detail-hero__actions .btn { position: relative; border-radius: 0; font-size: 17px; padding: 16px 30px; background: #1558a6; border-color: #1558a6; color: #fff; }
.detail-hero__actions > span { max-width: 42ch; font-family: var(--font-heading); font-size: 15px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, #ffffff 74%, transparent); }
.detail-hero__proof { min-height: 500px; overflow: hidden; border-color: color-mix(in srgb, #ffffff 28%, transparent); background: #fff; }
.detail-hero__proof > img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; object-position: 50% 61%; }
.detail-hero__proof figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; color: #fff; background: color-mix(in srgb, #ffffff 45%, transparent); }
.detail-hero__proof figcaption span { padding: 11px 14px; background: color-mix(in srgb, var(--color-accent-900) 88%, transparent); font-family: var(--font-heading); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }

.quick-quote { max-width: 1372px; margin: 54px auto 0; padding: 30px; display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 46px; align-items: center; border: 1px solid var(--color-divider); background: #fff; }
.quick-quote__copy h6 { color: var(--color-accent-700); }
.quick-quote__copy h2 { margin: 10px 0 10px; font-size: clamp(30px, 3vw, 46px); line-height: .98; text-transform: uppercase; }
.quick-quote__copy p { margin: 0; max-width: 42ch; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.quick-quote__form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) auto; gap: 14px; align-items: end; }
.quick-quote__form .btn { min-height: 48px; padding: 12px 22px; background: #1558a6; color: #fff; }
.quick-quote__legal { grid-column: 1 / -1; font-size: 12px; color: color-mix(in srgb, var(--color-text) 56%, transparent); }
.field-help { display: block; margin-top: 6px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 56%, transparent); }
.detail-quote-form { display: grid; gap: 18px; align-content: start; }
.detail-page .input { min-height: 48px; padding: 10px 12px; font-size: 16px; }
.detail-page textarea.input { min-height: 112px; }
.detail-page .field > label { font-size: 13px; margin-bottom: 7px; }
.mobile-quote-dock { display: none; }
@media (max-width: 1200px) {
  [data-cols="4"], [data-cols="3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-rows] { grid-template-columns: 64px 1fr !important; }
  [data-rows] > span:nth-child(3) { display: none !important; }
}
@media (max-width: 1100px) {
  header nav { display: none !important; }
  .burger { display: inline-flex !important; }
  /* Без nav контактную группу больше нечем прижать вправо. */
  header nav + div { margin-left: auto; }
  /* Мессенджеры уезжают в бургер-меню — их дублирует site.js. */
  header nav + div > a[href^="https://t.me/"],
  header nav + div > a[href^="https://max.ru/"] { display: none !important; }
}
/* Шапка на телефоне.

   Содержимое шапки в сумме требует ~600px: логотип, Telegram, МАКС, телефон,
   «Заявка» и бургер, все с white-space:nowrap. На экране 390px всё, что не
   помещалось, уезжало за правый край, а body{overflow-x:hidden} прятал следы —
   страница не ехала вбок, но кнопка «Заявка» и сам бургер оказывались
   недоступны, то есть на телефоне у сайта не было ни меню, ни призыва.

   Ниже 700px в шапке остаются только логотип, «Заявка» и бургер. Телефон и
   мессенджеры не пропадают: site.js дублирует их внутрь мобильного меню. */
@media (max-width: 700px) {
  body { overflow-x: clip; }
  .hero-iso-decoration, .cta-decoration { display: none !important; }
  .reviews-head { flex-wrap: wrap; }
  .reviews-head > span { display: none; }
  .reviews-head > a { width: 100%; white-space: normal !important; }
  header nav + div > a[href^="tel:"] { display: none !important; }
  header nav + div { gap: 10px !important; }
  header > div:first-child { padding-left: 18px !important; padding-right: 18px !important; gap: 12px !important; }
}
@media (max-width: 960px) {
  [data-cols] { grid-template-columns: 1fr !important; }
  [data-rows] { grid-template-columns: 64px 1fr !important; }
  [data-sticky] { position: static !important; }
  [data-steps] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-steps] figure > div:first-child { aspect-ratio: 1 !important; }
  h1 { font-size: clamp(38px, 11vw, 70px) !important; }
}
@media (max-width: 720px) { .table { font-size: 13px; } }

@media (max-width: 960px) {
  .detail-hero__grid { grid-template-columns: 1fr; gap: 28px; padding-top: 54px; }
  .detail-hero__proof { min-height: 260px; }
  .detail-hero__proof > img { min-height: 260px; max-height: 360px; }
  .quick-quote { margin: 42px 20px 0; grid-template-columns: 1fr; gap: 24px; }
  .quick-quote__form { grid-template-columns: 1fr 1fr; }
  .quick-quote__form .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 700px) {
  .detail-page { padding-bottom: 74px; }
  .detail-hero__grid { padding: 46px 20px 52px; gap: 22px; }
  .detail-hero h1 { font-size: clamp(42px, 12vw, 58px) !important; margin-bottom: 20px; }
  .detail-hero__copy > p { font-size: 19px; line-height: 1.55; margin-bottom: 22px; }
  .detail-hero__actions { align-items: stretch; }
  .detail-hero__actions .btn { width: 100%; min-height: 54px; }
  .detail-hero__actions > span { font-size: 14px; }
  .detail-hero__proof { order: -1; min-height: 150px; max-height: 180px; }
  .detail-hero__proof > img { min-height: 150px; height: 180px; object-position: 50% 61%; }
  .detail-hero__proof figcaption span { padding: 8px 10px; font-size: 11px; }
  .quick-quote { margin: 34px 20px 0; padding: 24px 20px; }
  .quick-quote__form { grid-template-columns: 1fr; }
  .quick-quote__form .btn { grid-column: auto; width: 100%; }
  .mobile-quote-dock { position: fixed; z-index: 70; display: flex; left: 12px; right: 12px; bottom: 10px; min-height: 54px; align-items: center; justify-content: center; padding: 12px 18px; background: #1558a6; color: #fff; border: 1px solid color-mix(in srgb, #ffffff 24%, transparent); box-shadow: 0 10px 26px color-mix(in srgb, #000 28%, transparent); font-family: var(--font-heading); font-size: 18px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
  .mobile-quote-dock:hover { color: #fff; background: #0d3568; }
  [data-par] { transform: none !important; will-change: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .iso { animation: none !important; }
  .rise, .rise.armed, .rise.armed.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-par] { transform: none !important; will-change: auto !important; }
}

/* Навигация второго уровня: четыре устойчивых пункта вместо длинного списка
   услуг. Панели используют существующие цвета, типографику и тонкие рамки. */
.site-header-v2 { overflow: visible; }
.site-nav-v2 { position: relative; align-items: center; flex-wrap: nowrap !important; gap: 8px !important; }
.site-nav-v2 > a,
.nav-trigger { display: inline-flex; align-items: center; min-height: 42px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-text); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.site-nav-v2 > a:hover,
.site-nav-v2 > a[aria-current="page"],
.nav-trigger:hover,
.nav-trigger.active { color: var(--color-accent-700); border-bottom-color: var(--color-accent-700); }
.nav-trigger span { margin-left: 6px; font-size: 16px; transform-origin: center; transition: transform .18s ease; }
.nav-group { position: relative; }
.nav-group[data-open] .nav-trigger span,
.nav-group:focus-within .nav-trigger span,
.nav-group:hover .nav-trigger span { transform: rotate(180deg); }
.nav-panel { position: absolute; z-index: 100; top: calc(100% + 12px); left: 50%; display: grid; gap: 1px; padding: 1px; visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); background: var(--color-divider); border: 1px solid var(--color-divider); box-shadow: 0 24px 54px color-mix(in srgb, var(--color-text) 16%, transparent); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-panel--services { width: min(680px, calc(100vw - 40px)); grid-template-columns: 1fr 1fr; }
.nav-panel--learning { width: 330px; }
.nav-panel section { display: grid; align-content: start; min-width: 0; padding: 24px; background: var(--color-bg); }
.nav-panel section > b { margin-bottom: 14px; color: color-mix(in srgb, var(--color-text) 56%, transparent); font-family: var(--font-body); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.nav-panel a { padding: 12px 0; border-top: 1px solid var(--color-divider); color: var(--color-text); font-family: var(--font-heading); font-size: 17px; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; }
.nav-panel a:hover,
.nav-panel a:focus,
.nav-panel a[aria-current="page"] { color: var(--color-accent-700); }
.nav-group:hover .nav-panel,
.nav-group:focus-within .nav-panel,
.nav-group[data-open] .nav-panel { visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav-v2 header nav + div > a[href^="https://t.me/"],
.nav-v2 header nav + div > a[href^="https://max.ru/"] { display: none !important; }

.mobile-nav { display: grid; width: 100%; }
.mobile-nav > a,
.mobile-nav__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 14px 0; border: 0; border-bottom: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1.1; text-align: left; text-transform: uppercase; }
.mobile-nav__toggle span { color: var(--color-accent-700); font-size: 26px; font-weight: 400; }
.mobile-nav__panel { padding: 4px 0 12px 18px; border-bottom: 1px solid var(--color-divider); }
.mobile-nav__panel[hidden] { display: none; }
.mobile-nav__panel b { display: block; margin: 16px 0 6px; color: color-mix(in srgb, var(--color-text) 56%, transparent); font-family: var(--font-body); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.mobile-nav__panel a { display: block; padding: 10px 0; color: var(--color-text); font-family: var(--font-heading); font-size: 18px; line-height: 1.2; text-transform: uppercase; }
.mobile-nav a[aria-current="page"] { color: var(--color-accent-700); }

@media (max-width: 1100px) {
  .site-nav-v2 { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-trigger span { transition: none; }
}