/* =====================================================================
   ТК «Транслайн» — дизайн-система сайта (по макету «Обновление дизайна», v2)
   Тёмная тема по умолчанию, светлая — [data-theme="light"] на <html>.
   ===================================================================== */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/onest-cyrillic-300-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/onest-latin-300-normal.woff2') format('woff2'); 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, U+20BD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/onest-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/onest-latin-400-normal.woff2') format('woff2'); 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, U+20BD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/onest-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/onest-latin-500-normal.woff2') format('woff2'); 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, U+20BD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/onest-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/onest-latin-600-normal.woff2') format('woff2'); 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, U+20BD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/onest-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/onest-latin-700-normal.woff2') format('woff2'); 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, U+20BD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/onest-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/onest-latin-800-normal.woff2') format('woff2'); 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, U+20BD; }
:root {
  --f: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  --red: #FF1F00; --red2: #FF3519; --redt: #FF4A2E; --redl: #FF6A50; --green: #2FD27A; --yellow: #FFC53D; --tg: #2AABEE; --wa: #25D366; --max: #7B5CFF;
  --bg: #0B0F19; --s1: #121826; --s2: #19202F; --night: #070A12;
  --ink: #FFFFFF; --mut: #8D97AA; --mut2: #B7BFCD;
  --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.16); --chip: rgba(255,255,255,.05);
  --hdr: rgba(11,15,25,.72); --hdr-ink: #fff; --hdr-nav: rgba(255,255,255,.8); --hdr-line: rgba(255,255,255,.12); --hdr-chip: rgba(255,255,255,.07); --hdr-pop: #121826; --hdr-ind: rgba(255,255,255,.1);
  --h-bg: #0B0F19; --h-ink: #fff; --h-t82: rgba(255,255,255,.82); --h-mut: #9AA3B5; --h-line: rgba(255,255,255,.14); --h-line2: rgba(255,255,255,.24); --h-chip: rgba(255,255,255,.06); --h-chip2: rgba(255,255,255,.1); --h-pop: #19202F;
  --h-form: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); --h-ov: 11,15,25; --h-inv-line: rgba(11,15,25,.14); --h-inv-mut: #5E6778; --map-ink: #FFFFFF;
  --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.3,1.4,.4,1);
  --r-xl: 36px; --r-lg: 30px; --r-md: 28px; --r-sm: 18px;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #F1F2F4; --s1: #FFFFFF; --s2: #F7F8FA; --ink: #0B0F19; --mut: #5E6778; --mut2: #3B4252;
  --line: rgba(11,15,25,.08); --line2: rgba(11,15,25,.18); --chip: rgba(11,15,25,.05); --redt: #E61C00;
  --hdr: rgba(255,255,255,.82); --hdr-ink: #0B0F19; --hdr-nav: rgba(11,15,25,.72); --hdr-line: rgba(11,15,25,.08); --hdr-chip: rgba(11,15,25,.05); --hdr-pop: #FFFFFF; --hdr-ind: #FFFFFF;
  color-scheme: light;
}
[data-theme="light"] .hero, [data-theme="light"] .phero {
  --h-bg: #FFFFFF; --h-ink: #0B0F19; --h-t82: rgba(11,15,25,.78); --h-mut: #5E6778; --h-line: rgba(11,15,25,.1); --h-line2: rgba(11,15,25,.2); --h-chip: rgba(11,15,25,.04); --h-chip2: rgba(11,15,25,.07); --h-pop: #FFFFFF;
  --h-form: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.45)); --h-ov: 255,255,255; --h-inv-line: rgba(255,255,255,.18); --h-inv-mut: #A3ACBD; --map-ink: #0B0F19;
}

/* --- base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color .4s, color .4s; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .25s; }
a:hover { color: var(--redt); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input::placeholder, textarea::placeholder { color: inherit; opacity: .45; }
:focus-visible { outline: 2px solid var(--redt); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--red); color: #fff; }
.skip:focus { top: 12px; color: #fff; }
.num, [data-num] { font-variant-numeric: tabular-nums; }
.mut { color: var(--mut); }
.red { color: var(--redt); }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

.wrap { max-width: 1368px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1392px; margin: 0 auto; padding: 0 10px; }
.sec { padding-top: 120px; }
.sec-s { padding-top: 14px; }
.sec-m { padding-top: 72px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.eyebrow { font-size: 15px; color: var(--mut); }
.h2 { margin-top: 14px; font: 300 clamp(36px, 5vw, 80px)/1.04 var(--f); letter-spacing: -.045em; text-wrap: balance; }
.h2 b, .h1 b { font-weight: 800; letter-spacing: -.05em; }
.h2--m { font-size: clamp(32px, 4vw, 60px); }
.h3 { font-size: clamp(22px, 1.9vw, 27px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.lead { max-width: 380px; font-size: 15px; color: var(--mut); text-wrap: pretty; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--redl); }
.link-u { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line2); font-size: 15px; font-weight: 500; }
.link-u:hover { border-color: var(--redt); }
.link-line { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 700; }
.link-line i { display: block; width: 44px; height: 2px; background: currentColor; transition: width .4s var(--ease); }
.link-line:hover i { width: 56px; }
.card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--s1); }
.grid { display: grid; gap: 14px; }
.g-auto-300 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.g-auto-260 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.g-auto-340 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.g-auto-420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.g-auto-480 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.g-auto-190 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

/* --- buttons --- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; height: 56px; padding: 0 6px 0 24px; border: 0; border-radius: 999px; background-color: var(--red);
  background-image: linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.32) 50%, rgba(255,255,255,0) 65%); background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat;
  color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 16px 38px -14px rgba(255,31,0,.9), inset 0 1px 0 rgba(255,255,255,.25);
  transition: background-position .9s var(--ease), background-color .3s, box-shadow .3s, transform .4s var(--ease); }
.btn:hover { background-color: var(--red2); background-position: -30% 0; color: #fff; }
.btn__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--red); transition: transform .5s var(--spring); }
.btn:hover .btn__ico { transform: rotate(-45deg) scale(1.06); }
.btn--sq { border-radius: 15px; } .btn--sq .btn__ico { border-radius: 11px; background: rgba(255,255,255,.18); color: #fff; }
.btn--sm { height: 48px; padding-left: 20px; font-size: 14.5px; } .btn--sm .btn__ico { width: 36px; height: 36px; }
.btn--lg { height: 62px; padding-left: 30px; font-size: 16px; } .btn--lg .btn__ico { width: 48px; height: 48px; }
.btn--block { width: 100%; }
.btn--dark { background-color: #0B0F19; box-shadow: none; } .btn--dark:hover { background-color: #19202F; }
.btn--ghost { background: var(--chip); background-image: none; border: 1px solid var(--line2); color: var(--ink); box-shadow: none; padding-left: 24px; }
.btn--ghost:hover { background-color: var(--chip); border-color: var(--ink); color: var(--ink); }
.btn--ghost .btn__ico { background: var(--ink); color: var(--bg); }
.btn--plain { justify-content: center; padding: 0 24px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.pill:hover { background: var(--red); color: #fff; }
.pill--ink { background: var(--ink); color: var(--bg); }
.pill--line { background: transparent; border: 1px solid var(--line2); }
.pill--line:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.pill--red { background: var(--red); color: #fff; } .pill--red:hover { background: var(--red2); }
.pill--sm { height: 38px; padding: 0 16px; }
.round { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .4s var(--spring); }
.round:hover { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg); }

/* segmented tabs with counters */
.seg-wrap { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--chip); }
.seg button { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color .35s, color .35s; }
.seg button span { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--mut); font-size: 12.5px; line-height: 28px; text-align: center; transition: background-color .35s, color .35s; }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.seg button[aria-selected="true"] span { background: var(--red); color: #fff; }
.seg--plain button { padding: 0 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 38px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 999px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip--sm { height: 30px; padding: 0 11px; font-size: 13.5px; }

/* --- fields --- */
.field { position: relative; display: block; min-width: 0; padding: 10px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--s2); transition: border-color .25s, background-color .25s; }
.field:hover { border-color: var(--line2); }
.field:focus-within { border-color: var(--ink); }
.field > span, .field__lab { display: block; font-size: 12px; color: var(--mut); }
.field input, .field select, .field textarea { display: block; width: 100%; padding: 0; border: 0; background: transparent; font-size: 16px; font-weight: 600; color: var(--ink); outline: none; }
.field select { cursor: pointer; appearance: none; background: transparent; }
.field select option { color: #000; }
.field textarea { resize: vertical; font-weight: 500; line-height: 1.5; }
.field.is-err { border-color: var(--red); }
.err { display: block; margin-top: 6px; padding: 0 6px; font-size: 12.5px; color: var(--redt); }
.field-row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--red); cursor: pointer; }
.toggle { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: var(--chip); }
.toggle button { position: relative; z-index: 1; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--mut); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: color .3s, background-color .3s; }
.toggle button[aria-pressed="true"] { background: var(--s1); color: var(--ink); box-shadow: 0 4px 14px -6px rgba(0,0,0,.4); }
input[type="range"] { width: 100%; accent-color: var(--red); cursor: pointer; }

/* =================== top strip, utility bar, header =================== */
.urg { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 16px; min-height: 34px; padding: 6px 16px; background: var(--red); color: #fff; font-size: 13px; font-weight: 500; text-align: center; }
.urg span { display: flex; align-items: center; gap: 8px; }
.urg b { padding: 1px 8px; border-radius: 6px; background: rgba(0,0,0,.2); font-weight: 700; font-variant-numeric: tabular-nums; }
.urg a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.urg a:hover { color: #fff; }
.util { max-width: 1400px; margin: 0 auto; padding: 0 30px; height: 46px; display: flex; align-items: center; gap: 24px; font-size: 13px; color: var(--mut); }
.util__city { display: flex; align-items: center; gap: 6px; }
.util__city select { padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; outline: none; cursor: pointer; }
.util__city select option { color: #000; }
.util__disp { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.live { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: live 1.8s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(47,210,122,.6); } 100% { box-shadow: 0 0 0 7px rgba(47,210,122,0); } }
.aud { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--chip); }
.aud__knob { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--s1); box-shadow: 0 4px 14px -6px rgba(0,0,0,.4); transition: transform .5s cubic-bezier(.35,1.3,.45,1); }
[data-aud="priv"] .aud__knob { transform: translateX(100%); }
.aud button { position: relative; height: 30px; padding: 0 16px; border: 0; background: transparent; color: var(--mut); font-size: 13px; font-weight: 600; white-space: nowrap; transition: color .3s; }
[data-aud="biz"] .aud [data-aud-set="biz"], [data-aud="priv"] .aud [data-aud-set="priv"] { color: var(--ink); }
.theme-t { position: relative; flex: none; width: 54px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: var(--chip); }
.theme-t__icons { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; color: var(--mut); }
.theme-t__knob { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); transform: translateX(24px); transition: transform .55s cubic-bezier(.35,1.5,.45,1); }
[data-theme="light"] .theme-t__knob { transform: none; }
.theme-t__knob .i-sun { display: none; } [data-theme="light"] .theme-t__knob .i-sun { display: block; } [data-theme="light"] .theme-t__knob .i-moon { display: none; }
.util__cab { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink); white-space: nowrap; }

.hdr { position: sticky; z-index: 50; top: 10px; margin: 0 auto; width: calc(100% - 36px); max-width: 1400px; height: 66px; display: flex; align-items: center; gap: 18px; padding: 0 9px 0 20px; border-radius: 22px; background: var(--hdr); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 24px 60px -30px rgba(0,0,0,.55); color: var(--hdr-ink); transition: height .45s var(--ease), margin .45s var(--ease), background-color .4s, color .4s; }
.hdr.is-compact { height: 58px; margin-bottom: 8px; }
.hdr__progress { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #FF1F00, #FF8A5C); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.logo { flex: none; display: flex; align-items: center; gap: 14px; color: var(--hdr-ink); }
.logo:hover { color: var(--hdr-ink); }
.logo svg { overflow: visible; }
.logo__tag { padding-left: 14px; border-left: 1px solid var(--hdr-line); font-size: 10.5px; font-weight: 600; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.nav { position: relative; display: flex; align-items: center; margin: 0 auto; font-size: 14px; font-weight: 500; }
.nav__ind { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 12px; background: var(--hdr-ind); opacity: 0; pointer-events: none; transition: left .5s cubic-bezier(.3,.9,.25,1), width .5s cubic-bezier(.3,.9,.25,1), opacity .3s; }
.nav > a { position: relative; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 11px; color: var(--hdr-nav); }
.nav > a:hover, .nav > a[aria-current="page"] { color: var(--hdr-ink); }
.nav > a[aria-current="page"]::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--red); }
.nav svg { transition: transform .4s var(--ease); }
.nav > a.is-open svg { transform: rotate(180deg); }
.nav__badge { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; }
.hdr__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hdr__quick { display: flex; align-items: center; gap: 2px; }
.hdr__quick a { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--hdr-nav); transition: background-color .25s, color .25s; }
.hdr__quick a:hover { background: var(--hdr-chip); color: var(--hdr-ink); }
.hdr__phone { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding: 0 6px 0 10px; line-height: 1.1; white-space: nowrap; }
.hdr__phone b { font-size: 15.5px; font-weight: 600; letter-spacing: .01em; }
.hdr__phone span { font-size: 11.5px; color: var(--mut); }
.hdr__phone:hover { color: var(--hdr-ink); }
.msgr { display: flex; align-items: center; gap: 4px; }
.msgr a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hdr-chip); font-size: 10px; font-weight: 800; transition: background-color .25s, color .25s, transform .4s var(--spring); }
.msgr a:hover { transform: translateY(-2px); color: #fff; }
.msgr .m-tg:hover { background: var(--tg); } .msgr .m-wa:hover { background: var(--wa); } .msgr .m-max:hover { background: var(--max); }
.burger { position: relative; display: none; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px; background: var(--hdr-chip); color: var(--hdr-ink); }
.burger i { position: absolute; left: 14px; right: 14px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .45s cubic-bezier(.3,1.3,.4,1); }
.burger i:first-child { top: 18px; } .burger i:last-child { top: 25px; }
.mob-open .burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.mob-open .burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* mega menus */
.mega { position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin: 0 auto; display: grid; gap: 8px; padding: 8px; border: 1px solid var(--hdr-line); border-radius: 26px; background: var(--hdr-pop); box-shadow: 0 50px 100px -40px rgba(0,0,0,.75); color: var(--hdr-ink); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: 50% 0; transition: opacity .3s, transform .5s var(--ease), visibility .3s; }
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega--svc { width: min(860px, 100%); grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.mega--cl { width: min(720px, 100%); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.mega--park { grid-template-columns: 210px minmax(0, 1fr) minmax(0, 380px); }
.mega--promo { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.mi { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 18px; transition: background-color .25s; }
.mi:hover { background: var(--hdr-chip); color: inherit; }
.mi__n { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(255,74,46,.12); color: var(--redt); font-size: 13px; font-weight: 700; }
.mi b { display: block; font-size: 15px; font-weight: 600; }
.mi small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--mut); }
.mega__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 4px; }
.mega__col { display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.mega__photo { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 22px; border-radius: 20px; background: #0B0F19; color: #fff; }
.mega__photo:hover { color: #fff; }
.mega__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform 1.2s var(--ease); }
.mega__photo:hover img { transform: scale(1.06); }
.mega__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,15,25,.95) 10%, rgba(11,15,25,.1) 80%); }
.mega__photo > * { position: relative; z-index: 1; }
.mega__photo b { display: block; margin-top: 8px; font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.mega__rate { display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border-radius: 20px; background: var(--hdr-chip); }
.mega__rate:hover { color: inherit; background: var(--hdr-line); }
.mega__rate b { display: block; font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.stars { color: var(--yellow); letter-spacing: 2px; }
.mi-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border-radius: 16px; }
.mi-row:hover { background: var(--hdr-chip); color: inherit; }
.mi-row b { display: block; font-size: 15px; font-weight: 600; }
.mi-row small { display: block; font-size: 13px; color: var(--mut); }
.mp-tabs { display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.mp-tabs > span { padding: 10px 12px 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.mp-tab { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 48px; padding: 0 10px 0 14px; border: 0; border-radius: 14px; background: transparent; color: var(--hdr-ink); font-size: 15px; font-weight: 600; text-align: left; transition: background-color .25s; }
.mp-tab span { min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--hdr-line); color: var(--mut); font-size: 12px; line-height: 24px; text-align: center; }
.mp-tab[aria-selected="true"] { background: var(--hdr-chip); } .mp-tab[aria-selected="true"] span { background: var(--red); color: #fff; }
.mp-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; gap: 6px; padding: 4px; }
.mp-car { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--hdr-ink); text-align: left; transition: background-color .25s, border-color .25s; }
.mp-car.is-on { border-color: rgba(255,31,0,.55); background: var(--hdr-chip); }
.mp-car span { display: flex; align-items: flex-end; justify-content: center; height: 62px; }
.mp-car img { max-height: 62px; object-fit: contain; }
.mp-car b { margin-top: 4px; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.mp-car small { font-size: 12px; color: var(--mut); }
.mp-view { display: flex; flex-direction: column; height: 440px; padding: 18px 20px 20px; border-radius: 20px; background: var(--hdr-chip); overflow: hidden; }
.mp-view__img { display: flex; align-items: flex-end; justify-content: center; height: 150px; }
.mp-view__img img { max-height: 150px; object-fit: contain; filter: drop-shadow(0 18px 14px rgba(0,0,0,.28)); }
.mp-view p { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tag { display: inline-block; padding: 4px 9px; border-radius: 8px; background: var(--chip); font-size: 12.5px; font-weight: 500; color: var(--mut2); }
.mi-promo { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; transition: background-color .25s; }
.mi-promo:hover { background: var(--hdr-chip); color: inherit; }
.mi-promo__big { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255,74,46,.12); color: var(--redt); font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.mi-promo:first-child .mi-promo__big { background: var(--red); color: #fff; }
.mi-promo b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.mi-promo small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--mut); }

/* mobile menu */
.mob { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 110px 28px 36px; background: #0B0F19; color: #fff; overflow: auto; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.mob-open .mob { opacity: 1; visibility: visible; }
.mob nav { display: flex; flex-direction: column; gap: 2px; font: 600 28px/1.2 var(--f); letter-spacing: -.02em; }
.mob nav a { padding: 8px 0; }
.mob nav a:first-child { color: var(--redt); }
.mob__sub { display: flex; flex-direction: column; gap: 10px; font-size: 18px; color: #8D97AA; }
.mob__sub a:first-child { font-size: 24px; font-weight: 600; color: #fff; }
.mob-open { overflow: hidden; }

/* =================== hero (home) =================== */
.hero-sec { padding: 12px 10px 0; }
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; padding: clamp(24px, 3.4vw, 52px) clamp(18px, 3.4vw, 56px) clamp(32px, 4vw, 60px); border-radius: var(--r-xl); background: var(--h-bg); color: var(--h-ink); transition: background-color .4s, color .4s; }
.hero__glow { position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse 60% 55% at 55% 52%, rgba(255,74,46,.10), rgba(11,15,25,0) 70%); }
.hero__map { position: absolute; z-index: -1; top: clamp(60px, 9svh, 110px); height: min(78svh, 56vw); left: 4%; right: 6%; transition: transform 1.4s var(--ease); }
.hero__map russia-map { position: absolute; inset: 0; }
.hero__ov { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--h-ov),.88) 0%, rgba(var(--h-ov),.3) 36%, rgba(var(--h-ov),0) 58%), linear-gradient(0deg, rgba(var(--h-ov),.92) 0%, rgba(var(--h-ov),0) 34%); }
.hero__main { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-self: stretch; }
.hero__since { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; color: var(--h-t82); }
.badge-red { height: 28px; padding: 0 12px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 28px; letter-spacing: .06em; text-transform: uppercase; }
.h1 { font: 300 clamp(36px, 4.3vw, 76px)/1.03 var(--f); letter-spacing: -.045em; text-wrap: balance; }
.h1 > span { display: block; }
.h1__sub { margin-top: .45em; font-size: .4em; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--h-t82); }
.h1__sub b { font-weight: 700; color: var(--h-ink); }
.hero .red, .phero .red { color: var(--redt); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badges li { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 10px; border: 1px solid var(--h-line); border-radius: 999px; background: var(--h-chip); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14px; font-weight: 500; }
.badges li::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,74,46,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12' fill='none' stroke='%23FF4A2E' stroke-width='2'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3'/%3E%3C/svg%3E") center/11px no-repeat; }
.rates { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.rate { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border: 1px solid var(--h-line); border-radius: 20px; background: var(--h-chip); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; transition: border-color .3s, background-color .3s; }
a.rate:hover { border-color: var(--h-line2); background: var(--h-chip2); color: var(--h-ink); }
.rate > b { display: grid; place-items: center; min-width: 54px; height: 54px; padding: 0 8px; border-radius: 15px; color: #0B0F19; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.rate > span { font-size: 13px; line-height: 1.35; color: var(--h-mut); }
.rate > span b { display: block; font-size: 15px; font-weight: 600; color: var(--h-ink); }

/* inner page hero */
.phero-sec { padding: 12px 10px 0; }
.phero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 40px; min-height: 420px; padding: clamp(24px, 3.4vw, 52px) clamp(18px, 3.4vw, 56px) clamp(28px, 3.6vw, 52px); border-radius: var(--r-xl); background: var(--h-bg); color: var(--h-ink); }
.phero--solo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.phero::before { content: ''; position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse 50% 70% at 78% 60%, rgba(255,74,46,.14), rgba(11,15,25,0) 70%); }
.phero__dots { position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(var(--h-line) 1.2px, transparent 1.4px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000 20%, transparent 75%); }
.phero .h1 { font-size: clamp(34px, 4vw, 66px); }
.phero__lead { max-width: 640px; margin-top: 20px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--h-t82); text-wrap: pretty; }
.phero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.phero__price { display: inline-flex; flex-direction: column; padding: 8px 18px; border-left: 2px solid var(--red); }
.phero__price b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.phero__price span { font-size: 13px; color: var(--h-mut); }
.phero__img { align-self: center; justify-self: end; width: 100%; max-width: 560px; }
.phero__img img { width: 100%; height: auto; filter: drop-shadow(0 30px 30px rgba(0,0,0,.35)); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 22px; font-size: 13px; color: var(--h-mut); }
.crumbs a:hover { color: var(--h-ink); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; opacity: .5; }
.phero__side { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }

/* =================== quick calc widget =================== */
.qc { position: relative; flex: 0 1 440px; min-width: min(100%, 360px); padding: 8px; border: 1px solid var(--h-line); border-radius: var(--r-lg); background: var(--h-form); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); color: var(--h-ink); }
.qc.is-flash { animation: flash 1.4s .45s; }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,31,0,0); } 50% { box-shadow: 0 0 0 6px rgba(255,31,0,.4); } }
.qc__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 22px; background: var(--h-chip); }
.qc__knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 18px; background: var(--h-chip2); box-shadow: inset 0 1px 0 var(--h-line); transition: transform .5s cubic-bezier(.35,1.3,.45,1); }
.qc[data-tab="track"] .qc__knob { transform: translateX(100%); }
.qc__tabs button { position: relative; height: 34px; border: 0; background: transparent; color: var(--h-ink); font-size: 15px; font-weight: 600; opacity: .55; transition: opacity .3s; }
.qc__tabs button[aria-selected="true"] { opacity: 1; }
.qc__body { padding: 8px 4px 4px; }
.qc .chip { color: var(--h-ink); border-color: var(--h-line2); }
.qc .chip[aria-pressed="true"] { background: var(--h-ink); color: var(--h-bg); border-color: var(--h-ink); }
.qf { position: relative; display: block; min-width: 0; padding: 6px 12px; border: 1px solid var(--h-line); border-radius: 16px; background: var(--h-chip); transition: border-color .25s; }
.qf:hover { border-color: var(--h-line2); } .qf:focus-within { border-color: var(--h-ink); }
.qf > span, .qf__lab { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; color: var(--h-mut); }
.qf input, .qf select { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; font-size: 15px; font-weight: 600; color: var(--h-ink); outline: none; }
.qf select option { color: #000; }
.qf__alt { padding: 0; border: 0; background: transparent; color: var(--redt); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.qf__dims { display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--h-mut); }
.qc__route { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; margin-top: 8px; }
.swap { position: absolute; z-index: 2; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; display: grid; place-items: center; border: 1px solid var(--h-line2); border-radius: 50%; background: var(--h-pop); color: var(--h-ink); transition: transform .5s var(--spring), border-color .25s; }
.swap:hover { border-color: var(--h-ink); transform: rotate(180deg); }
.qc__row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 6px; margin-top: 5px; }
.qc__cars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.qc__car { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 7px; border: 1px solid var(--h-line); border-radius: 14px; background: var(--h-chip); color: var(--h-ink); font-size: 12px; transition: border-color .25s, background-color .25s; }
.qc__car img { height: 28px; object-fit: contain; }
.qc__car b { font-size: 14px; }
.qc__car small { font-size: 10.5px; color: var(--h-mut); }
.qc__car[aria-pressed="true"] { border-color: var(--red); background: rgba(255,31,0,.1); }
.sug { position: absolute; z-index: 8; left: 0; right: 0; top: calc(100% + 4px); padding: 6px; border: 1px solid var(--h-line2, var(--line2)); border-radius: 16px; background: var(--h-pop, var(--s1)); box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); max-height: 300px; overflow: auto; }
.sug button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; font-size: 15px; }
.sug button:hover, .sug button.is-act { background: var(--h-chip2, var(--chip)); }
.sug small { font-size: 12px; color: var(--mut); }
.qres { margin-top: 6px; padding: 12px 14px 10px; border-radius: 18px; background: var(--h-ink); color: var(--h-bg); }
.qres__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.qres__lab { display: block; font-size: 12px; color: var(--h-inv-mut); }
.qres__price { display: block; margin-top: 2px; font-size: clamp(20px, 1.8vw, 25px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.qres__price.is-hint { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.qres__term { flex: none; padding: 6px 10px; border-radius: 10px; background: rgba(255,74,46,.14); color: var(--red); font-size: 13px; font-weight: 600; white-space: nowrap; }
.qres__route { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 500; }
.qres__route > span { max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qres__line { position: relative; flex: 1; height: 2px; min-width: 30px; border-radius: 2px; background: var(--h-inv-line); }
.qres__line i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; }
.qres__line i:nth-child(1) { left: -3px; background: currentColor; }
.qres__line i:nth-child(2) { left: 0; background: var(--red); box-shadow: 0 0 0 4px rgba(255,31,0,.18); animation: rdot 2.6s cubic-bezier(.45,0,.55,1) infinite alternate; }
.qres__line i:nth-child(3) { right: -3px; border: 2px solid currentColor; }
.qres__line em { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--h-inv-mut); white-space: nowrap; }
@keyframes rdot { to { left: calc(100% - 8px); } }
.qres__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qres__go { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 0 4px 0 14px; border-radius: 12px; background: var(--red); color: #fff; font-size: 15px; font-weight: 600; transition: background-color .3s; }
.qres__go:hover { background: var(--red2); color: #fff; }
.qres__go span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.18); }
.qres__tg { flex: 1 1 130px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--h-inv-line); border-radius: 12px; font-size: 14px; font-weight: 600; }
.qres__tg:hover { color: var(--tg); border-color: var(--tg); }
.qres__call { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--h-inv-line); }
.qres__call input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--h-inv-line); border-radius: 10px; background: transparent; font-size: 14px; color: inherit; outline: none; }
.qres__call button { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--h-bg); color: var(--h-ink); font-size: 13px; font-weight: 600; }
.ok-line { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ok-line::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.qc__track { padding: 16px 10px 12px; }
.qc__track p:first-child { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }

/* =================== home sections =================== */
.promo-band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; border-radius: var(--r-md); background: linear-gradient(110deg, #FF1F00, #FF6A3D); color: #fff; }
.promo-band:hover { color: #fff; }
.promo-band small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.promo-band b { display: block; margin-top: 4px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.promo-band__big { flex: none; font-size: clamp(40px, 4vw, 60px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.track-band { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 16px 16px 26px; }
.track-band > span { flex: 1 1 160px; }
.track-band > span b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.track-band > span small { font-size: 13px; color: var(--mut); }
.inline-form { flex: 1 1 260px; display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line2); border-radius: 999px; background: var(--s2); }
.inline-form input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: transparent; font-size: 15px; font-weight: 500; color: var(--ink); outline: none; }
.inline-form button { flex: none; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; transition: background-color .3s, color .3s; }
.inline-form button:hover { background: var(--red); color: #fff; }

.svc { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 290px; padding: clamp(24px, 2.4vw, 34px); transition: box-shadow .5s, border-color .4s, transform .7s var(--ease); }
.svc:hover { border-color: var(--line2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.4); }
.svc__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.svc__n { font-size: 13px; font-weight: 700; color: var(--redt); }
.svc__img { width: 62%; max-width: 240px; height: 96px; margin: -6px -10px 0 0; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 14px 10px rgba(0,0,0,.25)); }
.svc .h3 { margin-top: 14px; }
.svc p { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.svc__price { margin-top: 14px; font-size: 15px; } .svc__price b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 26px; }
.svc__foot .link-line:hover { color: var(--redt); }

.promo { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 250px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--s1); transition: transform .5s var(--ease), box-shadow .5s; }
.promo:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.promo__big { font-size: clamp(44px, 4vw, 60px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--redt); }
.promo h3 { margin-top: 22px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.promo p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--mut); text-wrap: pretty; }
.promo .link-line { align-self: flex-start; margin-top: auto; padding-top: 18px; font-size: 15px; } .promo .link-line i { width: 36px; }
.promo--hot { border-color: transparent; background: linear-gradient(140deg, #FF1F00, #FF6A3D); color: #fff; }
.promo--hot .promo__big { color: #fff; } .promo--hot p { color: rgba(255,255,255,.88); } .promo--hot a:hover { color: #fff; }

.dirs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 0 40px; padding: 10px 28px 18px; }
.dir-row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) 40px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.dir-row--head { padding: 14px 0; border-top: 0; font-size: 12px; color: var(--mut); }
.dir-row a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmp-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px, 3vw, 56px); align-items: center; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-lg); background: var(--night); color: #fff; }
.cmp-mini h3 { margin-top: 10px; font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.cmp-mini select { height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.05); color: #fff; font-size: 15px; font-weight: 600; outline: none; }
.cmp-mini select option { color: #000; }
.bar { height: 12px; margin-top: 8px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; transition: width .7s var(--ease), background-color .4s; }
.verdict { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 16px; background: rgba(47,210,122,.1); font-size: 17px; font-weight: 600; }
.verdict::before { content: '✓'; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #0B0F19; font-size: 14px; }

.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px 44px; align-items: center; margin-bottom: 14px; padding: 22px 26px; }
.picker__val { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--mut); }
.picker__val b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.picker__res { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.picker__res::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--red); }
.car { position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--s1); transition: opacity .45s, transform .55s var(--ease), border-color .45s, box-shadow .5s; }
.car:hover { box-shadow: 0 30px 60px -30px rgba(0,0,0,.4); }
.car.is-best { border-color: var(--red); transform: translateY(-6px); }
.car.is-dim { opacity: .45; }
.car__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.car__load { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.car__load b { font-size: 40px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.car__load span { font-size: 16px; font-weight: 600; color: var(--mut); }
.car__fit { flex: none; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 28px; display: none; }
.car.is-best .car__fit { display: block; }
.car__img { display: flex; align-items: flex-end; justify-content: center; height: 118px; margin: 14px -6px 0; }
.car__img img { max-height: 118px; object-fit: contain; filter: drop-shadow(0 16px 12px rgba(0,0,0,.25)); }
.car h3 { margin-top: 14px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.car .tag { align-self: flex-start; margin-top: 8px; font-size: 13px; }
.car p { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.car__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 20px; }
.car__foot b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.car__foot small { font-size: 13px; color: var(--mut); }

.biz-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 300px; margin-bottom: 14px; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-lg); background: #0B0F19; color: #fff; }
.biz-hero img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.biz-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(100deg, rgba(255,31,0,.94) 0%, rgba(255,31,0,.78) 42%, rgba(11,15,25,.2) 100%); }
.biz-hero h2 { font: 700 clamp(36px, 4.6vw, 72px)/1.02 var(--f); letter-spacing: -.045em; }
.biz-hero p { max-width: 640px; margin-top: 16px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; }
.biz-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px 28px; margin-top: 34px; }
.biz-list li { padding-top: 16px; border-top: 1px solid var(--line); }
.biz-list b { display: block; font-size: 17px; font-weight: 600; }
.biz-list span { display: block; margin-top: 4px; font-size: 14px; color: var(--mut); }
.dark-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 48px); border-radius: var(--r-lg); background: var(--night); color: #fff; --ink: #fff; --mut: #9AA3B5; --line: rgba(255,255,255,.12); --line2: rgba(255,255,255,.2); --s2: rgba(255,255,255,.05); --chip: rgba(255,255,255,.06); }
.dark-card::before { content: ''; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255,31,0,.28), rgba(255,31,0,0) 70%); pointer-events: none; }
.dark-card > * { position: relative; }
.dark-card .badge-soft { align-self: flex-start; }
.badge-soft { display: inline-block; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255,74,46,.16); color: var(--redl); font-size: 12px; font-weight: 700; line-height: 30px; letter-spacing: .08em; text-transform: uppercase; }
.found { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(47,210,122,.1); }
.found::before { content: '✓'; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #0B0F19; font-weight: 700; }
.done-box { padding: 22px; border-radius: 20px; background: rgba(47,210,122,.1); font-size: 17px; font-weight: 500; }

.numc { display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; padding: 26px 24px; }
.numc b { display: block; font-size: clamp(40px, 3.7vw, 60px); font-weight: 700; line-height: .95; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numc p { margin-top: 18px; font-size: 15px; line-height: 1.35; color: var(--mut); }

.feed-sec { padding-top: 80px; overflow: hidden; }
.feed { display: flex; gap: 12px; width: max-content; padding-right: 12px; animation: feed 60s linear infinite; }
.feed:hover { animation-play-state: paused; }
@keyframes feed { to { transform: translateX(-50%); } }
.feed > div { flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--s1); font-size: 14.5px; white-space: nowrap; }
.feed .tag { font-size: 13px; }

.steps { position: relative; }
.steps__line { position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; border-radius: 2px; background: var(--line2); }
.steps__line i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, #FF1F00, #FF8A5C); transform-origin: left; transform: scaleX(0); transition: transform 2s var(--ease) .3s; }
.is-in .steps__line i, .steps.is-in .steps__line i { transform: scaleX(1); }
.steps ol { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 28px 18px; }
.steps__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 700; box-shadow: 0 0 0 6px var(--bg); }
.steps__t { display: inline-block; margin-top: 22px; padding: 5px 10px; border-radius: 8px; background: rgba(255,74,46,.12); color: var(--redt); font-size: 13px; font-weight: 600; }
.steps li b { display: block; margin-top: 12px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.steps li p { margin-top: 6px; font-size: 14.5px; color: var(--mut); }

.case { display: flex; flex-direction: column; padding: 8px 8px 24px; transition: box-shadow .5s, transform .7s var(--ease); }
.case__img { position: relative; aspect-ratio: 16 / 9; border-radius: 21px; overflow: hidden; }
.case__img img { width: 100%; height: 100%; object-fit: cover; }
.case__img span { position: absolute; left: 10px; bottom: 10px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(11,15,25,.65); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 30px; }
.case__body { padding: 0 14px; }
.case__k { margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.case__k.red { color: var(--redt); }
.case dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.case dt { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.case dd { margin-top: 4px; font-size: 12.5px; color: var(--mut); }

.guar { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-md); }
.guar small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.guar b { display: block; margin-top: 14px; font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.guar p { margin-top: 10px; font-size: 16px; opacity: .85; }
.guar--red { background: var(--red); color: #fff; } .guar--ink { background: var(--ink); color: var(--bg); }
.offer { display: flex; flex-direction: column; min-height: 230px; padding: clamp(24px, 2.4vw, 32px); }
.offer__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,74,46,.12); color: var(--redt); font-size: 13px; font-weight: 700; }
.offer b { display: block; margin-top: 22px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.offer p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.ctable { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ctable::-webkit-scrollbar { display: none; }
.ctable__in { min-width: 680px; padding: 8px 28px 14px; }
.ctable__row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.ctable__row--head { padding: 18px 0; border-top: 0; font-size: 14px; font-weight: 600; color: var(--mut); }
.ctable__row > :nth-child(2) { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ctable__row:not(.ctable__row--head) > :nth-child(2)::before { content: '✓'; color: var(--green); font-weight: 700; }
.ctable__row > :nth-child(3), .ctable__row > :nth-child(4) { color: var(--mut); }
.ctable__row--head > :nth-child(2) { color: var(--redt); }

.letter { display: grid; place-items: center; aspect-ratio: 3 / 4; padding: 20px; border: 1px dashed var(--line2); border-radius: 22px; background: var(--s1); font-size: 13px; line-height: 1.4; color: var(--mut); text-align: center; }
.review-sum { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4; padding: 26px; }
.review-sum b { font-size: 64px; font-weight: 600; letter-spacing: -.05em; line-height: 1; }

.faq { border-top: 1px solid var(--line2); }
.faq__it { border-bottom: 1px solid var(--line2); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 22px 0; border: 0; background: transparent; color: var(--ink); text-align: left; font-size: 18px; font-weight: 500; }
.faq__ic { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--chip); transition: transform .5s var(--spring), background-color .3s, color .3s; }
.faq__ic::before, .faq__ic::after { content: ''; position: absolute; background: currentColor; }
.faq__ic::before { left: 11px; right: 11px; top: 17px; height: 2px; } .faq__ic::after { top: 11px; bottom: 11px; left: 17px; width: 2px; }
.faq__q[aria-expanded="true"] .faq__ic { transform: rotate(135deg); background: var(--red); color: #fff; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { max-width: 640px; padding: 0 56px 24px 0; font-size: 15.5px; color: var(--mut); }

.lead-block { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(28px, 4vw, 64px); padding: clamp(28px, 4.4vw, 72px); border-radius: var(--r-xl); background: var(--night); color: #fff; --ink: #fff; --mut: #9AA3B5; --line: rgba(255,255,255,.12); --line2: rgba(255,255,255,.2); --s2: rgba(255,255,255,.05); }
.lead-block::before { content: ''; position: absolute; left: -10%; bottom: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,31,0,.22), rgba(255,31,0,0) 65%); pointer-events: none; }
.lead-block > * { position: relative; }
.lead-block h2 { font: 300 clamp(38px, 5vw, 80px)/1.03 var(--f); letter-spacing: -.045em; text-wrap: balance; }
.lead-block h2 b { font-weight: 800; letter-spacing: -.05em; }
.disp { display: inline-flex; align-items: center; gap: 16px; margin-top: 36px; padding: 8px 28px 8px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); transition: border-color .3s, background-color .3s; }
.disp:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.disp__av { position: relative; flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, #2B3345, #19202F); font-size: 22px; font-weight: 700; }
.disp__av .live { position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; border: 2px solid var(--night); }
.disp b { display: block; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.disp small { font-size: 14px; color: #9AA3B5; }
.msgr-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.msgr-pills a { height: 42px; padding: 0 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 40px; transition: background-color .25s, border-color .25s; }
.msgr-pills a:hover { color: #fff; } .msgr-pills .m-tg:hover { background: var(--tg); border-color: var(--tg); } .msgr-pills .m-wa:hover { background: var(--wa); border-color: var(--wa); } .msgr-pills .m-max:hover { background: var(--max); border-color: var(--max); }
.form { display: flex; flex-direction: column; gap: 8px; }
.form .field { background: var(--s2); }
.legal { font-size: 12px; color: var(--mut); }
.legal a { text-decoration: underline; }
.sent { display: flex; flex-direction: column; justify-content: center; min-height: 280px; padding: 32px; border-radius: 26px; background: rgba(47,210,122,.08); }
.sent b { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.sent p { margin-top: 10px; font-size: 16px; color: var(--mut2); }

/* footer */
.ftr { margin: 14px 10px 10px; padding: 64px 0 26px; border-radius: var(--r-xl); background: var(--night); color: #fff; }
.ftr__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 36px; padding-bottom: 48px; font-size: 15px; }
.ftr__col { display: flex; flex-direction: column; gap: 10px; }
.ftr__col > b { margin-bottom: 6px; font-size: 13px; font-weight: 500; color: #8D97AA; }
.ftr__col a { color: #B7BFCD; } .ftr__col a:hover { color: var(--redt); }
.ftr__col span { font-size: 14px; color: #B7BFCD; }
.ftr__map { display: block; width: 100%; height: 340px; margin-bottom: 40px; border: 0; border-radius: 24px; filter: grayscale(.4); }
.ftr__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #8D97AA; }
.ftr__bot a:hover { color: #fff; }
.ftr__mapbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-top: 4px; padding: 0 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: transparent; color: #fff; font-size: 13px; font-weight: 500; }
.ftr__mapbtn:hover { border-color: #fff; }

/* FAB + drawer + mobile bar + toast + modal + cursor */
.fab { position: fixed; z-index: 60; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 8px 0 24px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font-size: 15.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 20px 44px -14px rgba(255,31,0,.9); opacity: 0; visibility: hidden; transform: translateY(30px) scale(.9); transition: opacity .35s, transform .55s var(--spring), visibility .35s; }
.fab.is-on { opacity: 1; visibility: visible; transform: none; }
.fab span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--red); }
.fab svg { transition: transform .5s var(--spring); }
.drawer-open .fab svg { transform: rotate(90deg); }
.drawer { position: fixed; z-index: 61; right: 24px; bottom: 96px; width: 380px; max-height: calc(100svh - 120px); overflow: auto; padding: 18px; border: 1px solid var(--line2); border-radius: 26px; background: var(--s1); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); opacity: 0; visibility: hidden; transform: translateY(20px) scale(.96); transform-origin: 100% 100%; transition: opacity .3s, transform .5s var(--ease), visibility .3s; }
.drawer-open .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.drawer__head b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--chip); color: var(--ink); }
.drawer .qc { flex: none; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; --h-bg: var(--s1); --h-ink: var(--ink); --h-mut: var(--mut); --h-line: var(--line); --h-line2: var(--line2); --h-chip: var(--s2); --h-chip2: var(--chip); --h-pop: var(--s1); --h-inv-line: rgba(127,127,127,.25); --h-inv-mut: #8D97AA; }
.mobbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: none; gap: 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--hdr); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.mobbar a { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--chip); color: var(--ink); }
.mobbar button { flex: 1; height: 56px; border: 0; border-radius: 16px; background: var(--red); color: #fff; font-size: 16px; font-weight: 700; }
.toast { position: fixed; z-index: 62; left: 24px; bottom: 24px; width: min(390px, calc(100% - 20px)); padding: 18px 18px 16px; border: 1px solid var(--line2); border-radius: 22px; background: var(--s1); color: var(--ink); box-shadow: 0 30px 70px -24px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(30px); transition: opacity .35s, transform .55s cubic-bezier(.3,1.3,.4,1), visibility .35s; }
.toast.is-on { opacity: 1; visibility: visible; transform: none; }
.toast .x { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; }
.toast b { display: block; padding-right: 34px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.toast p { margin-top: 4px; font-size: 14px; color: var(--mut); }
.toast__row { display: flex; gap: 6px; margin-top: 14px; }
.toast__row > * { flex: 1; }
.toast__row input { min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 14px; background: var(--s2); font-size: 14px; color: var(--ink); outline: none; }
.toast__row button { height: 44px; border: 0; border-radius: 14px; background: var(--red); color: #fff; font-size: 14px; font-weight: 700; padding: 0 14px; }
.toast__row button.is-sec { border: 1px solid var(--line2); background: transparent; color: var(--ink); font-weight: 600; }
.modal { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(5,8,14,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.modal.is-on { opacity: 1; visibility: visible; }
.modal__box { position: relative; width: min(480px, 100%); max-height: calc(100svh - 32px); overflow: auto; padding: clamp(26px, 4vw, 40px); border-radius: var(--r-lg); background: var(--s1); color: var(--ink); box-shadow: 0 50px 120px -30px rgba(0,0,0,.8); transform: translateY(24px) scale(.96); transition: transform .6s cubic-bezier(.3,1.3,.4,1); }
.modal.is-on .modal__box { transform: none; }
.modal__box > .x { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; }
.modal__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--red); color: #fff; }
.modal__box h3 { margin-top: 20px; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.modal__box > p { margin-top: 8px; font-size: 16px; color: var(--mut); }
.cur-ring, .cur-dot { position: fixed; left: 0; top: 0; pointer-events: none; display: none; will-change: transform; }
.cur-ring { z-index: 90; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid rgba(255,74,46,.75); border-radius: 50%; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, border-color .3s, opacity .3s; }
.cur-dot { z-index: 91; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); }
.has-cursor .cur-ring, .has-cursor .cur-dot { display: block; }

/* =================== inner page content =================== */
.prose { max-width: 760px; font-size: 17px; line-height: 1.65; color: var(--mut2); }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 44px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.prose h3 { margin-top: 30px; font-size: 21px; font-weight: 600; color: var(--ink); }
.prose ul li, .prose ol li { position: relative; padding-left: 26px; margin-top: 8px; }
.prose ul li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.prose ol { counter-reset: n; } .prose ol li { counter-increment: n; } .prose ol li::before { content: counter(n) '.'; position: absolute; left: 0; color: var(--redt); font-weight: 700; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(28px, 4vw, 72px); align-items: start; }
.sticky-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.side-card { padding: 26px; }
.side-card h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.side-card p { margin-top: 8px; font-size: 14.5px; color: var(--mut); }
.side-card .btn { margin-top: 18px; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; font-size: 15.5px; }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,74,46,.16); color: var(--redt); font-size: 11px; font-weight: 800; }
.feature { padding: clamp(22px, 2.4vw, 30px); }
.feature__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(255,74,46,.12); color: var(--redt); }
.feature h3 { margin-top: 20px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.feature p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--mut); }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { padding: 14px 16px; text-align: left; font-size: 12.5px; font-weight: 500; color: var(--mut); border-bottom: 1px solid var(--line2); white-space: nowrap; }
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 600; }
.tbl tbody tr { transition: background-color .25s; }
.tbl tbody tr:hover { background: var(--chip); }
.tbl-wrap { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 8px 12px; }
.tbl-wrap::-webkit-scrollbar { display: none; }
.city-cols { columns: 4 200px; column-gap: 32px; }
.city-cols li { break-inside: avoid; display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.city-cols li span { color: var(--mut); font-variant-numeric: tabular-nums; }
.region h3 { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--redt); }
.doc { display: flex; align-items: center; gap: 18px; padding: 20px 22px; transition: border-color .3s, transform .5s var(--ease); }
.doc:hover { border-color: var(--line2); transform: translateY(-2px); color: var(--ink); }
.doc__ext { flex: none; display: grid; place-items: center; width: 54px; height: 64px; border-radius: 12px; background: rgba(255,74,46,.12); color: var(--redt); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.doc b { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.doc small { display: block; margin-top: 4px; font-size: 13px; color: var(--mut); }
.post { display: flex; flex-direction: column; gap: 14px; min-height: 240px; padding: 26px; transition: border-color .3s, transform .5s var(--ease); }
.post:hover { border-color: var(--line2); color: var(--ink); transform: translateY(-3px); }
.post time { font-size: 13px; color: var(--mut); }
.post b { font-size: 18px; font-weight: 500; line-height: 1.35; }
.post .round { margin-top: auto; align-self: flex-end; }
.contact-tile { display: flex; flex-direction: column; gap: 6px; padding: 26px; }
.contact-tile small { font-size: 13px; color: var(--mut); }
.contact-tile b { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.timeline { display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 26px; }
.timeline li::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line2); }
.timeline li:last-child::before { display: none; }
.timeline__dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chip); color: var(--mut); font-weight: 700; }
.timeline li.is-done .timeline__dot { background: var(--red); color: #fff; }
.timeline li.is-now .timeline__dot { background: var(--ink); color: var(--bg); box-shadow: 0 0 0 6px rgba(255,74,46,.25); }
.timeline b { display: block; padding-top: 10px; font-size: 17px; font-weight: 600; }
.timeline small { font-size: 14px; color: var(--mut); }
.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--night); color: #fff; }
.cta-strip h2 { font-size: clamp(26px, 2.8vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.cta-strip p { margin-top: 6px; color: #9AA3B5; }
.auth { max-width: 520px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); }
.note { padding: 14px 18px; border-radius: 16px; background: rgba(255,197,61,.1); border: 1px solid rgba(255,197,61,.25); font-size: 14px; color: var(--mut2); }

/* =================== reveal =================== */
.js .rv { opacity: 0; transform: translateY(50px) scale(.98); filter: blur(8px); transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; filter: none; }
}

/* =================== responsive =================== */
@media (max-width: 1440px) { .logo__tag, .msgr { display: none; } }
@media (max-width: 1200px) {
  .nav, .hdr__phone { display: none; }
  .burger { display: grid; }
  .mega { display: none; }
}
@media (max-width: 1100px) { .util__disp, .util__cab span { display: none; } .two-col { grid-template-columns: minmax(0, 1fr); } .sticky-side { position: static; } }
@media (max-width: 960px) { .phero { grid-template-columns: minmax(0, 1fr); min-height: 0; } .phero__img { justify-self: start; max-width: 420px; } }
@media (max-width: 760px) {
  .util, .hdr__quick { display: none; }
  .hdr .btn { display: none; }
  .hdr { top: 8px; width: calc(100% - 20px); padding-left: 16px; }
  .wrap { padding: 0 16px; }
  .sec { padding-top: 84px; }
  .hero, .phero { border-radius: 28px; }
  .qc { min-width: 0; flex-basis: 100%; }
  .fab, .drawer { display: none; }
  .drawer-open .drawer { display: block; left: 10px; right: 10px; bottom: 86px; width: auto; }
  .mobbar { display: flex; }
  body { padding-bottom: 84px; }
  .toast { left: 10px; bottom: 86px; }
  .dirs { padding: 6px 16px 12px; }
  .dir-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 36px; font-size: 14px; }
  .dir-row > :nth-child(4) { display: none; }
  .ftr { padding-top: 48px; border-radius: 28px; }
  .faq__q { font-size: 16.5px; }
  .faq__a p { padding-right: 0; }
  .lead-block, .cmp-mini { border-radius: 28px; }
  .rate { padding-right: 14px; }
  .qc__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qc__row .qf:last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .qc__cars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .btn--lg { padding-left: 22px; } }
@media print {
  .urg, .util, .hdr, .ftr, .fab, .drawer, .mobbar, .toast, .modal, .no-print, .cur-ring, .cur-dot { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =================== калькулятор (/calc) =================== */
.ctop { padding: 12px 10px 0; }
.ctop__in { position: relative; isolation: isolate; overflow: hidden; padding: clamp(22px, 3vw, 40px) clamp(18px, 3.4vw, 56px); border-radius: var(--r-xl); background: var(--h-bg); color: var(--h-ink); }
.ctop__in::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 45% 90% at 85% 40%, rgba(255,74,46,.16), rgba(11,15,25,0) 70%); }
.ctop .h1 { font-size: clamp(32px, 3.6vw, 58px); }
.ctop__sub { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 15px; color: var(--h-t82); }
.ctop__sub span { display: inline-flex; align-items: center; gap: 8px; }
.ctop__sub span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
[data-theme="light"] .ctop__in { --h-bg: #fff; --h-ink: #0B0F19; --h-t82: rgba(11,15,25,.78); --h-mut: #5E6778; --h-line: rgba(11,15,25,.1); }
.calc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.cstep { padding: clamp(20px, 2.4vw, 32px); }
.cstep + .cstep { margin-top: 14px; }
.cstep__h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cstep__h b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 700; }
.cstep__h h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.cstep__h small { margin-left: auto; font-size: 13px; color: var(--mut); }
.types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.type { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 13px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--s2); color: var(--ink); text-align: left; transition: border-color .25s, background-color .25s, transform .4s var(--ease); }
.type:hover { border-color: var(--line2); }
.type[aria-pressed="true"] { border-color: var(--red); background: rgba(255,31,0,.08); }
.type__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--chip); color: var(--redt); }
.type[aria-pressed="true"] .type__ic { background: var(--red); color: #fff; }
.type b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.type__q { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--chip); color: var(--mut); font-size: 12px; font-weight: 700; cursor: help; }
.tip { position: absolute; z-index: 9; right: 0; top: calc(100% + 6px); width: 240px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 14px; background: var(--s1); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--mut2); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility .2s; pointer-events: none; }
.type__q:hover + .tip, .type__q:focus + .tip { opacity: 1; visibility: visible; transform: none; }
.hint { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--chip); font-size: 14px; color: var(--mut2); }
.hint::before { content: 'i'; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--line2); color: var(--ink); font-size: 12px; font-weight: 700; font-style: italic; }
.hint button { padding: 0; border: 0; background: none; color: var(--redt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hint--warn { background: rgba(255,197,61,.1); }
.hint--warn::before { content: '!'; background: rgba(255,197,61,.3); font-style: normal; }
.croute { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.croute .swap { --h-line2: var(--line2); --h-pop: var(--s1); --h-ink: var(--ink); }
.cgrid { display: grid; gap: 8px; }
.cgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.csub { margin: 22px 0 10px; font-size: 14px; font-weight: 600; color: var(--mut2); }
.csub:first-child { margin-top: 0; }
.seg2 { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--chip); }
.seg2 button { height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--mut2); font-size: 14px; font-weight: 600; transition: background-color .25s, color .25s; }
.seg2 button[aria-pressed="true"] { background: var(--s1); color: var(--ink); box-shadow: 0 4px 14px -6px rgba(0,0,0,.4); }
.door { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.door > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--s2); }
.door small { display: block; margin-bottom: 8px; font-size: 12px; color: var(--mut); }
.points { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.point { display: flex; gap: 6px; align-items: stretch; }
.point .field { flex: 1; }
.point .x { width: 44px; height: auto; border-radius: 14px; }
.addlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--redt); font-size: 14px; font-weight: 600; }
.mplaces { margin-top: 12px; }
.mrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 40px; gap: 6px; margin-top: 6px; align-items: center; }
.mrow--h { margin-top: 0; font-size: 12px; color: var(--mut); padding: 0 4px; }
.mrow input { width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--s2); font-size: 15px; font-weight: 600; color: var(--ink); outline: none; }
.mrow input:focus { border-color: var(--ink); }
.mrow .x { width: 40px; height: 40px; border-radius: 12px; }
.ccars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 8px; padding-top: 11px; }
.ccar { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 12px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--s2); color: var(--ink); text-align: left; transition: border-color .25s, background-color .25s, opacity .3s; }
.ccar:hover { border-color: var(--line2); }
.ccar[aria-pressed="true"] { border-color: var(--red); background: rgba(255,31,0,.08); }
.ccar.is-small { opacity: .45; }
.ccar__img { display: flex; align-items: flex-end; justify-content: center; height: 64px; margin-bottom: 6px; }
.ccar__img img { max-height: 64px; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,.25)); }
.ccar b { font-size: 15px; font-weight: 700; }
.ccar small { font-size: 12px; color: var(--mut); line-height: 1.35; }
.ccar__fit { position: absolute; z-index: 2; left: 12px; top: -11px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 22px; }
.ccars--ftl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccars--ftl .ccar__img { height: 80px; } .ccars--ftl .ccar__img img { max-height: 80px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--s2); }
.stepper button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--chip); color: var(--ink); font-size: 18px; font-weight: 600; }
.stepper output { min-width: 74px; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.copts { margin-top: 14px; }
.copts summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px clamp(20px, 2.4vw, 32px); cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; }
.copts summary::-webkit-details-marker { display: none; }
.copts summary small { font-size: 13px; font-weight: 500; color: var(--mut); }
.copts summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--chip); transition: transform .4s var(--spring); }
.copts summary i::before, .copts summary i::after { content: ''; position: absolute; left: 10px; right: 10px; top: 15px; height: 2px; background: currentColor; }
.copts summary i::after { transform: rotate(90deg); }
.copts[open] summary i { transform: rotate(135deg); background: var(--red); color: #fff; }
.copts__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px 24px; padding: 0 clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 28px); }
.opt { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--s2); }
.opt .check { font-weight: 600; }
.opt small { padding-left: 30px; font-size: 12.5px; color: var(--mut); }

.csum { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 10px; }
.sum { padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-lg); background: var(--night); color: #fff; --ink: #fff; --mut: #9AA3B5; --line: rgba(255,255,255,.1); --line2: rgba(255,255,255,.18); --chip: rgba(255,255,255,.07); --s1: #19202F; --s2: rgba(255,255,255,.05); }
.sum__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sum__t { font-size: 14px; color: var(--mut); }
.sum__route { margin-top: 2px; font-size: 16px; font-weight: 600; }
.sum__price { margin-top: 16px; font-size: clamp(34px, 3.2vw, 46px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; transition: opacity .2s; }
.sum__price small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--mut); }
.sum__empty { margin-top: 16px; font-size: 19px; font-weight: 600; line-height: 1.35; }
.sum__empty small { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--mut); }
.sum__term { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,74,46,.12); color: #FFB3A3; font-size: 14px; font-weight: 500; }
.sum__lines { margin-top: 16px; border-top: 1px solid var(--line); }
.sline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.sline > span:first-child { min-width: 0; }
.sline small { display: block; font-size: 12px; color: var(--mut); }
.sline b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sline s { margin-right: 6px; color: var(--mut); font-weight: 400; }
.sline .promo-b { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.sline--vat { color: var(--mut); }
.sum__notes { margin-top: 10px; display: grid; gap: 6px; }
.sum__notes p { font-size: 12.5px; color: var(--mut); }
.sum__notes p.warn { padding: 10px 12px; border-radius: 12px; background: rgba(255,197,61,.1); color: #FFD97A; font-size: 13px; }
.sum__toggles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.sum .toggle button[aria-pressed="true"] { background: #2B3345; color: #fff; }
.sum .check { font-size: 13.5px; color: var(--mut2); }
.sum__trust { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--mut2); }
.sum__trust span { display: flex; align-items: center; gap: 8px; }
.sum__trust span::before { content: '✓'; color: var(--green); font-weight: 700; }
.sum__btns { display: grid; gap: 8px; margin-top: 16px; }
.sum__sec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sum__sec button, .sum__sec a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 62px; padding: 0 6px; border: 1px solid var(--line2); border-radius: 14px; background: transparent; color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; transition: border-color .25s, background-color .25s; }
.sum__sec button:hover, .sum__sec a:hover { border-color: #fff; color: #fff; }
.sum .btn[disabled] { opacity: .45; pointer-events: none; }
.skel { position: relative; overflow: hidden; display: block; height: 46px; width: 70%; margin-top: 16px; border-radius: 12px; background: rgba(255,255,255,.08); }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation: skel 1.1s infinite; }
@keyframes skel { to { transform: translateX(100%); } }
.minimap { padding: 14px; }
.minimap svg { width: 100%; height: auto; }
.minimap__cap { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--mut); }
.quickhelp { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.quickhelp b { display: block; font-size: 15px; }
.quickhelp small { font-size: 13px; color: var(--mut); }
.quickhelp button { margin-left: auto; }
.sumbar { display: none; }
.recap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; }
.recap dl { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; }
.recap dt { font-size: 12px; color: var(--mut); }
.recap dd { font-weight: 600; }
.success { padding: clamp(28px, 4vw, 56px); text-align: left; }
.success__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--green); color: #0B0F19; }
.success h2 { margin-top: 22px; font-size: clamp(28px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.success__call { margin-top: 12px; font-size: 18px; color: var(--mut2); }
.success__sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.success__sum dt { font-size: 12.5px; color: var(--mut); } .success__sum dd { margin-top: 2px; font-weight: 600; }
.success__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.files span { padding: 4px 10px; border-radius: 8px; background: var(--chip); font-size: 13px; }
.kp { display: none; }
@media print {
  body.print-kp *:not(.kp, .kp *, :has(.kp)) { display: none !important; }
  body.print-kp main, body.print-kp main > section { padding: 0 !important; margin: 0 !important; }
  body.print-kp .kp { display: block !important; padding: 24px; font: 13px/1.5 Arial, sans-serif; color: #000; }
  .kp h1 { font-size: 22px; margin-bottom: 4px; } .kp table { width: 100%; border-collapse: collapse; margin-top: 16px; } .kp td { padding: 6px 0; border-bottom: 1px solid #ddd; } .kp td:last-child { text-align: right; }
}
@media (max-width: 1100px) { .calc { grid-template-columns: minmax(0, 1fr); } .csum { position: static; } }
@media (max-width: 760px) {
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgrid--3, .cgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccars--ftl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door { grid-template-columns: minmax(0, 1fr); }
  .mrow { grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, .8fr)) 36px; font-size: 13px; }
  .mrow input { padding: 0 6px; font-size: 14px; }
  .csum .minimap { display: none; }
  .sum { scroll-margin-top: 80px; }
  .sumbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--hdr); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .sumbar__p { flex: 1; min-width: 0; padding: 0 6px; border: 0; background: none; color: var(--ink); text-align: left; }
  .sumbar__p b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sumbar__p small { font-size: 12px; color: var(--mut); }
  .sumbar .btn { height: 52px; padding-left: 18px; font-size: 15px; }
  body[data-page="calc"] { padding-bottom: 84px; }
}
.door .seg2 { display: flex; width: 100%; } .door .seg2 button { flex: 1 1 auto; padding: 0 10px; }
.copts summary { justify-content: flex-start; } .copts summary i { margin-left: auto; }
.sum.is-calc .sum__price { opacity: .45; }
.inline-form { min-width: 0; }
@media (max-width: 760px) {
  .track-band { padding: 16px; }
  .g-auto-190 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numc { min-height: 140px; padding: 20px 18px; } .numc b { font-size: 38px; } .numc p { font-size: 13.5px; }
  .dir-row .num { white-space: nowrap; font-size: 13px; }
  .h2 { font-size: clamp(34px, 9.5vw, 44px); }
  .car__img { height: 100px; } .car p { display: none; }
}
.sum__term { display: block; }
.door .seg2 { flex-wrap: nowrap; }
@media (max-width: 760px) {
  .croute { grid-template-columns: minmax(0, 1fr); }
  .croute .swap { left: auto; right: 14px; }
  .door .seg2 button { font-size: 13px; padding: 0 6px; }
  .copts summary small { display: none; }
  .sum__sec button { font-size: 11.5px; }
}
.numc b { font-size: clamp(36px, 3.2vw, 56px); }
.phero .h1 .red { font-weight: 700; letter-spacing: -.05em; }

/* ---- правки v2: первый экран, кнопка, шапка, цифры, ширина внутренних ---- */
.hero { min-height: calc(100svh - 160px); align-items: center; align-content: center; }
.hero__main { justify-content: center; }
.fab > span:first-child { display: inline; width: auto; height: auto; background: none; color: #fff; }
.fab > span:last-child { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--red); }
.fab span { width: auto; height: auto; background: none; }
.hdr { gap: 12px; }
.hdr__right { flex: none; gap: 6px; }
.nav { flex: 0 1 auto; min-width: 0; margin: 0 auto; }
.nav > a { padding: 0 9px; white-space: nowrap; }
@media (max-width: 1600px) { .logo__tag { display: none; } }
@media (max-width: 1480px) { .hdr__quick a { font-size: 0; gap: 0; padding: 0 11px; } .hdr__quick a svg { width: 18px; height: 18px; } }
@media (max-width: 1320px) { .hdr__phone span { display: none; } .nav > a { padding: 0 7px; font-size: 13.5px; } }
.numc { container-type: inline-size; }
.numc b { font-size: clamp(30px, 24cqi, 60px); }
.phero-sec, .ctop { max-width: 1420px; margin: 0 auto; }
.svc__top { position: relative; justify-content: center; }
.svc__n { position: absolute; left: 0; top: 0; }
.svc__img { width: 82%; max-width: 300px; height: 118px; margin: 10px auto 0; object-position: center bottom; }

/* ---- правки v3: шапка на всю ширину, просторная форма, высокий первый экран ---- */
.util { max-width: none; padding: 0 clamp(16px, 2.4vw, 40px); }
.hdr { width: calc(100% - 20px); max-width: none; padding-left: clamp(16px, 1.6vw, 28px); }
.phero-sec, .ctop { max-width: none; }
.hero { min-height: calc(100svh - 130px); }
.hero__map { top: clamp(40px, 7svh, 90px); height: min(84svh, 60vw); }
.hero > .qc, .phero__side > .qc { flex: 0 1 500px; padding: 12px; }
.qc .qc__tabs button { height: 42px; }
.qc .qc__body { padding: 12px 6px 6px; }
.qc .chips { gap: 8px; }
.qc .chip--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.qc .qf { padding: 10px 14px; }
.qc .qf input, .qc .qf select { font-size: 16px; margin-top: 2px; }
.qc .qc__route { margin-top: 12px; gap: 8px; }
.qc .qc__row { margin-top: 8px; gap: 8px; }
.qc .qres { margin-top: 10px; padding: 16px 18px 14px; }
.qc .qres__btns { margin-top: 14px; }
.qc .qres__go, .qc .qres__tg { height: 46px; }
.qc .qres__call { margin-top: 12px; padding-top: 12px; }
.qc .qres__call input, .qc .qres__call button { height: 42px; }
.drawer .qc { padding: 0; }
@media (max-width: 1600px) { .nav > a { padding: 0 10px; } }

/* ---- наведение: красная подсветка, следующая за курсором ---- */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 50, 20, .32), rgba(255, 50, 20, .1) 35%, transparent 62%); opacity: 0; transition: opacity .35s; }
.spot.spot-b::before { content: ''; position: absolute; z-index: 2; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 74, 46, .95), rgba(255, 74, 46, .25) 45%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; }
.spot:hover::after, .spot:hover::before { opacity: 1; }
[data-theme="light"] .spot::after { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 50, 20, .12), rgba(255, 50, 20, .04) 35%, transparent 60%); }
.svc:hover, .car:hover, .promo:hover, .offer:hover, .numc:hover, .case:hover, .doc:hover, .post:hover, .feature:hover, .contact-tile:hover { box-shadow: 0 30px 70px -30px rgba(255, 31, 0, .45); border-color: rgba(255, 74, 46, .35); }
.btn:hover { box-shadow: 0 18px 48px -10px rgba(255, 31, 0, 1), 0 0 0 4px rgba(255, 31, 0, .14), inset 0 1px 0 rgba(255,255,255,.3); }
.pill:hover, .round:hover, .inline-form button:hover, .qres__go:hover, .mobbar button:hover, .fab:hover { box-shadow: 0 12px 30px -8px rgba(255, 31, 0, .75); }
.pill--line:hover { box-shadow: 0 0 0 3px rgba(255, 74, 46, .18); border-color: var(--redt); color: var(--ink); }
.chip:hover, .ccar:hover, .type:hover, .qc__car:hover, .seg button:hover:not([aria-selected="true"]), .seg2 button:hover:not([aria-pressed="true"]) { border-color: var(--redt); box-shadow: 0 0 0 3px rgba(255, 74, 46, .15); color: inherit; }
.seg button:hover:not([aria-selected="true"]) { background: rgba(255, 74, 46, .12); }
.nav__ind { background: rgba(255, 74, 46, .14); box-shadow: inset 0 0 0 1px rgba(255, 74, 46, .25); }
.nav > a:hover { color: var(--hdr-ink); }
.field:hover, .qf:hover { border-color: rgba(255, 74, 46, .5); }
.mi:hover, .mi-row:hover, .mi-promo:hover, .mp-car:hover { background: rgba(255, 74, 46, .1); }
.faq__q:hover .faq__ic { background: rgba(255, 74, 46, .2); color: var(--redt); }
.faq__q:hover { color: var(--redt); }
.dir-row:not(.dir-row--head) { transition: background-color .25s; border-radius: 12px; }
.dir-row:not(.dir-row--head):hover { background: rgba(255, 74, 46, .07); }
.tbl tbody tr:hover { background: rgba(255, 74, 46, .07); }
.rate:hover { box-shadow: 0 16px 40px -18px rgba(255, 31, 0, .7); }
@media (prefers-reduced-motion: reduce) { .spot::after, .spot::before { display: none; } }
.promo-mega { display: block; font-size: clamp(90px, 13vw, 220px); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--redt); text-shadow: 0 30px 80px rgba(255, 31, 0, .35); }
a.promo:hover { color: inherit; }
a.promo--hot:hover { color: #fff; }

/* ---- правки v4: первый экран без пустот, форма по высоте экрана ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 520px); grid-template-rows: 1fr auto; column-gap: clamp(32px, 4vw, 72px); row-gap: clamp(18px, 2.4vh, 28px);
  min-height: calc(100svh - 128px); padding: clamp(24px, 3.2vh, 44px) clamp(18px, 3.4vw, 56px) clamp(18px, 2.4vh, 28px); align-items: stretch; }
.hero__main { grid-column: 1; grid-row: 1; justify-content: space-between; gap: clamp(18px, 3vh, 40px); padding-block: clamp(4px, 1.5vh, 20px); }
.hero .h1 { font-size: clamp(44px, 5.4vw, 104px); }
.hero .h1__sub { font-size: .38em; }
.hero__since { font-size: clamp(15px, 1.1vw, 19px); }
.hero__since .badge-red { height: 32px; line-height: 32px; padding: 0 14px; font-size: 13px; }
.hero .badges li { height: clamp(42px, 5vh, 52px); padding: 0 20px 0 12px; font-size: clamp(14px, 1.05vw, 17px); gap: 10px; }
.hero .badges li::before { width: 26px; height: 26px; background-size: 13px; }
.hero .rates { gap: 14px; margin-top: 0; }
.hero .rate { padding: 10px 22px 10px 10px; border-radius: 22px; }
.hero .rate > b { min-width: clamp(56px, 6.5vh, 68px); height: clamp(56px, 6.5vh, 68px); border-radius: 17px; font-size: clamp(21px, 2.6vh, 26px); }
.hero .rate > span { font-size: 14px; } .hero .rate > span b { font-size: 17px; }
.hero > #calc { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; flex: none; min-width: 0;
  min-height: min(calc(100svh - 300px), 760px); padding: 14px; }
.hero > #calc .qc__body { flex: 1; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); padding: clamp(10px, 1.6vh, 18px) 6px 6px; }
.hero > #calc [data-fields] { display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); }
.hero > #calc .qc__route, .hero > #calc .qc__row { margin-top: 0; }
.hero > #calc .qf { padding: clamp(10px, 1.5vh, 16px) 16px; }
.hero > #calc .qf input, .hero > #calc .qf select { font-size: clamp(16px, 1.9vh, 18px); }
.hero > #calc .qf > span, .hero > #calc .qf__lab { font-size: 12px; }
.hero > #calc .qres { margin-top: auto; padding: clamp(16px, 2.2vh, 24px) 20px clamp(14px, 2vh, 20px); }
.hero > #calc .qres__price { font-size: clamp(26px, 3.4vh, 34px); }
.hero > #calc .qres__go, .hero > #calc .qres__tg { height: clamp(46px, 5.6vh, 54px); }
.hero > #calc .qc__track { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero__bottom { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.hero__bottom .promo-band { padding: clamp(16px, 2.2vh, 24px) 28px; }
.hero__bottom .track-band { background: var(--h-chip); border-color: var(--h-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--h-ink); }
.hero__bottom .track-band small { color: var(--h-mut); }
.hero__bottom .inline-form { background: var(--h-chip); border-color: var(--h-line2); }
.hero__bottom .inline-form input { color: var(--h-ink); }
.hero__map { top: 4%; height: 92%; left: 2%; right: 2%; }
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
  .hero__main, .hero > #calc, .hero__bottom { grid-column: 1; grid-row: auto; }
  .hero > #calc { min-height: 0; }
  .hero__bottom { grid-template-columns: minmax(0, 1fr); }
}
.hero .h1 { font-size: clamp(40px, min(5vw, 7vh), 104px); }
.hero .rates { flex-wrap: nowrap; }
.hero .rate { flex: 0 1 auto; min-width: 0; }
@media (max-width: 1600px) { .hero .rate { padding: 8px 16px 8px 8px; } .hero .rate > b { min-width: 52px; height: 52px; font-size: 20px; } .hero .rate > span b { font-size: 15px; } .hero .rate > span { font-size: 12.5px; } }
@media (max-width: 1100px) { .hero .rates { flex-wrap: wrap; } }
.hero > #calc { min-height: min(calc(100svh - 390px), 720px); }
.hero__bottom .promo-band { padding: clamp(12px, 1.8vh, 22px) 26px; }
.hero__bottom .promo-band b { font-size: clamp(18px, 1.6vw, 24px); }
.hero__bottom .promo-band__big { font-size: clamp(36px, 3.4vw, 54px); }
.hero__bottom .track-band { padding-block: clamp(10px, 1.4vh, 16px); }
/* верхняя строка и шапка остаются видны при прокрутке */
.util { position: sticky; top: 0; z-index: 52; background: var(--bg); transition: background-color .4s; }
.hdr { top: 46px; }
@media (max-width: 760px) { .hdr { top: 8px; } }

/* v5: все выпадающие меню на ширину шапки */
.mega, .mega--svc, .mega--cl, .mega--park, .mega--promo { left: 0; right: 0; width: auto; margin: 0; }
.mega--svc { grid-template-columns: minmax(0, 2.6fr) minmax(280px, 1fr); }
.mega--svc .mega__grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.mega--cl { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); }
.mega--cl .mega__col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.mega--promo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega--park { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 420px); }
.mega--park .mp-cars { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 1280px) {
  .mega--svc .mega__grid2, .mega--cl .mega__col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega--promo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* v5: едва заметный фон — фуры, коробки, паллеты, медленно дрейфуют */
body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ink); -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600" fill="none" stroke="%23000" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"%3E%3Cg transform="translate(30 50) rotate(0 122.0 37.0)"%3E%3Crect x="0" y="0" width="172" height="54" rx="2"/%3E%3Cpath d="M14 4v46 M27 4v46 M40 4v46 M53 4v46 M66 4v46 M79 4v46 M92 4v46 M105 4v46 M118 4v46 M131 4v46 M144 4v46 M157 4v46" stroke-width="1"/%3E%3Cpath d="M6 54v4h50M140 54v10m6-10v10M56 58h112"/%3E%3Ccircle cx="20" cy="64" r="9"/%3E%3Ccircle cx="20" cy="64" r="3.4"/%3E%3Ccircle cx="44" cy="64" r="9"/%3E%3Ccircle cx="44" cy="64" r="3.4"/%3E%3Cpath d="M176 64V12q0-8 8-8h26q5 0 8 4l14 20q4 2 8 3q4 1 4 6v21q0 4-4 4h-4"/%3E%3Cpath d="M212 10l13 18h-15q-2 0-2-2V12q0-2 2-2z"/%3E%3Cpath d="M204 30v24M180 30h20"/%3E%3Cpath d="M228 20l5-4v10"/%3E%3Cpath d="M232 44h8M232 48h8"/%3E%3Cpath d="M168 58h8M176 64A12 12 0 0 1 200 64M212 64A12 12 0 0 1 236 64M200 64h12"/%3E%3Crect x="200" y="50" width="10" height="8" rx="2"/%3E%3Ccircle cx="188" cy="64" r="9"/%3E%3Ccircle cx="188" cy="64" r="3.4"/%3E%3Ccircle cx="224" cy="64" r="9"/%3E%3Ccircle cx="224" cy="64" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(330 30) rotate(-8 27.0 23.0)"%3E%3Crect x="0" y="0" width="54" height="46" rx="2"/%3E%3Cpath d="M0 12h54M21 0v12M33 0v12M7 36h12M7 40h8" stroke-width="1.3"/%3E%3C/g%3E%3Cg transform="translate(390 150) rotate(0 76.0 34.0)"%3E%3Crect x="0" y="0" width="98" height="50" rx="2"/%3E%3Cpath d="M6 44h86" stroke-width="1"/%3E%3Cpath d="M102 56V10q0-4 4-4h16q5 0 8 4l12 18q6 2 8 6v18q0 4-4 4h-2"/%3E%3Cpath d="M120 10l11 16h-17q-2 0-2-2V12q0-2 2-2z"/%3E%3Cpath d="M108 30h8M140 22l4-3v8"/%3E%3Cpath d="M0 56h8M34 56h78M138 56h4"/%3E%3Cpath d="M8 56A12 12 0 0 1 32 56M112 56A12 12 0 0 1 136 56"/%3E%3Ccircle cx="20" cy="56" r="9"/%3E%3Ccircle cx="20" cy="56" r="3.4"/%3E%3Ccircle cx="124" cy="56" r="9"/%3E%3Ccircle cx="124" cy="56" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(40 190) rotate(0 46.0 38.0)"%3E%3Cpath d="M0 66h92M0 74h92M4 66v8M46 66v8M88 66v8"/%3E%3Crect x="4" y="32" width="40" height="34" rx="2"/%3E%3Crect x="48" y="32" width="40" height="34" rx="2"/%3E%3Crect x="24" y="0" width="42" height="32" rx="2"/%3E%3Cpath d="M24 11h42M45 0v11M4 43h40M48 43h40" stroke-width="1.2"/%3E%3C/g%3E%3Cg transform="translate(200 250) rotate(0 64.0 31.0)"%3E%3Cpath d="M4 46V12q0-8 8-8h72q8 0 13 5l15 16q12 2 16 6q4 3 4 8v7q0 4-4 4h-4M88 50H40M14 50H8q-4 0-4-4"/%3E%3Cpath d="M84 10l14 15H84q-2 0-2-2V12q0-2 2-2z"/%3E%3Cpath d="M64 8v38M78 30h4M10 12h18v12H10z" stroke-width="1.2"/%3E%3Cpath d="M14 50A13 13 0 0 1 40 50M88 50A13 13 0 0 1 114 50"/%3E%3Ccircle cx="27" cy="50" r="9"/%3E%3Ccircle cx="27" cy="50" r="3.4"/%3E%3Ccircle cx="101" cy="50" r="9"/%3E%3Ccircle cx="101" cy="50" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(20 330) rotate(0 128.0 27.0)"%3E%3Cpath d="M4 44C44 44 56 6 106 10s70 34 124 18" stroke-dasharray="4 7"/%3E%3Cpath d="M226 28c0-8 6-14 14-14s14 6 14 14c0 10-14 24-14 24s-14-14-14-24z"/%3E%3Ccircle cx="240" cy="28" r="4"/%3E%3Ccircle cx="4" cy="44" r="4"/%3E%3C/g%3E%3Cg transform="translate(320 330) rotate(0 105.0 37.0)"%3E%3Cpath d="M0 54V8q0-6 6-6h136q6 0 6 6v46z"/%3E%3Cpath d="M2 10q72 6 144 0" stroke-width="1"/%3E%3Cpath d="M24 12v38 M48 12v38 M72 12v38 M96 12v38 M120 12v38 M144 12v38" stroke-width="1" stroke-dasharray="3 3"/%3E%3Cpath d="M152 62V12q0-4 4-4h22q5 0 8 4l12 18q6 2 8 6v22q0 4-4 4"/%3E%3Cpath d="M174 12l11 16h-21q-2 0-2-2V14q0-2 2-2z"/%3E%3Cpath d="M168 34v22M194 24l4-3v8"/%3E%3Cpath d="M0 62h6M54 62h106M184 62h4"/%3E%3Cpath d="M6 62A12 12 0 0 1 30 62M30 62A12 12 0 0 1 54 62M160 62A12 12 0 0 1 184 62"/%3E%3Ccircle cx="18" cy="62" r="9"/%3E%3Ccircle cx="18" cy="62" r="3.4"/%3E%3Ccircle cx="42" cy="62" r="9"/%3E%3Ccircle cx="42" cy="62" r="3.4"/%3E%3Ccircle cx="172" cy="62" r="9"/%3E%3Ccircle cx="172" cy="62" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(40 450) rotate(0 92.0 35.0)"%3E%3Cpath d="M0 50h120v-8H0z"/%3E%3Cpath d="M0 42V30M120 42V30" stroke-width="1"/%3E%3Crect x="10" y="20" width="34" height="22" rx="1"/%3E%3Crect x="48" y="26" width="28" height="16" rx="1"/%3E%3Cpath d="M124 50V20h8v30M128 20l-50-14l-4 6l48 12"/%3E%3Cpath d="M74 12v10m-4 0h8" stroke-width="1.2"/%3E%3Cpath d="M136 58V14q0-4 4-4h16q5 0 8 4l10 16q6 2 8 6v18q0 4-4 4"/%3E%3Cpath d="M156 14l9 14h-17q-2 0-2-2V16q0-2 2-2z"/%3E%3Cpath d="M0 58h6M54 58h90M168 58h4"/%3E%3Cpath d="M6 58A12 12 0 0 1 30 58M30 58A12 12 0 0 1 54 58M144 58A12 12 0 0 1 168 58"/%3E%3Ccircle cx="18" cy="58" r="9"/%3E%3Ccircle cx="18" cy="58" r="3.4"/%3E%3Ccircle cx="42" cy="58" r="9"/%3E%3Ccircle cx="42" cy="58" r="3.4"/%3E%3Ccircle cx="156" cy="58" r="9"/%3E%3Ccircle cx="156" cy="58" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(450 470) rotate(10 27.0 23.0)"%3E%3Crect x="0" y="0" width="54" height="46" rx="2"/%3E%3Cpath d="M0 12h54M21 0v12M33 0v12M7 36h12M7 40h8" stroke-width="1.3"/%3E%3C/g%3E%3Cg transform="translate(280 470) rotate(0 46.0 38.0)"%3E%3Cpath d="M0 66h92M0 74h92M4 66v8M46 66v8M88 66v8"/%3E%3Crect x="4" y="32" width="40" height="34" rx="2"/%3E%3Crect x="48" y="32" width="40" height="34" rx="2"/%3E%3Crect x="24" y="0" width="42" height="32" rx="2"/%3E%3Cpath d="M24 11h42M45 0v11M4 43h40M48 43h40" stroke-width="1.2"/%3E%3C/g%3E%3C/svg%3E') 0 0 / 640px 640px repeat; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600" fill="none" stroke="%23000" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"%3E%3Cg transform="translate(30 50) rotate(0 122.0 37.0)"%3E%3Crect x="0" y="0" width="172" height="54" rx="2"/%3E%3Cpath d="M14 4v46 M27 4v46 M40 4v46 M53 4v46 M66 4v46 M79 4v46 M92 4v46 M105 4v46 M118 4v46 M131 4v46 M144 4v46 M157 4v46" stroke-width="1"/%3E%3Cpath d="M6 54v4h50M140 54v10m6-10v10M56 58h112"/%3E%3Ccircle cx="20" cy="64" r="9"/%3E%3Ccircle cx="20" cy="64" r="3.4"/%3E%3Ccircle cx="44" cy="64" r="9"/%3E%3Ccircle cx="44" cy="64" r="3.4"/%3E%3Cpath d="M176 64V12q0-8 8-8h26q5 0 8 4l14 20q4 2 8 3q4 1 4 6v21q0 4-4 4h-4"/%3E%3Cpath d="M212 10l13 18h-15q-2 0-2-2V12q0-2 2-2z"/%3E%3Cpath d="M204 30v24M180 30h20"/%3E%3Cpath d="M228 20l5-4v10"/%3E%3Cpath d="M232 44h8M232 48h8"/%3E%3Cpath d="M168 58h8M176 64A12 12 0 0 1 200 64M212 64A12 12 0 0 1 236 64M200 64h12"/%3E%3Crect x="200" y="50" width="10" height="8" rx="2"/%3E%3Ccircle cx="188" cy="64" r="9"/%3E%3Ccircle cx="188" cy="64" r="3.4"/%3E%3Ccircle cx="224" cy="64" r="9"/%3E%3Ccircle cx="224" cy="64" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(330 30) rotate(-8 27.0 23.0)"%3E%3Crect x="0" y="0" width="54" height="46" rx="2"/%3E%3Cpath d="M0 12h54M21 0v12M33 0v12M7 36h12M7 40h8" stroke-width="1.3"/%3E%3C/g%3E%3Cg transform="translate(390 150) rotate(0 76.0 34.0)"%3E%3Crect x="0" y="0" width="98" height="50" rx="2"/%3E%3Cpath d="M6 44h86" stroke-width="1"/%3E%3Cpath d="M102 56V10q0-4 4-4h16q5 0 8 4l12 18q6 2 8 6v18q0 4-4 4h-2"/%3E%3Cpath d="M120 10l11 16h-17q-2 0-2-2V12q0-2 2-2z"/%3E%3Cpath d="M108 30h8M140 22l4-3v8"/%3E%3Cpath d="M0 56h8M34 56h78M138 56h4"/%3E%3Cpath d="M8 56A12 12 0 0 1 32 56M112 56A12 12 0 0 1 136 56"/%3E%3Ccircle cx="20" cy="56" r="9"/%3E%3Ccircle cx="20" cy="56" r="3.4"/%3E%3Ccircle cx="124" cy="56" r="9"/%3E%3Ccircle cx="124" cy="56" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(40 190) rotate(0 46.0 38.0)"%3E%3Cpath d="M0 66h92M0 74h92M4 66v8M46 66v8M88 66v8"/%3E%3Crect x="4" y="32" width="40" height="34" rx="2"/%3E%3Crect x="48" y="32" width="40" height="34" rx="2"/%3E%3Crect x="24" y="0" width="42" height="32" rx="2"/%3E%3Cpath d="M24 11h42M45 0v11M4 43h40M48 43h40" stroke-width="1.2"/%3E%3C/g%3E%3Cg transform="translate(200 250) rotate(0 64.0 31.0)"%3E%3Cpath d="M4 46V12q0-8 8-8h72q8 0 13 5l15 16q12 2 16 6q4 3 4 8v7q0 4-4 4h-4M88 50H40M14 50H8q-4 0-4-4"/%3E%3Cpath d="M84 10l14 15H84q-2 0-2-2V12q0-2 2-2z"/%3E%3Cpath d="M64 8v38M78 30h4M10 12h18v12H10z" stroke-width="1.2"/%3E%3Cpath d="M14 50A13 13 0 0 1 40 50M88 50A13 13 0 0 1 114 50"/%3E%3Ccircle cx="27" cy="50" r="9"/%3E%3Ccircle cx="27" cy="50" r="3.4"/%3E%3Ccircle cx="101" cy="50" r="9"/%3E%3Ccircle cx="101" cy="50" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(20 330) rotate(0 128.0 27.0)"%3E%3Cpath d="M4 44C44 44 56 6 106 10s70 34 124 18" stroke-dasharray="4 7"/%3E%3Cpath d="M226 28c0-8 6-14 14-14s14 6 14 14c0 10-14 24-14 24s-14-14-14-24z"/%3E%3Ccircle cx="240" cy="28" r="4"/%3E%3Ccircle cx="4" cy="44" r="4"/%3E%3C/g%3E%3Cg transform="translate(320 330) rotate(0 105.0 37.0)"%3E%3Cpath d="M0 54V8q0-6 6-6h136q6 0 6 6v46z"/%3E%3Cpath d="M2 10q72 6 144 0" stroke-width="1"/%3E%3Cpath d="M24 12v38 M48 12v38 M72 12v38 M96 12v38 M120 12v38 M144 12v38" stroke-width="1" stroke-dasharray="3 3"/%3E%3Cpath d="M152 62V12q0-4 4-4h22q5 0 8 4l12 18q6 2 8 6v22q0 4-4 4"/%3E%3Cpath d="M174 12l11 16h-21q-2 0-2-2V14q0-2 2-2z"/%3E%3Cpath d="M168 34v22M194 24l4-3v8"/%3E%3Cpath d="M0 62h6M54 62h106M184 62h4"/%3E%3Cpath d="M6 62A12 12 0 0 1 30 62M30 62A12 12 0 0 1 54 62M160 62A12 12 0 0 1 184 62"/%3E%3Ccircle cx="18" cy="62" r="9"/%3E%3Ccircle cx="18" cy="62" r="3.4"/%3E%3Ccircle cx="42" cy="62" r="9"/%3E%3Ccircle cx="42" cy="62" r="3.4"/%3E%3Ccircle cx="172" cy="62" r="9"/%3E%3Ccircle cx="172" cy="62" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(40 450) rotate(0 92.0 35.0)"%3E%3Cpath d="M0 50h120v-8H0z"/%3E%3Cpath d="M0 42V30M120 42V30" stroke-width="1"/%3E%3Crect x="10" y="20" width="34" height="22" rx="1"/%3E%3Crect x="48" y="26" width="28" height="16" rx="1"/%3E%3Cpath d="M124 50V20h8v30M128 20l-50-14l-4 6l48 12"/%3E%3Cpath d="M74 12v10m-4 0h8" stroke-width="1.2"/%3E%3Cpath d="M136 58V14q0-4 4-4h16q5 0 8 4l10 16q6 2 8 6v18q0 4-4 4"/%3E%3Cpath d="M156 14l9 14h-17q-2 0-2-2V16q0-2 2-2z"/%3E%3Cpath d="M0 58h6M54 58h90M168 58h4"/%3E%3Cpath d="M6 58A12 12 0 0 1 30 58M30 58A12 12 0 0 1 54 58M144 58A12 12 0 0 1 168 58"/%3E%3Ccircle cx="18" cy="58" r="9"/%3E%3Ccircle cx="18" cy="58" r="3.4"/%3E%3Ccircle cx="42" cy="58" r="9"/%3E%3Ccircle cx="42" cy="58" r="3.4"/%3E%3Ccircle cx="156" cy="58" r="9"/%3E%3Ccircle cx="156" cy="58" r="3.4"/%3E%3C/g%3E%3Cg transform="translate(450 470) rotate(10 27.0 23.0)"%3E%3Crect x="0" y="0" width="54" height="46" rx="2"/%3E%3Cpath d="M0 12h54M21 0v12M33 0v12M7 36h12M7 40h8" stroke-width="1.3"/%3E%3C/g%3E%3Cg transform="translate(280 470) rotate(0 46.0 38.0)"%3E%3Cpath d="M0 66h92M0 74h92M4 66v8M46 66v8M88 66v8"/%3E%3Crect x="4" y="32" width="40" height="34" rx="2"/%3E%3Crect x="48" y="32" width="40" height="34" rx="2"/%3E%3Crect x="24" y="0" width="42" height="32" rx="2"/%3E%3Cpath d="M24 11h42M45 0v11M4 43h40M48 43h40" stroke-width="1.2"/%3E%3C/g%3E%3C/svg%3E') 0 0 / 640px 640px repeat; }
body::before { opacity: .05; animation: bgdrift 160s linear infinite; }
body::after { opacity: .028; -webkit-mask-size: 420px 420px; mask-size: 420px 420px; -webkit-mask-position: 190px 120px; mask-position: 190px 120px; animation: bgdrift2 220s linear infinite; }
[data-theme="light"] body::before, :root:not([data-theme]) body::before { opacity: .045; }
@keyframes bgdrift { to { -webkit-mask-position: 640px 0; mask-position: 640px 0; } }
@keyframes bgdrift2 { to { -webkit-mask-position: -190px 120px; mask-position: -190px 120px; } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

/* v5: карта первого экрана — почти на весь экран */
.hero__map { top: 0; bottom: 0; height: auto; left: -12%; right: -12%; }
.hero__ov { background: linear-gradient(90deg, rgba(var(--h-ov),.86) 0%, rgba(var(--h-ov),.35) 36%, rgba(var(--h-ov),0) 56%), linear-gradient(0deg, rgba(var(--h-ov),.85) 0%, rgba(var(--h-ov),0) 26%); }
@media (max-width: 1100px) { .hero__map { left: -45%; right: -45%; top: 60px; bottom: auto; height: min(120vw, 760px); } }

/* v6: поля формы в hero распределяются по всей высоте, без пустоты */
.hero > #calc [data-fields] { flex: 1 1 auto; justify-content: space-evenly; min-height: 0; }
.hero > #calc [data-fields] > * { flex: 1 1 auto; max-height: 132px; min-height: 0; }
.hero > #calc [data-fields] .qc__route, .hero > #calc [data-fields] .qc__row { align-items: stretch; }
.hero > #calc [data-fields] .qf { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.hero > #calc [data-fields] .qf input, .hero > #calc [data-fields] .qf select { font-size: clamp(16px, 2.1vh, 21px); }
.hero > #calc [data-fields] .qc__cars { max-height: 150px; }
.hero > #calc [data-fields] .qc__car { justify-content: center; }
.hero > #calc [data-fields] .qc__car img { height: clamp(28px, 4vh, 48px); }
.hero > #calc .qres { margin-top: clamp(8px, 1.4vh, 16px); }
/* v6: доп. блок формы — только в hero на высоких экранах */
.qc__more { display: none; }
.hero > #calc .qc__more { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: clamp(10px, 1.6vh, 18px); flex: 1 1 0; min-height: 0; overflow: hidden; }
.hero > #calc .qc__more-sec { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.qc__more-lab { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--h-mut); }
.qc__dirs { display: flex; flex-wrap: wrap; gap: 6px; max-height: 76px; overflow: hidden; }
.qc__dir { height: 34px; padding: 0 14px; border: 1px solid var(--h-line); border-radius: 999px; background: var(--h-chip); color: var(--h-ink); font-size: 13.5px; font-weight: 500; transition: border-color .25s, background-color .25s; }
.qc__dir:hover { border-color: var(--red); background: rgba(255,31,0,.1); }
.qc__inc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--h-t82); }
.qc__inc li { display: flex; align-items: center; gap: 8px; }
.qc__inc i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,31,0,.14); color: var(--red); }
/* поля — естественной высоты, свободное место отдаём доп. блоку */
.hero > #calc [data-fields] { flex: 0 0 auto; justify-content: flex-start; }
.hero > #calc [data-fields] > * { flex: 0 0 auto; max-height: none; }
.hero > #calc [data-fields] .qf { min-height: clamp(64px, 8.4vh, 92px); }
.hero > #calc .qc__more { justify-content: space-evenly; }
.qc__dir[aria-pressed="true"] { border-color: var(--red); background: rgba(255,31,0,.12); }

/* v7: плашки — сразу под заголовком, рейтинги внизу; карта и нижние блоки выше */
.hero__main { justify-content: flex-start; }
.hero__main .h1 { margin-top: clamp(8px, 4vh, 56px); }
.hero__main .badges { margin-top: clamp(0px, .6vh, 8px); }
.hero .rates { margin-top: auto; }
.hero { min-height: calc(100svh - 190px); }
.hero > #calc { min-height: min(calc(100svh - 430px), 680px); }
.hero__map { top: -9%; bottom: 14%; height: auto; }
@media (max-width: 1100px) { .hero__map { top: 30px; bottom: auto; } }

/* =================== v8: вход по коду =================== */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: clamp(24px, 4vw, 56px); }
.auth-side .h2 { font-size: clamp(32px, 3.6vw, 56px); }
.auth-ben { display: grid; gap: 14px; margin: 28px 0 22px; padding: 0; list-style: none; }
.auth-ben li { display: flex; gap: 14px; align-items: flex-start; }
.auth-ben li > svg { flex: none; width: 44px; height: 44px; padding: 12px; border-radius: 14px; background: rgba(255,31,0,.12); color: var(--red); }
.auth-ben b { display: block; font-size: 17px; } .auth-ben span { color: var(--mut); font-size: 15px; line-height: 1.4; } .auth-ben span b { color: var(--ink); }
.auth { max-width: none; margin: 0; padding: clamp(22px, 3vw, 36px); }
.auth-tabs { display: grid !important; width: 100%; margin-bottom: 22px; }
.auth-step { gap: 10px; }
.auth-h { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.auth-p { font-size: 15px; line-height: 1.45; margin-bottom: 4px; }
.auth-err { padding: 10px 14px; border-radius: 12px; background: rgba(255,31,0,.1); color: var(--red); font-size: 14px; font-weight: 500; }
.auth-link { align-self: center; padding: 6px; border: 0; background: none; color: var(--mut2); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-link:hover { color: var(--red); }
.auth-back { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--mut); font-size: 14px; cursor: pointer; } .auth-back:hover { color: var(--ink); }
.auth-resend { text-align: center; font-size: 14px; color: var(--mut); }
.auth-kind { width: 100%; } .auth-kind button { flex: 1; }
.auth-already { margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(47,210,122,.1); font-size: 14px; } .auth-already a { color: var(--red); font-weight: 600; }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 6px 0; }
.otp input { width: 100%; height: clamp(54px, 7vw, 66px); border: 1px solid var(--line2); border-radius: 16px; background: var(--s2); color: var(--ink); font: 700 clamp(22px, 3vw, 28px)/1 var(--f); text-align: center; outline: none; transition: border-color .2s, box-shadow .2s; }
.otp input:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255,31,0,.15); }
.otp.is-err input { border-color: var(--red); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.btn.is-busy, .pill.is-busy { opacity: .6; pointer-events: none; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: minmax(0, 1fr); } .auth-side { order: 2; } }

/* =================== v8: личный кабинет =================== */
.cab { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; padding-top: 24px; padding-bottom: 60px; }
.cab-side { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--s1); }
.cab-me { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 4px 0; }
.cab-me > span:last-child { min-width: 0; } .cab-me b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cab-me small { display: block; font-size: 12.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-ava { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #FF1F00, #FF6A3D); color: #fff; font-size: 14px; font-weight: 700; }
.cab-new { height: 50px; }
.cab-nav { display: flex; flex-direction: column; gap: 2px; }
.cab-nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; color: var(--mut2); font-size: 15px; font-weight: 500; transition: background-color .2s, color .2s; }
.cab-nav a svg { flex: none; opacity: .75; } .cab-nav a span { flex: 1; }
.cab-nav a:hover { background: var(--chip); color: var(--ink); }
.cab-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); } .cab-nav a[aria-current="page"] svg { opacity: 1; }
.cab-nav em { min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--mut); font-size: 12px; font-style: normal; font-weight: 600; line-height: 22px; text-align: center; }
.cab-nav em:empty { display: none; } .cab-nav em.is-red { background: var(--red); color: #fff; }
.cab-nav a[aria-current="page"] em { background: rgba(127,127,127,.25); color: inherit; }
.cab-out { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--mut); font-size: 14px; cursor: pointer; } .cab-out:hover { color: var(--red); }
.cab-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cab-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.cab-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: clamp(28px, 3vw, 42px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.cab-h1__b { display: inline-flex; gap: 6px; } .cab-head p { margin-top: 6px; font-size: 15px; }
.cab-back { align-self: flex-start; font-size: 14px; color: var(--mut); } .cab-back:hover { color: var(--red); }
.cab-acts { display: flex; flex-wrap: wrap; gap: 8px; } .cab-acts .pill svg { flex: none; }
.cab-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ctile { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 120px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--s1); transition: border-color .2s, transform .3s var(--ease); }
.ctile:hover { border-color: rgba(255,74,46,.5); transform: translateY(-2px); }
.ctile small { font-size: 14px; color: var(--mut); } .ctile b { font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ctile--red { background: linear-gradient(120deg, #FF1F00, #FF6A3D); border-color: transparent; color: #fff; } .ctile--red small { color: rgba(255,255,255,.8); } .ctile--red b { font-size: clamp(24px, 2.2vw, 34px); }
.cab-alert { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 56px 16px 20px; border: 1px solid rgba(255,197,61,.3); border-radius: 18px; background: rgba(255,197,61,.08); }
.cab-alert span { font-size: 14px; color: var(--mut2); } .cab-alert i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--red); }
.cab-alert--ok { border-color: rgba(47,210,122,.3); background: rgba(47,210,122,.08); }
.cab-live { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(120px, 220px) auto; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--s1); font-size: 14px; }
.cab-live small { display: block; color: var(--mut); font-size: 13px; } .cab-live b { font-size: 16px; }
.cab-live__dot { width: 12px; height: 12px; border-radius: 50%; background: #FFB020; box-shadow: 0 0 0 0 rgba(255,176,32,.6); animation: livedot 1.8s infinite; }
@keyframes livedot { 70% { box-shadow: 0 0 0 10px rgba(255,176,32,0); } 100% { box-shadow: 0 0 0 0 rgba(255,176,32,0); } }
.cab-live__bar { height: 6px; border-radius: 6px; background: var(--chip); overflow: hidden; } .cab-live__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #FF1F00, #FFB020); }
.cab-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; align-items: start; }
.cab-stack, .cab-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cab-card { padding: clamp(18px, 2vw, 24px); border-radius: 22px; }
.cab-card h2 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
.cab-card__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .cab-card__h h2 { margin: 0; } .cab-card__h > a { font-size: 14px; color: var(--mut); } .cab-card__h > a:hover { color: var(--red); }
.olist { display: flex; flex-direction: column; }
.orow, .olist--head { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 120px; align-items: center; gap: 16px; padding: 14px 10px; border-top: 1px solid var(--line); border-radius: 12px; transition: background-color .2s; }
.orow:first-child { border-top: 0; } .orow:hover { background: var(--s2); }
.olist--head { padding-block: 0 10px; border: 0; font-size: 12.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; }
.orow b { display: block; font-size: 15px; font-weight: 600; } .orow small { display: block; margin-top: 2px; font-size: 13px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow__route { min-width: 0; } .orow__route b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow__st { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .orow__sum { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cab-arr { font-style: normal; color: var(--red); }
.bdg { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.b-blue { background: rgba(72,140,255,.14); color: #4B8DFF; } .b-amber { background: rgba(255,176,32,.16); color: #E89A00; } .b-green { background: #2FD27A; color: #06301A; } .b-green-l { background: rgba(47,210,122,.14); color: #1FB766; } .b-grey { background: var(--chip); color: var(--mut); } .b-red { background: rgba(255,31,0,.12); color: var(--red); }
.cab-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; }
.cab-empty__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; background: rgba(255,31,0,.12); color: var(--red); }
.cab-empty .btn { margin-top: 10px; } .cab-empty p { max-width: 380px; }
.qa { display: grid; gap: 4px; }
.qa a, .qa button { display: flex; align-items: center; gap: 12px; padding: 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .2s; }
.qa a:hover, .qa button:hover { background: var(--chip); } .qa svg { flex: none; color: var(--red); }
.cab-mgr { display: flex; flex-direction: column; gap: 6px; } .cab-mgr b { font-size: 18px; } .cab-mgr > span { font-size: 13px; } .cab-mgr .pill { align-self: flex-start; margin-top: 8px; }
.ofilters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ofseg { flex-wrap: wrap; } .ofseg button { height: 40px; }
.ofbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .ofbar .field { padding: 6px 14px; min-width: 150px; } .ofbar .field input, .ofbar .field select { font-size: 14px; } .ofsearch { min-width: 220px !important; }
.oroute { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 8px; border-radius: 16px; background: var(--s2); }
.oroute small { display: block; font-size: 12px; color: var(--mut); } .oroute b { font-size: 17px; } .oroute .cab-arr { font-size: 20px; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; } .kv:first-of-type { border-top: 0; }
.kv span { color: var(--mut); } .kv b { font-weight: 600; } .kv a { color: var(--red); }
.tl { position: relative; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.tl__i { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.tl__i:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--line2); }
.tl__i.is-done:not(:last-child)::before { background: #2FD27A; }
.tl__i i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--line2); border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; }
.tl__i.is-done i { border-color: #2FD27A; background: #2FD27A; }
.tl__i.is-now i { border-color: #FFB020; background: rgba(255,176,32,.2); box-shadow: 0 0 0 5px rgba(255,176,32,.12); }
.tl__i.is-cancel i { border-color: var(--mut); background: var(--mut); }
.tl__i b { display: block; font-size: 15px; font-weight: 600; } .tl__i.is-off b { color: var(--mut); font-weight: 500; } .tl__i small { display: block; font-size: 13px; color: var(--mut); }
.dlist { display: flex; flex-direction: column; }
.drow { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-top: 1px solid var(--line); } .drow:first-child { border-top: 0; }
.drow__ic { flex: none; display: grid; place-items: center; width: 42px; height: 48px; border-radius: 10px; background: rgba(255,31,0,.12); color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.drow__t { flex: 1; min-width: 0; } .drow__t b { display: block; font-size: 15px; font-weight: 600; } .drow__t small { display: block; font-size: 13px; color: var(--mut); } .drow__t a { text-decoration: underline; text-underline-offset: 2px; }
.cab .round:hover, .cab-modal .round:hover { transform: none; }
.clist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.ccard { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border-radius: 22px; } .ccard b { font-size: 17px; } .ccard p { font-size: 14px; }
.ccard__acts { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; } .ccard__acts .pill { height: 36px; }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pgrid .field[style*="span 2"] { grid-column: 1 / -1 !important; }
.field__err { display: none; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--red); } .field.is-err .field__err { display: block; }
.field input:disabled { color: var(--mut); }
.pnot { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; }
.pinn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .pinn .btn { height: auto; min-height: 56px; }
.cab-saved { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(47,210,122,.14); color: #1FB766; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .3s; } .cab-saved.is-on { opacity: 1; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 4px; } .pw-meter i { height: 4px; border-radius: 4px; background: var(--line2); transition: background-color .3s; } .pw-meter small { grid-column: 1 / -1; font-size: 12.5px; color: var(--mut); }
.pw-meter[data-s="0"] i:nth-child(-n+1), .pw-meter[data-s="1"] i:nth-child(-n+1) { background: var(--red); }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: #FFB020; } .pw-meter[data-s="3"] i:nth-child(-n+3) { background: #8BD450; } .pw-meter[data-s="4"] i { background: #2FD27A; }
.slist { display: flex; flex-direction: column; } .srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .srow:first-child { border-top: 0; }
.srow b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; } .srow small { display: block; font-size: 13px; color: var(--mut); } .srow .pill { height: 36px; flex: none; }
.sw { display: inline-flex; align-items: center; gap: 12px; margin-top: 12px; font-weight: 600; cursor: pointer; } .sw input { position: absolute; opacity: 0; }
.sw span { position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--line2); transition: background-color .25s; } .sw span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.sw input:checked + span { background: #2FD27A; } .sw input:checked + span::after { transform: translateX(20px); } .sw input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.uinv { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; } .uinv .btn { height: auto; }
.ulist { display: flex; flex-direction: column; }
.urow { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto minmax(150px, 220px) auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); } .urow:first-child { border-top: 0; } .urow.is-off { opacity: .55; }
.urow__t { min-width: 0; } .urow__t b { display: flex; align-items: center; gap: 8px; font-size: 15px; } .urow__t small { display: block; font-size: 13px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.urow__acts { display: flex; gap: 6px; } .urow__acts .pill { height: 36px; padding: 0 14px; font-size: 14px; }
.field--sm { padding: 6px 12px; } .field--sm select { font-size: 14px; }
.pay-sum { margin: 18px 0; font-size: 40px; font-weight: 700; letter-spacing: -.04em; }
.pay-opts { display: grid; gap: 8px; }
.pay-opt { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line2); border-radius: 16px; background: var(--s2); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s; } .pay-opt:hover { border-color: var(--red); } .pay-opt b { font-size: 16px; } .pay-opt small { font-size: 13px; color: var(--mut); }
.cab-modal .form .seg2 { width: 100%; } .cab-modal .seg2 button { flex: 1; }
.sk { border-radius: 22px; background: linear-gradient(90deg, var(--chip) 25%, var(--s2) 50%, var(--chip) 75%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
.sk--h { height: 48px; width: 40%; } .sk--tile { height: 120px; } .sk--block { height: 320px; }
@keyframes skel { to { background-position: -200% 0; } }
@media (max-width: 1100px) { .cab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cab-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .cab { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .cab-side { position: static; padding: 12px; }
  .cab-me, .cab-out { display: none; }
  .cab-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; } .cab-nav::-webkit-scrollbar { display: none; }
  .cab-nav a { flex: none; height: 40px; }
  .orow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id sum" "route route" "st st"; gap: 6px 12px; padding: 14px 6px; }
  .orow__id { grid-area: id; display: flex; gap: 10px; align-items: baseline; } .orow__route { grid-area: route; } .orow__st { grid-area: st; justify-content: flex-start; } .orow__sum { grid-area: sum; }
  .olist--head { display: none; }
  .cab-live { grid-template-columns: auto minmax(0, 1fr); } .cab-live__bar, .cab-live > .mut { grid-column: 1 / -1; }
  .pgrid, .uinv, .pinn { grid-template-columns: minmax(0, 1fr); }
  .urow { grid-template-columns: 42px minmax(0, 1fr) auto; } .urow > .field, .urow__acts, .urow > .mut { grid-column: 2 / -1; }
  .kv { grid-template-columns: 110px minmax(0, 1fr); }
}
.bdg { letter-spacing: 0; line-height: 1; }
.field input::placeholder, .field textarea::placeholder { color: var(--mut); font-weight: 400; opacity: .8; }
.cab-card { container-type: inline-size; }
@container (max-width: 680px) {
  .orow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id sum" "route route" "st st"; gap: 6px 12px; }
  .orow__id { grid-area: id; display: flex; gap: 10px; align-items: baseline; } .orow__route { grid-area: route; } .orow__st { grid-area: st; justify-content: flex-start; } .orow__sum { grid-area: sum; }
  .olist--head { display: none; }
}

/* v9: «Сейчас на сайте» — слева внизу, спокойнее кнопки расчёта */
.online { position: fixed; z-index: 59; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 16px; border: 1px solid var(--line2); border-radius: 999px; background: color-mix(in srgb, var(--s1) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px -20px rgba(0,0,0,.45); color: var(--mut2); font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--ease); pointer-events: none; }
.online.is-on { opacity: 1; transform: none; }
.online b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block; }
.online.is-tick b { animation: onlineTick .6s var(--ease); }
@keyframes onlineTick { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.online__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #2FD27A; }
.online__dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #2FD27A; opacity: 0; animation: onlinePulse 2s infinite; }
@keyframes onlinePulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 900px) { .online { left: 12px; bottom: 84px; height: 38px; padding: 0 14px 0 12px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .online__dot::after, .online.is-tick b { animation: none; } }
@media (min-width: 901px) { .online { height: 60px; padding: 0 24px 0 20px; font-size: 15px; gap: 12px; } }
/* подсказки городов поверх следующих карточек */
.cstep, .card:has(.sug) { position: relative; }
.cstep:focus-within, .card:has(.sug):focus-within, .qc:focus-within { z-index: 30; }
.sug { z-index: 40; max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.rate > b[data-clients] { width: auto; min-width: 0 !important; padding: 0 12px; white-space: nowrap; }
.hero > #calc .qc__more { flex-wrap: nowrap; justify-content: flex-start; }
.qc__dirs { max-height: none; overflow: visible; }
.hero > #calc .qc__more-sec[hidden], .qc__dir[hidden], .qc__inc li[hidden] { display: none !important; }
button.qres__tg { background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: 600; } .qres__tg:hover { color: var(--red); border-color: var(--red); }
/* v10: шапка и выпадающие — по ширине контента первого экрана */
:root { --hero-pad: clamp(18px, 3.4vw, 56px); }
.hdr { width: calc(100% - 20px - 2 * var(--hero-pad)); }
.util { padding-inline: calc(10px + var(--hero-pad)); }
@media (max-width: 900px) { .hdr { width: calc(100% - 20px); } .util { padding-inline: 16px; } }

/* v11: свой календарь */
.dp-src { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none; }
.dp-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dp-btn b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dp-btn.is-empty b { color: var(--mut); font-weight: 500; }
.dp-btn svg { flex: none; opacity: .55; transition: opacity .2s, color .2s; }
.dp-btn:hover svg, .dp-btn[aria-expanded="true"] svg { opacity: 1; color: var(--red); }
.qf .dp-btn b { font-size: inherit; } .hero > #calc .qf .dp-btn b { font-size: clamp(15px, 1.9vh, 18px); }
.field .dp-btn b { font-size: 16px; }
.dp { position: fixed; z-index: 90; width: 304px; padding: 14px; border: 1px solid var(--line2); border-radius: 20px; background: var(--s1); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(0,0,0,.55); font-family: var(--f); animation: dpIn .22s var(--ease); }
@keyframes dpIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.dp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp__head b { font-size: 16px; font-weight: 700; text-transform: capitalize; letter-spacing: -.01em; }
.dp__nav { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--s2); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s; }
.dp__nav:hover:not(:disabled) { border-color: var(--red); color: var(--red); } .dp__nav:disabled { opacity: .3; cursor: default; }
.dp__wd, .dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp__wd span { padding: 4px 0 6px; font-size: 11.5px; font-weight: 600; color: var(--mut); text-align: center; text-transform: uppercase; letter-spacing: .04em; } .dp__wd .is-we { color: var(--red); opacity: .8; }
.dp__d { height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 500 14.5px/1 var(--f); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s, color .15s; }
.dp__d:hover:not(:disabled) { background: var(--chip); } .dp__d.is-we { color: var(--mut2); }
.dp__d.is-today { box-shadow: inset 0 0 0 1.5px var(--line2); font-weight: 700; }
.dp__d.is-sel, .dp__d.is-sel:hover { background: var(--red); color: #fff; box-shadow: 0 8px 18px -8px rgba(255,31,0,.7); font-weight: 700; }
.dp__d:disabled { color: var(--mut); opacity: .35; cursor: default; }
.dp__d:focus-visible, .dp__nav:focus-visible, .dp__foot button:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.dp__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dp__foot button { height: 32px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: transparent; color: var(--ink); font: 500 13px/1 var(--f); cursor: pointer; transition: border-color .2s, background-color .2s; }
.dp__foot button:hover { border-color: var(--red); background: rgba(255,31,0,.08); } .dp__foot .dp__clr { margin-left: auto; color: var(--mut); border-color: transparent; }

/* v11: блог */
.blog-tags { margin-bottom: 20px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-md); color: inherit; transition: transform .4s var(--ease), border-color .3s, box-shadow .3s; }
.bcard:hover { transform: translateY(-4px); color: inherit; }
.bcard__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night); }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bcard:hover .bcard__img img { transform: scale(1.06); }
.bcard__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.bcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--mut); }
.bcard__meta .tag { background: rgba(255,31,0,.12); color: var(--red); font-weight: 600; }
.bcard b { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.bcard__lead { font-size: 15px; line-height: 1.5; color: var(--mut2); }
.bcard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--red); }
.bcard--big { grid-column: span 2; flex-direction: row; } .bcard--big .bcard__img { flex: 1.2; aspect-ratio: auto; min-height: 320px; } .bcard--big .bcard__body { flex: 1; justify-content: center; padding: 32px; } .bcard--big b { font-size: clamp(24px, 2.2vw, 32px); }
.bcard[hidden] { display: none; }
@media (max-width: 1100px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .blog-grid { grid-template-columns: minmax(0, 1fr); } .bcard--big { grid-column: auto; flex-direction: column; } .bcard--big .bcard__img { min-height: 0; aspect-ratio: 16 / 9; } .bcard--big .bcard__body { padding: 20px 22px 22px; } }
.art { padding-top: clamp(24px, 3vw, 44px); }
.art__head { max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.art__h1 { font-size: clamp(32px, 4vw, 60px); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.art__lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--mut2); }
.art__img { margin: clamp(22px, 3vw, 40px) 0 0; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 21 / 8; background: var(--night); } .art__img img { width: 100%; height: 100%; object-fit: cover; }
.art__grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 320px); justify-content: space-between; gap: clamp(28px, 5vw, 80px); margin-top: clamp(28px, 4vw, 56px); }
.art__body { font-size: 18px; line-height: 1.7; }
.art__body h2 { margin: 1.8em 0 .5em; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; scroll-margin-top: 140px; } .art__body h2:first-child { margin-top: 0; }
.art__body p { margin: 0 0 1em; color: var(--mut2); } .art__body p:first-child { color: var(--ink); }
.art__body ul { margin: 0 0 1.2em; padding: 0; list-style: none; display: grid; gap: 10px; }
.art__body li { position: relative; padding-left: 26px; color: var(--mut2); } .art__body li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.art__tip { margin: 1.6em 0; padding: 20px 24px; border-left: 3px solid var(--red); border-radius: 0 18px 18px 0; background: rgba(255,31,0,.07); } .art__tip b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); } .art__tip p { margin: 6px 0 0; color: var(--ink); font-size: 17px; }
.art__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 2em; padding: 22px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--s1); } .art__cta b { display: block; font-size: 18px; } .art__cta small { font-size: 14px; color: var(--mut); }
.art__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 140px; align-self: start; }
.art__toc { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 20px; } .art__toc small { margin-bottom: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.art__toc a { padding: 8px 10px; border-radius: 10px; font-size: 15px; color: var(--mut2); transition: background-color .2s, color .2s; } .art__toc a:hover { background: var(--chip); color: var(--ink); }
.art__ask { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 20px; color: inherit; } .art__ask b { font-size: 18px; } .art__ask > span:not(.pill) { font-size: 14px; color: var(--mut); } .art__ask .pill { align-self: flex-start; margin-top: 8px; }
.art__more { margin-top: clamp(48px, 6vw, 90px); } .art__more-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
@media (max-width: 1000px) { .art__grid { grid-template-columns: minmax(0, 1fr); } .art__side { position: static; } .art__img { aspect-ratio: 16 / 9; } .art__body { font-size: 17px; } }
/* v12: карта на мобильном — видна за заголовком */
@media (max-width: 1100px) {
  .hero__map { left: -30%; right: -55%; top: 90px; bottom: auto; height: min(115vw, 640px); }
  .hero__ov { background: linear-gradient(90deg, rgba(var(--h-ov),.55) 0%, rgba(var(--h-ov),.15) 60%, rgba(var(--h-ov),0) 100%); }
}
/* v12: доп. блок формы — по содержимому; города всегда видны (до 2 строк), «Входит в стоимость» — на высоких экранах */
.hero > #calc .qc__more { flex: 0 0 auto; min-height: auto; overflow: visible; justify-content: flex-start; gap: clamp(10px, 1.4vh, 16px); }
.hero > #calc .qc__more-sec { display: flex !important; }
.hero > #calc .qc__more-sec:has(.qc__inc) { display: none !important; }
@media (min-height: 1150px) { .hero > #calc .qc__more-sec:has(.qc__inc) { display: flex !important; } }
.hero > #calc .qc__body { justify-content: space-between; }
.hero > #calc .qres { margin-top: clamp(6px, 1vh, 12px); }
.qc__dir[hidden] { display: none !important; }