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; }
@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) {
  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; } }