/* Шаблон sto — техцентр на ул. Талалихина.
   Шрифты свои (Golos Text, Manrope — SIL OFL), ничего с чужих серверов. */

@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(../fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(../fonts/golos-text-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(../fonts/golos-text-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(../fonts/manrope-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(../fonts/manrope-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --fon: #f5f6fa;
  --belyj: #ffffff;
  --tekst: #141a2a;
  --tekst-2: #4a5468;
  --liniya: #e3e6ef;
  --temnyj: #0e1630;
  --temnyj-2: #172347;
  --temnyj-3: #22305c;
  --na-temnom: #c9d2ea;
  --na-temnom-2: #9aa6c4;
  --akcent: #d93418;          /* кнопки с белым текстом: контраст 4.7 */
  --akcent-temn: #b92b13;
  --akcent-tekst: #c22e14;    /* мелкий текст и ссылки на светлом: контраст 5.3 (у --akcent 4.4 — мало) */
  --akcent-yarkiy: #ff4b2b;   /* только на тёмном фоне и для украшений */
  --biryuza: #12b5a5;
  --biryuza-temn: #0b8a7e;
  --biryuza-fon: #e3f6f3;
  --zholtyj: #ffc83d;
  --zholtyj-fon: #fff5d6;
  --krasnyj-fon: #fdebe7;
  --radius: 16px;
  --radius-m: 10px;
  --ten: 0 1px 2px rgba(14, 22, 48, .06), 0 8px 24px rgba(14, 22, 48, .07);
  --ten-silnaya: 0 18px 50px rgba(14, 22, 48, .18);
  --shrift: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shrift-zag: "Manrope", "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shirina: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--fon); color: var(--tekst);
  font-family: var(--shrift); font-size: 17px; line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--akcent-tekst); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akcent-temn); }
:focus-visible { outline: 3px solid var(--biryuza); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--shrift-zag); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .6em; color: var(--tekst); }
h1 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 800; }
h2 { font-size: clamp(25px, 3vw, 36px); font-weight: 800; }
h3 { font-size: clamp(19px, 2vw, 22px); font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li + li { margin-top: .3em; }
b, strong { font-weight: 700; }
small { font-size: 14px; }
hr { border: 0; border-top: 1px solid var(--liniya); margin: 2em 0; }

.obertka { width: 100%; max-width: var(--shirina); margin: 0 auto; padding: 0 20px; }
.propusk { position: absolute; left: -9999px; top: 0; background: var(--belyj); padding: 10px 16px; z-index: 100; }
.propusk:focus { left: 10px; top: 10px; }
.skryto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- кнопки */
.knopka {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--shrift-zag); font-weight: 800; font-size: 16px; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
/* блик пробегает по кнопке при наведении */
.knopka::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 140% 0; transition: background-position .75s ease;
}
.knopka:hover { transform: translateY(-2px); }
.knopka:hover::after { background-position: -40% 0; }
.knopka:active { transform: translateY(1px); }
.knopka-akcent {
  /* белый текст: контраст от 4.6 по всему градиенту (было от 3.9 у светлого края) */
  background: #c93216; background: linear-gradient(135deg, #d4401b 0%, #c93216 55%, #b02810 100%); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(217, 52, 24, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.knopka-akcent:hover { color: #fff; box-shadow: 0 18px 34px -10px rgba(217, 52, 24, .72), inset 0 1px 0 rgba(255, 255, 255, .25); }
.knopka-kontur { background: transparent; color: var(--tekst); border-color: var(--tekst); }
.knopka-kontur:hover { background: var(--tekst); color: #fff; }
.knopka-svetlaya { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .45); }
.knopka-svetlaya:hover { background: #fff; color: var(--temnyj); border-color: #fff; }
.knopka-zholtaya {
  background: #ffc83d; background: linear-gradient(135deg, #ffd865, #ffb700); color: var(--temnyj);
  box-shadow: 0 10px 24px -10px rgba(255, 183, 0, .85);
}
.knopka-zholtaya:hover { color: var(--temnyj); box-shadow: 0 18px 32px -10px rgba(255, 183, 0, .95); }
.knopka svg { width: 20px; height: 20px; flex: none; }
.knopka[disabled] { opacity: .6; cursor: wait; transform: none; }
/* главная кнопка первого экрана «дышит»: от неё расходится кольцо света */
.knopka-siyanie { animation: dyhanie 3.2s ease-in-out infinite; }
@keyframes dyhanie {
  0% { box-shadow: 0 10px 24px -8px rgba(217, 52, 24, .6), 0 0 0 0 rgba(255, 90, 54, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
  60%, 100% { box-shadow: 0 14px 30px -8px rgba(217, 52, 24, .7), 0 0 0 16px rgba(255, 90, 54, 0), inset 0 1px 0 rgba(255, 255, 255, .25); }
}

/* ---------------------------------------------------------------- верхняя полоса */
.verh {
  background: var(--temnyj); color: var(--na-temnom); font-size: 14px;
}
.verh .obertka { display: flex; align-items: center; gap: 22px; min-height: 40px; }
.verh a { color: #fff; text-decoration: none; }
.verh a:hover { color: var(--zholtyj); }
.verh-punkt { display: inline-flex; align-items: center; gap: 7px; }
.verh-punkt svg { width: 16px; height: 16px; color: var(--biryuza); flex: none; }
.verh-pravo { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.verh-tel { font-family: var(--shrift-zag); font-weight: 800; font-size: 16px; }

/* ---------------------------------------------------------------- шапка */
.shapka {
  position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--liniya);
}
.shapka .obertka { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tekst); flex: none; }
.logo:hover { color: var(--tekst); }
/* логотип — надпись без знака: «Техцентр Чери», последнее слово — цветом акцента */
.logo-tekst { display: flex; flex-direction: column; line-height: 1.05; }
.logo-tekst b { font-family: var(--shrift-zag); font-size: 23px; font-weight: 800; letter-spacing: -.025em; }
.logo-akcent {
  color: var(--akcent);
  background: linear-gradient(100deg, #ff5a36 0%, #d93418 55%, #b92b13 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.logo-tekst small { font-size: 12.5px; color: var(--tekst-2); margin-top: 4px; letter-spacing: .01em; }
.menyu { margin-left: auto; }
.menyu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.menyu li { margin: 0; }
.menyu a {
  display: block; padding: 10px 13px; border-radius: 999px; color: var(--tekst);
  text-decoration: none; font-weight: 600; font-size: 16px;
}
.menyu a:hover { background: var(--fon); color: var(--akcent-tekst); }
.menyu .current > a, .menyu .active > a, .menyu a[aria-current="page"] { color: var(--akcent-tekst); background: var(--krasnyj-fon); }
.shapka-knopka { flex: none; }
.shapka-tel-mob, .burger { display: none; }
.burger {
  width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--liniya); background: var(--belyj);
  align-items: center; justify-content: center; cursor: pointer; color: var(--tekst);
}
.burger svg { width: 24px; height: 24px; }

@media (max-width: 1080px) {
  .verh-adres { display: none; }
  .menyu a { padding: 9px 9px; font-size: 15px; }
}
@media (max-width: 920px) {
  .verh { display: none; }
  .shapka .obertka { min-height: 64px; gap: 10px; }
  .logo-tekst b { font-size: 20px; }
  .shapka-knopka { display: none; }
  .shapka-tel-mob, .burger { display: inline-flex; }
  .shapka-tel-mob {
    margin-left: auto; width: 48px; height: 48px; border-radius: 12px; align-items: center; justify-content: center;
    background: var(--akcent); color: #fff;
  }
  .shapka-tel-mob svg { width: 22px; height: 22px; }
  .menyu {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--belyj);
    border-bottom: 1px solid var(--liniya); box-shadow: var(--ten-silnaya);
    display: none; padding: 10px 20px 20px; margin: 0;
  }
  .shapka.otkryto .menyu { display: block; }
  .menyu ul { flex-direction: column; gap: 2px; }
  .menyu a { padding: 13px 14px; font-size: 18px; border-radius: 12px; }
}

/* ---------------------------------------------------------------- крошки */
.kroshki { font-size: 14px; color: var(--tekst-2); padding: 18px 0 0; }
.kroshki ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0; }
.kroshki li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.kroshki li + li::before { content: "›"; color: #9aa3b5; }
.kroshki a { color: var(--tekst-2); text-decoration: none; }
.kroshki a:hover { color: var(--akcent-tekst); text-decoration: underline; }

/* ---------------------------------------------------------------- основное */
.glavnoe { display: block; padding-bottom: 40px; }
.stranica { padding-top: 22px; }
.glavnaya .stranica { padding-top: 0; }
.stranica > .obertka > h1:first-child, .stranica-zag { margin-top: 10px; }
.vvodnyj { font-size: 19px; color: var(--tekst-2); max-width: 800px; }
.soobshchenie { background: var(--biryuza-fon); border-left: 4px solid var(--biryuza); padding: 16px 20px; border-radius: var(--radius-m); margin: 20px 0; }

/* Статья без блоков: обычный текст в колонке */
.tekst-kolonka { max-width: 820px; }
.tekst-kolonka h2 { margin-top: 1.6em; }
.tekst-kolonka h3 { margin-top: 1.4em; }

/* ---------------------------------------------------------------- герой
   Живой фон: три пятна света плывут, кольцо вращается, сетка-дорога бежит
   навстречу, силуэт машины прорисовывается и едет (колёса крутятся, фара
   светит). Карточки фактов выезжают по очереди, цифры считаются (sto.js),
   за мышью блок чуть поворачивается. «Меньше движения» — всё стоит. */
.geroy {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, #0a0f2c 0%, #111a46 48%, #1c2766 100%);
  padding: 56px 0 60px;
}
.geroy-fon { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.siyanie { position: absolute; border-radius: 50%; will-change: transform; translate: calc(var(--px, 0) * 24px) calc(var(--py, 0) * 16px); transition: translate .8s ease-out; }
.siyanie.s1 { width: 780px; height: 780px; right: -280px; top: -430px; background: radial-gradient(closest-side, rgba(255, 75, 43, .6), rgba(255, 75, 43, 0)); animation: plyt1 18s ease-in-out infinite alternate; }
.siyanie.s2 { width: 660px; height: 660px; right: 6%; bottom: -440px; background: radial-gradient(closest-side, rgba(18, 181, 165, .5), rgba(18, 181, 165, 0)); animation: plyt2 22s ease-in-out infinite alternate; }
.siyanie.s3 { width: 640px; height: 640px; left: -300px; top: -140px; background: radial-gradient(closest-side, rgba(106, 60, 240, .42), rgba(106, 60, 240, 0)); animation: plyt3 26s ease-in-out infinite alternate; }
@keyframes plyt1 { to { transform: translate(-170px, 120px) scale(1.14); } }
@keyframes plyt2 { to { transform: translate(-240px, -70px) scale(1.2); } }
@keyframes plyt3 { to { transform: translate(160px, 100px) scale(.88); } }
.geroy-kolco {
  position: absolute; right: -170px; bottom: -260px; width: 660px; height: 660px; border-radius: 50%; opacity: .6;
  background: conic-gradient(from 0deg, rgba(255, 200, 61, 0) 0deg, rgba(255, 200, 61, .9) 70deg, rgba(255, 90, 54, .85) 130deg,
    rgba(255, 90, 54, 0) 190deg, rgba(18, 181, 165, 0) 205deg, rgba(18, 181, 165, .75) 290deg, rgba(255, 200, 61, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 46px), #000 calc(100% - 45px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 46px), #000 calc(100% - 45px));
  animation: vrashchenie 28s linear infinite;
}
@keyframes vrashchenie { to { transform: rotate(360deg); } }
.doroga {
  position: absolute; left: -35%; right: -35%; bottom: 0; height: 54%; perspective: 520px; perspective-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); opacity: .6;
}
.doroga > span {
  position: absolute; left: -64px; right: 0; top: 0; height: 100%;
  background-image: linear-gradient(rgba(140, 170, 255, .42) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(140, 170, 255, .42) 1px, transparent 1px);
  background-size: 64px 64px; transform-origin: 50% 0; transform: rotateX(60deg);
  animation: doroga .55s linear infinite;
}
@keyframes doroga { from { transform: rotateX(60deg) translateX(-64px); } to { transform: rotateX(60deg) translateX(0); } }

/* машина: фото Chery Tiggo 9 без фона. Въезжает справа, тормозит (стоп-сигналы),
   дальше «едет»: дорога и полосы света бегут, диски крутятся, кузов чуть качается,
   по кузову скользит блик (маска — само фото), фара светит. */
.polosy { position: absolute; left: 0; right: 0; top: 46%; height: 40%; }
.polosy i {
  position: absolute; left: 0; height: 2px; width: 220px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(190, 210, 255, .55), rgba(255, 255, 255, 0));
  animation: polosa 1.6s linear infinite;
}
.polosy i:nth-child(1) { top: 12%; animation-delay: .1s; }
.polosy i:nth-child(2) { top: 38%; width: 320px; animation-duration: 1.2s; animation-delay: .7s; }
.polosy i:nth-child(3) { top: 55%; animation-duration: 1.9s; animation-delay: 1.1s; }
.polosy i:nth-child(4) { top: 72%; width: 160px; animation-duration: 1.4s; animation-delay: .4s; }
.polosy i:nth-child(5) { top: 88%; width: 260px; animation-duration: 1.1s; animation-delay: 1.5s; }
@keyframes polosa { 0% { transform: translateX(40vw); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(105vw); opacity: 0; } }

.geroy-verh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 26px; align-items: center; }
.geroy-avto { position: relative; margin: 0 -40px 0 0; translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -6px); transition: translate .6s ease-out; }
/* асфальт под машиной с бегущей разметкой */
.avto-doroga {
  position: absolute; left: -12%; right: -30%; bottom: 7%; height: 16%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(8, 12, 36, .85) 0%, rgba(8, 12, 36, .45) 45%, transparent 72%);
}
.avto-doroga::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 58%; height: 3px; border-radius: 2px; opacity: .55;
  background: repeating-linear-gradient(90deg, rgba(255, 214, 102, .9) 0 46px, transparent 46px 92px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  animation: razmetka .45s linear infinite;
}
@keyframes razmetka { from { background-position: 0 0; } to { background-position: 92px 0; } }
.avto { position: relative; animation: avto-vezd 1.9s cubic-bezier(.16, .84, .24, 1) .15s both, avto-kach 1.2s ease-in-out 2.2s infinite; }
@keyframes avto-vezd {
  0% { transform: translateX(70%); opacity: 0; }
  35% { opacity: 1; }
  78% { transform: translateX(-2.2%) rotate(-.7deg); }
  90% { transform: translateX(.6%) rotate(.25deg); }
  100% { transform: none; }
}
@keyframes avto-kach { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6px; } }
.avto::before {
  content: ""; position: absolute; left: 3%; right: 1%; bottom: 1%; height: 9%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 70%); filter: blur(4px);
}
.avto-kuzov { display: block; width: 100%; height: auto; }
.koleso {
  position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scaleX(var(--k));
}
.koleso img { display: block; width: 100%; height: 100%; border-radius: 50%; animation: kolesa .62s linear infinite; }
@keyframes kolesa { to { transform: rotate(-360deg); } }
.avto-blik {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/images/geroy/tiggo-9f-700.webp) center / 100% 100% no-repeat;
  mask: url(/images/geroy/tiggo-9f-700.webp) center / 100% 100% no-repeat;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0; mix-blend-mode: soft-light;
  animation: avto-blik 6s ease-in-out 2.4s infinite;
}
@keyframes avto-blik { 0%, 60% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
/* фара: место — из разметки (--fx, --fy), машина на фото в три четверти спереди — луч вперёд не рисуем */
.avto-fara {
  position: absolute; left: var(--fx, 3.6%); top: var(--fy, 40%); width: 10%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(255, 252, 235, .95) 0 7%, rgba(255, 226, 150, .55) 20%, rgba(255, 214, 102, 0) 62%);
  mix-blend-mode: screen; animation: fara-svet 3.2s ease-in-out 2s infinite;
}
.avto-fara::after {
  display: none;
  content: ""; position: absolute; right: 50%; top: 50%; width: 330%; height: 120%; transform: translateY(-50%);
  background: linear-gradient(270deg, rgba(255, 236, 170, .38), rgba(255, 236, 170, 0));
  clip-path: polygon(100% 44%, 0 0, 0 100%, 100% 56%);
}
@keyframes fara-svet { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.avto-stop {
  position: absolute; left: 73%; top: 29.5%; width: 25.5%; height: 6.5%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 40, 40, .95), rgba(255, 40, 40, 0) 70%);
  mix-blend-mode: screen; filter: blur(3px); opacity: 0; animation: stop-signal 1.9s ease .15s both;
}
@keyframes stop-signal { 0%, 55% { opacity: 0; } 70%, 88% { opacity: 1; } 100% { opacity: .15; } }
.geroy-avto figcaption { position: relative; margin: 2px 40px 0 0; text-align: right; font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .38); }
.geroy-avto figcaption a { color: inherit; }
.geroy-avto figcaption a:hover { color: #fff; }

.geroy .obertka { position: relative; z-index: 1; }
.geroy-levo > * { animation: vsplyt .9s cubic-bezier(.2, .8, .2, 1) both; }
.geroy-levo > h1 { animation-delay: .12s; }
.geroy-levo > .geroy-tekst { animation-delay: .26s; }
.geroy-levo > .geroy-knopki { animation-delay: .4s; }
@keyframes vsplyt { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.geroy h1 { color: #fff; margin-bottom: 20px; font-size: clamp(34px, 5vw, 62px); letter-spacing: -.025em; line-height: 1.08; }
.geroy h1 span {
  color: var(--zholtyj);
  background: linear-gradient(100deg, #ffc83d 0%, #ff8a3d 25%, #ffe9a3 50%, #ff8a3d 75%, #ffc83d 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: perelivy 6s linear infinite;
}
@keyframes perelivy { to { background-position: -200% 0; } }
.geroy-tekst { font-size: 19px; color: var(--na-temnom); max-width: 620px; margin-bottom: 30px; }
.geroy-knopki { display: flex; flex-wrap: wrap; gap: 14px; }

.geroy-fakty {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px;
  transform: perspective(1400px) rotateX(calc(var(--py, 0) * -3deg)) rotateY(calc(var(--px, 0) * 4deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.fakt {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 20px 20px 18px;
  background: linear-gradient(155deg, rgba(52, 64, 132, .94) 0%, rgba(24, 33, 82, .95) 100%);
  border: 1px solid rgba(255, 255, 255, .17);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .15);
  animation: vyezd .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--d, 0s) / 6);
  transition: border-color .4s, box-shadow .4s;
}
.fakt:hover { border-color: rgb(var(--irgb, 255 200 61) / .55); box-shadow: 0 30px 60px -30px rgb(var(--irgb, 255 200 61) / .55), inset 0 1px 0 rgba(255, 255, 255, .18); }
.fakt::before {
  content: ""; position: absolute; z-index: -1; width: 200px; height: 200px; right: -80px; top: -90px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--irgb, 255 200 61) / .55), rgb(var(--irgb, 255 200 61) / 0));
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.fakt:hover::before { transform: scale(1.5); }
.fakt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .18) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  animation: blik-steklo 7s ease-in-out infinite; animation-delay: calc(2s + var(--d, 0s));
}
@keyframes blik-steklo { 0%, 72% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@keyframes vyezd { from { opacity: 0; transform: translateY(34px) scale(.93); } to { opacity: 1; transform: none; } }
.fakt .ikonka { width: 50px; height: 50px; border-radius: 16px; margin-bottom: 14px; animation: plavat 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.fakt .ikonka svg { width: 28px; height: 28px; }
@keyframes plavat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-4deg); } }
.fakt b {
  display: block; font-family: var(--shrift-zag); font-size: 32px; line-height: 1.05; font-weight: 800; margin-bottom: 8px;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #fff;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .fakt b { background: linear-gradient(90deg, #fff 25%, var(--i1, #ffc83d)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.fakt > span:not(.ikonka) { display: block; font-size: 15px; color: var(--na-temnom); line-height: 1.4; }
@media (max-width: 920px) {
  .geroy { padding: 44px 0 56px; }
  .geroy-verh { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .geroy-avto { margin: 0 -8px; translate: none; }
  .geroy-avto figcaption { margin-right: 8px; }
  .geroy-fakty { transform: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 22px; }
  .geroy-kolco { width: 440px; height: 440px; right: -220px; bottom: auto; top: -170px; }
  .doroga { height: 44%; }
  .fakt b { font-size: 27px; }
}
@media (max-width: 420px) {
  .geroy-fakty { gap: 10px; }
  .fakt { padding: 16px 14px 14px; border-radius: 18px; }
  .fakt .ikonka { width: 42px; height: 42px; border-radius: 13px; margin-bottom: 12px; }
  .fakt .ikonka svg { width: 24px; height: 24px; }
  .fakt b { font-size: 24px; }
  .fakt > span:not(.ikonka) { font-size: 14px; }
  .knopka { padding: 12px 18px; }
}

/* ---------------------------------------------------------------- блоки */
.blok-shapka { padding: 30px 0 8px; position: relative; isolation: isolate; }
.blok-shapka::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(620px 300px at 88% 0%, rgba(255, 106, 61, .15), transparent 62%),
              radial-gradient(560px 280px at 4% 100%, rgba(18, 181, 165, .11), transparent 62%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.blok-shapka h1 { margin-bottom: 14px; }
.blok-shapka + .blok { padding-top: 30px; }
.blok { padding: 64px 0; position: relative; }
.blok + .blok { padding-top: 14px; }
/* светлые блоки — в мелкую точку, как миллиметровка */
.blok:not(.blok-belyj):not(.blok-temnyj):not(.blok-shapka) {
  background-image: radial-gradient(rgba(40, 60, 140, .085) 1.1px, transparent 1.4px); background-size: 22px 22px;
}
.blok-belyj { background: var(--belyj); }
.blok-belyj + .blok, .blok + .blok-belyj { padding-top: 64px; }
.blok-temnyj { background: linear-gradient(135deg, var(--temnyj), var(--temnyj-2)); color: var(--na-temnom); }
.blok-temnyj + .blok, .blok + .blok-temnyj { padding-top: 64px; }
.blok-temnyj h2, .blok-temnyj h3 { color: #fff; }
.blok-zag { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.blok-zag h2 { margin: 0; }
.blok-zag p { margin: 0; color: var(--tekst-2); max-width: 640px; }
.blok-temnyj .blok-zag p { color: var(--na-temnom-2); }
.metka {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--shrift-zag); font-size: 13px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--akcent-tekst); margin-bottom: 12px;
}
.metka::before {
  content: ""; width: 26px; height: 4px; border-radius: 4px; flex: none;
  background: linear-gradient(90deg, var(--akcent-yarkiy), var(--zholtyj));
}
.blok-temnyj .metka, .geroy .metka { color: var(--zholtyj); }

.setka { display: grid; gap: 20px; }
.setka-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setka-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setka-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .setka-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .setka-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .setka-2, .setka-3, .setka-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- цвета карточек и значков
   Каждой услуге — свой цвет: плитка значка, пятно в углу, свет за курсором,
   цена и стрелка. Задаётся классом c-* на карточке (или на самой плитке). */
.c-oranzh  { --i1: #ffa24c; --i2: #f0461f; --irgb: 240 70 31; --it: #c7330f; }
.c-krasn   { --i1: #ff7a7a; --i2: #d6203f; --irgb: 214 32 63; --it: #d6203f; }
.c-vishnya { --i1: #ff72a6; --i2: #c8175d; --irgb: 200 23 93; --it: #c8175d; }
.c-rozov   { --i1: #f27cff; --i2: #b020cc; --irgb: 176 32 204; --it: #b020cc; }
.c-fiolet  { --i1: #b690ff; --i2: #6a3cf0; --irgb: 106 60 240; --it: #6a3cf0; }
.c-indigo  { --i1: #8f99ff; --i2: #3f37c9; --irgb: 63 55 201; --it: #3f37c9; }
.c-sin     { --i1: #5aaaff; --i2: #2455e6; --irgb: 36 85 230; --it: #2455e6; }
.c-goluboj { --i1: #55e2ff; --i2: #0a8fc4; --irgb: 10 143 196; --it: #07739e; }
.c-biryuza { --i1: #43e8cf; --i2: #0b958a; --irgb: 11 149 138; --it: #08776e; }
.c-zelen   { --i1: #72e59c; --i2: #139a4d; --irgb: 19 154 77; --it: #0f7a3d; }
.c-zholt   { --i1: #ffd84a; --i2: #f08a00; --irgb: 240 138 0; --it: #a85f00; --it2: #c46f00; }
.c-zolot   { --i1: #ffbd45; --i2: #e3660c; --irgb: 227 102 12; --it: #b84f06; }
.c-korich  { --i1: #ffb07c; --i2: #d4502a; --irgb: 212 80 42; --it: #bf4422; }
.c-grafit  { --i1: #a3b3cb; --i2: #475a78; --irgb: 71 90 120; --it: #475a78; }

/* ---------------------------------------------------------------- карточки */
.kartochka {
  position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden;
  background: var(--belyj); border: 1px solid rgba(20, 26, 42, .08); border-radius: 22px; padding: 26px 24px 22px;
  box-shadow: 0 1px 2px rgba(14, 22, 48, .04), 0 16px 36px -22px rgba(14, 22, 48, .28);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s;
}
/* цветное пятно в углу и свет, который идёт за курсором (--mx, --my ставит sto.js) */
.kartochka::before {
  content: ""; position: absolute; z-index: -1; width: 250px; height: 250px; right: -105px; top: -125px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--irgb, 217 52 24) / .2), rgb(var(--irgb, 217 52 24) / 0));
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.kartochka::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .4s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--irgb, 217 52 24) / .13), transparent 65%);
}
.kartochka:hover::before { transform: scale(1.6); }
.kartochka:hover::after { opacity: 1; }
a.kartochka { color: inherit; text-decoration: none; }
a.kartochka:hover {
  transform: translateY(-7px); color: inherit; border-color: rgb(var(--irgb, 217 52 24) / .35);
  box-shadow: 0 2px 4px rgba(14, 22, 48, .04), 0 32px 58px -28px rgb(var(--irgb, 217 52 24) / .62);
}
.kartochka h3 { margin: 18px 0 8px; }
.kartochka p { color: var(--tekst-2); margin: 0 0 14px; font-size: 16px; }
.kartochka .dalee { margin-top: auto; font-weight: 700; color: var(--akcent-tekst); }
/* цена внизу карточки услуги: что за работа, сумма в цвет карточки, кружок со стрелкой */
.kartochka .cena-ot {
  margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(20, 26, 42, .14);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
}
.cena-ot small { grid-column: 1; font-size: 13.5px; line-height: 1.35; color: var(--tekst-2); }
.cena-ot b { grid-column: 1; font-family: var(--shrift-zag); font-weight: 800; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; color: var(--it, var(--akcent-tekst)); }
/* градиент цены — от тёмного оттенка цвета карточки к основному: читается на белом (контраст от 3, крупный шрифт) */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .cena-ot b { background: linear-gradient(120deg, var(--it, #c22e14), var(--it2, var(--i2, #d93418))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.kartochka .cena-ot::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat,
              linear-gradient(140deg, var(--i1, #ff7a45), var(--i2, #d93418));
  box-shadow: 0 8px 16px -8px rgb(var(--irgb, 217 52 24) / .85);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
a.kartochka:hover .cena-ot::after { transform: translateX(4px) rotate(-8deg) scale(1.1); }
.blok-temnyj .kartochka { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; color: var(--na-temnom); }
.blok-temnyj .kartochka p { color: var(--na-temnom-2); }
.blok-temnyj .kartochka h3 { color: #fff; }

/* ---------------------------------------------------------------- значки
   Плитка в цвет карточки, значок — заливка + линии. У каждого значка своя
   анимация при наведении на карточку (ключ крутит, пружина сжимается,
   шестерни вращаются, кардиограмма бежит), при появлении линии рисуются. */
svg .l { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg .f { fill: currentColor; fill-opacity: .24; }
svg .t { fill: currentColor; stroke: none; }
svg .tolstaya { stroke-width: 3.2; }
svg .a-rychag { fill: currentColor; fill-opacity: .3; stroke: currentColor; stroke-width: 1.2; }
.ikonka {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  color: #fff; isolation: isolate;
  background: radial-gradient(120% 100% at 18% 0%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 52%),
              linear-gradient(145deg, var(--i1, #ffa24c), var(--i2, #f0461f));
  box-shadow: 0 16px 30px -14px rgb(var(--irgb, 240 70 31) / .8), 0 4px 10px -4px rgb(var(--irgb, 240 70 31) / .45),
              inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -10px 18px rgba(0, 0, 0, .12);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s;
}
/* блик по плитке — сам по себе раз в несколько секунд и при наведении */
.ikonka::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) no-repeat;
  background-size: 260% 100%; background-position: 150% 0;
}
/* свечение вокруг плитки при наведении */
.ikonka::after {
  content: ""; position: absolute; inset: 6px; z-index: -1; border-radius: inherit; opacity: 0; transform: translateY(6px);
  background: linear-gradient(145deg, var(--i1, #ffa24c), var(--i2, #f0461f)); filter: blur(14px); transition: opacity .5s;
}
.ikonka svg { width: 36px; height: 36px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .16)); }
.ikonka svg :is(g, path, circle, rect) { transform-box: fill-box; transform-origin: center; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .ikonka, .ikonka:hover {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 20px 34px -14px rgb(var(--irgb, 240 70 31) / .9), 0 4px 10px -4px rgb(var(--irgb, 240 70 31) / .45),
              inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -10px 18px rgba(0, 0, 0, .12);
}
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .ikonka::before, .ikonka:hover::before { animation: blik .9s ease; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .ikonka::after, .ikonka:hover::after { opacity: .6; }
.kartochka .ikonka::before { animation: blik-sam 8s ease-in-out infinite; animation-delay: var(--zaderzhka-bl, 3s); }
@keyframes blik { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes blik-sam { 0%, 86% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

/* части значков: что двигается при наведении */
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-kach { animation: z-kach .9s ease; }
@keyframes z-kach { 25% { transform: rotate(-30deg); } 55% { transform: rotate(14deg); } 80% { transform: rotate(-5deg); } }
.ikonka .a-iskra { animation: z-iskra 3.6s ease-in-out infinite; }
.ikonka .a-iskra.i2 { animation-delay: 1.8s; }
@keyframes z-iskra { 0%, 100% { opacity: .15; transform: scale(.4) rotate(0); } 45% { opacity: 1; transform: scale(1.15) rotate(90deg); } 70% { opacity: .9; transform: scale(.9) rotate(135deg); } }
.ikonka .a-kaplya { transform-origin: 50% 100%; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-kaplya { animation: z-kaplya .9s ease; }
@keyframes z-kaplya { 30% { transform: translateY(-3px) scale(.9, 1.1); } 60% { transform: translateY(1px) scale(1.12, .88); } 80% { transform: translateY(-.5px) scale(.97, 1.03); } }
.ikonka .ekg-fon { opacity: .4; }
.ikonka .a-ekg { stroke-width: 2.2; stroke-dasharray: .32 1.2; stroke-dashoffset: .32; animation: z-ekg 2.4s linear infinite; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-ekg { animation-duration: 1s; }
@keyframes z-ekg { from { stroke-dashoffset: .32; } to { stroke-dashoffset: -1.2; } }
.ikonka .a-pruzhina { transform-origin: 50% 100%; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-pruzhina { animation: z-pruzhina .9s cubic-bezier(.3, .7, .4, 1.3); }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-verh { animation: z-verh .9s cubic-bezier(.3, .7, .4, 1.3); }
@keyframes z-pruzhina { 30% { transform: scaleY(.6); } 62% { transform: scaleY(1.08); } 82% { transform: scaleY(.97); } }
@keyframes z-verh { 30% { transform: translateY(3.4px); } 62% { transform: translateY(-.7px); } 82% { transform: translateY(.3px); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-disk { animation: z-tormoz 1.1s cubic-bezier(.15, .7, .25, 1); }
@keyframes z-tormoz { from { transform: rotate(0); } to { transform: rotate(540deg); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-tryas { animation: z-tryas .45s linear 2; }
@keyframes z-tryas {
  10% { transform: translate(-.8px, .5px); } 20% { transform: translate(.8px, -.5px); } 30% { transform: translate(-.7px, -.4px); }
  40% { transform: translate(.7px, .5px); } 50% { transform: translate(-.6px, .3px); } 60% { transform: translate(.6px, -.3px); }
  70% { transform: translate(-.4px, .3px); } 80% { transform: translate(.4px, -.2px); } 90% { transform: translate(-.2px, .1px); }
}
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-rychag { animation: z-rychag 2.4s ease-in-out; }
@keyframes z-rychag {
  9% { transform: translate(0, 6px); } 18% { transform: translate(0, 12px); } 27% { transform: translate(0, 6px); }
  36% { transform: translate(6px, 6px); } 45% { transform: translate(6px, 0); } 54% { transform: translate(6px, 6px); }
  63% { transform: translate(6px, 12px); } 72% { transform: translate(6px, 6px); } 81% { transform: translate(12px, 6px); }
  90%, 100% { transform: translate(12px, 0); }
}
.ikonka .a-remen { stroke-dasharray: .07 .05; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-remen { animation: z-remen 1s linear infinite; }
@keyframes z-remen { to { stroke-dashoffset: -.24; } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-vr1 { animation: vrashchenie 2.2s linear infinite; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-vr2 { animation: z-vr-nazad 1.5s linear infinite; }
.ikonka .variator-nazad { }
@keyframes z-vr-nazad { to { transform: rotate(-360deg); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-mashina { animation: z-mashina .9s ease; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-koleso { animation: vrashchenie .6s linear infinite; }
@keyframes z-mashina { 25% { transform: translateY(-1.4px) rotate(-3deg); } 50% { transform: translateY(.4px); } 75% { transform: translateY(-.6px) rotate(1.5deg); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-ballon { animation: z-tryas .45s linear 2; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-bryzgi { animation: z-bryzgi .35s ease-in-out 4; }
@keyframes z-bryzgi { 50% { opacity: .2; transform: translateX(1.5px); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-vr { animation: z-vr .9s cubic-bezier(.3, .6, .3, 1); }
@keyframes z-vr { to { transform: rotate(360deg); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-rul { animation: z-rul 1.1s ease-in-out; }
@keyframes z-rul { 30% { transform: rotate(-45deg); } 70% { transform: rotate(35deg); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-vr-med { animation: z-vr-med 1.2s ease-in-out; }
@keyframes z-vr-med { to { transform: rotate(180deg); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-vspyshka { animation: z-vspyshka .9s ease; }
@keyframes z-vspyshka { 15% { opacity: .25; } 30% { opacity: 1; transform: scale(1.18); } 45% { opacity: .35; } 62% { opacity: 1; transform: scale(1.05); } }
.ikonka .a-kapelka { opacity: 0; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-kapelka { animation: z-kapelka 1s ease-in 2; }
@keyframes z-kapelka { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(3.5px); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-dym { animation: z-dym 1.2s ease-out 2; }
@keyframes z-dym { 0% { opacity: 0; transform: translate(-1px, 2px) scale(.8); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(1.5px, -3px) scale(1.15); } }
.ikonka .a-rtut { transform-origin: 50% 100%; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-rtut { animation: z-rtut 1.1s ease; }
@keyframes z-rtut { 0% { transform: scaleY(.25); } 60% { transform: scaleY(1.12); } 100% { transform: scaleY(1); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-teplo { animation: z-teplo 1.1s ease-in-out 2; }
@keyframes z-teplo { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-2.2px); opacity: .45; } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover :is(.a-k1, .a-k2, .a-k3) { animation: z-hop .6s cubic-bezier(.3, .7, .4, 1.4); }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-k2 { animation-delay: .1s; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-k3 { animation-delay: .2s; }
@keyframes z-hop { 45% { transform: translateY(-3px); } 70% { transform: translateY(.5px); } }
.ikonka .a-par :is(.p1, .p2) { animation: z-par 2.6s ease-in-out infinite; }
.ikonka .a-par .p2 { animation-delay: 1.3s; }
@keyframes z-par { 0% { opacity: 0; transform: translateY(1.6px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2.6px); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-zvezda { animation: z-zvezda .9s cubic-bezier(.3, .7, .4, 1.3); }
@keyframes z-zvezda { 50% { transform: rotate(36deg) scale(1.2); } to { transform: rotate(72deg); } }
.ikonka .a-medal { transform-box: view-box; transform-origin: 12px 3px; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-medal { animation: z-medal 1.2s ease; }
@keyframes z-medal { 25% { transform: rotate(14deg); } 55% { transform: rotate(-9deg); } 80% { transform: rotate(3deg); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-galka { animation: risovat .7s ease both; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-moneta { animation: z-moneta 1s ease-in-out; }
@keyframes z-moneta { 25% { transform: scaleX(0); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(0); } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-den { animation: z-hop .6s cubic-bezier(.3, .7, .4, 1.4) 2; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-stroki { animation: risovat .8s ease both; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-zvon { animation: z-zvon .9s ease; }
@keyframes z-zvon { 10%, 30%, 50% { transform: rotate(-14deg); } 20%, 40%, 60% { transform: rotate(14deg); } 75% { transform: rotate(0); } }
.ikonka .a-volna { animation: z-volna 2.4s ease-in-out infinite; }
@keyframes z-volna { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-podskok { animation: z-podskok .9s cubic-bezier(.3, .7, .4, 1.3); }
@keyframes z-podskok { 30% { transform: translateY(-3.5px); } 55% { transform: translateY(0) scale(1.08, .92); } 75% { transform: translateY(-1px); } }
.ikonka .a-strelka { transform-box: view-box; transform-origin: 12px 12px; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-strelka { animation: z-vr 1.2s ease-in-out; }
.ikonka .a-klapan { transform-origin: 50% 0; }
:where(.kartochka, .fakt, .kontakt-spisok li, .ikonka):hover .a-klapan { animation: z-klapan .9s ease; }
@keyframes z-klapan { 40% { transform: scaleY(-.5); } }

/* появление: пока значок ждёт своей очереди — спрятан, потом линии рисуются
   (классы ставит sto.js только тем, что ниже экрана, без JS всё видно сразу) */
.ikonka.zhdet { opacity: 0; transform: scale(.6) rotate(-14deg); }
.ikonka.zhdet .l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: none; }
.ikonka.zhdet .f { fill-opacity: 0; }
.ikonka.poyavl { animation: poyavitsya .75s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--zaderzhka, 0s); }
.ikonka.poyavl .l { stroke-dasharray: 1; animation: risovat 1.2s ease both; animation-delay: calc(var(--zaderzhka, 0s) + .2s); }
.ikonka.poyavl .f { animation: zalivka .8s ease both; animation-delay: calc(var(--zaderzhka, 0s) + .6s); }
@keyframes poyavitsya { from { transform: scale(.6) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes risovat { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes zalivka { from { fill-opacity: 0; } }

/* ---------------------------------------------------------------- марки и модели */
.marki { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
@media (max-width: 520px) {
  /* марки на телефоне — в два столбца: тринадцать карточек в один столбец — это два экрана прокрутки */
  .marki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .marki .marka { padding: 16px 40px 14px 16px; }
  .marki .marka b { font-size: 18px; }
  .marki .marka::after { width: 26px; height: 26px; margin-top: -13px; right: 10px; background-size: 13px; }
}
.marka {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 5px;
  padding: 20px 60px 18px 20px; border-radius: 20px; text-decoration: none; color: var(--tekst);
  background: var(--belyj); border: 1px solid rgba(20, 26, 42, .08);
  box-shadow: 0 1px 2px rgba(14, 22, 48, .04), 0 14px 30px -20px rgba(14, 22, 48, .28);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s;
}
/* пятно цвета марки и кружок со стрелкой */
.marka::before {
  content: ""; position: absolute; z-index: -1; right: -46px; bottom: -70px; width: 160px; height: 160px; border-radius: 50%;
  background: var(--c, var(--akcent)); opacity: .13; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s;
}
.marka::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat, var(--c, var(--akcent));
  box-shadow: 0 6px 14px -6px var(--c, var(--akcent)); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.marka:hover {
  transform: translateY(-6px); color: var(--tekst); border-color: var(--c, var(--akcent));
  box-shadow: 0 2px 4px rgba(14, 22, 48, .04), 0 26px 46px -26px var(--c, var(--akcent));
}
.marka:hover::before { transform: scale(1.9); opacity: .2; }
.marka:hover::after { transform: translateX(3px) scale(1.12); }
.marka b { font-family: var(--shrift-zag); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.marka span { font-size: 14px; color: var(--tekst-2); }
.modeli { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; margin: 0 0 1em; }
.modeli li { margin: 0; }
.modeli a {
  display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--belyj); border: 1px solid rgba(20, 26, 42, .1);
  color: var(--tekst); text-decoration: none; font-weight: 600; font-size: 15px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), color .25s, box-shadow .35s, border-color .25s;
}
.modeli a:hover {
  background: #d33718; background: linear-gradient(135deg, #ff6a3d, #d33718); color: #fff; border-color: transparent;
  transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(217, 52, 24, .75);
}

.model-shapka { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: start; margin-bottom: 28px; }
@media (max-width: 900px) {
  .model-shapka { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* на телефоне фото модели — сразу под заголовком, а не после всего текста */
  .model-shapka > div:last-child { order: -1; }
}
.foto { margin: 0; }
.foto img { width: 100%; border-radius: var(--radius); background: #dfe3ec; aspect-ratio: 3 / 2; object-fit: cover; }
.foto figcaption { font-size: 12px; color: #626a7c; margin-top: 8px; line-height: 1.4; }
.foto figcaption a { color: var(--tekst-2); }
.foto figcaption b { color: var(--tekst); font-weight: 600; }
/* Фото машины в едином стиле: машина без фона на тёмной сцене — свет в цвет марки,
   сетка пола, тень под колёсами. Одинаково для всех моделей и марок. */
.foto-scena {
  --c: var(--akcent);
  position: relative; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #16214b 0%, #0a0f2c 100%);
  background: radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--c) 60%, transparent) 0%, transparent 62%),
              radial-gradient(70% 50% at 10% 100%, color-mix(in srgb, var(--c) 25%, transparent) 0%, transparent 60%),
              linear-gradient(160deg, #16214b 0%, #0a0f2c 100%);
  box-shadow: 0 26px 50px -30px rgba(14, 22, 48, .7);
}
.foto-avto { --c: var(--akcent); }
.foto-avto .foto-scena { --c: inherit; }
.foto-scena::before {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 42%; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(140, 170, 255, .4) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 170, 255, .4) 1px, transparent 1px);
  background-size: 44px 44px; transform: perspective(300px) rotateX(58deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 90%); mask-image: linear-gradient(to top, #000, transparent 90%);
}
.foto-scena::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 9%; height: 9%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 70%); filter: blur(5px);
}
.foto-scena img {
  position: absolute; left: 5%; bottom: 10%; width: 90%; height: auto; max-height: 82%; object-fit: contain; object-position: 50% 100%;
  border-radius: 0; background: none; aspect-ratio: auto; transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.foto-avto:hover .foto-scena img { transform: translateX(-1.5%) scale(1.02); }
/* мини-фото в карточке модели на странице марки */
.kartochka-foto {
  --c: var(--akcent);
  position: relative; display: block; aspect-ratio: 5 / 2.4; border-radius: 12px; margin: -4px 0 14px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #16214b 0%, #0a0f2c 100%);
  background: radial-gradient(90% 120% at 90% 0%, color-mix(in srgb, var(--c) 60%, transparent) 0%, transparent 60%), linear-gradient(160deg, #16214b 0%, #0a0f2c 100%);
}
.kartochka-foto::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 6%; height: 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 70%); filter: blur(4px);
}
.kartochka-foto img { position: absolute; left: 6%; bottom: 8%; width: 88%; height: auto; max-height: 86%; object-fit: contain; object-position: 50% 100%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.kartochka:hover .kartochka-foto img { transform: translateX(-3%); }
.kartochka-foto-podpis { font-size: 12px; color: #626a7c; line-height: 1.3; margin: -8px 0 4px; }
.foto-net {
  aspect-ratio: 3 / 2; border-radius: var(--radius); display: grid; place-items: center; text-align: center;
  background: linear-gradient(135deg, #e9ecf4, #dfe4f0); color: var(--tekst-2); padding: 20px; font-size: 15px;
}
.foto-net svg { width: 120px; height: auto; color: #9aa6c4; margin: 0 auto 10px; }

/* ---------------------------------------------------------------- обложка модели
   Рисунок в линию, пока нет фото со свободной лицензией. Цвет — марки (--c).
   Сначала простой фон, потом с color-mix: старый браузер пропустит второй,
   и белый текст не окажется на белом. */
.oblozhka {
  --c: var(--akcent);
  position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden;
  color: #fff; isolation: isolate; box-shadow: var(--ten-silnaya);
  background: linear-gradient(160deg, #141f45 0%, #0b1128 100%);
  background:
    radial-gradient(110% 85% at 88% 6%, color-mix(in srgb, var(--c) 72%, transparent) 0%, transparent 58%),
    radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--c) 30%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, #141f45 0%, #0b1128 100%);
}
.oblozhka::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .13;
  background-image: linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 78%, transparent 100%);
}
.oblozhka-marka {
  position: absolute; left: 28px; top: 24px; display: flex; align-items: center; gap: 9px;
  font-family: var(--shrift-zag); font-weight: 800; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.oblozhka-marka::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 0 14px var(--c);
}
.oblozhka-model {
  position: absolute; left: 26px; top: 48px; right: 24px;
  font-family: var(--shrift-zag); font-weight: 800; font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.02; letter-spacing: -.03em; text-wrap: balance;
}
.oblozhka-siluet { position: absolute; left: 5%; bottom: 10%; width: 90%; height: auto; overflow: visible;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, .10)); }
.oblozhka figcaption { position: absolute; right: 18px; bottom: 12px; font-size: 12px; color: rgba(255, 255, 255, .5); }
.siluet path, .siluet circle, .oblozhka-siluet path, .oblozhka-siluet circle {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round;
}
.oblozhka-siluet > path:first-of-type, .siluet > path:first-of-type { fill: rgba(255, 255, 255, .045); }
.siluet .steklo, .oblozhka-siluet .steklo { fill: rgba(255, 255, 255, .09); stroke-opacity: .6; stroke-width: 1.6; }
.siluet .liniya, .oblozhka-siluet .liniya { stroke-opacity: .38; stroke-width: 1.4; }
.siluet .disk, .oblozhka-siluet .disk { stroke: var(--c, currentColor); stroke-width: 2.2; }
.siluet .ten, .oblozhka-siluet .ten { fill: rgba(0, 0, 0, .5); stroke: none; filter: blur(4px); }

/* мини-обложка в карточке модели на странице марки */
.kartochka-risunok {
  --c: var(--akcent);
  display: block; aspect-ratio: 5 / 2; border-radius: 12px; margin: -4px 0 14px; color: #fff; position: relative;
  background: linear-gradient(160deg, #141f45 0%, #0b1128 100%);
  background: radial-gradient(90% 120% at 90% 0%, color-mix(in srgb, var(--c) 65%, transparent) 0%, transparent 60%),
              linear-gradient(160deg, #141f45 0%, #0b1128 100%);
}
.kartochka-risunok .siluet { position: absolute; left: 8%; bottom: 6%; width: 84%; height: auto; }
.kartochka:hover .kartochka-risunok .siluet { transform: translateX(4px); transition: transform .25s; }

/* ---------------------------------------------------------------- страница «Марки»: карточка марки */
.marka-karta { padding: 16px 16px 22px; }
.marka-karta:hover {
  transform: translateY(-6px); border-color: rgb(var(--irgb) / .35);
  box-shadow: 0 2px 4px rgba(14, 22, 48, .04), 0 32px 58px -28px rgb(var(--irgb) / .6);
}
.marka-scena {
  position: relative; display: block; aspect-ratio: 16 / 8.6; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #16214b 0%, #0a0f2c 100%);
  background: radial-gradient(95% 125% at 92% 0%, color-mix(in srgb, var(--c) 72%, transparent) 0%, transparent 62%),
              radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--c) 30%, transparent) 0%, transparent 70%),
              linear-gradient(160deg, #16214b 0%, #0a0f2c 100%);
}
.marka-scena::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 7%; height: 10%; z-index: 0; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 70%); filter: blur(5px);
}
.marka-scena img {
  position: absolute; z-index: 1; left: 7%; bottom: 9%; width: 86%; height: auto; max-height: 76%;
  object-fit: contain; object-position: 50% 100%; transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.marka-scena .siluet { position: absolute; z-index: 1; left: 9%; bottom: 8%; width: 82%; height: auto; color: #fff; }
.marka-karta:hover .marka-scena img { transform: translateX(-3%) scale(1.04); }
.marka-slovo {
  position: absolute; z-index: 0; left: 16px; top: 12px; right: 90px; overflow: hidden; white-space: nowrap;
  font-family: var(--shrift-zag); font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.01em;
  text-transform: uppercase; color: rgba(255, 255, 255, .13);
  transition: color .5s, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.marka-karta:hover .marka-slovo { color: rgba(255, 255, 255, .22); transform: translateX(6px); }
.marka-schet {
  position: absolute; z-index: 2; right: 12px; top: 12px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.marka-karta .marka-podpis { font-size: 12px; color: #626a7c; line-height: 1.3; margin: 7px 4px 0; }
.marka-karta h3 { margin: 16px 4px 6px; font-size: 25px; }
.marka-karta h3 a { color: inherit; text-decoration: none; }
.marka-karta h3 a:hover { color: var(--c); }
.marka-karta .marka-fakt { margin: 0 4px 14px; font-size: 15.5px; }
.marka-modeli { list-style: none; margin: 0 4px 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.marka-modeli li { margin: 0; }
.marka-modeli a {
  display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  color: var(--tekst); text-decoration: none; background: #f1f3f8; border: 1px solid rgba(20, 26, 42, .06);
  transition: background .25s, color .25s, border-color .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.marka-modeli a:hover { background: var(--c); border-color: var(--c); color: #fff; transform: translateY(-2px); }
.marka-modeli a.esche { background: transparent; border-style: dashed; border-color: rgba(20, 26, 42, .22); color: var(--tekst-2); }
.marka-modeli a.esche:hover { background: var(--c); border-color: var(--c); color: #fff; }
.marka-karta .dalee { margin: auto 4px 0; padding: 8px 0; text-decoration: none; }
.marka-karta .dalee:hover { color: var(--c); }

.harakteristiki { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0 0 1.2em; }
.harakteristiki dt { color: var(--tekst-2); }
.harakteristiki dd { margin: 0; font-weight: 600; }
@media (max-width: 520px) { .harakteristiki { grid-template-columns: minmax(0, 1fr); gap: 2px; } .harakteristiki dd { margin-bottom: 10px; } }

/* ---------------------------------------------------------------- цены */
.tablica-obertka {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; border: 1px solid rgba(20, 26, 42, .08);
  background: var(--belyj); box-shadow: 0 1px 2px rgba(14, 22, 48, .04), 0 16px 36px -22px rgba(14, 22, 48, .28); margin: 0 0 1.2em;
}
table { border-collapse: collapse; width: 100%; }
.tablica-cen, .tablica { font-size: 16px; }
.tablica-cen th, .tablica-cen td, .tablica th, .tablica td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--liniya); vertical-align: top; }
.tablica-cen tr:last-child td, .tablica tr:last-child td { border-bottom: 0; }
.tablica-cen thead th, .tablica thead th {
  background: #141d4c; color: #fff;
  font-family: var(--shrift-zag); font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.tablica-cen .gruppa th { background: var(--fon); color: var(--tekst); font-family: var(--shrift-zag); font-size: 16px; }
.tablica-cen td.cena { white-space: nowrap; font-family: var(--shrift-zag); font-weight: 800; text-align: right; transition: color .25s; }
.tablica-cen th.cena { text-align: right; }
.tablica-cen td small, .tablica td small { display: block; color: var(--tekst-2); font-size: 13px; }
.tablica-cen tbody td { transition: background-color .25s, box-shadow .25s; }
.tablica-cen tbody tr:hover td { background: #fff5f1; }
.tablica-cen tbody tr:hover td:first-child { box-shadow: inset 4px 0 0 var(--akcent-yarkiy); }
.tablica-cen tbody tr:hover td.cena { color: var(--akcent-tekst); }
/* телефон: таблица цен целиком в экран — поля уже, слова в столбце цены («после диагностики»)
   переносятся; сама цена не рвётся: пробелы в ней неразрывные (плагин цен) */
@media (max-width: 640px) {
  .tablica-cen th, .tablica-cen td, .tablica th, .tablica td { padding: 12px 14px; }
  .tablica-cen, .tablica { font-size: 15px; }
  .tablica-cen td.cena { white-space: normal; min-width: 92px; }
  .tablica-cen .na-shirokom { display: none; }
  /* широкие таблицы (политика данных) на телефоне — карточками: строка за строкой, с подписью столбца */
  .tablica-karty thead { display: none; }
  .tablica-karty tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--liniya); }
  .tablica-karty tr:last-child { border-bottom: 0; }
  .tablica-karty td { display: block; padding: 3px 0; border: 0; }
  .tablica-karty td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--tekst-2); }
}
.ceny-data, .ceny-ogovorka { font-size: 14px; color: var(--tekst-2); }

/* ---------------------------------------------------------------- шаги */
.shagi { counter-reset: shag; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; }
.shagi li {
  --i1: #ffa24c; --i2: #f0461f; --irgb: 240 70 31;
  counter-increment: shag; position: relative; margin: 0; background: var(--belyj); border: 1px solid rgba(20, 26, 42, .08);
  border-radius: 20px; padding: 24px 22px 22px;
  box-shadow: 0 1px 2px rgba(14, 22, 48, .04), 0 16px 36px -22px rgba(14, 22, 48, .28);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s;
}
.shagi li:nth-child(2) { --i1: #43e8cf; --i2: #0b958a; --irgb: 11 149 138; }
.shagi li:nth-child(3) { --i1: #5aaaff; --i2: #2455e6; --irgb: 36 85 230; }
.shagi li:nth-child(4) { --i1: #ffd84a; --i2: #f08a00; --irgb: 240 138 0; }
.shagi li:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(14, 22, 48, .04), 0 28px 52px -28px rgb(var(--irgb) / .65); }
.shagi li::before {
  content: counter(shag); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; margin-bottom: 16px;
  color: #fff; font-family: var(--shrift-zag); font-weight: 800; font-size: 23px;
  background: radial-gradient(120% 100% at 18% 0%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%), linear-gradient(145deg, var(--i1), var(--i2));
  box-shadow: 0 14px 26px -12px rgb(var(--irgb) / .8), inset 0 1px 1px rgba(255, 255, 255, .5);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.shagi li:hover::before { transform: rotate(-8deg) scale(1.1); }
/* стрелка между шагами бежит вперёд */
.shagi li:not(:last-child)::after {
  content: ""; position: absolute; top: 45px; right: -21px; width: 18px; height: 18px; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l7 7-7 7' fill='none' stroke='%23f0461f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  animation: strelka-shag 1.6s ease-in-out infinite;
}
@keyframes strelka-shag { 0%, 100% { transform: translateX(-3px); opacity: .35; } 50% { transform: translateX(3px); opacity: 1; } }
.shagi b { display: block; font-family: var(--shrift-zag); font-size: 18px; margin-bottom: 6px; }
.shagi span { color: var(--tekst-2); font-size: 15px; }
@media (max-width: 1000px) { .shagi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shagi li::after { display: none; } }
@media (max-width: 560px) { .shagi { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- вопросы */
.voprosy { display: grid; gap: 12px; }
.voprosy details {
  background: var(--belyj); border: 1px solid rgba(20, 26, 42, .08); border-radius: 18px; padding: 0 22px;
  box-shadow: 0 1px 2px rgba(14, 22, 48, .04), 0 12px 28px -22px rgba(14, 22, 48, .3); transition: border-color .3s, box-shadow .3s;
}
.voprosy details:hover { border-color: rgba(217, 52, 24, .25); }
.voprosy details[open] { border-color: rgba(217, 52, 24, .32); box-shadow: 0 1px 2px rgba(14, 22, 48, .04), 0 24px 46px -28px rgba(217, 52, 24, .5); }
.voprosy summary {
  cursor: pointer; list-style: none; padding: 20px 50px 20px 0; position: relative;
  font-family: var(--shrift-zag); font-weight: 700; font-size: 17px;
}
.voprosy summary::-webkit-details-marker { display: none; }
.voprosy summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: linear-gradient(var(--akcent), var(--akcent)) center / 12px 2.5px no-repeat,
              linear-gradient(var(--akcent), var(--akcent)) center / 2.5px 12px no-repeat, var(--krasnyj-fon);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.voprosy details[open] summary::after {
  transform: rotate(135deg);
  background: linear-gradient(#fff, #fff) center / 12px 2.5px no-repeat, linear-gradient(#fff, #fff) center / 2.5px 12px no-repeat,
              linear-gradient(135deg, #ff6a3d, #d33718);
}
.voprosy details > div { padding: 0 0 18px; color: var(--tekst-2); }
.voprosy details[open] > div { animation: raskryt .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes raskryt { from { opacity: 0; transform: translateY(-8px); } }

/* ---------------------------------------------------------------- заметки */
.zametka { border-radius: var(--radius-m); padding: 18px 20px; margin: 0 0 1.2em; background: var(--biryuza-fon); border-left: 4px solid var(--biryuza); }
.zametka-zholtaya { background: var(--zholtyj-fon); border-left-color: var(--zholtyj); }
.zametka-krasnaya { background: var(--krasnyj-fon); border-left-color: var(--akcent); }
.zametka p:last-child, .zametka ul:last-child { margin-bottom: 0; }
.spisok-galochki { list-style: none; padding: 0; }
.spisok-galochki li { position: relative; padding-left: 32px; }
.spisok-galochki li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--biryuza) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------------------------------------------------------------- призыв */
.prizyv {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 46px 46px; color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center;
  /* градиент темнее прежнего (#ff6a3d в начале): белый текст на нём читается — контраст от 4.7 */
  background: #c22e14; background: linear-gradient(120deg, #d03f1b 0%, #c22e14 38%, #8f200e 72%, #c22e14 100%);
  background-size: 220% 220%; animation: prizyv-fon 12s ease-in-out infinite;
  box-shadow: 0 32px 64px -32px rgba(185, 43, 19, .75);
}
@keyframes prizyv-fon { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.prizyv::before {
  content: ""; position: absolute; z-index: -1; width: 440px; height: 440px; right: -130px; top: -230px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 200, 61, 0), rgba(255, 200, 61, .85) 90deg, rgba(255, 255, 255, .4) 150deg, rgba(255, 200, 61, 0) 220deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 39px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 39px));
  animation: vrashchenie 14s linear infinite;
}
.prizyv::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 8% 125%, rgba(255, 255, 255, .16) 0 110px, transparent 111px),
              radial-gradient(circle at 62% -30%, rgba(255, 255, 255, .1) 0 70px, transparent 71px);
  animation: plyt-krugi 10s ease-in-out infinite alternate;
}
@keyframes plyt-krugi { to { transform: translate(34px, -10px); } }
.prizyv h2 { color: #fff; margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 40px); }
.prizyv p { margin: 0; color: #fff; }
.prizyv .knopki { display: flex; gap: 12px; flex-wrap: wrap; }
.prizyv .knopka-zholtaya { animation: dyhanie-zh 3s ease-in-out infinite; }
@keyframes dyhanie-zh {
  0% { box-shadow: 0 10px 24px -10px rgba(255, 183, 0, .85), 0 0 0 0 rgba(255, 216, 101, .6); }
  60%, 100% { box-shadow: 0 14px 30px -10px rgba(255, 183, 0, .9), 0 0 0 16px rgba(255, 216, 101, 0); }
}
@media (max-width: 800px) { .prizyv { grid-template-columns: minmax(0, 1fr); padding: 30px 24px; } }

/* ---------------------------------------------------------------- форма */
.forma-zapisi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }
.pole { display: flex; flex-direction: column; gap: 6px; }
.pole-shirokoe, .forma-zapisi .soglasie, .forma-zapisi .knopki-formy, .forma-itog, .forma-primechanie { grid-column: 1 / -1; }
.pole label { font-weight: 600; font-size: 15px; }
.pole input, .pole select, .pole textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--tekst); background: var(--belyj);
  border: 1.5px solid #cfd5e3; border-radius: 12px; padding: 12px 14px; min-height: 50px;
}
.pole textarea { min-height: 96px; resize: vertical; }
.pole input:focus, .pole select:focus, .pole textarea:focus { border-color: var(--biryuza); outline: none; box-shadow: 0 0 0 4px rgba(18, 181, 165, .2); }
.soglasie { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--tekst-2); line-height: 1.5; cursor: pointer; }
.soglasie input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--akcent); }
.lovushka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.forma-itog { margin: 0; font-weight: 600; min-height: 1px; }
.forma-itog.ok { color: #0b6b62; }
.forma-itog.oshibka { color: var(--akcent-temn); }
.forma-primechanie { font-size: 14px; color: var(--tekst-2); margin: 0; }
@media (max-width: 640px) { .forma-zapisi { grid-template-columns: minmax(0, 1fr); } }

.zapis-karta { background: var(--belyj); border-radius: 24px; padding: 30px; box-shadow: var(--ten); border: 1px solid var(--liniya); }

/* окно записи */
.okno { border: 0; border-radius: 24px; padding: 0; width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 24px); box-shadow: var(--ten-silnaya); }
.okno::backdrop { background: rgba(14, 22, 48, .6); backdrop-filter: blur(3px); }
.okno-vnutri { padding: 30px 30px 26px; }
.okno h2 { font-size: 28px; margin: 0 40px 6px 0; }
.okno .podzag { color: var(--tekst-2); margin: 0 0 20px; }
.okno-zakryt {
  position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--fon); cursor: pointer; display: grid; place-items: center; color: var(--tekst);
}
.okno-zakryt svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .okno-vnutri { padding: 24px 18px 20px; } .okno h2 { font-size: 23px; } }

/* ---------------------------------------------------------------- контакты */
.kontakty-setka { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .kontakty-setka { grid-template-columns: minmax(0, 1fr); } }
.kontakt-spisok { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.kontakt-spisok li { margin: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: center; }
.kontakt-spisok .ikonka { width: 54px; height: 54px; border-radius: 17px; }
.kontakt-spisok .ikonka svg { width: 30px; height: 30px; }
.kontakt-spisok b { display: block; font-family: var(--shrift-zag); }
.karta-ramka {
  border-radius: 22px; overflow: hidden; border: 1px solid rgba(20, 26, 42, .08); position: relative; min-height: 600px;
  background: #e8ebf2; background: radial-gradient(420px 300px at 80% 10%, rgba(214, 32, 63, .12), transparent 60%), #eceff6;
  box-shadow: 0 1px 2px rgba(14, 22, 48, .04), 0 16px 36px -22px rgba(14, 22, 48, .28);
}
.karta-ramka iframe { display: block; width: 100%; height: 600px; border: 0; animation: raskryt .6s ease; }
.karta-zaglushka { padding: 26px; display: grid; gap: 12px; align-content: center; min-height: 600px; text-align: center; justify-items: center; }
.karta-zaglushka p { max-width: 380px; margin: 0; }
.karta-zaglushka > a { padding: 9px 6px; }
@media (max-width: 640px) { .karta-ramka, .karta-zaglushka { min-height: 440px; } .karta-ramka iframe { height: 440px; } }

/* ---------------------------------------------------------------- подвал */
.podval {
  position: relative; color: var(--na-temnom-2); font-size: 15px; padding: 60px 0 30px; margin-top: 40px;
  background: radial-gradient(820px 340px at 92% 0%, rgba(255, 75, 43, .16), transparent 60%),
              radial-gradient(660px 320px at 0% 100%, rgba(18, 181, 165, .12), transparent 60%), var(--temnyj);
}
/* переливающаяся полоса сверху */
.podval::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #ff4b2b, #ffc83d, #12b5a5, #6a3cf0, #ff4b2b); background-size: 200% 100%;
  animation: perelivy 9s linear infinite;
}
.podval a { color: var(--na-temnom); text-decoration: none; transition: color .2s; }
.podval a:hover { color: #fff; text-decoration: underline; }
.podval-setka { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 30px; }
@media (max-width: 1000px) { .podval-setka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .podval-setka { grid-template-columns: minmax(0, 1fr); } }
.podval h3 { color: #fff; font-size: 16px; margin: 0 0 14px; letter-spacing: .02em; }
.podval ul { list-style: none; padding: 0; margin: 0; }
.podval li { margin: 0 0 8px; }
@media (max-width: 920px) {
  /* в подвале на телефоне ссылки выше — по ним удобно попасть пальцем */
  .podval li { margin: 0; }
  .podval li > a, .podval li > .knopka-ssylka { display: inline-block; padding: 7px 0; }
}
.podval-tel { font-family: var(--shrift-zag); font-size: 24px; font-weight: 800; color: #fff !important; display: inline-block; margin-bottom: 6px; }
.podval-niz { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 36px; padding-top: 22px; font-size: 13px; line-height: 1.6; display: grid; gap: 8px; }
.podval .logo { color: #fff; margin-bottom: 16px; }
.podval .logo-tekst small { color: var(--na-temnom-2); }
.podval .logo-akcent { color: #ff8a3d; background: linear-gradient(100deg, #ffc83d 0%, #ff8a3d 60%, #ff6a3d 100%); -webkit-background-clip: text; background-clip: text; }
.knopka-ssylka { background: none; border: 0; padding: 0; font: inherit; color: var(--na-temnom); cursor: pointer; text-align: left; }
.knopka-ssylka:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- панель на телефоне */
.mob-panel { display: none; }
@media (max-width: 920px) {
  .mob-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--liniya); box-shadow: 0 -8px 24px rgba(14, 22, 48, .12);
  }
  .mob-panel .knopka { width: 100%; padding: 12px 10px; }
  body { padding-bottom: 76px; }
}

/* ---------------------------------------------------------------- cookie */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto;
  background: var(--belyj); color: var(--tekst); border-radius: 18px; box-shadow: var(--ten-silnaya);
  border: 1px solid var(--liniya); padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; font-size: 15px; color: var(--tekst-2); }
.cookie-knopki { display: flex; gap: 10px; }
.cookie .knopka { min-height: 44px; padding: 10px 18px; font-size: 15px; }
@media (max-width: 920px) { .cookie { bottom: 86px; grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- страница ошибки */
.oshibka-stranica { text-align: center; padding: 70px 0 40px; }
.oshibka-kod { font-family: var(--shrift-zag); font-size: clamp(90px, 16vw, 170px); font-weight: 800; line-height: 1; color: var(--akcent); margin: 0; letter-spacing: -.04em; }

/* ---------------------------------------------------------------- появление при прокрутке
   Блоки ниже экрана ждут (zhdet-blok) и выплывают, когда до них долистали.
   Классы ставит sto.js; без JS и при «меньше движения» всё видно сразу. */
.zhdet-blok { opacity: 0; transform: translateY(34px) scale(.985); }
.poyavl-blok {
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1) !important;
  transition-delay: var(--zaderzhka, 0s) !important;
}
.shapka { transition: box-shadow .3s, background-color .3s; }
.shapka.prokrutka { box-shadow: 0 12px 30px -20px rgba(14, 22, 48, .45); }

/* ---------------------------------------------------------------- печать */
@media print {
  .verh, .shapka, .mob-panel, .cookie, .podval, .okno, .prizyv, .kroshki { display: none !important; }
  body { background: #fff; font-size: 12pt; padding: 0; }
  .geroy { background: none; color: #000; padding: 0; }
  .geroy h1 { color: #000; }
  .geroy-fon, .geroy-risunok { display: none; }
  .geroy h1 span, .fakt b, .cena-ot b, .logo-akcent { background: none; -webkit-text-fill-color: currentColor; color: #000; }
  .zhdet-blok, .ikonka.zhdet { opacity: 1 !important; transform: none !important; }
  a { color: #000; }
}

/* ---------------------------------------------------------------- меньше движения
   Анимации выключены целиком (правило в начале файла); здесь — то, что без
   анимации осталось бы спрятанным. */
@media (prefers-reduced-motion: reduce) {
  .siluet-geroy path, .siluet-geroy .shina { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .siluet-geroy .fara, .siluet-geroy .luch { opacity: .7; }
  .avto-stop { opacity: 0; }
  .polosy { display: none; }
  .zhdet-blok, .ikonka.zhdet { opacity: 1 !important; transform: none !important; }
  .ikonka.zhdet .l { stroke-dashoffset: 0 !important; }
  .ikonka.zhdet .f { fill-opacity: .24 !important; }
  .ikonka .a-kapelka { opacity: 0; }
}